Long, long ago when dinosaurs roamed the earth, and our phones were not quite so smart, there was no mobile web. Our phones were large, clunky, and steam powered. (Okay, not steam powered. But that would be so cool!) Websites had evolved from text only pages with a few links to visually appealing sites laid out using tables. But they were designed to be viewed on large screens, and were rigged and static. For the most part, designers simply took ideas that would look good on the printed page and coded them to look that way on a computer screen.
Then in the early 2000’s a few flip phones started coming out with internet access. The first websites created to be viewed on these phones harken back to the first websites designed in the early 1990’s; text only with a few low-resolution images. There were special mobile browsers and the website needed to be written in a language those browsers could understand.
Then, in 2007 Apple came out with the first iPhone. An important feature of this first phone was that it came with a mobile version of Apple’s Safari web browser. Now there was a phone with a browser that could read HTML and CSS like a desktop browser. You no longer needed a version of your website written using a special mobile language. But that wasn’t quite enough. The screen was still really small, and the connection really slow. (We’ll talk a bit more about website speed in another blog.) And there were still quite a few features that didn’t translate well from desktop to phone. For example many sites were starting to use drop down menu systems that “dropped down” when you hovered the mouse over the menu item. There is no “hover” on a touch device. (I know because I tried. I held my finger over a menu on my phone and waited for it to drop down. After a couple of hours I gave up.)
Wait. I need to have two version of my website?
So, web designers started creating a second version of websites that was meant to work better on smaller, slower devices. When you visited one of these websites it would detect you were on a mobile device and re-direct you from the main desktop site to the mobile design version. Instead of example.com you might end up at m.example.com. This was not a great solution. Not for the web developer having to create two sites, for the owner having to pay the developer to create two sites, and not for the end user who may get a site that did not have as much content as the full desktop version. And then tablets started becoming more popular, and larger phone screens, and smaller tablet screens, and internet connected game consoles… Now there were many different screen sizes. So when someone visits your site, should you deliver the mobile version or the desktop version? Or just forget all this internet nonsense and get a nice chalkboard. Ugg. But a better solution was just around the corner.
What if you could create one website that would change to fit the device it was on? It could “respond” to the width of the screen and adjust itself to best use that space. In late 2008/early 2009 Ethan Marcotte coined the term “responsive web design.” Websites were now being created that respond not to the device they were on, but to the width of the screen they were being viewed in. Web design had advanced beyond the days of simply turning the printed page into a digital version, to its own system of displaying information that took advantage of the medium.
Today you would have a hard time even finding a web developer who was not creating responsive websites. You don’t really need to think about this. That’s just the way it’s done now. But what if you have an older website. Do you really need to create a whole new one? Isn’t the one you have “good enough”?
Today more users are browsing the web on mobile devices than desktops. Many users may never even see the desktop version of your website. It’s been trending in this direction for a long time, so this shouldn’t come as a surprise. And yet, many website owners have still not updated their website to work well on mobile.
“I can see my website just fine on my phone… now pass me that magnifying glass so I can proofread my blog.”
How does your phone know to load your website so that it “responds” to the screen size, or just squeeze it into the space? Mobile websites use a special tag in the code that tells the browser how to set the viewport. If it’s there, and set correctly, and your website was built using responsive design principles, then your phone will load your site and it will respond to the screen size and all is well. If it’s not there, then most mobile browsers will simple squeeze your site onto the screen. You will see a miniature version of your webpage. Cute, but not easy to read or easy to navigate. Your users could zoom in, and scroll the screen left to right to read it, but it’s probably easier for them to just go to a different website.
“Honey? Does this website make my fingers look fat?”
Speaking of navigation… after looking at your old site on your phone, and deciding it looks really cute all small like that, and you didn’t need to change anything, did you try and navigate around? Is there information that only shows when you “mouse over” an item, so mobile users can never see it? Can you tap a menu item without tapping three others at the same time? If you use a lot of text links do they bunch up together so it’s almost impossible to click the one you want? In addition to being responsive, a mobile friendly website should be easy to use and navigate. Buttons, links, and menu items should be easy to tap on, even for those with, um, more “Rubenesque” fingers.
“Yes I have a website. But I don’t want anyone to actually visit it, or use it, or get any business from it. Oh, and I like wasting money.”
Most website owners have a website for a reason, and want to get more visitors and more traffic to their site. This means doing well in the search engines. There are many factors that influence how well you do in the search engines: SEO, content, in-bound links, the motions of the planets — and, more and more, if your site is mobile friendly. Since more people are using mobile today the search engines want to give them results they can use. Therefore they are more likely to show mobile friendly sites to users searching on a mobile device. If you’re spending time and money to increase your website traffic, and especially if you are paying for ads like Google Ads, why send them to a site most of them can’t use? If a percentage of your users leave because your site is not mobile friendly, then that’s the percentage of your money that’s wasted on your on-line marketing. You may have already wasted more than it would have cost to create a new site.
Any website you have created today will be built using mobile friendly responsive design. But if you have a website that has been around for a while, and it was not built using modern responsive design principles, then it is definitely time for a re-design. The advantages of getting a new site are overwhelming. And if you are using your site for business, then you will actually save money by upgrading. Not sure if your site is mobile friendly? No problem. Just learn HTML and CSS, then view the raw source of you site and look for… Oh, never mind all that. You can go to this mobile-friendly test webpage and put in your website and Google will let you know if you need a mobile makeover.
If you have a responsive, mobile friendly website, then you’re done. You’re all set. You can go take a nap. Oh, wait… Your site also loads really fast, right? And only uses a secure SSL connection, right? Okay, I guess there’s more we need to talk about, but later. I need to go figure out how to make a tiny steam engine and fit it into my iPhone.