How do you access the internet? On your desktop? Or maybe your laptop, or netbook? And also on a tablet? And probably on your phone? On it’s mobile browser, or even through a web app? Do you have a glossy new high-resolution monitor, or an older standard one? An average internet user’s options for experiencing the web are increasing every day, and web design must follow. Today’s best solution: responsive web design.
WHAT IS RESPONSIVE WEB DESIGN?
An approach to web design that solves the ever-growing problem of varying viewport size, due to the increased number of screen sizes, resolutions, and devices being used to view the inter webs. From mobile phones as small as 240 pixels wide to large monitors 1920 pixels wide, a web design must adapt to display effectively on each device for the largest range of users. The term itself was first coined by Ethan Marcotte in 2010 in his article on the topic.
True responsive web design differs from adaptive web design, but only slightly. In responsive web design, everything down to the images will adjust slightly as the viewport width shrinks or expands, through relative sizing — a fluid grid — while in adaptive design the changing width is contained to specific break points. For most purposes, “responsive web design” and “adaptive web design” can be used nearly interchangeably.
WHY DO WE NEED RESPONSIVE WEB DESIGN?
Because it’s the future, and quickly becoming the present. Every day the number of mobile-based internet users increases, often as their only source of web consumption. If a desktop-based website does not work effectively on other systems, you may have lost a user. There is fast becoming an expectation that a website will just work, no matter where it’s being viewed, particularly on mobile devices. With this comes additional challenges for the designer and developer.
HOW DO WE ADDRESS THIS NEED?
CSS3 has allowed us to use media queries in modern browsers (sorry, IE8 and older — although there are work-arounds). Simply put, media queries tell the server what the size of the viewport is, and call in the corresponding style sheet — so the user sees the design best suited for their screen size. When this is paired with an adaptive layout with fluid grids and flexible images (and occasionally responsive typography), a smooth and graceful transition between all viewports is found.
WHAT IS A FLUID GRID?
A design grid that is based upon relative (not fixed) values, so that as the browser window changes, so does the layout contained within — it is constantly changing, unlike a grid which changes only based upon pre-set “break points.”
WHAT IS A FLEXIBLE IMAGE?
An image that will scale down in size within a fluid grid, until the layout changes at the break points.
WHAT IS RESPONSIVE TYPOGRAPHY?
As the break points change, the font size and leading also changes, to enable the most legible content for the user.
OPTION 2: ONE SITE OPTIMIZED FOR DESKTOP, ONE FOR MULTI-MOBILE
This option should typically be a second choice. Ideally, you should be creating one website that can beautifully and effectively meet the needs of users on most devices. By separating the content to two different sites, you are only doubling your maintenance efforts. For some cases, this is a necessary evil, as the content on the desktop-focused website simply can’t adequately be viewed on a small-scale screen.
DON’T FORGET! ITEMS TO REMEMBER FOR TOUCH SCREENS
No hover states!
Without a mouse to scroll over items and navigation, there can be no hover events. If you must have a drop down menu or the like, then it should be developed as a tap-event to trigger the additional choices (although ideally the content should be streamlined to avoid this altogether).
No light boxes!
Similar to hover states, it is much preferred to utilize additional pages in lieu of light boxes. While this is not a hard and fast rule, it’s best practice.
No long forms!
Filling out a form is tedious no matter where the action is taking place, but it’s exaggerated on a smaller touch screen. If they’re all necessary and it’s a long form, break out the fields into two steps: first step has required fields for an initial submission confirmation, and the second step can be completed at a later time (most likely when the user has desktop access).
EXAMPLES OF RESPONSIVE DESIGN
mountaindew.com
css-tricks.com
informationarchitects.com
ADDITIONAL INFORMATION:
http://www.alistapart.com/articles/responsive-web-design/
http://teamtreehouse.com/blog/beginners-guide-to-responsive-web-design
http://www.alistapart.com/articles/fluidgrids
RESOURCES:
Media Queries: http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
*Post originally written by Abby Tolotti