One website for multiple client resolutions

Question

I keep thinking that although creating a single website for multiple client resolutions or screen sizes might be hard work, it's far more maintainable than creating a separate website for each device or resolution.

What design or website editing applications, if any, can I use to help with creating specific CSS or even mark-up to target devices of a given size?

Answer 1

Dreamweaver CS5 has support for HTML 5 media queries allowing you to use specific css and preview per screen resolution. That is the only one that comes to mind but I have never liked Dreamweaver and would not recommend it.

Answer 2

As others have said, I would use CSS3 media queries to target multiple resolutions. Depending on your site / application, this may not be possible. This assumes you're going to be using the same content for all experiences, just displaying it differently based on the size of the screen (this is not always optimal for a mobile experience).

Some resources for using this technique would be:

A List Apart article on Responsive Web Design: http://www.alistapart.com/articles/responsive-web-design/

Rethinking the Mobile Web slideshare: http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu

JavaScript for enabling CSS3 media queries for browsers that do not natively support it: http://code.google.com/p/css3-mediaqueries-js/

A selection of media queries for different devices and sizes: http://stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries

Some other examples: http://www.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/

Unfortunately, there is not a WYSIWYG to do this kind of stuff -- you need the knowledge and skill to be able to implement this by hand.

Though I would suggest against them, services like Mobify exist if you're only concerned about desktop / mobile views. http://mobify.me/

Answer 3

This is a must-see presentation, which covers a shortfall of the way that many use media queries: Rethinking the Mobile Web.

In a nutshell, mobile phones that don't support media queries (and there are plenty of those) can end up with styling intended for desktop browsers. The approach recommended here, and in use by myself, starts with base styles for all and then progressively adds styles for browsers that do support media queries.

See my answer to a related question at Stack Overflow.

Answer 4

It would depend on your content but you could modularize your content.

Each content element could be displayed in a narrow module that could be displayed in three columns on a wide screen, for lower resolutions you could use less columns.

A good example of this is: http://colly.com/ There are three layout adjustments as you decrease the width of the page. Using this as a guideline for your own site you could design a each module and page layout with 3 variations to cater for each of these widths.

To implement this you could have fixed sized modules (perhaps as li's) within a container that adjusts size. You could adjust the size of the containers using jquery to detect screen width (and width change) then add / remove class. You could create variations on the elements in the container eg: ul.product_list li and ul.product_list_wide li

Answer 5

You don't need multiple "websites" for different clients (I don't think anyone does that), but you should have multiple portals for different segments of visitors, e.g: desktop/laptop, netbook/ipad/smart phones, and other mobile.

While CSS allows you to specify different stylesheets for different device types, this is problematic in practice. Many smart phones don't grab the mobile stylesheet or they use both the mobile stylesheet AND the screen stylesheet.

Secondly, your different audience segments will be looking for different information. For example, a mobile user probably won't be interested in reading long articles or viewing hi-res images or video. So a separate portal with a targeted user experience would be optimal, and that's why most popular services offer separate portals for mobile users.

Thirdly, maintainability is about organization and simplicity more than quantity. Sure, you could have a single big stylesheet using lots of cascading and browser hacks to shoehorn your main site into all clients. But that is likely to be more difficult to maintain than maintaining 2-3 simpler stylesheets each tailored to a particular class of clients.

Lastly, if your application is modularized properly using domain isolation and designed with separation of concerns, then it should be quite easy to set up new custom tailored portals for different classes of devices. If you're using an MVC pattern, then all you need to do is add new views and continue to use the same models and controllers. If you're designing an AJAX application, then you can even reuse most of the views by creating web services.

Answer 6

Only CSS will not work for that, because you can have very different layout for mobile UI and for PC/Mac. Just a little idea lies in server-side layouting. For example, you need to render some part of page (data grid, side bar, navigation bar, etc.). For example, you use ASP.NET as a server-side processor. Then in your page layout you write:

For navigation bar:

<acme:NavBar runat="server">
  <MenuItem Name="<%$Loc: News%>" />
  <MenuItem Name="<%$Loc: Products%>">
    <MenuItem Name="<%$Loc: Project1%>" />
    <MenuItem Name="<%$Loc: Project2%>" />
  </MenuItem>
  <MenuItem Name="<%$Loc: Support%>" />
  <MenuItem Name="<%$Loc: Contacts%>" />
</acme:NavBar>

For datagrid:

<acme:Grid ID="grid1" runat="server">
...
</acme:Grid>

Then in codebehind:

grid1.DataSource = dao.GetProducts(filter);
grid1.DataBind();

and so on.

Then you must write different renderers for different resolutions (mobile/etc...). * For a big resolution you render sortable headers, searchers, filters, sorters, scrollable content, JQuery plugins, etc. * For a small resolution you render just a simple html.

Hope the main idea is clear.

Answer 7

A single website for multiple clients is certainly more maintainable.

The first thing to do is to have multiple CSS files that the browser will pick up according to the media attribute:

<link rel="stylesheet" type="text/css" media="screen" href="default.css">
<link rel="stylesheet" type="text/css" media="handheld" href="handheld.css">

You can adapt the layout of elements, their size, and even hide some of them for smaller devices.

If large parts of your layout have to be stripped on small devices, it is better to remove them on the server to spare some bandwidth.

The screen resolution and window size can be determined on the client in Javascript (this is the most reliable, test screen.width / screen.height and document.body.clientWidth / document.body.clientHeight), while on the server you have mostly to rely on the HTTP_USER_AGENT header (test it here along with other headers).

Another important technique is to abandon using HTML tables for page layout in favor of floating blocks, that adapt better to different screen resolutions or window resize.

Take also care of the actual screen size, as small devices tend to have a much higher resolution (DPI, Dots Per Inch) that can make things unreadable.

Both techniques have to be combined (client and server side) to get the best results. The Responsive Web Design example is impressive but you really have to master the techniques to achieve this, and there are still limitations.

I think that this question, even if asked because of new connected mobile devices, should even be considered for computer as the user can resize the browser window.