Master Template
What’s the best width to use for a website page?
1136px
This question came about from a conversation about a presentation designed by our graphic designers with the objective of being viewed without the need for scrolling or zooming etc. Nowadays, you can and should build something responsive to fit the many varied screen widths but I have left the results of the conversation here as they’re interesting and could still yet prove useful.
When I investigated at the time one of the most popular higher resolution screen sizes is 1366px x 768px overtaking the previous format of 1024px x 768px in popularity way back in 2012.
What’s the most popular screen size?
1366px x 768px (Aspect ratio 16:9)
Note: A wide-screen HDTV has a 16:9 aspect ratio. The screen is 16 units wide for every 9 units tall. Typically the resolution of a HDTV will be 1920px x 1080px. See the common display resolutions and aspect ratios.
Why haven’t I chosen the resolution of 1366px?
Courtesy to our viewers on slightly lower resolution monitors. Less than 10% of users and diminishing view websites on 1024 x 768 monitors. (As of 2013 10% equates to approx. 240 million internet users). My chosen width of 1136px is not so very far from 1024px, a mere 112px and so will not impact too drastically on our lower resolution viewers. But, there’s another reason for a website designer to design their site to the size of 1136px and that is having your site look good on the most popular smart devices. iPhones and iPads etc. (look good? these notes before the widespread use of Retina graphics. This does not effect my screen size choice but it does effect the delivery of the graphics contained within the project).
Note: The Apple iPhone 5 has a 16:9 aspect ratio. 1136px x 640px. Apple iPhone spec.
Mobile vs Desktop browsing
It’s important because smart devices in 2012 conservatively accounted for approx. 10% of all pageviews. This number increasing rapidly and widely predicted to overtake desktop browsing in 2015. See mashable post of Mobile web will rule!
Although we’re talking about websites here it’s not uncommon to be asked to convert a website into a smart phone App. or mobile website. The iPhone 5 for example has a screen resolution of 1136px x 640px pixel resolution at 326 ppi. If your website is built at this size, any graphics you may have used will already be sized to suit your new build. You may even use your existing website, streamline it, and it’s ready for action as a mobile format.
You can expect this standardised size of 1136px to increase, in time, as people renew their equipment for higher specification monitors and smart devices. But, for now, you’ll cover most bases with this width.
NB: My preference is to specify in the CSS for websites to keep the vertical scroll bars on. By doing this you’ll avoid "screen jump" the unnerving approx. 20px horizontal jump as content re-positions itself on the screen when moving between pages that have a scroll bar and those that don’t.
Specified below in the last piece of code ’overflow-y:scroll;’.
/* CSS Document */
* {margin:0;padding:0;}
/* must declare 0 margins on everything, also for main layout components use padding, not
vertical margins (top and bottom) to add spacing, else those margins get added to total height
and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */
html {height: 100%; background-color:#700; overflow-y:scroll;} /* OVERFLOW Y TO KEEP THE VERTICAL SCROLL BAR AT ALL TIMES TO PREVENT SCREEN JUMP BETWEEN PAGES. */
What’s the best height to use for a website page?
648px
Again, following the brief of the design dept. and having to come up with a size that would allow a design to be viewed on the most screens without the need for scrolling and zooming etc. This allows for 99% of users on screens with a depth of 768px and above whilst compensating for their screen furniture and browser search bar etc.
Dividing beautifully
ASIDE: If your design has no margins and is centred. Using our 1136px layouts then your content will run right to the edge of many smart device screens. A good design rule would be to include margins within this width so as to avoid text butting up to the edge of the screen.
You may wish to work out your own website page grid designs.
Please share if you find the content useful - thank you
Contact
|
FORUM |
Have a comment or something to say? |
