Keeping it Simple with Responsive Web Design

Responsive Web design—the creation of Web content that works across platforms and formats, including smartphones, tablets, and PCs—has become something of a buzzword on the Internet lately, and with good reason: the mobile Web’s becoming an indispensable commodity.

Ninety-one percent of all Americans (as of 2013) own a cell phone; 55% own a smartphone; and sixty-three percent use a mobile device to access the Internet every day. Total mobile devices outnumbered humans on the entire planet in 2013, and the experts at Cisco predict there will be 1.4 devices per person by 2017, generating nearly sixteen exabytes of traffic every month by 2018.

The underlying concept driving responsive design is known as progressive enhancement. A phrase coined by Internet entrepreneur Steve Champeon back in 2003, progressive enhancement (or PE, as it is commonly known) is based on the idea that designs should be built from the ground up to accommodate the least capable platform on which they’ll be seen or used, and then subject to review and refinement in order to fit the needs of more powerful platforms.

PE dictates that the first, and primary, design for your site should be optimized for mobile users; any bells and whistles that make the site more immersive for those visiting on a PC are tacked on later. This not only saves time and effort for the designers, site owners, and users, but makes the most of the mobile explosion and its enormous potential for conversion.

Making responsive design a part of your site is probably easier than you think. Incorporating small changes in your site’s design (or making small changes to your existing one) can go a long way. For example, compared to their traditional counterparts, fluid grids and flexible images allow for truly on-the-fly resizing of content—regardless of screen size or platform—by scaling based on proportions, rather than absolute dimensions.

Given that 96% of consumers have had run-ins with sites that are mobile-unfriendly, and 75% say they prefer a site that’s designed for mobile access, making your site more responsive may be one of the best ways to ensure that today’s visitors become tomorrow’s clients.

Responsive Web Design Simplified

75% of consumers prefer a mobile-friendly site, so why not give them what they want? Responsive web design is a great option when providing your users with an immersive and mobile-friendly site.

What is Responsive Web Design?

The goal of a responsive website is to detect the user’s screen size and orientation, whether it’s a desktop, mobile phone, tablet, or other device.

• Sites with responsive design are viewed the same no matter which device you are using.
• Responsive design allows web pages to adapt to the screen they are on without compromising functionality and aesthetics.
• Responsive sites respond to any movement you make.
• • The content stays on the screen and the user does not have to scroll left and right to make the information fit on the page.

What is a Responsive Site Made Of?

Fluid Grids

• Fluid grids allow the elements of the layout to resize based on the size of the user’s screen.
• Designed in terms of proportions instead of a traditional layout that most users may be accustomed to.
• • Whether the webpage is on a desktop, tablet, or mobile phone, the proportions of the fluid grid all help resize the widths of the page, so all information fits well onto the screen.

Media Queries

• Media queries are the coding part of the website which enable the web designer to create the visual look based on width, height, orientation, color, etc.
• Data (such as the device being used) is gathered about the person visiting your site then used to apply CSS styles.
• • CSS stands for Cascading Style Sheets. It is used to separate the content on a webpage or document from its actual presentation in the form of layout, colors, and fonts.
  • • AKA the difference from how it looks when it is coded by a designer and how a user sees the finished product.

Flexible Images

• These are Images on a website that can be viewed on any screen or device. Their dimensions are “flexible” so they can be resized appropriately.
• For the proportions to work correctly in the fluid grids and then in the media queries, images on the web page must be sized in flexible units so they do not go outside of the dedicated viewing area.

Mobile vs. Responsive Sites

Mobile

• The content and look of a mobile site are different than the desktop version.
• • It offers a fraction of the full website and its content.
• Is accessed via a different URL than the main website.
• Good for websites with an abundance of pages – can simplify the information at hand.
• Load times are faster because there is less information accessed and you know the device they are using.

Responsive

• Just one URL for both mobile and desktop, so nothing has to be changed from one to the other.
• HTML code can easily be repurposed.
• Access analytics from one place instead of multiple, since the site is the same across the board.
• Not as good for larger websites, as the user will have to scroll for too long to find the content they may be looking for.
• • For example: nytimes.com
  • • The amount of information on the desktop version would have users scrolling to look for information for an extreme amount of time.
    • They offer a mobile version of their site that cuts down the amount of information shared so it does not slow down load time.

User Experience Benefits

Users like the look and aesthetics of a responsive site. They are more likely to come back when they like the site, and in turn, use it more efficiently and effectively.

• Website Content
• • Quick loading time as long as there are not hundreds of pages of content.
  • Information is the same from one device to the next.
• Scaling Ability
• • The dimensions will fit any desktop, tablet, or mobile device, so the days of information being viewed on an iPhone but not on an Android are gone.
• Search Engine Optimization
• • For the people maintaining the website, it is easier for Google to crawl and index one website, rather than two different URL’s (like the mobile/traditional combo).
  • 1 website = 1 SEO campaign
  • • Having both a mobile site and standard desktop site requires two SEO campaigns, making more information to keep track of.

Sources

• Beginner’s Guide to Responsive Web Design – treehouse.com
• Responsive Design – alistapart.com
• Responsive Web Design vs. Mobile Websites – ontargetinteractive.com
• Separate Mobile smashingmagazine.com
• Responsive Design – techtarget.com
• 3 Reasons Why Responsive Web Design is the Best Option for Your Mobile SEO Strategy – searchenginewatch.coms
• The SEO of Responsive Web Design – moz.com
• 69% of Tablet Owners Make a Purchase on Their Device Every Month – ecconsultancy.com
• Five Responsive Web Design Pitfalls to Avoid – bradfrost.com
• How Fluid Grids Work in Responsive Web Design – 1stwebdesigner.com
• Responsive Web Design Layouts and Media Queries – onextrapixel.com