Ask HN: What are your favorite / least favorite site layout styles?
For example, what width? I've recently begun using the 960.gs grid system (960 px wide). I notice that most new sites are still using something narrower. Is 960 still considered by most to be too wide?
How about framing the content like hacker news does, vs an open format like Google does? Again, I notice that most new sites seem to be abandoning the framing, in favor of the open style, or a hybrid style, where the header is open, but there is framed content underneath.
Then there's the whole landing page business. Do you clutter up the landing page with information like 37 signals, or do you leave the landing page uncluttered, with a prominent link to the "sales page" like dropbox does?
I know this is all just personal taste, opinion, etc, but I'd be interested in yours.
3 comments
[ 4.1 ms ] story [ 18.6 ms ] threadFor our site, we went with the fixed width layout and I'm happy. For more link-driven/based sites (a la reddit/hn/digg), I prefer a full screen layout I suppose since I don't want to scroll forever.
For landing pages, I wish I could tell you anything useful. What I've found, after several years of trying to predict what would be successful, is that I suck at predicting what people will like. Test, test, test...
I suppose to me it all boils down to one thing: usability. Gorgeous designs fail if they aren't usable and crappy designed sites who fit a need thrive. Now I'm just rambling...
Here's a couple of book recomendations:
* "Letting Go of the Words: Writing Web Content that Works" by Janie Redish - fantastic book. It isn't about design/layout per se but it is, see?
* "Don't Make Me Think: A Common Sense Approach to Web Usability" by Steve Krug
1. Page Width
If your target audience is tech un-savvy folks - go with a narrow screen width. 780 pixels. If its folks keep up with technology, go with 960 pixels.
If you're designing for cellphones, reduce your width accordingly.
2. Column width
Readability tests have shown that 50-60 characters per line is the optimum. More text than that per line and people's reading speeds decrease. And their comprehension takes a dive too. So sticking with 500 pixels per column of text is generally a good idea.
3. Landing page style
Basic formula to keep in mind is: AIDA
* Attention
* Interest
* Desire
* Action
Follow them in sequence.
Good post to read: http://zygote.egg-co.com/designing-to-sell/
Advanced formula is creating landing pages based on your target audiences personas.
Step 1: Figure out all the types and segments of people who will visit your website. http://www.futurenowinc.com/personas.htm
Step 2: Determine what you need to do to persuade each of these types of personas to take action
Step 3: Create different navigational pathways for each of these persona types.
Good book to read: Waiting for Your Cat to Bark http://www.amazon.com/Waiting-Your-Cat-Bark-Persuading/dp/07... (Note: its a book with excellent content but reads like a boring textbook.)
Good website to deconstruct and learn from: http://www.theleodiamond.com/ (This website is created for 6 different persona types.
* Very curious analytical type people who research before buying
* Folks who are fashion conscious
* Girls choosing the diamond
* Guys choosing the diamond
* Media, investors etc
* Folks who already know about Leo Diamonds and just want to find the nearest location
Can you see how different keywords and linking / navigation structure is used for each of these personas?)
As for landing page, I think it should highlight whatever is the most important part of your site. The first thing I should notice is what you do and if I'm interested, have a well defined navigation so I can learn more.
On a truly personal note, I love big footers from both a design and usability point of view :)