Jump to content
EGOL

What Width Are You Designing For Now ?

Recommended Posts

A decade ago lots of people were making their websites to fit a 640-pixel-wide monitor, then an 800 monitor, then a 1024....

 

.... and now with mobile we are being squeezed down to the microformat of 300 wide.

 

They call that progress???

 

Lots of people are accomplishing this with designs that automatically resize to fit the device they are being viewed upon.

 

How are you handling this? If you have not redesigned your site in the past couple of years you probably have lots of people looking at your site with devices that are smaller than you expected.

 

And, with lots of people using enormously wide monitors... what is the upper width that you are assuming? And, is that important?

 

I don't know the answers to this stuff... but it sure looks like a briar patch.

Share this post


Link to post
Share on other sites

My page templates are and have been for years 1200-1500px page max-width. And adjust via media queries (responsive design) to accommodate smaller screen sizes.
Note: there is also some (still testing) adjustment to accommodate device resolution differences within similar screen sizes.

I don't worry about 'huge' desktop monitor size as (1) not all maximise browser windows, (2) many browser viewports are filled with top and sidebars, and (3) I don't want the text width to become a poor reading experience by being too wide.

Edited by iamlost
  • Like 1

Share this post


Link to post
Share on other sites

1366x768 for consumer, but I make it all liquid

  • Like 1

Share this post


Link to post
Share on other sites
Guest joedolson

I never do anything wider than 1000 pix, because I personally find anything wider than that to be clumsy and aesthetically unappealing; everything smaller handled via media queries.

  • Like 1

Share this post


Link to post
Share on other sites

 

I never do anything wider than 1000 pix

Hmmm That's not going to be popular. Mea Culpa. Neither do I.

Share this post


Link to post
Share on other sites

I'm in the 1000 club.

Share this post


Link to post
Share on other sites

I've been at 960 to 980.. thanks for all of the replies. Just curious to see what others are doing.

 

Still interested in hearing from more members if you want to share your target width or design philosophy.

Share this post


Link to post
Share on other sites

970 usually, so the average of yours! I'm thinking about responsive design but I'm not sure about the negative UX in some cases - for example when a page is slow to load you may start reading the content only for the page to reflow, so you lose your position.

Share this post


Link to post
Share on other sites

To expand a bit about why I exceed your 1000px limit...

* I build from content width.

* that width is calculated by:

---site font size: I use 16px = 1em.

---the optimal reading width derived from testing: 50 to 60em.

This means that at the low end content width is 800px (50*16), at the top end 960px (60*16)

Then I add one or more sidebars/columns whose widths vary by their content requirements, plus margins/padding.

 

Note, also that 1200-1500px is the max-width allowed. If the desktop viewport is constrained it sizes down. Plus of course once media queries are invoked things change quite a bit, gotta love the power of CSS.

Share this post


Link to post
Share on other sites

My new site is 960ish to fit the aspect ratio of the wider laptops and wider monitors.
I make sure everything important appears above the fold and to the left for those with smaller monitors.

The people with narrow monitors are probably used to scrolling as more and more sites edge toward 1000 but I hope that the mere 200px difference will not cause the site to be hard to use.

 

One of the main reason I am currently re-designing my most important site using WordPress is to take advantage of plugins that offer a better version to those who need it. As a matter of fact I have a smart phone on the way just for checking the site.

 

One thing though, I have noticed that a few plugins offer the visitor a menu first with no visual appeal If I am going mobile to say ebay, I am accustomed to the site and I already know where I want to go. I only need the navigation at first look. But my products are visual and that is the biggest part of the appeal. The product probably should be one of the first things the visitors see so II may have to look further and work on this.

 

There is no doubt that many people access the web using mobile devices and I want to be sure to make a best first impression, otherwise they may be lost forever.

Share this post


Link to post
Share on other sites

EGOL previous kick at this can: What Width Are You Designing For Now ?, February 2013.

At which time I commented:

My page templates are and have been for years 1200-1500px page max-width. And adjust via media queries (responsive design) to accommodate smaller screen sizes.
Note: there is also some (still testing) adjustment to accommodate device resolution differences within similar screen sizes.

I don't worry about 'huge' desktop monitor size as (1) not all maximise browser windows, (2) many browser viewports are filled with top and sidebars, and (3) I don't want the text width to become a poor reading experience by being too wide.

....

To expand a bit about why I exceed your 1000px limit...
* I build from content width.
* that width is calculated by:
---site font size: I use 16px = 1em.
---the optimal reading width derived from testing: 50 to 60em.
This means that at the low end content width is 800px (50*16), at the top end 960px (60*16)
Then I add one or more sidebars/columns whose widths vary by their content requirements, plus margins/padding.

Note, also that 1200-1500px is the max-width allowed. If the desktop viewport is constrained it sizes down. Plus of course once media queries are invoked things change quite a bit, gotta love the power of CSS.


I have actually come down in max size as I've since done an entire layout redesign across all devices in my change to contextual delivery. It's now 1000-1200px max-width on desktop as I switched since then to a main with a right sidebar layout. However, I'm currently playing with several 'future proof' (ha!) designs that play off the viewport (see further below).

First back to some basics:
Few webdevs use points as a measure, most use PX's (pixels) in whole or in part because while it is considered a relative unit (contrasted with points, inch, mm, cm et al) it is also absolute in terms of a given screen resolution; it can vary greatly between screens but remains consistent for each.

EM's (in CSS) are derived from user defined DPI, the particular font specified, and the current element font-size. This means that it varies based on the size of the parent; each element may be different. REM's (root em's) are less variable as each varies as specified only from the root, not it's parent.

There can be a problem with setting the document HTML font-size in px's - it can, depending on browser, over ride user settings and/or zoom to the detriment of accessibility. My long standing practice is to set the base font-size via percentage. The standard OS/browser default is 16px (medium). Thus setting font-size: 100% is - usually - setting it to 16px. Regardless, it sets it to the system default from which the user may customise.

Note: there are a lot of CSS length units.
The <length> CSS data type, web docs, Mozilla Developer Network.
How many were new to you?

I asked because... just to make things more complex fun I should mention vh and vw CSS3 units. Why? Because they are quite likely the way forward.
* vw: viewport width
* vh: viewport height
* vmin: the smaller value of the viewport’s width and height
* vmax: the larger value of the viewport’s width and height
Note: IE 11 and Edge do not support vmax.
Note: if you have a large user base on older browsers aka broadly before this year's version(s) this is strictly a progressive add-on to existing.

And you should also get comfortable with the CSS3 calc() function. Ha!

Rather than my rambling on I recommend reading Responsive Font Size And Fluid Typography With vh And vw Units by Michael Riethmuller, Smashing Magazine, 10-May-2016.

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


×