max-width your face off

Something I am coming across once in a while is a site that's effectively a single column up to 767 or so pixels. Personally, I find this a little lazy and would suggest time and inclination are the underlying reasons.

"Let's just stack the content until we reach 'the iPad' at portrait"
- a. developer / a. designer / a. cheque writer

Unfortunately it's also easy to create this type of 'design' for a narrow view. A quick fix that would make your site look (possibly) lovely on a handheld device.

You could write something as simple as this -


@media (max-width: 767px) {
    * {
        float: none;
        margin: 0;
        padding: 0 10px;
        width: 100%;
    }
}
 

and the job would be done. Your site would now be, more or less, responsive. It could nicely stack your content in source order of your HTML.

But that's crap

In doing this what you're essentially doing is letting the browser compute all of the CSS it's downloaded then override most of it with the max-width rule. A quick (and lazy) fix with a slight performance performance issue.

This would (I'd surmise) be happening when you've developed from the top down. Where you'd get a .psd of the 'desktop view' and you'd have to make it responsive.

You can still make it responsive but you don't need to overwrite all those rules, you can still start from the ground up. It'd be a cleaner way. You'd be using the cascade for what it is rather than hacking it as an afterthought.

Next time, try it. It might take a little longer (budget for it) but the next time and the time after that you'd get quicker and quicker at it, if it's needed.

More than your problem

I would argue that as a developer who only gets a 'desktop view' of the design you're only doing the best you can. We need to start educating clients that if they need a responsive site they need to be part of a reiterative process through constant communication and decision making.

Making second guesses as to what's needed from a site that's only got a 'desktop view' is (possibly) not going to make for a great responsive user experience.