Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

I want to make a website for one thing, I don't want to make two websites for one thing I want to make one. You probably agree with that.

The problem is, we're walking away from this massive 22" screen and chair as we start to stare into the palms of our hands at these screens that can be up to 80% smaller. They try to hit the website again and -- bam, the thing sucks, fonts are all over the place, divs goof up, scripts don't run, things are too wide, I can't read the text, blah blah blah it's garbage.

Standard solution? Make another website. Great, but that means I have to make another website. I don't want to do that, I want to make a website once. How do I do that?

share|improve this question
add comment

2 Answers

up vote 3 down vote accepted

Ideally you will design the website in such a way that you should only need to write a mobile stylesheet to make your site mobile friendly. In fact I'm fairly certain that's what this website does. This should require no additional programming, only a new stylesheet that either overrides (aka cascades) the main stylesheet with any rule changes, or a fresh stylesheet altogether to make the file size being downloaded smaller.

share|improve this answer
    
Why haven't I seen this work? Browsing news websites, text is too small or content over-flows to the right-scroll all the time, same with websites like reddit. What do I do about scripting issues? What about my massive 600px wide images that we "must" have? –  Incognito Mar 21 '11 at 16:22
2  
If you "must" have those images then that will limit the options before you. But even then mobile browsers can handle them and you really just need to make sure your content scales/resizes well (stretchy divs, font sizes uses em instead of pt or px, etc). Scripts shouldn't be an issue as well written JavaScript should degrade gracefully (i.e. progressive enhancement). If it causes mobile issues then either it's buggy or not degrading gracefully. Both are indications that the code needs to be fixed. –  John Conde Mar 21 '11 at 16:32
add comment

One word for the technique you probably need is "responsive design". There's a good article in Smashing Magazine about it: http://www.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/

This blog post is also useful and has links to some sites where it works well http://adactio.com/journal/1700/

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.