Contributor: Niko Matses, Web designer
In the past few years, Web design has come a long way in keeping up with the rising popularity of mobile devices. Since the introduction of smartphones and tablets, Web designers and developers have been challenged to rethink the way they build websites in order to accommodate these devices. No longer do companies need separate websites for mobile users in addition to those they build for desktop and laptop computers. Instead, one website can be built that responds to the various screen sizes across all devices. This solution has become known as responsive Web design.
Having completed a few responsive websites over the past year or so, we wanted to share our experiences and opinions on responsive Web design, as well as the responsive website we built for Metis Communications.
Know the facts
The mobile Web movement is booming, and the data speaks for itself.
- Fifty-five percent of U.S. adults own a smartphone
- Sixty percent of American cell phone owners use their phones to access the Internet.
- Thirty-four percent go online mostly using their phones.
- In 2014, more than one in three U.S. Internet users will have a tablet device.
- In the next couple of years, mobile Internet usage is expected to surpass desktop usage.
The building blocks
All good design uses an underlying grid to determine its layout. This rule applies to responsive design, too, except that responsive grids are fluid, not fixed. Though not widely used, fluid grids have been around since the Web’s early days. Today, they are a mainstay in responsive design.
The idea is that instead of defining an exact height and width in which to place the content, we allow the device viewport of our users to determine the size and placement of each column. Combine this approach with flexible images, and we have a mobile-friendly solution for determining layout.
Another powerful tool of the responsive designer is media queries. Media queries are a capability of CSS3 that allow a site to load any number of stylesheets based on the size of the device’s viewport. This means that we can create unique layouts for both desktop and mobile devices.
Using media queries, text will always be the appropriate size and line length without requiring the user to zoom in or pan back and forth. A horizontal menu can reorient vertically or nest itself into an expandable button, and multiple columns typically form new rows below the main content for easy scrolling.
Responsive Web design offers a one-size-fits-all-devices solution, and with it comes a great deal of advantages. First and foremost, visitors benefit from a much-improved user experience. There are numerous ways to make a responsive site more user-friendly and intuitive for mobile devices that users have come to expect. Instead of displaying the entire page content on one small screen, for example, the site can now be prioritized so that the most useful information displays front and center.
Before responsive design, developing a mobile-friendly experience meant that an additional site had to be designed and coded. This inevitably doubled the amount of maintenance, as content regularly needs to be modified, added or removed. By developing a single responsive site, site owners end the need to duplicate work for mobile counterpart sites, keeping content creation consistent and cost-effective.
Another means of targeting mobile users is the native app, but the same disadvantages apply. The biggest downside to native apps is the lack of cross-platform compatibility. Apps developed for Android devices don’t work in Apple iOS and vice versa. Conversely, content built on a responsive Web-based platform insures maximum outreach to all Internet-connected devices.
Best of all, responsive design is future-friendly, meaning that it was developed using the latest Web standards and will continue to be applicable for years to come. Responsive Web design is here to stay, and there’s no reason not to go responsive.
Mobile Web design and development have limitations that must be considered from the planning stages all the way through design and coding. To keep this in mind, many responsive designers advocate what is known as the mobile-first mentality. In short, this approach treats the mobile design of the website as a starting point, rather than an afterthought. There are several key reasons for this approach.
Another concern when designing for mobile is limited screen real estate. The most common screen sizes range 1920 x 1080 pixels for HD displays, down to 320 x 480 pixels for mobile. Internet-connected devices today include computers, laptops, netbooks, smartphones, tablets, e-readers, television and game consoles, vehicles and even home appliances. New products like the iPad Mini® are released every year, each with their own screen size.
Responsive Web design is the only way that we at Primary Design build websites today. Please get in touch with us if you’d like to see how we can help make your website dreams become a reality. We’ll be sure to respond accordingly.
Niko Matses is a front-end Web developer at Primary Design. He has more than 10 years of Web design, video and motion graphics experience.
- Add294 Washington Street
Get in touch.
Boston, MA 02108