How wide to make a website in pixels?

Haven't made a website in a WHILE, and I realize the game has changed. How many pixels wide are people designing at these days, as a rule of thumb?

Hi,
I remember an answer of Nancy O. which I copied into my own reference book:
Depends on your target audience.
320px wide for smartphones (portrait)
480px wide for smartphones (landscape)
500-770px wide for tablets
990-1280px wide for laptops
1000-1600px wide for desktops
Increasingly, modern web developers are using Media Queries and external stylesheets to cater to various device widths. You can see a demo on this page (resize your viewport to 480px): http://alt-web.com/TEMPLATES/CSS-centered-round-boxes.shtml
On the other hand, as a rule, you should choose a page width that is comfortably viewed by the majority of your site visitors without having to use the horizontal scrollbar. Please have a look here > Google labs - Browser Size:  http://browsersize.googlelabs.com/
Hans-Günter

Similar Messages

  • How do I make a website in three languages?

    how do I make a website in three languages?

    In this example, it's 2 language:
    Accueil | Home | Atelier de Pneus Réal Chicoine
    You just create a «master home page» and visitors select the right language.
    Of course you have to make the three version, but maybe it will be more accurate ...

  • How hard to make a website like this one ?

    Hi, I hope I don't stress people with my status, but I'm a
    complete newbie with desire to learn. I just figured out we have
    Dreamweaver at school in the Mac studio, adobe version if I recall
    correctly and I wanted to make a band website with it, but couldn't
    understand where to start.
    So first, since I don't want to hire anybody to do it for me,
    I would like to know how hard it would be to make a website like
    this one :
    http://franzferdinand.co.uk/
    In my logic, the first step would be to create a background
    image with the menu drawn in it then add buttons to them to
    navigate. I would then add the content boxes with scroll bars using
    the draw div function.
    My second question, how do I go about learning this software
    ? Are courses given somewhere ?
    Thanks, Francis.

    > So first, since I don't want to hire anybody to do it
    for me, I would like
    > to
    > know how hard it would be to make a website like this
    one :
    >
    http://franzferdinand.co.uk/
    If you know nothing of web design and development, it's going
    to be hard.
    Not that you can't do it. It's just going to take you a lot
    of time and
    effort to get up to speed on things.
    > In my logic, the first step would be to create a
    background image with the
    > menu drawn in it then add buttons to them to navigate. I
    would then add
    > the
    > content boxes with scroll bars using the draw div
    function.
    That isn't how that site was built nor the best way to to it.
    The site in
    question is fairly basic HTML and then styled with a lot of
    well put
    together CSS.
    > My second question, how do I go about learning this
    software ? Are courses
    > given somewhere ?
    Don't learn Dreamweaver. Instead, learn HTML, CSS,
    Javascript, etc. Getting
    a basic understanding of HTML and CSS will then allow you to
    figure out
    Dreamweaver fairly intuitively, plus you'll have a MUCH
    better framework of
    understanding to work from.
    And feel free to ask questions in here!
    -Darrel

  • How can I make a website I created in dreamweaver adjust according to the zoom?

    Ok so I made a website and its fine but at the top I put an image of my logo and the name of my company (combined into 1 picture). And in this picture, whenever I change the zoom in my web browser or look at it from a computer with a different resolution, it changes size in a way that is disproportional with the content of the site. The website is http://hes.us.com  On dreamweaver I made the picture size even with the content of the site but on the web browser it changes wierd. Any help I can get would be great. And if possible, give detail because i'm a beginner in web design. Like if you give me code, where would I put the code? Details like that. Thanks

    And in this picture, whenever I change the zoom in my web browser or look at it from a computer with a different resolution, it changes size
    Resolution or zoom changes have no effect at all on the rendering of your page or its contents.  A given image/page will look identical on any resolution as long as you keep the browser viewport width the same pixel size.
    Change this -
    .container {
        width: 79.2%;
        max-width: 1260px;/* a max-width may be desirable to keep this layout from getting too wide on a large monitor. This keeps line length more readable. IE6 does not respect this declaration. */
        min-width: 780px;/* a min-width may be desirable to keep this layout from getting too narrow. This keeps line length more readable in the side columns. IE6 does not respect this declaration. */
        background: #FFF;
        margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout. It is not needed if you set the .container's width to 100%. */
    to this -
    .container {
        width: 79.2%;
        max-width: 1260px;/* a max-width may be desirable to keep this layout from getting too wide on a large monitor. This keeps line length more readable. IE6 does not respect this declaration. */
        min-width: 797px;/* a min-width may be desirable to keep this layout from getting too narrow. This keeps line length more readable in the side columns. IE6 does not respect this declaration. */
        background: #FFF;
        margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout. It is not needed if you set the .container's width to 100%. */
    Change this -
    .header {
        background-color: #2D3186;
    to this -
    .header {
    text-align:center;
    Is that more like what you are looking for?

  • How can I make my website a nornal size again (it is narrow and small)?

    Hi Thank you for helping me.
    My website on Firefox changed from normal size to being small and narrow - you can barley read the copy.
    The same website is normal size on Safari. It has been stuck like this for over a year. Do you know how to make it a normal size again?
    www.celebratespirit.com
    Thank you
    Penelope

    hello Penelope, try to press command+0 ('zero') while you're on the page in order to reset the zoom level or in case this doesn't work also go through the other common troubleshooting steps at [[Websites look wrong or appear differently than they should]].

  • How do I make my website fit in all size browser windows?

    Hi there,
    I should start off by saying that I am very new to web design, and have very limited knowledge of CSS and HTML.  I understand what they are and the nature of what they do, I'm just not code savvy. 
    Now that that's out of the way, I've been designing/attempting to build a website using Dreamweaver.  I have all of the components and layout that I want designed and ready to go, but I desperately need help with translating that into Dreamweaver.  I've been researching information all over the web, but with one person suggesting one thing and another suggesting something completely different I'm afraid my brain is about to melt.
    Here's what I've done so far:
    Because I want everything fully customized and to use a less common font style, I saved everything from the graphics, photos, and links as .png files.  I then inserted each of those images into an AP Div Tag in Dreamweaver and arranged them appropriately.  That's absolutely all I've done.  It works great, except I have no idea how to configure everything so the site layout shows up centered in any size browser window, instead of sitting awkwardly in the corner.
    Here's a link to what currently exists: http://ikikatawares.com
    I've read dozens of articles and forum responses about building tables, but I'd like to avoid that since to me they seem clunky and kind of a hassle to deal with.  Can anyone please help me?  Thanks.
    Beth

    You need to put only the bold part into your code.
    Immediately after your starting <body> tag add in
    <div id="wrapper">
    and immediately before your ending </body> tag add in
    </div>
    Then at the end of your css, you currently have...
    #apDiv10 .navBarLinks .navBarLinks {
    font-weight: bold;
    Change that to...
    #apDiv10 .navBarLinks .navBarLinks {
    font-weight: bold;
    #wrapper {
         position:relative;
         width:1005px;
         margin:0 auto;

  • How do I make my website's menu sidebar fill up the entire side area?

    This is my website http://www.sabertoothedchicken.com/
    Notice how the menu sidebar only fills the tiny area surrounding the  menu text? Yeah, I don't like that. I want it to fill up the entire side  area (apart from where the headbar and footbar are), like they've got  on a lot of other sites I've seen (Examples: http://en.wikipedia.org/wiki/Main_Page http://www.deviantart.com/ ). How do I do that?

    On second thought, I think you should visit here
    http://www.w3schools.com/
    You need to get some basic html/css skills.
    Gary

  • How can i make my website the default so i can start Java web client?

    I have tried he fix on the top of the page for terminal to fix problem but it creates a second website and doesn't work anyway. Does anybody know how to fix this so i can use the java web client. At the moment i keep getting page not found

    Try disabling any other websites you've created on the same IP that are on port 80.
    ~D

  • How can I make a website have a different template

    I have a website that I have messed up, I have my main pages and then several hundred pages connected to them. Is there a way that I can make a template for these several hundred pages and leave these main pages the same. I have 1 template for everything now but need to move to a 2 template system for my website?

    Ideally, you would add optional regions to your main Template.dwt for things that will appear on some but not all pages.  Using parameters, you can to elect to show or hide these regions where desired.
    Dreamweaver Help | Using optional regions in templates
    Nancy O.

  • Dreamweaver CS4 how do I make a website adjust to browser window Size

    I know there is a solution to this but not sure how to find it.
    I have created my website and have a "wrapper" in my css
    I would like the whole site to automatically adjust in conjunction to the size the browser window is , larger or smaller etc.
    How do I write the code and where do I place it?
    Thanks
    Kathryn

    Add a percentage width to your Wrapper Division's CSS code.  100% fills the viewport.
    #wrapper {
    width: 80%;  
    margin: 0 auto;  /**centered on screen**/
    See also min-and max-widths to limit how much the page can be re-sized.
    http://www.quirksmode.org/css/width.html
    Nancy O.
    Alt-Web Design & Publishing
    Web | Graphics | Print | Media  Specialists
    www.alt-web.com/
    www.twitter.com/altweb
    www.alt-web.blogspot.com

  • How did they make this website?

    I'm new to flash and want to build myself a site similar to this one.
    http://screen-bites.co.uk/homepage.html
    Ive tried searching for online tutorials but I'm not sure what the action im trying to replicate is called.  Has anyone every seen a template that I could purchase that scrolls  horizontally that I could use as a starting point?

    Search for AS3 tutorials on google and gothru the tutorials about to loading external swf, images, audio and video. I recommended one of the good website to know the things from:
    http://www.republicofcode.com/tutorials/
    For every tutorials explanation on the syntax is very clear. goahead! Success behind you!

  • How can I make my website compatible with different screen resolutions?

    Here is the page that I'm struggling with:
    http://www.starbuckscollect.com/2013.html
    Everything is pinned to the top and center pin except for the cards.
    My problem is on certain screen resolutions that are not 'wide screen' you are not able to see all of the cards when you scroll down. Some of you may not see my problem when you open up the page which is good. For you guys, the way to see my problem is to 'zoom out' of the screen and to do that press 'ctrl' and '-'
    Is there any way of avoiding this?

    Hi
    I believe you want a responsive design for the page where the page elements , similar discussion here :
    http://forums.adobe.com/thread/1198978
    Thanks,
    Sanjit

  • How to make a website for a MS SQL database?

    I'm used to making static html websites, but now I shall make a website for a friend who has made a database (Microsoft SQL). So I shall make the layout, forms etc, and he provides the database. Can anyone please explain the prinsiples of making such a site, and how to connect it to the database?
    PS: I've added the features "Server Behaviors", "Databases" and "Bindings" in my Dreamweaver CC, as they are not preinstalled.
    Hope for help!

    media="screen" or media="print" is part of a css link in the head of a page and allowed one set of rules for print and another set for screens.
    It was the precursor to "Media Queries" which is what you're looking for.
    Here's a good starting point for Media Queries...
    http://www.adobe.com/devnet/dreamweaver/articles/introducing-media-queries.html
    Basically, you make one site in html, then 2 stylesheets that control the site depending on the viewer device. You use the pixel width of the device or browser window to determine which stylesheet is used. When they're on a desktop, stylesheet1 is used, when they move onto something smaller, stylesheet2 kicks in.
    The basics are pretty simple, getting the most out of it takes practice.

  • How can I make a intro page for my website, then after the intro has run make the page automatically change to my we site home screen

    how can I make a intro page for my website, then after the intro has run make the page automatically change to my website's home screen

    You can do this using a meta refresh but the problem is you have to add it to the html file for the page very time you publish changes.
    A better way is to create a splash page and upload it to the server outside of the folder produced by iWeb. Example HERE.
    The meta refresh is added to the head section of the html file...
    <meta http-equiv="refresh" content="32;url=http://www.domain.about.com/Page-Name.html">
    The delay time in seconds is marked in blue and the URL to the redirect page is in red.

  • When I put a website Icon on my desktop, how do I make firefox use the Icon native to that website instead of the default Firefox Icon?

    When I drag and drop a website onto my desktop, how can I make Firefox use the icon native to that website instead of the default firefox icon?
    I have even gone painstakingly (SEVERAL TIMES) to the sites with IE, dragged the site onto my desktop in order to obtain the site native icons for my desktop (and deleted the ones with the Firefox icon) .... but they all soon revert to the default Firefox icon.
    E X T R E M E L Y F R U S T R A T I N G !!!!!!!!!

    I don't want icons from the Firefox library.
    I want the icon that comes from the website I'm making the shortcut for.
    (If you go to a site in IE you will see the site generated icon at the left end of the URL in the address field.)
    If I make IE my default browser I am able to get (and keep) those icons as shortcuts on my desktop without a problem.
    I want to keep Firefox as my default browser.
    So I want to know how to make Firefox accept the icon that comes from the website like IE does.
    I have even gone to the trouble to use IE to create the shortcuts with the site specific icons.....but after I do that...... FIREFOX CONVERTS THEM TO THE FIREFOX DEFAULT ICON as soon as I re-boot or refresh my desktop.
    I generally prefer Firefox as a browser....but If there's no fix.....I'm going to dump Firefox.

Maybe you are looking for