Results 1 to 6 of 6

Thread: Recommended html page width???????????????????

  1. #1
    Join Date
    May 2006

    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 09:14 AM. Reason: clarification

  2. #2
    Join Date
    May 2005
    Gold Coast (MS)
    Should help...

    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/
    Mobile Website:

    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/

  3. #3
    Join Date
    Mar 2012
    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.

  4. #4
    Join Date
    May 2006
    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.

  5. #5
    Join Date
    May 2005
    Gold Coast (MS)
    You're very welcome. Good luck with your project.

  6. #6
    Join Date
    Feb 2005
    Indianapolis, IN
    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.


Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
HTML5 Development Center



X vBulletin 4.2.2 Debug Information

  • Page Generation 0.12951 seconds
  • Memory Usage 2,911KB
  • Queries Executed 15 (?)
More Information
Template Usage (32):
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_global_above_footer
  • (1)ad_global_below_navbar
  • (1)ad_global_header1
  • (1)ad_global_header2
  • (1)ad_navbar_below
  • (1)ad_showthread_firstpost_sig
  • (1)ad_showthread_firstpost_start
  • (1)ad_thread_first_post_content
  • (1)ad_thread_last_post_content
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)headinclude_bottom
  • (6)memberaction_dropdown
  • (1)navbar
  • (4)navbar_link
  • (1)navbar_moderation
  • (1)navbar_noticebit
  • (1)navbar_tabs
  • (2)option
  • (6)postbit
  • (6)postbit_onlinestatus
  • (6)postbit_wrapper
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 

Phrase Groups Available (6):
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files (26):
  • ./showthread.php
  • ./global.php
  • ./includes/class_bootstrap.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/functions_navigation.php
  • ./includes/class_friendly_url.php
  • ./includes/class_hook.php
  • ./includes/class_bootstrap_framework.php
  • ./vb/vb.php
  • ./vb/phrase.php
  • ./includes/functions_facebook.php
  • ./includes/functions_calendar.php
  • ./includes/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_notice.php
  • ./packages/vbattach/attach.php
  • ./vb/types.php
  • ./vb/cache.php
  • ./vb/cache/db.php
  • ./vb/cache/observer/db.php
  • ./vb/cache/observer.php 

Hooks Called (72):
  • init_startup
  • friendlyurl_resolve_class
  • init_startup_session_setup_start
  • database_pre_fetch_array
  • database_post_fetch_array
  • init_startup_session_setup_complete
  • global_bootstrap_init_start
  • global_bootstrap_init_complete
  • cache_permissions
  • fetch_postinfo_query
  • fetch_postinfo
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • load_show_variables
  • load_forum_show_variables
  • global_state_check
  • global_bootstrap_complete
  • global_start
  • style_fetch
  • global_setup_complete
  • showthread_start
  • showthread_getinfo
  • strip_bbcode
  • friendlyurl_clean_fragment
  • friendlyurl_geturl
  • forumjump
  • cache_templates
  • cache_templates_process
  • template_register_var
  • template_render_output
  • fetch_template_start
  • fetch_template_complete
  • parse_templates
  • fetch_musername
  • notices_check_start
  • notices_noticebit
  • process_templates_complete
  • friendlyurl_redirect_canonical
  • showthread_post_start
  • showthread_query_postids
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • postbit_factory
  • postbit_display_start
  • postbit_imicons
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_display_complete
  • memberaction_dropdown
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • build_navigation_data
  • build_navigation_array
  • check_navigation_permission
  • process_navigation_links_start
  • process_navigation_links_complete
  • set_navigation_menu_element
  • build_navigation_menudata
  • build_navigation_listdata
  • build_navigation_list
  • set_navigation_tab_main
  • set_navigation_tab_fallback
  • navigation_tab_complete
  • fb_like_button
  • showthread_complete
  • page_templates