4

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?

2 Answers 2

3

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.

2
  • 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
    Commented Mar 21, 2011 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
    Commented Mar 21, 2011 at 16:32
1

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/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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