There are essentially 3 components of a website- Style, Content & Behavior. We use HTML for the content, CSS for the style, and JavaScript for behavior. Now more than ever web designers need to be concerned with a new component, Viewing Experience. The popularity of smart phones and tablets means multiple screen resolutions to design for. Non Apple fans may argue this point but the iPhone changed the way we approach mobile web design due to the simple fact that it was the first smart phone with a really awesome web browser. Other manufactures followed along and there are now several mobile operating systems and some really great mobile browsers that are transforming how and when we view our favorite websites. When it comes to mobile viewing Jeremy Keith said it best, “Stop thinking in Pages. Start thinking in Systems.”
How do we best approach web design for the growing use of mobile devises?
The obvious solution may seem to just build an app. Having an app for your business is a great idea but for most businesses, especially smaller start-ups it can be a costly. To cover the majority of mobile users you would need effective app solutions for tablets and smart phones on both Apple iOS & Google Android just as a start. For mobile website specific design, a more cost effective solution is responsive web design.
In a responsive web design approach our goal is to create a seamless design experience so the website works equally well on any device. This website, matt540.wpengine.com is responsive. To see it in action on a desktop browser slowly drag in the corner of your browser inward. You should see the layout adjust itself to fit the new width of the browser. If you access this website from a smart phone you will see the layout looks different from the desktop and fits the resolution perfectly with an app like menu option. This is responsive design, the user does not need to pinch-and-zoom to read the text or worry about “fat finger” errors resulting in clicking the wrong hyperlink.
How does responsive web design work?
Responsive design uses a coding concept called media queries which detect the type of device you are viewing a website on and changes the site’s behavior accordingly. The width at which the website design begins to break down is where media queries are targeted in order to optimize the design. It does this with the help of a fluid grid. A fluid grid layout allows a website to squeeze onto a small mobile device or stretched across a huge high-res screen. Regardless of the screen size all of the elements in the layout will re-size their widths in relation to one another. With our fluid grid as a foundation we can use a series of media queries to essentially create if-then statements modern browsers will understand. When the website is viewed on an iPhone for example, a media query with a set pixel width of 320px is targeted and tells the browser to display the website in a certain fashion. A second breakpoint would be set at 600px to target the websites appearance in an iPad. This is simplifying responsive design extensively as there are several coding elements involved, but overall the concept allows us to define how our website will appear at different resolution breakpoints.
Looking to the Future: Start Small
As a web designer I am always reading. Whether its my favorite design blogs, books on web design theory or coding languages on thing is certain… there is a radical change in thinking among the design community about mobile. The Mobile First approach to design is becoming the new standard. When designing a website for a client I will now first envision how the site will appear in mobile and then scale up from there. It is a different approach to designing a website and it represents the future and responsive design allows us to adapt to this change. The benefit to the client: You build a website once, and it works seamlessly across thousands of different screens.