With the many kinds of devices out there now used to view websites, it's important that people can get to information on your website and view it correctly no matter which device they use.
You want people using mobile devices like smart phone and tablets to be able to easily see what's on your website and interact with it properly. This can be accomplished in a few different ways and we'll explain what mobile responsive design is here.
Quite simply, Responsive Website Design (RWD) is a website design that adapts to the screen that it's being viewed on.
Here's how Wikipedia describes it:
Responsive web design (RWD) is a web design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from mobile phones to desktop computer monitors).
If a website is viewed on a smart phone, tablet or any other kind of device that comes out in the future, the website will adapt to the screen size and show correctly (be most usable) on that device. This even applies to desktop computers and laptops since people might have their web browser opened to different sized windows. Also, think about tablet computers and how you can view them more horizontally or vertically. It needs to look good with both of those screen sizes, too.
The difference between mobile website design and responsive design needs to be clearly understood because they're different things:
Therefore, responsive is more "future proof" as it adjusts to the screen size of any device. With mobile (adaptive), adjustments and maintenance might need to be done if new devices appear on the market.
If you can afford it, go with responsive web design.
Soon, there will be more mobile devices accessing the Internet than traditional desktop computers and laptops. People have their tablets in the living room and pick it up and use it while they're watching TV or movies. We're seeing more tablets and iPads showing up in the workplace and in conference rooms, too. Since viewing websites on phones is getting easier, more people are accessing websites using their smart phones when they are on the go.
Smartphones Finally Overtook Dumbphone Sales Globally In Q2, Android Now At 79%, Says Gartner (techcrunch.com)
Analyst Gartner has put out its latest smartphone market report, and the Q2 2013 numbers show the inevitable finally occurred: smartphone sales exceeded feature phone sales for the first time.
Facebook even knows this and is cashing in:
Facebook mobile ad revenues poised to overtake desktop (marketingweek.co.uk)
Facebook’s mobile advertising revenue is set to overtake desktop in the coming months after increased spending from advertisers on video and its smartphone services helped lift quarterly revenue.
Mobile will overtake desktop use:
When Will Mobile Local Searches Eclipse Desktop? (blog.kelseygroup.com)
After plotting out our respective figures, we found something interesting: Mobile local search volume (Web and app) is on pace to intersect desktop local searches in 2015.
A lot of this has to do with mobile local searches per user — growing from about 14 per month to 42 per month by 2016. But it’s also a function of the number of mobile search users — growing from 44 percent of U.S. smartphone subscribers (about 118 million users) to 75 percent by 2016 (225 million users).
It's important to tune your website to mobile devices since more and more people will be viewing your website on a smart phone or tablet.
From what we've seen, Google is a few steps ahead (of course). Google is serving up different results on searches originating from mobile devices. They're favoring websites optimized for mobile use when the search is done on a mobile device.
Google Officially Endorses Responsive Design (wsiwebspecialist.com)
Google says it’s easier and more efficient for their programs to index your content if your site is programmed using Responsive Design. We say it’s easier all around, because content on a single URL can be accessed and shared more easily on any kind of device.
and this:
Five Ways Responsive Design is Changing SEO (marketingtechblog.com)
Responsive design is obviously a big deal; such a big deal that Mashable has hailed 2013 as “the year of responsive design.” Most web professionals understand this — responsive design is changing the way that the Internet looks, feels, and works.
...
Google likes responsive website design (RWD), meaning that search results will likely favor sites that employ responsive best practices.
While we hesitate to declare baldly that Google is in love with RWD, we can identify a strong affinity for RWD best practices. After Google’s blog post about Responsive Design, SEO Round Table published an article outlining the reasons why Google likes responsive design. The three reasons — non-duplicated content, no canonical URL issues, and no redirect problems — are all part of a strong SEO arsenal.
Since there are more people using mobile devices to search and since Google puts more websites designed for mobile use in those results, it might be to your benefit to have a mobile or responsive website design.
Google also has a good guide and explanation of Responsive Website Design (which they refer to as "multi-screen"), Dynamic Serving (which we call mobile websites or Adaptive Website Design (AWD) since either just mobile content can be delivered or the entire website can also exist as a mobile version). They have also published some interesting case studies showing that mobile website design increases conversions:
Multi-Screen Resources (google.com)
Matt Cutts at Google says that responsive website design is the way to go because the URL stays the same:
Yes, it is more expensive. It'll take more work to design and plan a website that adapts to screen size than one that does not. There's more planning that needs to be done. For example, prioritization needs to take place so that when a screen is resized or shown at different sizes, you know which items stack on top of other items - what is the priority of the content?
What this also means is that to complete a successful responsive website project, it'll take a team. You need good website designers, good CSS coders, good programmers and testers all working together. Small, one or two man website shops usually cannot handle responsive website design easily. They need a team of developers doing the planning, coding and testing. Sure, there are pre-made templates available but if you want a truly custom responsive design, then you'll need a team of good, experienced people. The more eyes you have on a project, the better it is and you'll encounter fewer errors - this leads to a better user experience and better impression of your company, organization or brand. That's why we say "Look Good." here at Webstix.
Not only does main content need to move around and be flexible but other things, too:
The design team needs to decide where these items should go and what they need to do when the web browser screen size changes or when showing on different size screens.
There are a number of technical aspects that need to be done correctly or else you could end up with errors like:
The responsive basics that have been established need to be followed correctly for the design to work well on all devices.
If you're not sure if your current website is mobile ready, you can check it yourself. Here's how to do that:
Is Your Website Responsive? Check it Here! (webstix.com)
If you're wondering why your sales and website visits have been down lately, not having a responsive website or mobile version of your website might very well by why!
Again, with a mobile (not responsive) website design, you're designing for different devices... not screens. Typically what happens is, the website detects which web browser is being used and then serves up different templates based on that data. Many of our clients have added a mobile design onto their website and it just shows certain things while giving the website visitor a link at the bottom to break out of the mobile version and view the website normally.
Some clients choose to just have things like their address, phone, hours and a map show up on their mobile website because people that are viewing their website on their phone are most likely trying to find out this information. It can be just a one page website, basically, to help people get and find this information quickly.
YES - most websites NEED this. Let's put it this way... we don't see why we would ever create another website for a client that isn't responsive. It's not optional - you need it.
Business to business (B2B) websites will generally always have more website visitors using a desktop or laptop computer with a full screen but you do see more and more professionals using tablets. This is just because of the type of business they have. If you have a restaurant or entertainment type of business, then you most definitely should have a mobile, if not responsive, website since more of your visitors will view your website on mobile devices.
The best way to figure out if you should have a mobile or responsive design will be to look at your website statistics. If you have Google Analytics installed on your website, then you can easily see how people are seeing your website. This is a good thing to check right away so that you know.
Our prediction is that within a few years, virtually all websites (or a majority of them) will be using responsive website design.
Speed matters... big time! There are a lot of speed benefits with going to responsive design. How fast your website loads is a big factor and it affects how your website ranks in search engine results. We optimize pages for Google's PageSpeed test so that they get a passing score. This means your website loads quickly and renders correctly when viewed on multiple devices.
You can decide to switch now or else wait. Again, one tool to help you decide will be taking a close look at your website statistics/analytics and see what's happening already. The people visiting your website with a mobile device is really only going to increase going forward, not decrease. If you want to capture these visitors to get sales or leads or else just look presentable to them and show up on searches that originate from mobile devices, you should seriously look at switching to responsive website design.
Mobile use is on the rise, Google's ranking responsive and mobile websites higher. That much is clear. Your website needs to appear in front of your audience, so going with responsive design makes sense if that's your goal. Here's another great article showing that it's not just us saying all of this - it's the industry:
How to Avoid Mobile Ranking Pitfalls by Assessing Mobile Engagement (searchenginewatch.com)
Customers have always looked to search for quick access to what they desire. With the rise of mobile devices, quick needs to be faster and the user experience needs to be customized.
This article brings up a number of great points:
You essentially future-proof your website for any kind of device that will come out.
There's a really good slideshow presentation over at slideshare.net called "Design Process in the Responsive Age" which I'll reference here. A few slides in particular are really great at explaining what needs to happen when planning and designing a website.
When looking at our website design process, there's a lot that needs to happen. If you've never gone into a website design project before, this might be new information to you.
Here's a diagram from the slide show explaining the normal website design process:
The process is:
"Lorem ipsum" here refers to dummy text being used until the copywriting process (content strategy) is done. Real copy is used when the website is being developed. Copy can be developed while wire frames and design is being done or beforehand to help flush out any design elements that might change as a result of working on the copy.
When you add responsive design into the equation, the process looks a bit different:
There's a lot more planning and testing that needs to be done.
Since when a screen is resized, things need to move around, you have to plan which content takes priority over other content when the screen gets smaller:
You want your more important content to be at the top now. Other content blocks move down until you get to one column (for the smallest screen size).
Sometimes, you decide that some information does not show up... it disappears. This is probably more in extreme conditions where there's a lot of content to show and you don't want a page to scroll on too long - again, keeping the person viewing the website in mind (the user experience).
With responsive web design, creating wire frames and the final, visual design has more steps. You have to design for 3 general screen types (sizes). With each design modification that's done, you have to make that change to each wire frame or visual design mockup. This has to be done and it triples the amount of work that goes into a design that's not responsive:
If you have questions about this, please contact Webstix today and we'll be happy to help you.
