How to start designing an Adaptive Website



When you decide to start converting your current website to an adaptive layout or start a new website which you want to be adaptive, the project can seem a bit daunting to say the least. I mean, how the hell do you start building a website that looks good, in every size known to man? That’s an overstatement, but you know what I mean. This is not a technical post, there’ll be plenty more of those, this is more of look into the major areas you need to think about during the process of building  an adaptive website.

Decide your hierarchy, And give it numbers

I find that, this is the easiest way to do it. Both for myself and for clients to understand and make the hard decision about what is the most important content on their website. And if you are anything like me, you will find this to be a very hard process. Now go do this and come back.

Find all the fluff and remove it – all of it!

Once you get past about no. 7 in that nice hierarchy of yours, is any of the stuff after that really needed? I can tell you that on most websites the answer would be no. Really thinking about it and cutting away unnessary bits is important, both to help your load times and to make sure the website is actually usable on a small screen. And yes! That means killing those 10 social media icons from the top and bottom of your content. Please find a better solution.

Figure out your breakpoints

And give much thought as to how many elements you want there to be on the site when your website breaks down to at smaller screen and how these elements are going to be arranged on the page. The best tactic is not to just punch your sidebar down below the rest of yor content. It might be better to remove  half of the sidebar elements or have some of them above your main content area. Or what you want to include on the screen as the screensize gets bigger. Setting up your layout breakpoints are quite easily done in css with media queries: below is a small sample of how its done if you arent yet familiar with the technique:

/* Normal visitors CSS*/
body {background: #ccc;}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
/* Old Ipads and small screens CSS */
body {background: #00f;}

@media only screen and (min-width: 480px) and (max-width: 767px) {
/* Wide mobile CSS */
body {background: #f00;}

@media only screen and (max-width: 480px) {
/* Small mobile CSS */
body {background: #0f0;}

Getting responsive server side content can be a bit more tricky, but you can use something like Categorizr to only show some content on big screen devices. And there are of course many javascript solutions to include stuff based on the width and orientation of the device too.

Getting your menu in order

Find a decent solution for your navigation. Cut down the number of menu items for your mobile users while making sure they can still find the content they need. You can use stuff like the fly out/drop menus or use something as simple as a nicely styled select box (see more mobile menu solutions here). The good news is that smartphone browsers are good at handling css3 so you are free to use most of the new stuff in there to create the mobile version on your menu.

Make everything usable..

..on the worst smartphone you can find! If every link on a HTC ChaCha is big enough to click and everything looks right, then chances are that it’ll work on the “real” smartphones too. That’s the cheapest way to test you mobile system. But sure, start all the smartphones you can find and give it a proper test there as well.

And you’re done! For now..

Adaptive websites are just like normal websites; They are never finished. And let’s face it, mobile browsing is changing very fast these days, with retina displays and new devices popping up from everywhere. So as with everything online you have to stay on top of it. But with an adaptive website, you have taken a big step forward.