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?

  • 3
    You will probably find "Responsive Web Design" worth a read. Just FYI.
    – jensgram
    Nov 12, 2010 at 14:14
  • 4
    That's a feature of HTML, CSS and JavaScript. No specific software will do that for you.
    – DA01
    Nov 12, 2010 at 15:22
  • Are you using a server side coding framework (RoR, Asp.net, Php, etc...)?
    – Sruly
    Nov 14, 2010 at 12:10
  • 3
    As this is more an implementation than a design question, perhaps you should ask on StackOverflow and Doctype - they may be able to help you better there.
    – Rahul
    Nov 19, 2010 at 11:39
  • 1
    Twitter Bootstrap. Easy as heck and free. Jun 25, 2012 at 16:50

7 Answers 7


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.

  • Why is this not what you want?
    – ThomPete
    Nov 19, 2010 at 11:07
  • @Bernhard Interesting. It would be a pretty annoying side effect of the design if that were the case. Perhaps you should see what Jeff and co. say?
    – Rahul
    Nov 19, 2010 at 12:31
  • Whilst I might not like DreamWeaver, this is the only answer so far that is directed at my question - asking for a tool or editor that does this rather than require me to do it manually. Most other answers are focusing on the implementation details rather than what tools will do that implementation for me - making it more manageable. It would appear from the answers here that DreamWeaver is the only tool so far that supports media queries. It suggests there is a market for a design tool that would let one select the target device (iPhone4, 800x600, etc) and edit css for each with a preview. Nov 25, 2010 at 7:52

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.

  • While I agree that the media attribute is optimal for this, I don't think it's a good idea to worry about redundant markup. See, after GZip compression you'll spare very little bytes of HTML, which surely won't matter at all and will be yet another thing to worry. Sites that don't get millions of users per day shouldn't worry about this (as there's far more pressing issues that require developer attention). Of course I believe anything that's almost-free is a good idea, like PNG/JPEG/GIF optimization (since it's easy to implement a script that automatically does this, vs saving markup bytes) Nov 20, 2010 at 9:09
  • This is a good answer on how to do it, so +1. But not on what applications there are that help us manage the different media types, screen sizes, and associcated CSS. Nov 25, 2010 at 12:01

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.

  • While true, one needs to keep in mind the opposite issue...often on newer iPhone/Android phones, people often desire the full featured 'regular' web site over the 'mobile' version. (Simply solution is to make sure users can readily switch between them)
    – DA01
    Nov 24, 2010 at 13:44
  • Valid point, but the "mobile" version doesn't necessarily have to be less-featured - just more suitable for a small screen. Unless mobile users enjoy zooming in and out and panning, they won't be missing anything as long as the designer uses media queries to get the best out of each screen size range. Nov 24, 2010 at 15:08
  • This is a good answer concerning the implementation of single-sites, so +1. But it doesn't answer my question as to what applications there are that help us manage the different media types, screen sizes, and associcated CSS. Nov 25, 2010 at 12:03
  • @Bernhard Hofmann True. I'd recommend a text editor or IDE. :) Nov 25, 2010 at 14:03

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 Name="<%$Loc: Support%>" />
  <MenuItem Name="<%$Loc: Contacts%>" />

For datagrid:

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

Then in codebehind:

grid1.DataSource = dao.GetProducts(filter);

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.


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.


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


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/

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.