Is Responsive Design Still King in Today’s Mobile Age?
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 Internet primarily or exclusively on a mobile device. So a website that works for a mobile device, which include 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 accomodate 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 a viable option, 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 ecommerce 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 ecommerce 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 2013 mobile growth infographic from above shows that 80% of time spent on mobile device 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 like images in responsive design by creating the perfect character count per line no matter your screen size for maximum readabilty 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.
Do you believe that responsive design is still king? Please share your thoughts in the comments below!