Quantcast
Channel: Adobe Community: Message List
Viewing all articles
Browse latest Browse all 108516

Re: I want to convert my static wordpress theme to responsive

$
0
0

I had a quick look at the existing website's html code, and the code isn't that bad - a RDW retrofit could be made to work relatively quickly for a quick RDW make-over.

 

But you will have to hand code it - that would be the most efficient.

 

Steps:

1) make the current fixed design fluid by setting a min-width and max-width on the container div. Then apply a width of 90% for some margins on the sides. While you are at it, clean up some of the html. For example that wrapper div isn't doing much.

2) remove the 990px width for the header. Add a clearfix to contain the floats in the header.

3) Add a surrounding main content container for both the main content and sidebar divs. Add clearfix.

4) convert the column widths to percentages. (target/context *100) So for the sidebar: 328/990 *100 gives you the width in percentage. Do the same for the main content container. You now have fluid columns, and a design that is responsive up to a point.

5) do the same for the footer columns.

 

7) Next, set up two media query breakpoints: one for tablets, one for desktop screens. Move the current desktop layout code in the desktop media query part. The first media query breakpoint is not a breakpoint at all, and you should start with the mobile css without adding a media query. Hide content you do not need for the initial mobile setup. Then display in the media queries whatever you need at the tablet and desktop level.

 

8) fix stuff that breaks. Test, test, and test.

 

This type of retrofitting is quite controversial, but it can be done quickly IF you know what you are doing. I have seen an article about this topic in "the responsive web design handbook 2014" which is out now (page 78 and on). I would get that bookazine.

 

And play with the inspector in Chrome/Firefox to test stuff. Not all sites can be retrofitted, but I did a quick test, and had a working fluid design for your home page in less than two minutes.

 

Good luck!


Viewing all articles
Browse latest Browse all 108516

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>