Create Fullscreen HTML5 Page Background Video

Check out Dudley Storey's informative overview of responsive techniques for configuring a video as a full-page background at "Create Fullscreen HTML5 Page Background Video".

Configuring Text for Mobile Devices

Check out the useful tips about configuring text for mobile devices at http://www.creativebloq.com/web-design/how-choose-right-fonts-small-screens-91516966

Nine Principles of Responsive Web Design

Check out the infographic overview of nine principles of responsive web design at http://blog.froont.com/9-basic-principles-of-responsive-web-design/

Handy Infographic About Responsive Web Design

This handy infographic by Dot Com Infoway highlights the shift towards mobile devices. Responsive Web Design (RWD) techniques provide web designers a way to develop a single website that displays well and is usable on multiple devices, platforms, and screen sizes.



Source: Dot Com Infoway – Software and Mobile Application Development Company

Browser Tools for Testing Responsive Web Design

While the best way to test your responsive web designs is to use a variety of browsers and devices (including desktop, tablet, and smartphone), web developers often begin testing RWD by resizing the desktop browser. Browser resizing is handy but can sometimes be a little awkward. Check out the following online tools that will provide instant views of your web page in a variety of screen sizes and devices:

• Am I Responsive 
• DevicePonsive
• Responsive Test
• Screenfly 

It's fun to view your responsive website on these browser tools.  The true test, however, is to view your web pages on a variety of physical mobile devices.

Responsive Design Beyond the Pixel

With so many mobile devices displaying such a variety of screen resolutions the days of choosing breakpoints for responsive display based solely on pixel value are behind us.

 Ben Callahan at Sparkbox draws an analogy between the Matrix's concept of "there is no spoon" to "there is no breakpoint" — it all depends the content. Callahan also suggests using ems instead of pixels in media queries.

In a recent Smashing Magazine article, "Logical Breakpoints for Your Responsive Design", Vasilis van Gemert emphasizes that "common" screen sizes no longer exist and suggests configuring breakpoints using readabilty theory.

Here are two heuristics cited by van Gemert that can be helpful as we move from pixel-perfect breakpoints to content-influenced breakpoints:

•  “Anything from 45 to 75 characters is widely regarded as a satisfactory length of line for a single-column page set in a serifed text face in a text size.” — Robert Bringhurst  The Elements of Typographic Style
• “A column is easy to read if it’s wide enough to accommodate an average of 10 words per line.” — Josef Müller-Brockmann  Grid System in Graphic Design

Author van Gemert suggests that web designers start with a small screen layout and configure a break each time the "width of the main content grows wider than either 75 characters or 10 words".

Responsive design has moved beyond the pixel — it's all about the content!