Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 9 of 9
  1. #1
    Senior Member peezybro's Avatar
    Join Date
    Aug 2011
    Location
    El Cajon, California
    Posts
    229
    Member #
    28822
    Liked
    6 times
    I just made my website, i make the layout with photoshop then code it with html and css. What canvas sizes should i design the layout on? witch sizes work best to transform into a website? is the canvas size of the layout going to be the size of the site once it is coded and put online?
    "ON TIME, ON TARGET, NEVER QUIT"


  2.  

  3. #2
    WDF Staff m3n0tu18's Avatar
    Join Date
    Jul 2011
    Location
    Devon, UK
    Posts
    1,467
    Member #
    28473
    Liked
    265 times
    I suggest with any websites to have a maximum width of 1000px height does not matter as the content will expand it down the page.
    If you like my comments to your thread please click the LIKE button

    Check out my portfolio: Here!
    View my company Facebook Page
    View my company Website

    <<Plrease ignoer my typo's I have isdexlyia>>

  4. #3
    Senior Member peezybro's Avatar
    Join Date
    Aug 2011
    Location
    El Cajon, California
    Posts
    229
    Member #
    28822
    Liked
    6 times
    ok, i see. so my main question is. the size of canvas i use to design my layout in photoshop, thats going to be the size of the website once i code it?
    "ON TIME, ON TARGET, NEVER QUIT"


  5. #4
    Senior Member
    Join Date
    Mar 2011
    Location
    Nashville, TN
    Posts
    340
    Member #
    27244
    Liked
    26 times
    m3n is correct, but there are aids for just this and its called the 960 grid. they have templates for just about EVERY designing software already for you to throw your own design it. Thats just my two cents..

    link to site:
    http://960.gs/


  6. #5
    Senior Member Webzarus's Avatar
    Join Date
    May 2011
    Location
    South Carolina Coast
    Posts
    3,322
    Member #
    27709
    Liked
    770 times
    I might add that both of those sizes will fit the most common monitor resolutions in use today.

    If less than that, there will be a lot of blank space on each side of the design when viewed on a widescreen monitor. More than that, and users will have to scroll right and left to see parts of the pages.

  7. #6
    Member surfbouy's Avatar
    Join Date
    Dec 2010
    Location
    Noosa, Sunshine Coast, Queensland, Australia
    Posts
    46
    Member #
    25747
    Liked
    3 times
    Hi ya, there are now three sort of standard canvas sizes>>>
    desktop: i suggest 960 grid also,
    Tablet: 800px
    Mobile:320px.
    You can use media queries to determine each.
    You can see by the variation that the canvas depends on the target market for each viewer profile.

  8. #7
    Junior Member
    Join Date
    Nov 2011
    Posts
    7
    Member #
    29877
    Hello,

    Keep width 990px & height is 600px

  9. #8
    Senior Member Webzarus's Avatar
    Join Date
    May 2011
    Location
    South Carolina Coast
    Posts
    3,322
    Member #
    27709
    Liked
    770 times
    So the 960 grid on my 1900 wide monitor would leave roughly a 470 px EMPTY SPACE, on each side of the design ?

    Or a blank space of 940px on either side ? That's almost as wide as the design.

    I use about 6 different computers and devices throughout my workdays as I suspect many others do, so understanding, planning and implementing a "fluid" design is not a hard concept.

    Check your log files or do a little research any you'll find out the fixed width designs are quickly becoming a sign of either " I don't want to spend the time to do it " or " I don't care ", either way, there are plenty of designers that will be willing to work with your clients to give the the most of their sites.

    Sadly, there are A LOT of designers that look at their stuff from THEIR monitors and never once think about the hundreds of OTHER SIZES that their clients, their clients visitors , etc. Are seeing their designs in.

  10. #9
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,485
    Member #
    425
    Liked
    2783 times
    What Webzarus said. The fundamental flaw of the 960 grid is that it's interpreted as a fixed width when it doesn't have to be. And when you end up with a 1920 x 1080 monitor, that leaves a lot of white space on either side, even if you do as I've done and keep your taskbar on the left (or right if you're so inclined).

    I try to design for a range of widths when possible (say 960 to 1200 pixels). I'll use a 960 pixel width in certain circumstances, but they're pretty rare for the most part. I generally don't go beyond 1200 since that usually means that one of the columns will end up too wide at some point, but that's a decent range; even on a 1920 x 1080 monitor, there's 360 pixels of space on either side, which isn't terrible. There are also ways to design a site to "mask" that white space (example coming soon).

    So your canvas size should be somewhere in the neighborhood of 960 pixels, but you should also allow for expansion of width. Height isn't overly important since your height will be dictated by your content, but just for the sake of a 4:3 aspect ratio I use 720 pixels.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)


Remove Ads

Posting Permissions

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

Search tags for this page

best canvas size for website

,

canvas size for website

,
canvas size for website in photoshop
,

photoshop canvas size for web design

,

photoshop canvas size for website

,

web canvas size

,

web page canvas size

,

website canvas size

,

website size photoshop canvas

,
what is a size of a website in adobe photoshop
Click on a term to search for related topics.
All times are GMT -6. The time now is 02:30 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com