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:
With a mobile website design, the website detects which device is being used and it serves up a webpage based on the device.
With responsive, the website adjusts to the screen size (of any device). A different website is not served up.
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:
Mobile will overtake desktop use:
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.
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:
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.
The logo
Main navigation
Sub or footer navigation
Breadcrumb navigation
Images
Text size
Widgets
Social Icons
Backgrounds
etc.,
There are a number of technical aspects that need to be done correctly or else you could end up with errors like:
Viewpoint not configured
Small font size
Content not sized to viewport
Touch elements too close
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)
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 want the same URL for both the mobile and desktop version of your website – this means you need responsive, not just mobile.
Look at your Google Analytics statistics to find out how many people are already using a mobile device to access your website’s content.
Identify people that turned away from your website because it doesn’t look good on a smaller screen.
Analyze page speed to make sure the website loads quickly.
You essentially future-proof your website for any kind of device that will come out.
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:
Planning and Strategy
User Research (market research)
Wire Frame Design
Visual Design
Development (coding)
Testing
Launch
“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.
Our easy-to-administer gallery feature allows you to easily add and manage photos. It also comes with a slide show option that enables you to add a gallery slideshow to any page.
We will set up a case study module to showcase your completed projects. It will have images with a brief description of the project, testimonials, the challenge, the solution, the results, and the service rendered.gallery slideshow to any page.
We will create a contact us form with fields like name, email address, phone number, and comments that allow site visitors to send you a quick message. It will include reCAPTCHAv2 to prevent bots from submitting spam.
We will add social media icons such as Facebook, X, Instagram, and YouTube and set up links to your social media page. Our setup will include links to your accounts.
We will set up the Google Reviews and show 3-4 Google Reviews on the new website’s home page. Doing this will increase visibility and is a powerful strategy to build trust, establish credibility, and drive conversions.
Maximize SEO effortlessly with a blog or news section. Connect with readers and satisfy search engines with fresh content. Stay current to increase keyword density, enhancing chances of driving traffic to your website.
Elevate your website’s homepage with our dynamic rotating hero image feature. Easily add and schedule slides with text and call-to-action buttons to drive engagement and conversions.
Customer testimonials enhance your business value, credibility, and reputation, driving a 62% increase in revenue per customer, as demonstrated by research.
