Recommended html page width???????????????????
Hello! CowGirl here!
I am designing a background website and am wondering how wide (in pixels) the fixed width pages of my website should be. Naturally, I would prefer to avoid horizontal scrolling. According to w3schools.com, in January 2013 90% of their visitors had screen resolution higher than 1024x768 pixels. Thus, in theory one can use a page width of 1100 (or even a bit more) pixels without causing any horizontal scrolling (see http://www.w3schools.com/browsers/br...ion_higher.asp).
One would think websites would happily take advantage of all this available space and design their websites accordingly. BUT a sample of popular websites shows they use flexible width pages that can go way below 1024 before they pages require horizontal scrolling (for example, no horizontal scrolling for pinterest.com until the browser window is reduced to a width of 932 pixels).
The fact that some of the popular websites are set up this way leads me to wonder if I should design my webpage so that with a 933 pixel width browser window there is no horizontal scrolling? Or am I concerning about nothing and should I design my webpage so that any browser window with a width of 1100 pixels causes no horizontal scrolling?
I will be designing a mobile version of my website, so I think the above question only relates to desktop users of my website.
Thank you and big Hugs!!!!!
Also see http://www.w3schools.com/browsers/browsers_display.asp
Last edited by CowGirl; 05-23-2013 at 10:14 AM.
Choosing Dimensions for Your Web Page Layout:
In Search of the Holy Grail: http://www.alistapart.com/articles/holygrail/
Choosing Dimensions for Your Web Page Layout: http://www.elated.com/articles/choos...b-page-layout/
How to create flexible sites quickly using standards like CSS and XHTML: http://www.ibm.com/developerworks/web/library/wa-rapid/
Designing for the Web: Resolution and Size: http://sitepointcom.createsend4.com/...yd/birtthtw/h/
Care With Font Size: http://www.w3.org/QA/Tips/font-size
What are the best programming fonts?: http://slant.co/topics/67/~what-are-...gramming-fonts
Websites Shouldn’t Look The Same Across Different Browsers: http://www.noupe.com/design/websites...re-is-why.html
Cross-Browser CSS in Seconds with Prefixr: http://net.tutsplus.com/articles/new...-with-prefixr/
Responsive Web Design Demystified: http://www.elated.com/articles/respo...n-demystified/
Responsive Web Design: 5 Handy Tips: http://www.elated.com/articles/respo...-5-handy-tips/
It’s Not Responsive Web Building, It’s Responsive Web Design: http://www.getfinch.com/finch/entry/...ve-web-design/
Beginner’s Guide to Responsive Web Design: http://thinkvitamin.com/design/begin...ve-web-design/
What The Heck Is Responsive Web Design? (A super-impressive CSS3 presentation built on impress.js, demonstrating the basics of Responsive Web Design): http://johnpolacek.github.com/WhatTh...ressjs/#/title
Creating Responsive HTML5 Touch Interfaces: http://www.youtube.com/watch?v=lcD9CF0bxyk
Responsive Images: How they Almost Worked and What We Need: http://www.alistapart.com/articles/r...-what-we-need/
Responsive Tables: http://www.zurb.com/playground/responsive-tables
responsivepx – screen-size testing tool: http://responsivepx.com/
FitText.js plugin (FitText is a jQuery plugin that makes your font-sizes flexible, allowing headlines to automatically-expand to fit the available space): http://fittextjs.com/
Adapt.js - Adaptive CSS: http://adapt.960.gs/
320 and Up – The ‘tiny screen first’ responsive boilerplate: http://stuffandnonsense.co.uk/projects/320andup/
Responsive Navigation Patterns: http://bradfrostweb.com/blog/web/res...-nav-patterns/
5 Stunning and Usable Mobile Website Designs: http://designfestival.com/5-stunning...bsite-designs/
Learn the Mobile Web: http://learnthemobileweb.com/2009/07/mobile-meta-tags/
10 Ways the Mobile Web is Different: http://www.elated.com/articles/10-wa...-is-different/
Redesigning a Site For Mobile: What's Involved?: http://www.elated.com/articles/redes...hats-involved/
Make Your WordPress Website Mobile-Friendly in Minutes: http://designfestival.com/make-your-...ly-in-minutes/
How to Validate & Test Your Designs for the Mobile Web: http://designfestival.com/how-to-val...the-mobile-web
Web Mobile Browser Shots: https://browshot.com/
The idea of responsive screen designs is to avoid the need for separate sites for mobile devices. When hand-held devices had truly tiny screens, there was no alternative, but if you take 480px as the minimum screen width to design for, and around 900px as the maximum, you can do it with a responsive design. You could allow up to 1920px if you like, but, in my experience, it is not practical. Nor do I generally want a single window to occupy that much screen acreage, even though I have a two-screen layout, with an old 17 inch monitor adding more desktop to an 1080p main monitor.
Thank you Major Payne and jedaisoul for taking the time to read and reply to my message. Your advice is appreciated and answered my question.
You're very welcome. Good luck with your project.
As a note, the majority of the viewers on this site are using a resolution of 1280 or higher. 1366x768 is the most common individual resolution.
The suggestion of responsive designs makes more sense every day.
Users Browsing this Thread
There are currently 1 users browsing this thread. (0 members and 1 guests)