Trying out a new layout

Graham

Hi All,

for the last few days I've been messing around with a new layout.

My original goal was:

responsive design
utilises bootstrap
dynamic div heights based on % of remaining viewport (after static nav)
flat(ish)
page split into coloured bands
single page layout
fixed top nav

If you have a minute, please pick as many holes in it as you can. Seriously, I'm trying to get this as 'right' as I can.

http://grahamstest.org/new.html

What would you add/remove/change?

Thanks

tricky D

Not a fan of one pagers with some exceptions. Cons outweigh pros imo.

Deliverance XXV

I like one-page designs but I find that it's very hard to get them decent on all devices. If you could perhaps try it on different browsers on an iPad, as I found that it really didn't like anchors mixed with fixed divs.

A lot of the following issues don't really apply as this is just a test design but seeing as you asked... The real testing should be in different browser/devices.

• Home anchor doesn't seem to work (don't want to reload the animation?)
• Abbie Masterson - Thumbs up
• Using multiple IDs for <articles> instead of classes
• No image alts
• Inline CSS <shudder>
• No favicon
• What happens when an older browser tries to render the HTML5?
• Menubar, as part of header seems too high (Firefox, Win7)
• Don't like the black text on blue background
• Usage/choice of icons is spot on
• Not too sure about the transitions between sections (see attached image for a project I did last year that I liked (not that everyone will...) that helped break the sections up)
• Some of the anchors are a bit off in terms of screen placement

Graham

thanks guys.

Deliverance_XXV, really appreciate the detailed feedback there. Some of the points I'd already got on the to-do list, some (more) I hadn't. If you don't mind, I'll post back again when I've addressed a few more of the issues.

The anchors on fixed divs was fiddly alright, especially on mobile devices. The iPhone has a viewport that changes size when you scroll the address bar out of view, Android has a viewport that changes size depending on the direction of scrolling.

Graham

ok, slow progress I think.

Home anchor fixed/
Inline css removed to external file (old bad habit)
New portfolio/lightbox section added.

Tested on Safari, Chrome, Firefox (Mac), iPhone, iPad, Android Phone, Android tablet, MS Surface.

Still plentry of issues to address though.