1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

what is standard width

Discussion in 'HTML & Website Design' started by seo7seo, Jan 15, 2018.

  1. #1
    I am learning photoshop. what should be standard width and height of a website when I am designing it in photoshop.
    SEMrush
     
    seo7seo, Jan 15, 2018 IP
    SEMrush
  2. kk5st

    kk5st Prominent Member

    Messages:
    3,397
    Likes Received:
    346
    Best Answers:
    26
    Trophy Points:
    335
    #2
    First, "designing" in Photoshop is a terrible idea. Let your content control the dimensions; especially the height.

    Second, using Photoshop implies that you will use the position property or html tables to lay out your page. Either are particularly bad ideas. Positioned elements are not in the flow and neither see other elements nor are seen by other elements. Tables have special relationships by column and row with other elements. Both die horrible deaths when viewport dimensions are altered or content is greatly edited. In other words, the layout is fragile, not robust.

    Third, there are no standard dimensions. There are rules of thumb that are convenient: A width of 50em is appropriate for a single column. A width of 64em will support two columns, and 80em will support three columns. The criterion is ease of reading by the user.

    Fourth, Photoshop is a tool for manipulating images, either for content or for backgrounds. It is not appropriate for designing web pages.

    gary
     
    kk5st, Jan 16, 2018 IP
    deathshadow and ketting00 like this.
  3. deathshadow

    deathshadow Acclaimed Member

    Messages:
    8,569
    Likes Received:
    1,529
    Best Answers:
    223
    Trophy Points:
    515
    #3
    Gary has it right, Photoshop is NOT a web design tool, no matter how many ignorant twaddles or outright scam artists claim otherwise. One of the reasons WHY we can say that with so much certainty?

    Your question. That's why.

    The very notion of a 'standard size' misses the entire point of websites -- device neutrality. A well DESIGNED website shouldn't care what size screen is in use, how many pixels across it is, or any other factor that is the cornerstone of "fixed design"; and that's what glorified paint programs like Photoshop, PSP, the Gimp and so forth are designed to work with, fixed layout.

    Websites and their designs on the other hand when done PROPERLY should be three things:

    1) Elastic. This means they adjust to the user's font-size preference which is NOT always the magical '16px' many people would have you believe. The WCAG -- web content accessibility guidelines -- says to use "EM" not "PX" for font-size, so your layout ALSO should use EM so it is based on the user's font-size preference. For example if I say "font-size:0.85em;" on most machines, that would be 14px, but on my workstation it's 17px because that machine is set to Large/125%/120dpi/20px/pickANameAlready as the default since it has a higher dpi display. My media center gets a whopping 27px as it is set to 32px as the default for the ten foot interface. If you decared the font-size in pixesl

    Since the fonts scale, the interface has to as well... and that means things like padding and max-widths should be measured in EM as well.

    As the joke goes, "The WCAG says to use EM, so use 'em!"

    2) Fluid and/or semi-fluid. All "fluid layout" amounts to is that you should NOT have a fixed width and instead allow the page to expand or contract to fit the available screen space. The upper end of that expansion can AND SHOULD have a limit set on it using max-width, resulting in the design only being "Semi-fluid" -- it can expand only to a certain point, but below that point it can automatically re-adjust itself and the content to fit the available space. This means word-wrap and layout adjustment, not "scaling the entire thing" so that text-size changes or dicking around with zoom. In modern designs this works hand in hand width:

    3) Responsive -- a responsive layout is one that re-arranges itself and its content to best fit the display. CSS3 gave us "media queries" to aid in making websites do this so that things like columns can be added, removed, or moved to best let the user access the content REGARDLESS of if they are on a 2" wide handheld up to a 60" 4k display.

    These are all things you're not going to get in your 'design' dicking about pushing pixels around in Photoshop!

    Remember, TEXT is the first-class citizen of the web, and everything else may as well have leprosy, to that end you should start with your CONTENT, mark it up semantically, THEN create your layout adding div/span/classes and ID's ONLY AS NEEDED to that markup -- only once ALL OF THAT is working do you screw around adding colours, backgrounds and other eye candy.

    Playing around with what it looks like before you have semantic markup of content of value (or at minimum a reasonable facsimile of future content) is putting the cart before the horse and utterly back-assward. ANYONE telling you otherwise doesn't know enough about HTML, CSS, accessibility, or ACTUAL design to flap their huffing yap on the topic!
     
    deathshadow, Jan 19, 2018 IP