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.

how to decide website dimensions???

Discussion in 'HTML & Website Design' started by ryanktrade696, Jan 13, 2014.

  1. #1
    Hello Everyone,

    I'm very new to web development, and hope someone can help me understand what dimensions to use for my website.
    I have a pretty good grasp on basic html and css, and I have been working through some tutorials online. I don't really understand
    how to decide the dimensions of a website, or how any of the tutorial i have worked through came up with the dimensions either. Should I start with
    a wireframe design?? Maybe it would be good to get some general pointers of where to go after learning a fair amount of html and css

    Thanks
     
    ryanktrade696, Jan 13, 2014 IP
  2. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #2
    If you are thinking FIXED dimensions, you're doing it ALL WRONG. Fixed width layouts are inaccessible trash, and anyone telling you otherwise doesn't know enough about websites to be flapping their gums on the subject. It's part of why dicking around with 'wireframes' or drawing goofy pictures in photoshop is putting the cart before the horse.

    Your content should dictate your layout, and if you are writing MODERN sites with responsive layout, there are no 'dimensions' other than the breakpoints at which you do things like change out the logo, swap the menu style around and strip off (or add) columns. Where should those breakpoints be set? Whatever works best for your CONTENT. There are and should be no hard/fast dimensions as a properly designed website should be three things:

    Semi-fluid -- using min-width so the layout doesn't break if media queries aren't present, and max-width so that long lines of text don't get hard to read.

    Elastic -- fonts declared in % or EM, with all widths and triggers in EM so that when the users default font or font-size is different your page will automatically adjust to it.

    Responsive -- use media queries to change the number of columns and/or make other tweaks to the page so as to best make use of the available space.

    You might set a crappy fixed width for legacy browsers (IE6/lower), but apart from that you shouldn't be thinking dimensions then shoe-horning content into it... you should be styling the content and setting your max-widths, smaller column / sidebar widths and so forth to what the CONTENT wants or fits in the available space! Likewise anything that's got content in it shouldn't have a fixed height -- EVER!

    ... and that's why perfect fixed width banner images, image sliders, fixed size backgrounds and a host of other PSD jockey and Script-tard "Gee ain't it neat" nonsense has NO MALFING BUSINESS on a website in the first place! That ignorant broken halfwit bull is just a waste of bandwidth, waste of time, waste of code, and pisses all over a websites' accessibility.

    So basically planning dimensions? DON'T! Semantically mark up your content, bend it to your will to make your semi-fluid elastic responsive layoutS (yes, plural) with CSS adding neutral containers like DIV and SPAN only where needed, then and only then come up with any graphics or fancy colorations you are hanging on the layout.

    You may also want to read the article I posted on a friends forum about What's wrong with your website (that's the article index, it's broken into multiple posts) as the design section covers a lot of what's "Wrong" with the approach you'll find in most of the web-rot tutorials and decade out of date books on the subject; much less common practices that are nothing more than sleazeball bull designed to lead people just starting out down the garden path.
     
    deathshadow, Jan 13, 2014 IP
    Avener likes this.
  3. Vagz

    Vagz Well-Known Member

    Messages:
    166
    Likes Received:
    13
    Best Answers:
    0
    Trophy Points:
    130
    #3
    You might be better off using a template...one with responsive design built right into it. Then you can adjust the coding as you go. PM me if you need help.
     
    Vagz, Jan 14, 2014 IP
  4. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #4
    Assuming you are dumb enough to think you can shoe-horn your content into some steaming pile of off the shelf crap. Pre-built templates are IMHO are one of the biggest scams on the Internet -- this side of the ignorant nube-predation practiced by the PSD jockeys who have the giant brass monkey balls to call themselves "designers" but don't know enough about HTML, CSS or Accessibility to be designing but two things...
     
    deathshadow, Jan 15, 2014 IP
  5. Vagz

    Vagz Well-Known Member

    Messages:
    166
    Likes Received:
    13
    Best Answers:
    0
    Trophy Points:
    130
    #5
    We are, after all, discussing a newb here. Taking the elitist point of view leaves the newb feeling overwhelmed by the technological elements of a great website. To start off working with templates affords a newb to acquire a familiarity with HTML/CSS along with the ability to see instant results. Not everyone has scads of time/patience to undertake all the research required to become a really good designer right away. Afford newbs options other than name calling for reasons as empty as pretentious elitism.
     
    Vagz, Jan 15, 2014 IP
    HuggyStudios likes this.
  6. TIEro

    TIEro Active Member

    Messages:
    741
    Likes Received:
    177
    Best Answers:
    5
    Trophy Points:
    70
    #6
    I love how deathshadow always dithers and never says what he really thinks. :D

    While his opinion is absolutely correct (IMHO) for advanced, experienced web developers, if you're just starting out it will give you a MASSIVE learning curve that will probably make your frontal lobe explode all over your monitor before you get anywhere.

    My suggestion would be to start with a design you want to produce, that works for the site you want to build. Then create it around CSS: the HTML just says what comes where, in what order - the CSS determines how it all looks and hangs together. Only use relative measures in your CSS (percentages, ems and so on), and you're already part-way to understanding responsive designs and how things work when you step up to more complex levels.

    Once you're comfortable using the basics of responsive designs, then you can talk to deathshadow without wearing riot gear. ;)
     
    TIEro, Jan 15, 2014 IP
  7. slime

    slime Peon

    Messages:
    16
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    3
    #7
    deathshadow makes it sound harder than it really is.

    Photoshop: Design a site that is 1,000px wide
    CSS: The site is now 100% wide
    Devices: The site is displayed at #px/100% wide
    Result: The original design looks funky on different devices, but now you just write the responsive CSS that is needed to make it look like it once did or match when it was at 1,000px/100% wide

    It's makes more sense and is easier as you do it. And don't listen to anybody that tells you to design with mobile first in mind.
     
    Last edited: Jan 19, 2014
    slime, Jan 19, 2014 IP
  8. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #8
    ... and one does that HOW exactly when you designed for 1000px? That's going to compensate for elastic design how exactly? That's not making it easier, that's making it HARDER. ESPECIALLY if you're dicking around in inaccessible pixel asshattery...

    Though the 'mobile first' I don't entirely agree with doing in terms of layout, so I'm with you on that. Firm believer in lowest common denominator so semantic markup first, then desktop non-media query FIRST (IE8/lower) since there are a LOT more non-media query users on desktop than there are on mobile.

    Hence why most of my layouts end up using something like this:
    body {
    	font:normal 85%/150% arial,helvetica,sans-serif;
    }
    
    #pageWrapper {
    	overflow:hidden;
    	/*
    		min-width is for non-media query browsers who can't change the layout
    	*/
    	min-width:48em;
    	max-width:64em;
    	/*
    		% width to show a bit of body background all-around
    	*/
    	width:95%;
    	margin:0 auto;
    }
    
    /*
    	IE6/lower doesn't know min/max-width, so feed them a crappy fixed width
    	OH WELL, they should be thankful we bother thinking about them at all!
    */
    * html #pageWrapper {
    	width:768px;
    }
    
    /*
    	make browsers not auto-adjust the text size for their displays as we
    	know what we are doing. Media query for smaller displays is to make it
    	so desktop Safari ignores this value, since that breaks zooming on desktop
    	-- really stupid since mobile safari does NOT break zooming with this
    	setting!
    */
    @media (max-width:480px) {
    	* {
    		-webkit-text-size-adjust:none;
    		-ms-text-size-adjust:none;
    		text-size-adjust:none;
    	}
    }
    
    @media (max-width:48em) {
    	#pageWrapper {
    		/*
    			since we can change the layout, we can go narrower
    		*/
    		min-width:192px;
    		/*
    			narrow, we need as much screen real-estate as we can get
    		*/
    		width:auto;
    	}
    	/*
    		strip off columns by removing floats, margins and padding
    	*/
    	#content,
    	#contentWrapper,
    	#extras {
    		float:none;
    		padding:0;
    		margin:0;
    	}
    }
    Code (markup):
     
    deathshadow, Jan 20, 2014 IP
  9. creativewebmaster

    creativewebmaster Active Member

    Messages:
    654
    Likes Received:
    7
    Best Answers:
    4
    Trophy Points:
    78
    #9
    Generally 980px width are standard but develop your website as responsive and fluid. create you website in 100% width that mean liquid so, that will work for all the desktop browsers, screen size and smartphone as well.
     
    creativewebmaster, Jan 20, 2014 IP
  10. Akash47

    Akash47 Member

    Messages:
    185
    Likes Received:
    18
    Best Answers:
    1
    Trophy Points:
    45
    #10
    I think that anytime you're on DigitalPoint and you see a response from @deathshadow you just take his word for gospel and do what he says. He said it all. Fixed width is bound to make your webiste look horrible to someone, somewhere, who is using a platform you didn't expect to be used.
     
    Akash47, Jan 20, 2014 IP
  11. slime

    slime Peon

    Messages:
    16
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    3
    #11
    You design a fixed width, then you code a fluid website, it's not that complicated. How do you design something without knowing it's dimensions, and how do you develop a website without having a design? If you follow deathshadow's advice of saving the visuals for last then you're going to be producing bottom tier websites.
     
    slime, Jan 20, 2014 IP
  12. Nigel Lew

    Nigel Lew Notable Member

    Messages:
    4,642
    Likes Received:
    405
    Best Answers:
    21
    Trophy Points:
    295
    #12
    Real developers typically start with a wire frame first off and secondly, there is so much wrong with that statement it frankly doesn't warrant a response beyond lolwtf.

    Nigel
     
    Nigel Lew, Jan 20, 2014 IP
  13. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #13
    How do you have fluid website from a fixed design? How do you have "dimensions" when it's fluid? Fluid means you have no fixed dimensions or at the very most a maximum and minimum! Your statement doesn't even make any sense!

    ... and if you follow slime's advice of ignoring it, you're going to have inaccessible sites that no matter how pretty they are you'll typically end up with bounce city as the result as nobody can use or would even want to use them. See 99% of the crap PSD jockeys vomit up and then have the giant brass monkey balls to call themselves "designers" with.

    The whole POINT of HTML is device neutral delivery of content; we got away from that with HTML 3.2 and sure some folks (like those embracing 5) never pulled their heads out of 1997's ass on the subject, but we were at least TRYING to return to that point with HTML 4 STRICT and the separation of presentation from content of CSS... which is why it's also the entire POINT of CSS being to say what things look like for specific targets.

    ... which is why dicking around with your visuals first completely misses the POINT of HTML and CSS! -- that point being what it looks like on your screen is not what everyone else wants, or is even going to get. That's why WYSIWYGs are halfwit trash too; the screen appearance first idiocy is the EXACT SAME BROKEN THINKING as using a WYSIWYG. It means you're not building with progressive enhancement, you're likely not planning elastic or using design elements conducive to fluid or responsive design -- so don't be surprised when the result doesn't gracefully degrade, renders broken on machines where people are using different default fonts, and you either end up with bounce city, or should you actually have content people care about flooded with complaints about how useless the site is.

    But of course, one could always just ignore all those problems and vomit up the same lame excuses people have been using to justify their broken, halfwit, cart before the horse practices we've seen the past decade and a half; ignoring EVERY piece of sane development advice out there out of ignorance, apathy or wishful thinking.
     
    deathshadow, Jan 20, 2014 IP
  14. Nigel Lew

    Nigel Lew Notable Member

    Messages:
    4,642
    Likes Received:
    405
    Best Answers:
    21
    Trophy Points:
    295
    #14
    Nigel Lew, Jan 20, 2014 IP
  15. slime

    slime Peon

    Messages:
    16
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    3
    #15
    deathshadow, your word salad is masterful, but I don't understand why you make the assumption that good design equates to bad code.

    I spend more time in Photoshop, working on the design, than I do writing any of the HTML because I'm designing with content in mind. When I look at the design, I know what tags will be needed to construct it. To hear you suggest that people should start throwing down markup before having a clue what their site looks like is so idiotic. Just because that's how things were done in the past, doesn't mean that's how they should be done now. Nobody cares about your content if the site looks like garbage.
     
    slime, Jan 20, 2014 IP
  16. Nigel Lew

    Nigel Lew Notable Member

    Messages:
    4,642
    Likes Received:
    405
    Best Answers:
    21
    Trophy Points:
    295
    #16
    What he posted is not a word salad by any stretch and makes perfect sense to anyone who actually cares or opts to separate themselves from the peanut gallery.

    There is a huge difference between idiotic and standard practice. That distinction seems to escape you.

    Nigel
     
    Nigel Lew, Jan 20, 2014 IP
  17. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #17
    I'm not saying that at all -- I'm not saying you can't have good design -- or more importantly designS... The problem is thinking one or even many screen appearances FIRST means you would most likely be neglecting or ignoring that layout and design for desktop screen is NOT the only target.

    That sounds and AWFUL LOT like you're using presentational markup... and that is bad code.

    ... but just WHICH appearance are you talking about? Since a fluid site changes the layout, and elastic changes the layout, and responsive changes the layout, and non-visual user agents ignore your layouts, and different media targets (print for example) might wholesale remove elements... how exactly are you accounting for that dicking around drawing goofy pictures in Photoshop.

    I'm not saying it has to look like garbage -- nobody cares about your pretty pictures if it results in an inaccessible pile of crap that prevents people from getting TO the content. I've never seen a website made by someone who started out drawing pictures in photoshop that was worth a flying purple fish!

    Do you have an example of your work? I'm finding your statements hard to correlate to reality; I would suspect you don't actually understand what I'm saying or why it's important.
     
    deathshadow, Jan 20, 2014 IP
  18. slime

    slime Peon

    Messages:
    16
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    3
    #18
    I'm not sure we're operating in the same industries, because there is no real world application for someone who wants to write text and tags before putting together any sort of visual aid of what the thing is supposed to be. You can't communicate ideas to most people without visuals. What I said is correct, doing it without any sort of design to work from is idiotic. What is standard is to have blueprints, to have a plan laid out of what the content is and where it's going. Writing good HTML is insanely easy and to treat it like it's this beast that needs to be slayed before anything else is just ridiculous and shows archaic beliefs.
     
    slime, Jan 20, 2014 IP
  19. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #19
    Again though, WHICH DESIGN?!? Once you add fluid and elastic and responsive, how exactly do you explain that it no longer looks like your fixed image? Or are you drawing 20 or 30 images to show all the major different layoutS and possibilities?

    Which is why it's an easy simple first step, and why bending it to your will for the layoutS (again, PLURAL) isn't too big a deal either, at which point it becomes easy to make a few screenshots to show all the different possible results.

    http://www.cutcodedown.com/images/ewiUSB/

    Making sure to tell a client that the layout is NOT fixed, nor should it be... and of course, having PROPER graceful degradation for things like images off or css off/blocked/unavailable or at 120dpi/large fonts thanks to the elastic, or legacy IE without the CSS3, so on and so forth.

    Things I've never seen in any PSD jockey BS design -- what I'm used to seeing from that are broken responsive layouts, no elastic design, illegible color contrasts, goofy illegible fonts and bandwidth hogging garbage.

    Prove me wrong, let's see something of yours! Or is this going to be another "wah, wah, is not. I don't need to prove my point" that is what I'm used to getting as a response to this?
     
    deathshadow, Jan 20, 2014 IP