HTML5 for Responsive Web Design
Responsive web design is all about considering the user and making his or her experience effective (can perform the task), efficient (can do it quickly), and satisfying (willing/eager to do it again) accounting for the limits of the user/device in presenting the information. In the web's early days, designers made specific pages for different browser sizes. Now, with countless resolution and device options, it is far too challenging to pinpoint specific browser and resolution capabilities. Rather, HTML5 and CSS3 allow for tuning presentation based on min and max widths and heights and other options. See Ethan Marcotte's Responsive Web Design 2010 article for context. Note its importance in a 2013 eWeek article on the future of HTML5. Check out how to account for mobile specifics with mobile-first responsive web design tutorial.
There are tools to help with the new style of web development, of course the Adobe stack and perhaps others reviewed at 2012 .Net Magazine quick review. One tool listed there with perhaps some value for responsive design: Electric Mobile Studio.
- An MSDN article on Responsive Web Design builds off of Ethan Marcotte's seminal article on the subject with a Visual Studio developer's perspective.
- 10 Excellent Tools for Responsive Web Design has some good recommendations but the one that seemed most useful, Adobe's Device Central, has been discontinued. Adobe is touting their new Edge product line.
- Adobe's new Edge product line was created to handle all the various aspects of web development. Edge Reflow handles the task of responsive design. Adobe has also published some articles on responsive design:
- Initializr is an online tool for generating responsive templates. This tool appears in Adobe's article Getting started with responsive web design (see above).
- Responsive Web Design: 50 Examples and Best Practices discusses how responsive design extends beyond just media queries. The article outlines some best practices backed by 50 real world web sites which exemplify the principles.
- Media Queries is a collection of inspirational websites using media queries and responsive web design. Curated by Eivind Uggedal.