Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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?

share|improve this question
3  
You will probably find "Responsive Web Design" worth a read. Just FYI. –  jensgram Nov 12 '10 at 14:14
4  
That's a feature of HTML, CSS and JavaScript. No specific software will do that for you. –  DA01 Nov 12 '10 at 15:22
    
Are you using a server side coding framework (RoR, Asp.net, Php, etc...)? –  Sruly Nov 14 '10 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 '10 at 11:39
1  
Twitter Bootstrap. Easy as heck and free. –  JavaAndCSharp Jun 25 '12 at 16:50
show 3 more comments

7 Answers

up vote 2 down vote accepted
+50

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.

share|improve this answer
    
Now I'm left with the difficult choice of accepting this as the answer when it's not what I want, or letting my acceptance rate drop. I must stop asking for things that don't exist. I know! I'll sacrifice 50 of my precious reputation points. –  Bernhard Hofmann Nov 19 '10 at 10:49
    
Why is this not what you want? –  ThomPete Nov 19 '10 at 11:07
    
In addition to what ThomPete said, why do you care about your acceptance rate? –  Rahul Nov 19 '10 at 11:22
    
@Rahul I've found on other SE websites, that having a low acceptance rate can be a hurdle for getting answers. Some people will bother, but a lot of people won't waste their time answering a question if they think their contribution might not be chosen as the answer. So people with low acceptance rates get fewer answers and less valuable ones. It's just an observation I made - I have no actual stats to back that up. –  Bernhard Hofmann Nov 19 '10 at 11:36
    
@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 '10 at 12:31
show 2 more comments

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.

share|improve this answer
    
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) –  Camilo Martin Nov 20 '10 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. –  Bernhard Hofmann Nov 25 '10 at 12:01
add comment

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.

share|improve this answer
    
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 '10 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. –  David Oliver Nov 24 '10 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. –  Bernhard Hofmann Nov 25 '10 at 12:03
    
@Bernhard Hofmann True. I'd recommend a text editor or IDE. :) –  David Oliver Nov 25 '10 at 14:03
add comment

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.

share|improve this answer
add comment

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.

share|improve this answer
add comment

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

share|improve this answer
add comment

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/

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.