HTML5 Pt.2 – CSS3 Misery…Making Progress

If you read my previous post you’ll know that I ‘m taking a trip down HTML5 lane and at the same time learning about CSS3 compatibility with various browsers. tEh goal is to build a fairly simple, but cross browser site that looks nice and has a decent experience. Sounds easy in this day and age? nyet…just check out my blog in IE8 – oops…CSS3 headings and gradients are busted. With that in mind let’s move forward with what I’ve learned about this.

Requirements

All good projects start with requirements. Here are mine:

• a clean look across all browsers – this site will be the main page for House of Beor.
• No tables or other junky crap!
• Fluid width – two columns I think, but with a minimum width
• Typography and fonts are cool – I would like to use special fonts
• Media and screen detection stuff is cool
• A design that is very simple

In my first article I started playing with Boilerplate. It provides an excellent starter for learning HTML5 and CSS3. I used the repsonsive templates from initializr.net’s site as a starter. As a starter this allows you to see something on screen and play around, but after a while you will start to struggle with the layout if you want something too different. My suggestion is to get apache installed and then start iterating on your design.

Working It Out

Its been quite a while since I played around with CSS. It kind of amazes me that there is really very few good introductions and practical guides to how style sheets really work. On the good side there are tools in Chrome and in Firefox (firebug) that are crucial for learning and debugging issues. I didn’t really find anything too helpful for IE.

After messing around with the responsive stuff for quite a while, I just couldn’t seem to figure out how to get the layouts to work across all browsers. I decided to start from scratch – (fine Matt you were right). I took large pieces of the standard CSS from responsive and carefully used only the parts I needed. My CSS goal was to get a single, simple, minimum width web site with no tables, no inline positioning, and no inline styles. I also wanted something that looked identical in IE7+, FF9+, and Chrome 15+. Should be easy, right? Not.

CSS Tips, Tricks, etc.
Well I suppose there a bunch of guides out there for CSS and I won’t pretend to know more, but there are a few things I learned while re-creating www.houseofbeor.net that might help out:

1. Think about your site’s page structure first. Cut out pieces of paper for each part and decided how you want the page to flow and change dimensions. Doing this will really save time re-organizing divs and page sections. Experiment with span vs div. In the end I used only divs.
2. Read up on HTML5’s tags for page structures: nav, footer. article, aside, etc. Take advantage of these blocks.
3. Understand floats – this is extremely important for CSS positioning. Think of your web page as a paper magazine or a page in world book encyclopedia and see how content wraps left to right and top to bottom. This is the essence of layout with CSS. Use a set of CSS classes to help out:
   .clearfix:before, .clearfix:after { content: “”; display: table; }
   .clearfix:after { clear: both; }
   .clearfix { *zoom: 1; }
   Check out the float tutorial for more.
4. Start small – before going whole hog into your page design, start small and simple and build on it. Use enough text and images to see how wrapping will work in various browser sizes.
5. Try your minimal design in FF, IE, and Chrome constantly to make sure it works in all. Use the debuggers in FF and Chrome to experiment with changes to CSS attributes.

The New houseofbeor.net

Well you can check it out for yourself and see and the code as well as the CSS in Firebug. I achieved what I wanted – a simple, easy to maintain HTML5/CSS3 site. From the initial boilerplate code you can see that I stripped out almost everything except the head and some trailing scripts. the same is also true in the CSS – I kept most of the lead in styles and the non-visual styles, but for the most part wrote all of my own styles for the main pages.

It takes quite a bit of work to get the layout to work correctly in all browsers, the trick is to play with padding, widths, and get pixel vs. percentage widths correct.If you play with the browser width you will notice that I have a fixed minimum width for the entire page, the header and content areas are width, but the footer is fluid. There’s also a left column and right column. Looks fairly simple, but its not across all browsers.

Percentage widths tend to play havoc with fixed widths and will cause wrapping. You need to play around quite a bit with padding, margins, and to also know the widths that you want. I’m fairly satisfied with the simple design that I have. I did also include some silly fonts from font squirrel – not 100% sure I’ll keep those, but it is an interesting feature of HTML5. I’ll probably add more fancy features over time, but right now I have to get back to some android and JSF stuff.

Sadly I do think that most of this stuff is well beyond the average person. On the good side there are services like wordpress.com where a “regular person” can go and create a simple web page and publish things. I have to admit the average person is not going to put up their own presence on the internet and if they can then creating HTML5/CSS3 is not that hard if you have the time and patience. I guess I can’t say that the web is totally dead.