Go Back   MacRumors Forums > Special Interests > Visual Media > Web Design and Development

Reply
 
Thread Tools Search this Thread Display Modes
Old Sep 8, 2013, 09:51 AM   #1
beautifulcoder
macrumors regular
 
Join Date: Apr 2013
Location: The Republic of Texas
What is the "perfect" width for the web?

I know, this is probably beating a dead horse and downright inflammatory. But I want you know what you all think. What is it? I vote for a dynamic layout somewhere between 900px-700px. Anything more than that and you are making text too wide to read comfortably.
beautifulcoder is offline   0 Reply With Quote
Old Sep 8, 2013, 03:20 PM   #2
olup
macrumors regular
 
Join Date: Oct 2011
In times like these, there is no right width for a website anymore, although there isn't anything wrong with fixed width layouts.
You can't predict what device a user will visit your site on.
Flexible layouts with either ems or precentages are more or less the way to go.
If you use pixel based layouts, then use media queries to fix and adjust the element's width.

Also you can and definitely should use widths on text elements to ensure good readability. Eleven words per line is a good rule of thumb, it certainly depends on the languages the text is.
olup is offline   3 Reply With Quote
Old Sep 8, 2013, 11:14 PM   #3
Consultant
macrumors G5
 
Consultant's Avatar
 
Join Date: Jun 2007
Quote:
Originally Posted by beautifulcoder View Post
I know, this is probably beating a dead horse and downright inflammatory. But I want you know what you all think. What is it? I vote for a dynamic layout somewhere between 900px-700px. Anything more than that and you are making text too wide to read comfortably.
Depends on your audience. Macrumors forum seems to size between 800 and 1250.
Consultant is offline   0 Reply With Quote
Old Sep 9, 2013, 04:14 AM   #4
zioxide
macrumors 603
 
Join Date: Dec 2006
Location: Massachusetts
Quote:
Originally Posted by beautifulcoder View Post
I know, this is probably beating a dead horse and downright inflammatory. But I want you know what you all think. What is it? I vote for a dynamic layout somewhere between 900px-700px. Anything more than that and you are making text too wide to read comfortably.
You shouldn't have any set width at all.

True responsive design uses CSS media queries to make your site adapt to whatever viewport your visitor is browsing on. Make it so the content on the website fills the screen regardless of the screen size. You can use the media queries to resize objects, text, position, or change just about any element's style around all depending on the screen size.

@media (max-width: 480px) { all your styles for small (phone) screens here }

@media (min-width: 481px) and (max-width: 768px) { styles for mid sized screens/tablets }

etc etc.
zioxide is offline   1 Reply With Quote
Old Sep 9, 2013, 11:22 AM   #5
960design
macrumors 6502a
 
Join Date: Apr 2012
Location: Destin, FL
Hmmm... i like 960px wide.
Why? Because it is divisible by so many numbers.
Been using it for about 5 years now, with no problems.

Perfect, though, doubtful, you'll find a 'perfect' width, but one that will work right now. Make sure you code your site so that you can update it very easily: REM, ect.

It seems the current trend is for the intranets visitors to use 1366x768. 960 fits nicely in there with a little border on each side.

1920x1080 is climbing up fast though and 1280x1024 is holding steady ( but 960px width still looks good on those as well ) So changes maybe in our near future.
__________________
TI-99/4A, tape cassette, 12" B&W Zenith

Last edited by 960design; Sep 9, 2013 at 11:28 AM.
960design is offline   0 Reply With Quote
Old Sep 9, 2013, 04:31 PM   #6
fig
macrumors 6502a
 
Join Date: Jun 2012
Location: Houston, TX
Quote:
Originally Posted by 960design View Post
Hmmm... i like 960px wide.
I don't know why, but I feel like you're biased on this one...
__________________
figdigital | @figdigital | dribbble
fig is offline   3 Reply With Quote
Old Sep 9, 2013, 05:25 PM   #7
SrWebDeveloper
macrumors 68000
 
SrWebDeveloper's Avatar
 
Join Date: Dec 2007
Location: Alexandria, VA, USA
 
Quote:
Originally Posted by zioxide View Post
You shouldn't have any set width at all.

True responsive design uses CSS media queries to make your site adapt to whatever viewport your visitor is browsing on. Make it so the content on the website fills the screen regardless of the screen size. You can use the media queries to resize objects, text, position, or change just about any element's style around all depending on the screen size.

@media (max-width: 480px) { all your styles for small (phone) screens here }

@media (min-width: 481px) and (max-width: 768px) { styles for mid sized screens/tablets }

etc etc.

Excellent response and I concur, 100%.

Even if the layout is not intended for mobile device viewing, a liquid layout that adapts to screen width is a best practice. By no means a rule, of course. In terms of static width I find 960 to be practical, noting there is no ideal, and not just because 960design here is named that.
__________________
Jim Goldbloom
Sr. Web Developer, owner GoldTechPro, LLC
http://www.GoldTechPro.com
SrWebDeveloper is offline   1 Reply With Quote
Old Sep 10, 2013, 07:41 AM   #8
m00min
macrumors 6502
 
Join Date: Jul 2012
I build all my sites as responsive these days but I do add a max-width of 1200px (usually specified in ems) to prevent unreadable line lengths and to fix an upper limit on uploaded images.
__________________
Obligatory dick waving: 2012 i7/8GB/256SSD MBA; 2010 i7/8GB/256SSD MBP; 2006 Mac Mini; iPhone 4S; iPad 3
m00min is offline   0 Reply With Quote
Old Sep 10, 2013, 07:25 PM   #9
SrWebDeveloper
macrumors 68000
 
SrWebDeveloper's Avatar
 
Join Date: Dec 2007
Location: Alexandria, VA, USA
 
Quote:
Originally Posted by m00min View Post
I build all my sites as responsive these days but I do add a max-width of 1200px (usually specified in ems) to prevent unreadable line lengths and to fix an upper limit on uploaded images.
That's wise, as an FYI for those following -- the media queries which factor in screen resolution really are more about responsiveness (as you noted) than mobile detection, in my opinion. For developers who want more accurate mobile detection the user agent string and vendor codes are my preference noting once or twice a year these have to be updated based on market change. This is an approach preferred by some because many mobile phones are extremely high resolution these days and don't forget landscape mode. Some companies in my experience prefer mobile detection and redirection to their very highly customized mobile only site or app, but still use media queries for basic responsiveness just like you do.

NO single approach works for everyone, is the point.

BTW, I favor server side processing and caching of images based on image styles that are set to match and properly scale to the same values used in common media queries. This is far better than dynamic Javascript based DOM image resizing on the fly or creating alternate images MANUALLY or simply allowing the CSS to resize. Many popular CMS's allow use of GD or other graphics libraries to process the images server side and cache them once uploaded as part of the content submission process.

Thanks for your comment!
__________________
Jim Goldbloom
Sr. Web Developer, owner GoldTechPro, LLC
http://www.GoldTechPro.com
SrWebDeveloper is offline   0 Reply With Quote
Old Sep 11, 2013, 02:17 AM   #10
m00min
macrumors 6502
 
Join Date: Jul 2012
Quote:
Originally Posted by SrWebDeveloper View Post
That's wise, as an FYI for those following -- the media queries which factor in screen resolution really are more about responsiveness (as you noted) than mobile detection, in my opinion. For developers who want more accurate mobile detection the user agent string and vendor codes are my preference noting once or twice a year these have to be updated based on market change. This is an approach preferred by some because many mobile phones are extremely high resolution these days and don't forget landscape mode. Some companies in my experience prefer mobile detection and redirection to their very highly customized mobile only site or app, but still use media queries for basic responsiveness just like you do.

NO single approach works for everyone, is the point.

BTW, I favor server side processing and caching of images based on image styles that are set to match and properly scale to the same values used in common media queries. This is far better than dynamic Javascript based DOM image resizing on the fly or creating alternate images MANUALLY or simply allowing the CSS to resize. Many popular CMS's allow use of GD or other graphics libraries to process the images server side and cache them once uploaded as part of the content submission process.

Thanks for your comment!
I use a combination of media queries for layout styles and server side for sending more suitable image sizes and moving elements around; pushing the main menu into the page footer on feature phones, or not serving jQuery / JS to them for example.

It drives me bonkers when people think a media query is all you need for RWD. Most of the image proposals so far either rely on JS or load two images (which is worse than just sending the full sized image). RWD would be a lot easier if people didn't want images on their sites.
__________________
Obligatory dick waving: 2012 i7/8GB/256SSD MBA; 2010 i7/8GB/256SSD MBP; 2006 Mac Mini; iPhone 4S; iPad 3
m00min is offline   0 Reply With Quote
Old Sep 11, 2013, 03:30 AM   #11
Dunmail
macrumors regular
 
Join Date: Mar 2009
Location: Skipton, UK
Quote:
Originally Posted by SrWebDeveloper View Post
BTW, I favor server side processing and caching of images based on image styles that are set to match and properly scale to the same values used in common media queries. This is far better than dynamic Javascript based DOM image resizing on the fly or creating alternate images MANUALLY or simply allowing the CSS to resize. Many popular CMS's allow use of GD or other graphics libraries to process the images server side and cache them once uploaded as part of the content submission process.
Would you care to expand on this? I can't quite get the process you are describing in my head. I have media queries inside a single stylesheet rather than several stylesheets served according to a media query on the link element.
Dunmail is offline   0 Reply With Quote
Old Sep 11, 2013, 09:15 AM   #12
SrWebDeveloper
macrumors 68000
 
SrWebDeveloper's Avatar
 
Join Date: Dec 2007
Location: Alexandria, VA, USA
 
Quote:
Originally Posted by Dunmail View Post
Would you care to expand on this? I can't quite get the process you are describing in my head. I have media queries inside a single stylesheet rather than several stylesheets served according to a media query on the link element.
Most CMS's have ways to upload images into content or a file area, including defining and selecting which image style to use which converts the image to a certain size. For example, thumbnail or cropped or scaled to whatever dimensions. Setup an image style matched to each media query in the CSS. When the content is submitted, the image is processed server side and variations of it based on all defined media types are created once and stored in a well organized cacheable file image area. The correct image is then used in the final rendered HTML based on media query at runtime. Modules or extensions are developed to handle this, of course.
__________________
Jim Goldbloom
Sr. Web Developer, owner GoldTechPro, LLC
http://www.GoldTechPro.com
SrWebDeveloper is offline   0 Reply With Quote
Old Sep 12, 2013, 03:20 AM   #13
Dunmail
macrumors regular
 
Join Date: Mar 2009
Location: Skipton, UK
I understand the creating and caching of multiple versions of the master image but ...

Quote:
Originally Posted by SrWebDeveloper View Post
The correct image is then used in the final rendered HTML based on media query at runtime. Modules or extensions are developed to handle this, of course.
It's this bit that confused me, and still does, if I've a single stylesheet that is passed to the browser then without something in the browser (usually Javascript) sending viewport information back then the server has no way of determining which media query is in effect when the CSS is parsed. Also there would need to be some way to react to the user resizing their browser.
Dunmail is offline   0 Reply With Quote
Old Sep 12, 2013, 06:11 AM   #14
SrWebDeveloper
macrumors 68000
 
SrWebDeveloper's Avatar
 
Join Date: Dec 2007
Location: Alexandria, VA, USA
 
Quote:
Originally Posted by Dunmail View Post
I understand the creating and caching of multiple versions of the master image but ...



It's this bit that confused me, and still does, if I've a single stylesheet that is passed to the browser then without something in the browser (usually Javascript) sending viewport information back then the server has no way of determining which media query is in effect when the CSS is parsed. Also there would need to be some way to react to the user resizing their browser.
CSS3 media queries do not have to be Javascript (typically used for orientation change, resizing no longer necessary for this method), but it does not matter if it's all generated dynamically.

The module/plugin handles the setup of media query definitions and creates the image selectors mapped to each query:

1) Using a simple naming convention for image names or paths
2) Or, by creating and referencing a sub-theme or sub-folder named to match the media query

As CSS cascades one can still apply custom styles to images as they see fit but leave the stylesheet media query and image path/location or naming to the plugin. Quality CMS's will then minify and compress all the CSS to reduce bandwidth.
__________________
Jim Goldbloom
Sr. Web Developer, owner GoldTechPro, LLC
http://www.GoldTechPro.com
SrWebDeveloper is offline   0 Reply With Quote
Old Sep 12, 2013, 07:50 PM   #15
ezekielrage_99
macrumors 68040
 
ezekielrage_99's Avatar
 
Join Date: Oct 2005
960GS without a doubt is the best to design to for ensuring compatibility across devices and platforms.

978GS is also common while I've seen a significant shift to the responsive grid during the last 18 months.
__________________
"There is a world elsewhere" - Coriolanus
ezekielrage_99 is offline   0 Reply With Quote
Old Sep 13, 2013, 03:14 AM   #16
Dunmail
macrumors regular
 
Join Date: Mar 2009
Location: Skipton, UK
Quote:
Originally Posted by SrWebDeveloper View Post
CSS3 media queries do not have to be Javascript (typically used for orientation change, resizing no longer necessary for this method), but it does not matter if it's all generated dynamically.

The module/plugin handles the setup of media query definitions and creates the image selectors mapped to each query:

1) Using a simple naming convention for image names or paths
2) Or, by creating and referencing a sub-theme or sub-folder named to match the media query

As CSS cascades one can still apply custom styles to images as they see fit but leave the stylesheet media query and image path/location or naming to the plugin. Quality CMS's will then minify and compress all the CSS to reduce bandwidth.
I probably didn't explain my lack of understanding particularly well

The browser has the information about viewport size etc. How does this information get back to the server so that it can serve up the correct images? HTTP headers don't contain this info, there has to be something on top of the standard protocols to do this. UA sniffing only gets you so far.

A search for "rwd images" comes up with quite a few solutions including the proposed picture element but most (all?) require something to send that information back - Adaptive Images seems to be the best regarded of these. Quite a few also require two HTTP requests, one for the default image then one to serve up the optimum version.

If I have a stylesheet containing my media queries and linked like this:

PHP Code:
<link rel="stylesheet" type="text/css" href='style/style.css' media="screen" 
Containing something like:

PHP Code:
@media (max-width500px) {
  
html {
    
background-imageimages/width-narrow.png;
  }
}
@
media (min-width501px) and (max-width640px) {
  
html {
    
background-imageimages/width-slim.png;
  }
}
etc 
Since the stylesheet gets parsed before most of the rest of the page it would mean that the server monitors the requests and then serves up appropriate images depending on whether width-narrow, width-slim, etc are requested. It does mean that the server has to retain state for each connection though, probably through sessions.

Is this what you mean? If it isn't then I still can't see how the parts of the system link up.
Dunmail is offline   0 Reply With Quote
Old Sep 13, 2013, 03:27 AM   #17
m00min
macrumors 6502
 
Join Date: Jul 2012
Quote:
Originally Posted by ezekielrage_99 View Post
960GS without a doubt is the best to design to for ensuring compatibility across devices and platforms.

978GS is also common while I've seen a significant shift to the responsive grid during the last 18 months.
You should have qualified that statement with "desktop devices and platforms" as it clearly ISN'T the best for mobile devices.
__________________
Obligatory dick waving: 2012 i7/8GB/256SSD MBA; 2010 i7/8GB/256SSD MBP; 2006 Mac Mini; iPhone 4S; iPad 3
m00min is offline   0 Reply With Quote
Old Sep 13, 2013, 05:59 AM   #18
SrWebDeveloper
macrumors 68000
 
SrWebDeveloper's Avatar
 
Join Date: Dec 2007
Location: Alexandria, VA, USA
 
Quote:
Originally Posted by Dunmail View Post
I probably didn't explain my lack of understanding particularly well The browser has the information about viewport size etc. How does this information get back to the server so that it can serve up the correct images?
All the CSS3 related to media queries is generated dynamically as a stylesheet by the module and exported to your CSS folder, similar to how you can use PHP to create Javascript. , i.e.:

@media only screen and (max-device-width: 480px) {

}

The you can edit it as you see fit. But how did it get there and why 480? It's all done via the module setup.

Your CMS likely already has image styles, i.e. thumbnails on uploaded images. Just create other styles in the same way using the module setup for various media queries (i.e. above is "Max480" which scales images to 480px wide) and the CMS handles the image insertion automatically by saving a 480xwhatever image in a sub-folder in your file or CDN called "Max480" for example. It all works *together* with the module generating the basic images and preliminary CSS, not you.

End result: A fully mobile site with any media queries you want, images automatically scaled to match each query and cached in an image folder for maximum performance.

I am not going to go into the actual coding as to how to accomplish this and which CMS's allow this -- this is why module developers like me make their money! But do you get the basic concept now? If not, I tried!
__________________
Jim Goldbloom
Sr. Web Developer, owner GoldTechPro, LLC
http://www.GoldTechPro.com

Last edited by SrWebDeveloper; Sep 13, 2013 at 06:05 AM. Reason: added some CSS media query example style to demonstrate the principle
SrWebDeveloper is offline   0 Reply With Quote
Old Sep 13, 2013, 07:00 AM   #19
Dunmail
macrumors regular
 
Join Date: Mar 2009
Location: Skipton, UK
Thanks for replying Jim (I realise it's early morning in your part of the world )

I get the CMS/server side of things: create breakpoints in a config file; run the module; etc. It's how the browser passes the server the requisite info that I can't see with this setup.

As far as I'm aware you can't specify media queries on the img element to pull in the appropriate file (this is what the proposed picture element will do) but you can specify a set of background-images for an element only one of which will apply at any given time through the media queries.

Code:
<img src='foo/bar.jpg'>
Will always show 'foo/bar.jpg', (this is the case I'm interested in and can't see how auto generated server side content gets to the browser) whereas:

Code:
<div id='funny-img'</div>
And auto generated CSS like
Code:
@media only screen and (max-width: 480px) {
   background-image: 'foo/bar-mobile.jpg';
}
@media only screen and (min-width: 481px) and (max-width: 900pc){
  background-image: 'foo/bar-tablet.jpg';
}
Would be able to display the appropriate image. I do this for some of my menus.

Chris Coyier's blog post describes it better - http://css-tricks.com/on-responsive-images/

Is this second scenario what you are describing?

Last edited by Dunmail; Sep 13, 2013 at 07:03 AM. Reason: Added link to blog posting.
Dunmail is offline   0 Reply With Quote
Old Sep 13, 2013, 04:35 PM   #20
SrWebDeveloper
macrumors 68000
 
SrWebDeveloper's Avatar
 
Join Date: Dec 2007
Location: Alexandria, VA, USA
 
Quote:
Originally Posted by Dunmail View Post
It's how the browser passes the server the requisite info that I can't see with this setup.
Noting the all important disclaimer that no single method is perfect, I can give away how this can be done one way, entirely server side:

WURFL. it uses the user agent string to query a database storing resolution data for known mobile devices, and it's updated often. Probably as accurate as you can get server side without the help of a client-side script/app or the popular CSS3 media queries we've both mentioned in this thread.

I am sure you can imagine the rest once a device and its resolution is detected, how dynamic things can be with little concern by a content provider. With that thought in mind, I bow out of this conversation so you don't wrangle any more trade secrets from me! I'm worse than Edward Snowden. JK

BTW, the link you provided are great ideas for marking up media queries in numerous ways, but of course let's see what is decided upon by the governing body (W3C) and which browsers will support it. That's all still part of CSS3 working draft, mostly. We all suffer until then with no viable working standards.
__________________
Jim Goldbloom
Sr. Web Developer, owner GoldTechPro, LLC
http://www.GoldTechPro.com
SrWebDeveloper is offline   0 Reply With Quote
Old Sep 13, 2013, 05:55 PM   #21
Dunmail
macrumors regular
 
Join Date: Mar 2009
Location: Skipton, UK
Ta for that.

I'll leave you with your trade secrets

I had thought of using a php include to write out an appropriate (for now) block of HTML for responsive images, then when the W3C get their act together and decide on which method they are going to pursue it's just a case of rewriting the include.
Dunmail is offline   0 Reply With Quote
Old Sep 13, 2013, 06:54 PM   #22
m00min
macrumors 6502
 
Join Date: Jul 2012
Quote:
Originally Posted by Dunmail View Post
Ta for that.

I'll leave you with your trade secrets

I had thought of using a php include to write out an appropriate (for now) block of HTML for responsive images, then when the W3C get their act together and decide on which method they are going to pursue it's just a case of rewriting the include.
When I build WordPress sites I use a combination of an .htaccess file, a small script and a cookie set to the current screen size. Using this I don't serve any images wider than the screen to a user, and the WordPress editor doesn't have to worry about using the right sized image for the job.
__________________
Obligatory dick waving: 2012 i7/8GB/256SSD MBA; 2010 i7/8GB/256SSD MBP; 2006 Mac Mini; iPhone 4S; iPad 3
m00min is offline   0 Reply With Quote
Old Sep 19, 2013, 02:58 PM   #23
HarryPot
macrumors 6502a
 
Join Date: Sep 2009
I personally dislike responsive designs.

I like seeing the same wether I'm on my iPhone or my Macbook Pro or a 27" iMac.

I think Apple has nailed it. The same for everything. And as someone above said, 960px seems about the perfect width.
HarryPot is offline   0 Reply With Quote
Old Sep 20, 2013, 04:18 AM   #24
m00min
macrumors 6502
 
Join Date: Jul 2012
Quote:
Originally Posted by HarryPot View Post
I personally dislike responsive designs.

I like seeing the same wether I'm on my iPhone or my Macbook Pro or a 27" iMac.

I think Apple has nailed it. The same for everything. And as someone above said, 960px seems about the perfect width.
You like not being able to read Apple's website on your phone? With its too long line lengths it's an incredibly frustrating experience.

I've always thought it odd that a company responsible for one of the most popular mobile devices has a website that utterly sucks when viewed from said device.
__________________
Obligatory dick waving: 2012 i7/8GB/256SSD MBA; 2010 i7/8GB/256SSD MBP; 2006 Mac Mini; iPhone 4S; iPad 3
m00min is offline   0 Reply With Quote
Old Sep 20, 2013, 10:36 AM   #25
HarryPot
macrumors 6502a
 
Join Date: Sep 2009
Quote:
Originally Posted by m00min View Post
You like not being able to read Apple's website on your phone? With its too long line lengths it's an incredibly frustrating experience.

I've always thought it odd that a company responsible for one of the most popular mobile devices has a website that utterly sucks when viewed from said device.
I like that I see the same I see when I am at my Mac or at my iPhone.

When there is a mobile version, things are always different and "dumbed" down, IMO. Zooming in and moving around isn't that bad.
HarryPot is offline   0 Reply With Quote

Reply
MacRumors Forums > Special Interests > Visual Media > Web Design and Development

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Similar Threads
thread Thread Starter Forum Replies Last Post
Macbook Pro 13" Retina - Screen Flickering (Not an "I need a perfect screen" thread) laercioag MacBook Pro 2 Nov 25, 2013 01:18 PM
Post your "perfect" ip5 setup after jb, if you think you've found it.. CiccioAtSea Jailbreaks and iOS Hacks 12 Mar 9, 2013 02:53 PM
iPhone "5" Width Bigsk8r iPhone 41 Aug 15, 2012 09:17 PM
Adjusting OS X's "Save As" Window Sidebar Width Let's Sekuhara! Mac Programming 1 May 31, 2012 07:29 AM

Forum Jump

All times are GMT -5. The time now is 12:12 AM.

Mac Rumors | Mac | iPhone | iPhone Game Reviews | iPhone Apps

Mobile Version | Fixed | Fluid | Fluid HD
Copyright 2002-2013, MacRumors.com, LLC