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 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 #

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 Awesome Mobile Image Gallery Web App With more and more users browsing the web with a mobile device, it’s time to begin with mobile web development. In this tutorial we are going to develop a simple mobile image gallery using the amazing jQTouch jQuery plugin for mobile web development. jQTouch is a jQuery plugin with native animations, automatic […] View demoDownload source With more and more users browsing the web with a mobile device, it’s time to begin with mobile web development. In this tutorial we are going to develop a simple mobile image gallery using the amazing jQTouch jQuery plugin for mobile web development. jQTouch is a jQuery plugin with native animations, automatic navigation, and themes for mobile WebKit browsers like iPhone, iPod Touch, G1, and Pre. Our little application is going to show some albums in a list view which will reveal a wall of thumbnails once it’s clicked. This app is best viewed on a mobile device like the iPhone or the iPod Touch, or in a Webkit Browser like Google Chrome or Safari.

RWD Summit 2014 - The online, live Responsive Web... Registration Invalid quantity. Please enter a quantity of 1 or more. The quantity you chose exceeds the quantity available. Please enter your name. Please enter an email address. Please enter a valid email address. Please enter your message or comments. Please enter the code as shown on the image. Please select the date you would like to attend. Please enter a valid email address in the To: field. Please enter a subject for your message. Please enter a message. You can only send this invitations to 10 email addresses at a time. $$$$ is not a properly formatted color. Please limit your message to $$$$ characters. $$$$ is not a valid email address. Please enter a promotional code. Sold Out Pending You have exceeded the time limit and your reservation has been released. The purpose of this time limit is to ensure that registration is available to as many people as possible. This option is not available anymore. Please read and accept the waiver. All fields marked with * are required. US Zipcodes need to be 5 digits.