Asking the question, “Is responsive design still king in today’s mobile age?” requires some explanation. The first bit of information necessary for this question to make sense is the fact that mobile device use has increased exponentially in the last few years. According to an infographic from DigitalBuzzBlog, in May 2011, only 35% used a smartphone and 17% still had no cell phone, but by May 2013, these numbers had increased to 56% smartphone users and only 9% without a cell phone. In fact, mobile web use is growing 8 times faster than use in the 90’s and 2000’s. And half of average global mobile users access the Internet primarily or exclusively on a mobile device. So a website that works for a mobile device, which includes tablets, is necessary for any company to remain accessible and competitive today.
The second piece of information to keep in mind is that there are different ways to make a website look good on a mobile device. Some companies design a separate website created specifically for smaller devices. Mobile site versions usually have a URL of m.websitename.com and come with larger buttons, larger text, a simpler layout, and other mobile-friendly design features.
Others create a responsive website, which means that the layout of the site adjusts to the width of the device screen. A responsive designer should know how to make a responsive website mobile-friendly as well. Often, navigation menus change as the device screen width gets smaller to accommodate for the lack of room.
Fit for a Frame has a responsive site that realigns the image links.
Then there are websites that are neither responsive nor have a separate mobile site, but they do offer an app. Usually, a bar with a link to the app download appears at the top of the site when users access the website on a tablet or mobile phone.
There seem to be lots of options for offering website visitors easy access via mobile device, and each seem like viable options, depending on the company and their audience. Even so, though, many designers, SEO experts, and even Google recommend a responsive design, rather than just an app or a separate mobile version of a website. Let’s take a look at why responsive design still appears to be king, even with other great versions available.
Mobile Websites are Complicated
In the May 2013 research results on mobile technology, Pew Internet found that 91% of American adults have a cell phone and 60% of adult cell phone users access the Internet with their cell phone. A 2012 PEW study showed that 41% of mobile users search on mobile devices for a product after seeing an ad on TV for that product.
Forever 21 is an excellent example of how to keep mobile and desktop websites similar.
With all of these statistics, it’s quite clear that all websites today should find a way to make their site look good on a mobile device, and to keep up with the mobile trend, many businesses have chosen to create separate mobile and tablet versions of their website. Sometimes this could be because they already have an awesome website and do not want to have to change it. Others may have a very complicated desktop version and the best way to make it work on smaller devices is to create a completely different layout.
Yet having a separate mobile version takes time. Instead of keeping up with one site, a business has to keep up with two sites, or three if they also offer a table version. Then there’s the problem of Google having to crawl multiple domains rather than one. So, all of a website’s traffic information gets spread out over several domains, rather than one. Worst yet, a mobile version of a website is not guaranteed to look the same on every device. Remember, not all smartphones come with the same screen width. And, according to the infographic above, 57% will not recommend a business with a poor mobile design.
An interesting statistic from the DigitalBuzzBlog infographic shows that 52% would rather shop on their tablet than on a PC. Even more valuable is the fact that 72% make a weekly purchase on their tablet, which points to the reason why large e-commerce websites that have a huge inventory organized with multiple drop-down menus probably cannot get away with anything but a separate mobile site. For the majority of businesses, though, a mobile site is more complicated than it is worth having. If a website can easily keep information to a few pages or less, which can be argued is the majority of websites, then a responsive design is the most effective option.
Many Websites Should be Responsive
Even many e-commerce websites can benefit from a responsive design, rather than a separate mobile site, as long as their inventory can be organized neatly into a simple navigation menu. A growing trend in web design is the long scrollable single page website, possibly because they are easy to navigate both on a PC and a mobile device and also easy to make responsive.
But a website doesn’t have to be in the long scrollable format to be responsive. An excellent benefit to responsive design is that the actual layout of a site can change to be more readable on a smaller screen size. Yet, the colors, the fonts, images, and other design features look the same, which means that visitors will easily recognize the website no matter from which device they access it.
Another very compelling reason to go with a responsive design is the fact that Google recommends it. As mentioned above, a responsive design means that a website has one HTML for one URL, so Google’s bots only have to crawl one domain for a responsive website. While large corporations can definitely afford the extra staff it takes to keep up the SEO for both a desktop and a mobile website, small and medium sized businesses simply do not have the bandwidth. A responsive site keeps smaller businesses competitive in the mobile arena without extra time and effort.
What About Native Apps?
The mobile growth infographic from above shows that 80% of time spent on mobile devices is on apps. Another statistic from Flurry Analytics reveals that overall mobile app use increased by 115% in 2013, with most of it being in social media and messaging apps. So apps are definitely a benefit for many organizations, but the mistake comes when a website foregoes a mobile optimized or responsive design for an app.
The native app for Etsy gives users a social media feel for shopping on the go.
Many visitors visit a website directly from a link shared through the social media app they are using while on their phone, so a website has to be ready to provide the experience that visitors deserve. If visitors have to download an app to accurately view a website from their phones, more than likely they will just leave the site unless they are loyal followers.
An app is an excellent addition to a responsive website and really mostly useful if users will need to access content on a site when offline. Or an app is great for complicated functionality, such as games or other interactive functions that would make a website load slowly. But it is not a replacement for a responsive design, only a good addition to have if your website meets the requirements for an app.
Responsive Design Tutorials
If you haven’t yet had much experience in creating responsive websites, you may want to walk through a few tutorials first. The following videos include tutorials for both beginners and more advanced responsive designers.
Create a Responsive Website Using CSS3 and HTML5 by Christian Vasile
This hour-plus long video walks viewers through how to create a responsive website completely from scratch using a combination of CSS3 and HTML5.
How to Build a HTML Website from Scratch – Part 1 and Part 2 by Christoph Anastasiades
Download the ZIP file of this tutorial or simply read through the tutorial on the Lingulo website. Viewers will should have intermediate knowledge of web design to follow along easily and will deal with CSS Media Queries, jQuery slider, CSS3 transitions and animations, and more.
Responsive Web Design Tutorial by LearnWebCode
This beginner video takes viewers through the basic understanding of responsive web design and gives all of the code knowledge necessary for setting up a responsive design. Links to demo files are also included.
Introducing Responsive Web Typography with FlowType.JS by JD Graffam
Using FlowType.JS, your text responds to images in a responsive design by creating the perfect character count per line no matter your screen size for maximum readability from any device. Readers can grab the code and learn how best to implement it into their responsive designs in this tutorial from Smashing Magazine.
Responsive Web Design for Beginners by Ian Yates
For those with a TutsPlus Premium membership, this tutorial is one of the most thorough walk-throughs of responsive design.
Responsive WordPress Themes
An amazing selection of WordPress themes are responsive. Whether you need an ecommerce theme, a blog theme, a portfolio theme, or a simple business theme, plenty of options abound. Check out some of the themes below or see this list of 30 responsive themes for more examples.
Testing Your New Responsive Design
Testing is a critical part of the responsive web design process. Without extensive testing, it’s not possible to know for sure how the site is behaving in different situations. Fortunately, there are a number of different tools and resources available that can help you to test your responsive designs. In this article, we’ll take a look at some helpful tools that you may want to try for yourself.
Viewport Resizer works as a bookmarklet. You can click on the button and then enter the URL of the site/page that you want to test. You’ll have several different screen sizes that you can use for testing, including two smartphones, a small tablet, regular tablet, widescreen, and HDTV.
jResize is a jQuery plugin for one-window responsive development. You can simply click on the different screen widths and the page will adjust accordingly, making it easy to test as your work.
With Screenqueri.es you enter the URL and then you can pull the slider to adjust the screen width of the display. You can also choose several preset testing options, including 14 popular smartphones and 12 popular tablets.
With responsivepx, you will enter the URL and then use the sliders to set the width and height for testing. You can choose whatever screen size you want, up to 3000 pixels in width. You can also share it by email with others.
resizeMyBrowser allows you to choose the dimensions of your browser for testing. You can choose between 15 different presets, or you can enter your own custom screen sizes.
The Responsive Design Bookmarklet is another simple tool. Just drag the bookmarklet above your bookmarks bar and it will be applied in your browser. You can then choose to preview the current page on screen widths the size of tablets and smartphones.
As a website designer, you have the ability to create an attractive and functional design. Unfortunately, you do not have the ability to control which internet browsers will be using to view your site. Because each browser behaves differently you will need to test your projects in multiple browsers.
In most cases the variation from one browser to another will be minor, and probably will not even be noticeable to the average visitor. However, sometimes you site will have major problems in a particular browser that can prevent visitors from being able to use the site. The best way to be sure that your site is usable in different browsers is sufficient testing. Follow these tips to learn how to test in multiple browsers for responsive designs and CSS fallbacks.
How Can You Test Your Website in Different Browsers?
For starters, you should be familiar with which browsers are most commonly used by your visitors. After all, you’ll want to make those browsers the biggest priority.
Google Analytics will show you a breakdown of which browsers are being used by your visitors and how many visitors are using each one, breaking it down into a pie chart (shown below).
Once you know which browsers are most commonly used by your visitors you should focus your testing efforts on those browsers.
You can easily install several different browsers like Internet Explorer, Edge, Opera, Firefox, Chrome, and Netscape. But with the huge amount of browsers available you’ll never be able to have them all. This is where you will need the help of a few specific tools.
Test your website in different browsers. BrowserShots creates screenshots of your pages in a wide variety of browsers and displays them for you to see. It also has several additional options.
Another paid service. Also provides resources for testing email.
A variety of tools for creating and testing websites.
Top-quality browser checking with live performance updates.
Articles and Resources:
How to Check Your Website with Multiple Browsers on a Single Machine – from thesitewizard.com
How to Use Different CSS Style Sheets for Different Browsers – from thesitewizrd.com
CSS Hacks and Browser Detection – From WebCredible.
Introduction to Browser Specific CSS Hacks – from SitePoint
Cross Browser Issues – from devarticles.com
Position is Everything – Modern browser bugs explained in detail.