Different versions of a website for different screen sizes?

Forum Moderators: phranque

Message Too Old, No Replies

Different versions of a website for different screen sizes?

joliett89

12:06 pm on Feb 25, 2012 (gmt 0)

I have a website, thats 900px in width, and I am sure it would loog good on a laptop, but I have a lot of space on both sides, when I look at it on a widescreen monitor. I was generally reading that it recommended etc, but is it not a little 2005 way of thinking etc? I think that websites at about 980px width (I am talking here about websites that are centered, margin: 0 auto; etc).

My question would be, do people generally create different versions for different screen sizes, do detection (probably JavaScript) and load specific site based on the screen size etc, or is it generally too much work and people dont do that etc. What is the best way to go about that?

I am mostly gonna be working on Wordpress blogs for now, so the question would be mostly related to this.

Thank you.

g1smd

12:20 pm on Feb 25, 2012 (gmt 0)

create different versions

That's way too much work.

However, if it is a database driven website with a small number of templates it is possible to create a small range of different templates.

You're still stuck with the problem that people on the mobile site are being fed large images unless you have prepared images at several different scales.

Marshall

3:16 pm on Feb 25, 2012 (gmt 0)

joliett89,

Designs have some what come full circle. Use to be everyone was concerned about fitting into a 800x600 space. Then, as screen got wider, designs did, either though screen detectors or simply fluid designs. Now, with the increase in mobile devices, smaller is vogue again.

My personal opinion is do not worry about uncommonly wide screens. Fill the empty space with an interesting background image to break up the monotony of a large solid color. If anything, concern yourself with fitting mobile devices comfortably. That is not to say make a mobile friendly site, but at least a site that a user does not have to scroll a lot left-right to see the critical content.

Marshall

g1smd

3:52 pm on Feb 25, 2012 (gmt 0)

With a very large screen, I run the browser in just part of it and have other windows open.

It's important to measure window size not screen size. :)

not2easy

6:09 pm on Feb 25, 2012 (gmt 0)

I've always been a fan of liquid layouts that can look good at any width. My favorite current layout goes from 680 to 1080 without a horizontal scroll. All the content is in a central column with a max-width and min-width setting in css and it is designed to resize gracefully with floating divs. On phone screens it's hard to read details so usually they end up scanning a page to an interesting area and then enlarging that area. I would not think of multiple versions, but the suggestion to set up various templates for WP makes sense. It depends on the theme and its layout how much customizing you would need to do. I use some browser resize shortcuts that allows viewing of various common window sizes. It can't show what an Android viewer would see, but it shows you how your content fits in different window sizes.

Alex_TJ

10:29 pm on Mar 4, 2012 (gmt 0)

joliett89, do a search for responsive design and you'll find that it's surprisingly easy to adapt your page to various formats and common widths with css.