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.

Website Design Advice - Middle Column too Narrow?

Discussion in 'HTML & Website Design' started by BoldlyGo, Dec 18, 2014.

0
  1. #1
    Hey,

    I'm trying to make my website look more professional, and I'm worried that the content of the site is too narrow. Should I widen the middle column? Would it help if I changed the color of the background?

    Any other general suggestions to help improve its appearance?

    Website: http://www.treenook.com/

    Thanks,
     
    BoldlyGo, Dec 18, 2014 IP
  2. bdunndchi

    bdunndchi Member

    Messages:
    91
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    43
    #2
    In my browser on a widescreen monitor, (however not maximized entirely), the content does seem pretty narrow. There is A LOT of empty space on both sides. Personally, I would widen it up. It looks clean, and the bar at the top looks very professional.
     
    bdunndchi, Dec 19, 2014 IP
  3. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #3
    Well, the very first thing I'm noticing is that you've used fixed metric fonts and fixed measurements to build the website. PX measurements on fonts is inaccessible trash, and I'd try and switch that over as soon as possible. EM's automatically expand to the user's OS or browser preferences, meaning that users like myself aren't diving for the zoom; since for comfortable legibility I'd have to zoom in 25% or more. You make the fonts dynamic, you'll need your widths and heights dynamic too, and that's called "Elastic layout".

    You also have a fixed width on that content column, I'd very likely be opening that up semi-fluid with a min-width and max-width; though since you've gone single column I'd be tempted to skip the min-width and instead set max-width on certain elements (like video embeds and static content plate images)

    I would REALLY look at breaking up the content of that home page into two columns, likely putting the contact form to the right of the flow text. I'd also clean up that form since the use of labels is kind-of nonsensical gibberish in there.

    I'd also be tempted to consider axing the dropdown menu and put the list of pages into a sidebar... you really don't have enough pages to warrant the accessibility mess that is dropdowns (don't know if that's going to change in the future, but I stopped putting dropdowns on websites six years ago for a host of reasons).

    I took a peek under the hood, and sadly it's the typical train wreck of turdpress stupidity -- no offense intended towards you, but what tp vomits up and has the giant set of brass to call HTML is bloated inefficient nonsense, and to be frank on such a simple static site I have to wonder why you'd waste that mouth-breathing idiotic insecure train wreck on it. Can you tell I'm a fan?

    As I often say if you don't know what's wrong with this:
    <body class="home page page-id-14 page-template-default custom-background masthead-fixed full-width grid">
<div id="page" class="hfeed site">
	
	<header id="masthead" class="site-header" role="banner">
		<div class="header-main">
			<h1 class="site-title">
    Code (markup):
    Or worse, this:

    <div class="menu-new-menu-container"><ul id="menu-new-menu" class="nav-menu"><li id="menu-item-92" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-14 current_page_item menu-item-has-children menu-item-92">
    Code (markup):
    One has to question the knowledge of the developer that would allow that to be deployed on a website -- sadly such pointless code bloat being par for the course once turdpress is on the table.

    Disastrous code under the hood aside, get dynamic fonts on it, make the layout elastic and semi-fluid, really I'd have less pages, make a column of the menu and/or axe the pointless dropdown code, and re-organize the content into columns for larger displays, using media queries to strip off those columns when the screen is too narrow. Those are the big things to address.
     
    deathshadow, Dec 20, 2014 IP
  4. strawberrybob

    strawberrybob Greenhorn

    Messages:
    69
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    8
    #4
    Yeah it really does seem quite narrow... feels like it needs to be wider and framed with something. Maybe browse around at many different websites to get a variety of ideas. It feels quite empty.
     
    strawberrybob, Dec 21, 2014 IP
  5. dirkdunn

    dirkdunn Greenhorn

    Messages:
    7
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    23
    #5
    make the max-width on your middle column about 500px, make your heading larger(should be able 300% of body copy), and try justifying the test.

    [​IMG]
     
    dirkdunn, Dec 22, 2014 IP
  6. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #6
    PX? Uhm... NO! EM's my good man, use them or lose out out potential users who won't just "dive for the zoom".
     
    deathshadow, Dec 22, 2014 IP
  7. dirkdunn

    dirkdunn Greenhorn

    Messages:
    7
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    23
    #7
    I said px's because he currently had his max width set as pixels, but yes, ems are usually a better option, however you can make a perfectly responsive website with pixels... so i'm not really sure what you mean about having to zoom.. I guess with no media queries?
     
    dirkdunn, Dec 22, 2014 IP
  8. BoldlyGo

    BoldlyGo Well-Known Member

    Messages:
    28
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    106
    #8
    When I change the column width to a percentage, I end up with really ugly paragraphs. How do I make the text responsive as well?

    Thanks for the help. I'm definitely not an experienced web designer.
     
    BoldlyGo, Dec 22, 2014 IP
  9. dirkdunn

    dirkdunn Greenhorn

    Messages:
    7
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    23
    #9
    Look into responsive design.

    I learned a TON from this
    https://www.codeschool.com/courses/journey-into-mobile

    You can Google "hall pass" for code school and get two free days of it, it's the best resource I have ever had.
     
    dirkdunn, Dec 22, 2014 IP
  10. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #10
    Uhm... the entire reason to USE EM's?!? As in they automatically scale (if used across the entire inheritance) to the browser or OS font settings instead of the specific size stated? Otherwise why the **** would you use them?

    For example by default for most people, HTML starts out with 1EM = 16px, but on this laptop I'm sitting on right now AND my workstation 1EM starts out as 20px... it's 24px on my media center build with it's 10' UI, and it's 12px on my Sun Blade 2000 running Solaris. Of course that's why the whole 62.25% LIE a lot of dipshits who know jack shit about font sizes is, well, so much 100% grade A farm fresh manure you could fill Biff Tannen's car with it.

    You design in EM's the layout and fonts will automatically grow for users like myself WITHOUT having to dive for the zoom, that way I can keep my head at a comfortable 3' from the laptop and 4' from the screen, instead of the back-bending neck and eye strain inducing foot or less I watch most people laughably do.

    On windows, using PROPER browsers (like REAL Opera (12.x), as opposed to the pathetically crippled steaming pile known as ChrOpera) it should inherit from the "system metric" that's OS-wide. Something Apple has been bragging about doing when it's the bleeding edge of Windows 3.0 UI design -- admittedly the setting has gone through many name changes the past TWENTY FIVE YEARS, 8514, Large, 120% / 125dpi / Win7+ "Medium" / whateverTheyreCallingItThisYear -- but the concept remains the same. Even in crappy browsers like ChrOpera, Chrume, and Firefuxxors you can change the default font size and properly written websites will obey it.

    That's the ENTIRE reason for using EM's and dynamic fonts, so that it auto-enlarges/shrinks to the browser or OS setting... so users can have their preference without having to dive for the zoom, because on the whole unless your content is "that damned good" users are FAR more likely to bounce to some other website than they are to dick around with the zoom and the accessibility hell that goes with it.

    ... or those with real accessibility needs who REALLY need to get into your site either disabling CSS or overwriting it with user.css.

    That's why the difference between this:
    http://www.cutcodedown.com/images/ewiUSB/ewiUsbComNormal96.jpg

    and THIS:
    http://www.cutcodedown.com/images/ewiUSB/ewiUsbComNormal120.jpg

    is NOT zoom. Notice the images don't change size, only the flow text and layout width do. That site being a great example of exactly what I'm talking about when it comes to graceful degradation and leveraging accessibility.

    Without CSS: (basically what search engines, screen readers and VERY "Accessibility needs" users get:
    http://www.cutcodedown.com/images/ewiUSB/ewiUsbComNoCSS.jpg

    With CSS but without images:
    http://www.cutcodedown.com/images/ewiUSB/ewiUsbCom800WideNoImages.jpg

    Stripping off columns for responsive layout:
    http://www.cutcodedown.com/images/ewiUSB/ewiUsbCom640wide.jpg

    Narrow, narrow, narrow (380 wide) phone/pod:
    http://www.cutcodedown.com/images/ewiUSB/ewiUsbTinyMobile.jpg

    That was the FIRST site I ever made responsive using CSS3 (like five years ago now), though I did make responsive sites BEFORE CSS3 using the scripting "McSwitchy" method. I do a FAR better job of it these days, but even for all the mistakes and flubs it hits all the important accessibility points. Semi-fluid elastic responsive layout with dynamic fonts, logical heading orders, semantic markup, separation of presentation from content, and a whole host of other things it seems MOST people out there shitting out websites can't seem to be bothered with, then wonder why they've got little to no traffic and fade into obscurity after a year.
     
    deathshadow, Dec 22, 2014 IP
    malky66 likes this.
  11. BoldlyGo

    BoldlyGo Well-Known Member

    Messages:
    28
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    106
    #11
    I switched to em and I have the page content set to being 40% of the page. Does it look better?

    Wider/narrower middle column? Bigger/smaller text?

    Thanks,
     
    BoldlyGo, Dec 25, 2014 IP
  12. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #12
    The text is now too big on most devices that support EM's for what EM's are for, and on any screen narrower than 1920 it's an even smaller and useless "crappy little stripe" -- set a max-width and a min-width in EM's, NOT a percentage width. What the devil is giving you the idea that 40% is an acceptable width on ANYTHING?!?

    I mean, it's fine if you don't mine 3 words per line on a netbook :/
     
    deathshadow, Dec 26, 2014 IP