This morning I was reading Russ Weakley’s “links for light reading” and one way or another found my way to this tutorial on building a one-page portfolio with HTML5 & CSS3. I thought – what the hey, let’s try this out. I’ve been curious about those one-page sites before, so maybe I’ll learn something cool.
But I was disappointed. There was a LOT on some of the new HTML5 elements, a bit about the CSS3 stuff, although not with so much detail, and nothing about the jQuery/JavaScript. 
Plus, as I started digging into the CSS, I realized there was a bunch that I disagreed with. Initially, I just walked away (metaphorically) to do something else, but it was bugging me. So why not try doing it myself?
I’ve written a few tutorials on how to use various bits of web tech, but always step-by-step for non-webbies. This is my first take on writing up something for my fellow web generalists!
First, the HTML structure. I’m going to stick with the same 3 “page” structure as the previous tutorial: a title, a bit of navigation, an introduction, a portfolio, an about page, and a contact page, but also add an “elsewhere on the web” section.
Digging into the html5 category of my pinboard links, I found a couple of complete frameworks, but on inspection: meh. A lot of extra stuff that I’m not (yet) sure we’ll need. So I’m going to go back to my old (!) standby: Less Framework, now on version 4.
Why do I like Less Framework? Because, well: less. In fact, right now all I’m doing is taking the HTML, not the CSS! And it remembers the HTML5 Shim, which I have a tendency to forget otherwise.
So, back to the structure:
- header
– h1 for the name
– nav
- sections for each, well, section
- h1 for each section, then text formatted semantically
- footer with my name and the date
In doing that, I ended up looking up a little bit about the HTML5 forms options. Dive Into HTML5 has a decent overview. Not much that I need, though: just placeholder, type=”email” and required. I also ended up musing about XHTML format looking at the input tag and the required attribute. I like XHTML format for the rigor, so I went with that.
Ran into a couple of validation errors – form needs an action, link needs an href, for attributes on labels need to be associated with id rather than name (I always forget that!) — obviously I’ll need to come back and create an action for the form and a link for the stylesheet.
In fact, that’s the next thing to do: create a stylesheet. I have a general idea in my mind how I want to lay it out – but at this point I consider the question of flexible sizing. Time to wander off to a sketchpad. And I decided to drop the “elsewhere” section and just move it into the “about” section, so I could have horizontal navigation on small screens. That got me into the crazy weeds of media queries and multiple stylesheets.
But let’s take a step back. First of all: reset!
And before moving stuff around, time to think about fun fonts & colors. I want something subtle, so that my words and screenshots take center stage. I’ll admit it: I went browsing in COLOURlovers, and decided I liked the palette Very. And immediately ran into a problem finding a link color. A bit of futzing with the Color Blender and I got something not too bad, though. I also added a bit of spacing to the sections so I could read it better. Then off to Font Squirrel to look for a nice subtle sans-serif with some built-in options. I like Colaborate, although it doesn’t come with a native italic. The “E” in Panefresco is a little weird, and with my name I need a nice “E”. Curiously enough, the font used in the original tutorial, Yanone Kaffeesatz, looks quite lovely. Alas, no native italic, but I’ll see what I can do to avoid needing it.
Oh, hey: tiny fonts! Maybe it’s time to bring in the frameworks again. This time, I’m going to give the 1140 CSS Grid a try.
Or not. This isn’t quite what I was looking for: after all, we’re working with an extremely simple design! Back to Less Framework again, this time the CSS. Pull out the font-family declaration and colors, remove that section spacing from my own CSS, and that seems like a reasonably good start.
Except…I really wanted the header to be all cozy up against the edges of the screen. Alas, time for a wrapper tag, but otherwise easy enough to fix: switch all those widths & paddings over to #content, and add margin: 0 auto to get centering.
So far, by the way, no CSS3. I’m planning on coming back to that, though.
Before I get into any more design stuff, I want to get the behavior working. Let’s go back to that original tutorial to see how it was done.
Add in the jQuery link. Simple enough. Then an “anchor slider” – which gives that nice smooth motion…and requires a class on all the nav links? Easy enough to modify the selector from a.anchorLink to nav a.
So…wait…the feeling of a separate page just comes from having a REALLY BIG margin between sections? Huh. Why is it using the Fancybox plugin, then? No reason, I guess: the thumbnails in the portfolio don’t seem to use it.
I guess we’ve gone back to just designing for the desktop, then.
Which leads back to a bunch of really frustrating fiddling around with paddings and margins, and the decision that my “pages” can’t be boxes floating over the background, but have to slide in like tabs. C’est la vie. While I’m here, time to move the navigation off to the right. Took out the footer, too, since it didn’t seem to be serving any purpose.
Realized at this point that designing for mobile just means moving the nav back under the name header and centering the contents of the header tag. Yay!
Then a little futzing about with the look of the form fields and some other spacing issues.
Time for a break. Next up: filling in the content properly, adding the shiny, and checking for backwards compatibility.
