The Smart Business Owners Guide To Mobile Responsive Design

Transcription

1 The Latest Google Changes For SmartPhone Friendly Web Browsing The Smart Business Owners Guide To Mobile Responsive Design In this fast paced ever-changing digital world, we, as business owners, continue to be challenged in understanding what s happening in the online world and wondering what to do next. It used to be easy. Put up a website, do a few things in Google and BAM your business was online. And it looked pretty good on your 800px by 600px screen. But then things got a lot more complicated. Apple went and created the iphone and people started using the internet on their phone. And then Android phones came along like the Samsung Galaxy and the HPC making mobile web browsing all the rage. And then those Tablet things started to take off. Now it seems like everyone and their grandmother has an ipad! How do you adapt? There s so much information out there it s totally confusing. So today those old style websites don t cut it anymore.those artifacts weren t designed to handle viewing on all these new technology devices. And don t get me started on those Flash style websites! And guess what? Mobile and tablet internet search is increasing at an alarming rate. It s soon tipped to match desktop computer usage. So it s time to adapt it s time to make some critical changes to your business website and online strategies. David Glendinning Page 1

2 And that s why I put together this guide. To remove the confusion. To help YOU understand what s considered to be one of the most exciting and liberating changes that s come along for online publishers in recent web history It s referred to as Mobile Responsive Design. Read on and you ll soon understand WHY this is important to your business! What is mobile responsive design? When a website is responsive, the layout and/or content responds (or, adapts) based on the size of the screen it s presented on. A responsive website automatically changes to fit the device you re reading it on. Typically, there have been four general screen sizes that responsive design has been aimed at: the widescreen desktop monitor, the smaller desktop (or laptop), the tablet, and the mobile phone. David Glendinning Page 2

3 The above image shows a Salon website created using a mobile responsive design strategy. It s a website that can automatically adjust it s content to view on any mobile device. Here are other examples shown below. As the screen gets smaller, the content shifts and changes to the best display for each screen David Glendinning Page 3

4 Why should YOU care about mobile responsive design? Well, there are various reasons, all important, but I consider ONE of them to be MORE critical to your online success than any of the other reasons. But before I discuss my number one critical reason you should care, I first wanted to focus on your website content and design. Put simply, you (the business owner) should care because you want the visitors to your website to have the best experience possible, without forcing them to adapt themselves. There are essentially two ways you can give your audience a good experience utilizing responsive design: 1. Optimize the layout of your content. If a reader is browsing your site from a mobile phone, they generally don t have a lot of screen real estate to work with. Phones today will typically zoom out automatically, so that the entire website can be seen onscreen. This can be good, as it gives the reader access to the entire sight, but it can also be frustrating when trying to find information that is located in a tiny part of the upper right of the screen. If you could move some things around, make some things bigger, and not have as many columns, you ll give your mobile reader a much better experience. 2. Adapt the content that s shown. If you own a restaurant and a potential customer is browsing your site from a mobile phone, chances are they aren t that concerned with how pretty your site is your foody blog with the awesome slideshow of delectable dishes scrolling from side to side isn t very useful in that situation. They want to know what your hours are, where you re located, how to make reservations, and want a look at your menu. Your potential customer browsing from a desktop computer probably isn t looking to eat right now, and isn t in a hurry to see where you re located and what your phone number is. Most likely, he s looking to see if you offer a good atmosphere and what kind of food is available. These are obvious generalizations, but you can see the benefits of having differing content presented to people in different screen viewing circumstances. David Glendinning Page 4

5 Mobile responsive design takes care of this on the fly, and without multiple versions of your site to maintain. How to create a mobile responsive website All of this may be new to a lot of you. Let s face it, most business owners are not savvy with website design techniquesand in the past there has not been great reasons to care. All you need to understand right now is how mobile responsive design effects you and what you can do about it. Creating a mobile responsive website is all about adapting the website code and design of your website. Today, website developers are changing their web strategies and adapting to a different philosophy to cater for the increasing demand for mobile type devices. However, most business owners are not website developers. Being aware of the power of mobile responsive websites is fast becoming an essential part of your online strategy. Most importantly, you have to adapt your online website presence to provide a good experience to your potential customers. Mobile responsive design is the future of the web Mobile responsive design is all about automatically delivering your audience the content they want, within the context that they re viewing it. If your business has it s own website then you are an online publisher. Mobile responsive design is revolutionary for online publishers, because (for most) responsive design eliminates the need for multiple versions of your website, or expensive app development and maintenance. ONE website, multiple versions. Perfect simplicity for the online publisher, great utility for the reader. David Glendinning Page 5

6 The #1 Critical Reason for Mobile Responsive Design You d have to be living under a rock to not understand the importance of Google or the power they yield in ranking your business in search engine listings. You want your business website to be found don t you? Of course you do! And it just so happens that every day Google is used by millions of users to find just about anything. And as you probably already know, the business riches are made when users search not for your business name, but the products and services your business provides. That is, your prospective new clients search for the term hairdresser as opposed to Artistic Visions Hair Salon So the idea is to rank well in Google for the term hairdresser and when you do, you ll start to attract plenty of visitors to your website. Now many of you have probably achieved a good Google ranking for YOUR particular service or product. But guess what? Google have just gone and changed the rules! Here s what Google wants: Google announced that it prefers mobile solutions that maintain the same URL across platforms. In other words, Google prefers sites that work across all kinds of devices desktops, smartphones and tablets via a single URL. However, a more recent announcement on June 11 of this year (2013) was the first official acknowledgement by Google that one-url websites are actually favored in mobile search. From Google s updated best-practices guide: "Google recommends webmasters follow the industry best practice of using responsive web design, namely serving the same HTML for all devices." Google s objective is NOW to give the viewer a GOOD viewing experience. If a user searches for a particular service, then Google wants to enhance their experience with a good RESULT. After all, that s what Google is all about! If they presented a BAD result, something that is completely irrelevant to the users search, then Google would be fast out of business. David Glendinning Page 6

7 It s quite logical really! Who would use a service that does not produce relevant result that are easy to read on whatever device the user is using. And with Mobile technology they re using their mobile phones, ipads or tablets to search for services and products. Google wants to REWARD these users with GOOD results! How does Google do this? By returning search results with websites that are mobile responsive in their design! So for Google to achieve this, they are developing search algorithms to REWARD websites that are now mobile responsive. Your business website may soon be PENALISED in the search results if your website is not mobile responsive in it s design. You run the risk of losing a good Google ranking position if you do not take action! It s started to happen NOW and will continue to become more and more relevant in the future. Is your business website mobile responsive? It s super easy to check. Here s a great utility you can use. Go to the link above, put in your website address and then see how your website will be viewed on a mobile phone. Scroll down the responsinator page to view your website on multiple devices. Put simply, there should be NO horizontal sliding bars. Your content should be easily viewable as you scroll down the page. David Glendinning Page 7

8 NOTE: this utility will test your design to see if it s mobile responsive. It will NOT test websites that have already setup separate mobile and desktop websites. Here s an example of a website that is NOT mobile responsive but has a separate mobile website setup for mobile smartphone viewing: Click here to view a website that has a separate website for mobile You ll notice that the link above has a completely different url to the main website (which you will see in the URL Address bar of the page the link goes to). David Glendinning Page 8

9 Here s an example of a website that is NOT mobile responsive and does NOT adjust the content for viewing on a mobile device. (I selected a random salon website for this example) Responsive Web Design Vs. Mobile Websites Over the past 12 months or so, there has been much talk in regards to having your website made mobile friendly. Many business owners have paid a small fortune to have a mobile website created in addition to their normal website. To avoid any confusion, this is NOT the same as mobile responsive design. David Glendinning Page 9

10 Google is clear about this. It s #1 preference is having a website that adapts it s viewing to any mobile device. It does not recommend having another website created specific for a mobile device. Here s why Many businesses have gone to the expense creating a mobile redirect website that has a URL (website address) similar to this m.yourwebsite.com. Once you access a specific page on the website for example, it may redirect back to the main site for desktop viewing. These arbitrary redirects are what Google is trying to clamp down on in terms of SEO ranking. Secondly, there s a problem with duplicate content. A particular page on your main website will have a different URL on the mobile domain - but the exact same content! Google HATES this! So setting up a duplicate website suitable just for mobile is NOT the best option! What Action Should You Take Now? You should make sure your business website is setup to be mobile responsive! And as Google states: create a good experience for the viewer, regardless of what device they use. What makes a good experience as defined by Google. David Glendinning Page 10

11 Well, I ve seen many so-called web experts and marketing companies, selling this mobile-friendly stuff to business owners especially over the past few weeks. And just about all of them have not revealed all! Take note of this mobile friendly is not the same as mobile responsive You don t have to search far to find Google s definition of what makes a good experience. And here s what my research has uncovered and I m going to reveal this to you absolutely FREE because I feel it s important you understand. You need to be able to sort out the truth from the bulls..t! So listen up this is good stuff! Note: the following text and images have been sourced from in particular this article here A Good mobile experience Let s say I m doing a search for Game of Thrones Episode Recap and I click on a result I like. The site takes a little while to load, but when it finally pulls up, I notice that I ve been redirected to a mobile version of the site (m.hollywoodreporter.com). Since it s a dedicated mobile site, the text is formatted to fill my phone s screen, non-vital images are small, and the navigation is condensed. It s pretty nice, even if the user-agent (ie. using a mobile phone) detection and redirections did add a bit of lag. David Glendinning Page 11

12 For another experience that I d consider good/decent, I did a search for, appropriately enough, mobile SEO and clicked through onto a blog post. The site loads up quickly and even though it s definitely a desktop site, I can just hone in on the main content block, double tap, and it zooms into the content. On mobile safari, I can even hit Reader and bring up just the clean text (I do that a lot). With this one, I can get the information I need but I m kind of indifferent to the whole experience. Sure, wasn t really optimized for mobile, but I can deal with that. Not having a mobile experience at all is by far the most common way to deal with mobile users. Check out the following image A bad mobile experience For this example, I clicked on a link that someone I follow on Twitter had posted. I click through his shortened link on Twitter and my browser starts to redirect to the article I m trying to read (something on company culture). Halfway though the page load, I can see that another redirect kicks in and I get a loading screen for about 5 seconds (eternity on a mobile device). Studies say that 40% of customers will abandon a site if it takes longer than 3 seconds to load. Luckily, I have pretty low expectations when it comes to mobile site speed, so I hang around David Glendinning Page 12

13 I wait and wait and when I finally get a page I realize that it s not even the article I was trying to read; it s the site s mobile homepage. The homepage has all their top stories, but I can t find the article I was trying to get to. Some people could try in vain to navigate to what they were looking for or dig for a search functionality, but at this point, I m done. The site essentially has a rule that says to, no matter what page is requested, redirect all mobile traffic to the mobile homepage. If you do this, I hate you. It s just like the ultimate in lazy BS. I m sorry, but it s true. There s no reason to ever do this. Let s take this one step further: I click through on that link, and instead of getting to my content, or even the homepage, I end up with this hard-to-close popup that tells me I should download the companies app. I m on a mobile device and by nature, my interactions and my attention span are already lightning quick. Not to mention, my connection isn t the best. You want me to click install, wait for the app store to open, download your app, and then figure out how I m supposed to find the content I was originally looking for? Fat chance. Good luck with your mobile bounce rate (the number of visitors who leave the website). I kind wish these companies would check that once in a while. An awesome mobile experience For this example, I searched Google for Portland Nightlife. The site loads in 2 seconds and without any redirection or loading screen, the text wraps to width of my phone. The content is the highlight, with an unobtrusive icon for an expandable navigation. There aren t any social icons and the images are all small and don t slow down the page s load time. I decide bookmark that post for latter and I realize it s just a regular URL, the same thing I d see on the desktop site. How cool! David Glendinning Page 13

14 Another notable thing here is that the page showed up well (#1) in Google s mobile search results. Was it coincidence that it was good content and a good experience? I ll let you be the judge of that (spoiler alert: it s not a coincidence). Overall, once the page loaded (and loaded quickly) it looked great. All the unnecessary elements were gone and the content filled and wrapped to my phone s screen. Later when I open that same link on my tablet, it has some extra stuff I can tap on that the mobile site didn t have, but it still looks fantastic. In a week, I can open that link again from my laptop and it looks amazing there as a full-featured site. See where I m going with this? One single page that looks great on every device I want to use to check it out with. So let s recap The mobile-specific site and the desktop site gave me what I d call a good experience. Maybe it was just decent, but I ll upgrade it to a pass. The mobile site that redirected me to the homepage (or some other ridiculous thing) was a nightmare. The magic one-page-fits all gave me an awesome experience. That s mobile responsive design? Responsive Web Design Was it worth the wait for me to finally get to the point? I hope so. Responsive Web Design is an approach to web design where we architect a single site to provide an optimal viewing experience on any device. We have one domain ( and one code base, but all the rules that determine the visual presentation (layout, font size, imagery, and more) are responsive. David Glendinning Page 14

15 The style rules respond to the width of whatever browser is being used to view the site. And, to wrap it all up I ve just used the content from an article I found on the web that explained pretty clearly what exactly is a good, bad and awesome mobile experience. And that s exactly what Google states. Provide a GOOD mobile responsive viewing experience to the viewer and Google will reward you with ranking credit. And the best solution for you as the business owner is to incorporate responsive mobile design in the construction of your website. Make the experience for viewers of your website a good one. And make it easy for them! Is that easy to do? Not really! I ve just gone through the process in converting to a responsive design. I had the choice of 2 solutions 1. I could take the easy way and install a plugin on my clients website to make it mobile friendly. However, this option was going to make the website sluggish and was more a short term fix. PLUS, it s not what Google has determind to be the #1 best option for mobile responsive design. 2. I could re-design the website using a mobile responsive layout. It will take me more time but the impact is far better. And that s exactly what I did. The website now adapts to any mobile device and in fact, has a quicker load time than what it had previously. It takes advantage of the latest in web-design technology PLUS, it s EXACTLY what Google recommends for an awesome viewing experience. It took me a bit of time, but I m wrapped in the result, as is Samantha, the owner of Blush Hair, Nails & Beauty So there you have it! Everything you need to understand in regards to mobile responsive design. And if you d like to have a quick chat on how quickly and easily your business website could become mobile responsive and benefit from Google loving your website then; David Glendinning Page 15

16 1. call me on or drop me a quick david@salonsuccesswebsite.com All the best David Glendinning David Glendinning Page 16