With the craze of making everything responsive, it's easy to lose sight of the basics. As a guide to developers, this post explains two cut and dry ways to make an older desktop site responsive.
First off, check the site currently on mobile screen sizes. Here’s a quick and dirty way to do that:
- For Chrome: install the web developer extension, go to your site, click the cog wheel icon in the toolbar, click the “Resize” tab and then click “View Responsive Layouts”.
- For Firefox: go to your site and hold the keys Ctrl + Shift + m. Then use the drop-down to toggle to different screen sizes.
You may find the site already looks good, and you don’t need the additional work. It’s not like there are commandments of the web that say so called desktop sites can’t look nice and convert sales on mobile just because they’re desktop. Otherwise, read on.
The easy way: Make a few media queries
Don't underestimate the power of a few media queries. They can do a lot of heavy lifting. Use them to start styling for small screen sizes like 320 x 480 and move up until you don’t need to style any more. Here’s a nice list of screen size ranges.
For many sites, the core styling you need in your query is simple:
- set the content boxes to a percentage width (like 100%)
- take off any floats so they stack on top of each other
- set the wrapping element’s width to auto
So even if you have a site with a fixed pixel width, you can still use a query like this to achieve responsiveness (and without any wild, unsupported CSS3 properties). Just be sure to stick the query at the bottom of your stylesheet so that it overrides your fixed widths.
Take a look at my pen to see what I mean:
See the Pen responsive snap by Jack (@jdabs) on CodePen.
http://codepen.io/jdabs/pen/Cnmfg
The Hard Way: Rebuild it in a responsive framework
The other option is to rebuild your site with a responsive framework. The good news is you already have a basic design from your old site, unless you plan to do a whole redesign. You should be able to reuse some of the old HTML too. In the HTML, add the classes your chosen framework needs (for example, those column classes like col-12 or large-column-12, etc.).
If you’re going to copy over your old CSS styles, you will probably need to massage them a little, especially the styles that set any widths or heights because they may conflict with the framework’s.
The shameless plug...
For you developers, Soholaunch makes it easy to build templates for your customers with the HTML and CSS you’re already familiar with. HTML5 and CSS3 are supported too. You're also free to tweak the built-in responsive templates to achieve a look you want. We’re glad to set up a demo for you to play around with.
If you're not a developer, Soholaunch has responsive templates right of the box that you can use on your site immediately. Wanna try them out? Head over to our Create Website page to get started!