background preloader

A pixel is not a pixel is not a pixel

A pixel is not a pixel is not a pixel
Page last changed today Yesterday John Gruber wrote about the upped pixel density in the upcoming iPhone (960x640 instead of 480x320), and why Apple did this. He also wondered what the consequences for web developers would be. Now I happen to be deeply engaged in cross-browser research of widths and heights on mobile phones, and can state with reasonable certainty that in 99% of the cases these changes will not impact web developers at all. The remaining 1% could be much more tricky, but I expect Apple to cater to this problem by inserting an intermediate layer of pixels. One caveat before we start: because they’re unimportant to web developers I have mostly ignored the formal screen sizes, and I’m not really into disucssing the ins and outs of displays, pixel densities, and other complicated concepts. I do know what web developers are interested in, however. It’s easiest to explain when we consider zooming. The following two images illustrate what happens when the user zooms. Stay tuned. Related:  responsive designcss

A tale of two viewports — part two Page last changed today Related files: Part one of this article, about desktop browsers. Compatibility tables. The full list of browsers can also be found here. Many thanks to Grace Kloba (Google), David Storey and Anne van Kesteren (Opera), Mike O'Malley (Microsoft), Kartikaya Gupta and George Staikos (RIM), and Mark Finkle (Mozilla) for reviewing earlier versions of this piece and providing me with valuable feedback. This article has been translated into Russian, Chinese, and Korean. In this mini-series I will explain how viewports and the widths of various important elements work, such as the <html> element, as well as the window and the screen. On this page we’re going to talk about the mobile browsers. When we compare the mobile browsers to the desktop ones, the most obvious difference is screen size. A mobile screen is far smaller than a desktop screen; think about 400px wide at maximum, and sometimes a lot less. Let’s go back to our sidebar with width: 10%. Meaning Measured in Problems

9 basic principles of responsive web design Responsive web design is a great solution to our multi-screen problem, but getting into it from the print perspective is difficult. No fixed page size, no millimetres or inches, no physical constraints to fight against. Designing in pixels for Desktop and Mobile only is also the past, as more and more gadgets can open up a website. Therefore, let's clarify some basic principles of responsive web design here to embrace the fluid web, instead of fighting it. To keep it simple we'll focus on layouts (yes, responsive goes way deeper than that and if you want to learn more this is a good start). Responsive vs Adaptive web design It might seem the same but it isn't. The flow As screen sizes become smaller, content starts to take up more vertical space and anything below will be pushed down, it's called the flow. Relative units The canvas can be a desktop, mobile screen or anything in between. Breakpoints Max and Min values Nested objects Remember the relative position? Mobile or Desktop first

CSS3 Media Queries Test on your browser Using the viewport meta tag to control layout on mobile browsers - Mozilla The upcoming release of Mobile Firefox (Fennec) 1.1 features improved support for the <meta name="viewport"> tag. Previous versions of Fennec supported the width, height, and initial-scale viewport properties, but had problems with some sites designed for iPhone and Android browsers. We now support the same properties Mobile Safari does, and we also changed Fennec to render mobile sites more consistently on screens of different sizes and resolutions. before: after: You can see these changes for yourself in the latest Fennec 1.1 and trunk nightly builds for Maemo, Windows, Mac, or Linux. Background Mobile browsers like Fennec render pages in a virtual "window" (the viewport), usually wider than the screen, so they don't need to squeeze every page layout into a tiny window (which would break many non-mobile-optimized sites). Mobile Safari introduced the "viewport meta tag" to let web developers control the viewport's size and scale. Viewport basics

Graphic display resolutions Aspect ratio[edit] Multiple display standards compared. The gradual change of the favored aspect ratio of mass market display industry products, from 4:3, then to 16:10, and then to 16:9, has made many of the display resolutions listed in this article difficult to obtain in mass market products. The 4:3 aspect ratio generally reflects older products, especially the era of the cathode ray tube (CRT). The 16:10 aspect ratio had its largest use in the 1995–2010 period, and the 16:9 aspect ratio tends to reflect the current (post 2010) mass market computer monitor, laptop, and entertainment products displays. The 4:3 aspect ratio was common in older television cathode ray tube (CRT) displays, which were not easily adaptable to a wider aspect ratio. Video Graphics Array[edit] QQVGA (160x120)[edit] Quarter-QVGA (QQVGA or qqVGA) denotes a resolution of 160x120 or 120x160 pixels, usually used in displays of handheld devices. HQVGA (240x160)[edit] QVGA (320x240)[edit] QVGA compared to VGA

Content in Context is King by Derek Featherstone – An Event Apart Video When most people think of Responsive Design, they think of fluid grids and adapting the layout of components in a site or application. But design goes far beyond layout. How far? In this 60-minute video captured live at An Event Apart Orlando: Special Edition, accessibility expert Derek Featherstone starts by combining content, context, and behavior in ways that let us create truly responsive sites—sites that meet the needs of the people using them, when they’re using them, and how they’re using them. Derek shows how to use clues like time, location, proximity, capabilities, and preferences to create better designs for users. Derek Featherstone (@feather) has been working as a web professional since 1999 and is an internationally known speaker and authority on accessibility and web design. Enjoy all the videos in our library.

Don’t use IDs in CSS selectors? ❧ (@boblet) Recently I came across the post by Matt Wilcox called CSS Lint is harmful, ranting about the useful free tool CSS Lint. The “Don’t use IDs in selectors” suggestion seems to have offended Matt the most, but I was surprised that many commenters also mentioned this as being a reason to avoid CSS Lint. This surprised me because smart people have been saying prefer classes to IDs for a while now. The article was light on reasons why this suggestion might be bad, but it boils down to: Performance — IDs are “the fastest way a browser can select a given element”If they’re already in the markup it’s best to use them for CSSI’ve been using IDs like forever… waddya mean I shouldn’t use them!? Performance # It’s a common belief that ID selectors are the fastest, but this comes with a big caveat: IDs are fastest CSS selector only if they’re the key selector. #home a {…} We’d generally read this selector as find the element with id="home", then apply these styles to every a it contains. Conclusion #

Safari Web Content Guide: Configuring the Viewport Safari on iOS displays webpages at a scale that works for most web content originally designed for the desktop. If these default settings don’t work for your webpages, it is highly recommended that you change the settings by configuring the viewport. You especially need to configure the viewport if you are designing webpages specifically for iOS. If you are already familiar with the viewport on iOS, read “Using the Viewport Meta Tag” for details on the viewport tag and “Viewport Settings for Web Applications” for web application tips. Read “Layout and Metrics on iPhone and iPod touch” to learn about the available screen space for webpages on small devices.Read “What Is the Viewport?” See “Supported Meta Tags” for a complete description of the viewport meta tag. Layout and Metrics on iPhone and iPod touch Because Safari on iOS adds controls above and below your web content, you don’t have access to the entire screen real estate. What Is the Viewport? Safari on the Desktop Viewport

Mobile Browser Detection When creating mobile web apps like our wordpress theme series, it is important to be able to detect a mobile browser and serve the appropriate mobile version. Many readers requested information on how to do this in the comments, so here it is! First, we will cover a wordpress solution, then a PHP solution, and then a popular existing solution. By the end of this tutorial, you will be exposed to the whole spectrum of options and well equipped to handle this scenario! In MyTouch With wordpress, we have a lot of tools out there already to help us, including plugins. Upload MyTouch In order to use a second mobile theme for a site, you first need to define the directory where you will put your mobile themes in MobilePress. Upload your theme to this directory, and then click on MobilePress > Themes and select our theme. Click on the theme to enable it for the default mobile browser. iPhone Testing Android Testing Now we can serve the appropriate theme to all users! How to Get Browser Type Redirect

Common Techniques in Responsive Web Design In previous articles, I talked about why the Web is ready for responsive design and how a site owner can use the context of a user’s device and screen real estate to provide a contextually relevant experience to users across screens of various sizes, including PCs, phones and consoles. In this article, I’ll dive into some of the most common practices for building responsive site layouts and experiences. I’ll describe the emerging and available techniques for site layouts that flexibly resize based on screen real estate (referred to as “fluid grids”) so as to ensure that users get complete experiences across whatever screen size they are using. Additionally, I’ll show how to present rich media, especially images, and how developers can ensure that visitors on small-screen devices do not incur additional bandwidth costs for high-quality media. As you play with some of the techniques I describe, here are a few ways to test what your site looks like on different devices resolutions:

html - Vertically align an image inside a div with responsive height