Even though more and more people use mobile devices to access the web and now that Google seems to be preferring responsive websites in the (at least mobile) SERPS, it’s not too late to ask how if you can make your website responsive.
If you’re asking if you can convert your website into a responsive design, you probably already realize how important it is for you to have a mobile-friendly website.
- Only 11% of people who access the web do so without a mobile device
- Google is calling-out responsive websites when they appear in the SERPs
- Some say Google is even ranking responsive websites above those that are not
- Google has even stated that site load times might contribute to improved ranking (which is all about mobile, too)
So clearly this is important but can you do it with your website? That’s what the image, above shows us (by the way, do you like my pretty flow-chart? I drew it myself!).
First you have to ask yourself a simple question: does your website use a content management system (CMS) or not? If it does, then you’ll probably need to use a responsive template for your CMS if you want to covert it.
Probably.
There’s a lot of things to consider here. Even if there aren’t responsive templates available for your CMS, you might be able to find a developer who can make your website responsive anyway. It’s hard to say anything more than “probably” here because there are too many factors to consider to draw a broad conclusion here. Sorry- I wish it was more clear. The good news is: if you are using a CMS it is likely that you’ll be able to make it responsive- given enough time and resources.
If you do not use a CMS, then you need to find out if your website was built using tables. In case you don’t know what I’m talking about, before there was CSS web devs often arranged the content on a webpage using borderless <table> elements. Yes, believe it or not there are still living websites that were built in tables. (Side note: I once viewed the HTML of a client’s website to see that it was built in tables. A developer was looking over my shoulder and said out-loud, “What is THAT!?” He’d never seen one. I instantly felt old.) If your website was built using tables, you probably won’t be able to make your website responsive. That’s okay- it’s probably time for a website redesign, anyway.
So if you’re lucky enough to use a CMS or to have a website built without tables (which isn’t lucky as much as your website was probably built in the last couple of years) then you probably can make your website responsive.
So how can I make my website responsive?
Full disclosure: I got this from http://www.freshtilledsoil.com/how-to-convert-a-fixed-width-to-a-responsive-website/
First, add a meta viewport to the head section of your page:
<meta name="viewport" content="width=device-width" />
Second, identify your highest-level element with a width. You need to change that CSS from “width: ??px” to “max-width: ??px”. I think you can use EMs here as well, but it needs to be a static number because of what comes next.
Third, change the width of all the daughter elements of your highest-level element from a static width to a percentage width. With a little math you can make this look the same as it might without percentages.
Fourth, add media queries to your CSS file, telling it what and how to change when the screen width is smaller.
What media queries should you use? http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
What should you modify in your media queries? Here are some things to think of:
- What should happen to the sidebar or sidebars?
- What should happen to the website’s menu?
- Do you want to scale your text to different sizes on a mobile device?
- How do you want to handle images on mobile devices- especially if they’re large images?
Just because your website is responsive, doesn’t mean it’s mobile-friendly
Responsive web design is all about making sure a mobile user can easily and clearly read your website’s content. That’s an important part of being mobile-friendly. But what good is a responsive website that takes forever to load? Don’t neglect site loading times. Google has a useful tool to show you what you need to do to improve your page speeds: https://developers.google.com/speed/pagespeed/insights/
Have you converted a static-width into a responsive website? What am I overlooking here? What have I butchered by my attempt to over-simplify this process? Leave your thoughts and critiques in the comments, below.