This sample is based on the default WordPress theme. It’s maybe not as complicated as a sign-up form, but it does show the basics. On to it then. Read the rest of this entry »
In case you were wondering, I’ve got two more posts after this one and then I’m moving onto CSS and JavaScript. I’ve got a post on forms (which I’ve been avoiding because forms feel like work) and then a post on the new HTML5 elements and then that’s it.
Writing about CSS and JavaScript will be fun. I’m excited. More excited than I am to write about forms at least. Which isn’t to say I won’t kick ass when writing about forms. It’ll be great.
Ignore me.
On with the show:
B, Strong, Em, I
From the just in case you were wondering what’s up with strong and em and why people use them over b and i department:
The b (bold) and i (italic) tags have been in HTML forever. I haven’t figured out when they first appeared, but they were promised as part of the documentation to the fist web site in August 1991 and later codified as part of the unofficial HTML1 spec in 1993, so 1992 is as good a bet as any.
Later on the concept of “phrase elements” was introduced. They were meant to add “structural information to text fragments” Two of those, strong and em are basically new versions of good old b and i minus the typographic baggage.
* 3.3 Use style sheets to control layout and presentation. [Priority 2]
The proper HTML elements should be used to mark up emphasis: EM and STRONG. The B and I elements should not be used; they are used to create a visual presentation effect. The EM and STRONG elements were designed to indicate structural emphasis that may be rendered in a variety of ways (font style changes, speech inflection changes, etc.)
This recommendation stuck. A lot of code has been written with strong andem and all good IDEs use them when you press the b and i buttons on the toolbar. They’re pretty standard now.
And that’s how we got to strong and em.
And now you know.
Interestingly, b and i are making a comeback in HTML5, having been given a new semantic lease on life. More on that in a couple of weeks. Read the rest of this entry »
Before I jump into the proper way to use tables, I’m going to share an anecdote that should bring a smile to the face of anyone who’s done this stuff for a while.
A few months ago I was both pleased and surprised to discover a web developer who didn’t really know how to lay out a page using tables. He had a sense of how it might work, but had never really done it. I was having him help out with an HTML email (where tables are still the safest bet) and the whole thing was a novelty for him. Looking at it, this makes sense as he’d been at the job for only a few years so he learned entirely in the modern era and he was lucky enough to only learn from good sources. Still, it was a new phenomena for me- encountering a developer who was purely from a CSS-based layout world.
Yes! We’re winning.
If you don’t know what I’m talking about when I talk about tables for layout, move along. There’s nothing to see here.
I did the conversion last week. As I’ve talked about blogs and HTML5 are so natural the whole conversion probably took no more than 8 hours. Of course, that 8 hours was spread out over a few days. Which is one of the big reasons I didn’t post anything last week. I was busy getting this site moved into the future.
I’ve now got 3 sites running on the shiny new futurespec and I can now say I officially like the new semantic elements. I also feel like I’m getting a good handle on them. Read the rest of this entry »
Lists! They might seem boring, but if you look at a lot of site source code (good sites at least,) you’ll see a lot of lists. A lot of obvious content on the net is in the form of lists (which is why there are three separate constructions for them) and a few years ago we started using them for less-obvious, but still valid reasons.
Using Lists as Menus
The biggest, non-obvious, use of lists is for menus. Someone, somewhere, pointed out that menus were just lists of links. Couple that insight with the power of CSS to bend boring old lists to the designer/developer’s will and we had a de-facto standard on our hands.
Here’s what the menu system for DrunkenFist.com looks like. It’s a lot of code, but it’s a fully-realized version of the pattern, so it’s useful to look at in whole. As a note, this is an HTML5 site, so the nav element is in place signifying to browsers that “the following block represents site navigation.” I’ll be covering the new HTML5 elements as the very last post on the body. Read the rest of this entry »
I recently ran into an interesting CSS Sprite. It contains what appears to be all of a web app’s site’s icons. What was interesting was the fact that it’s a 32 Bit PNG at 1500 x 1500 pixels- many of which are empty. Here’s what it looks like shrunk down for easy consumption and the empty space colored pink for emphasis.
As you can see there’s an awful lot of empty space. It’s mostly empty space. Between the huge dimensions and the empty space at how they would affect memory usage and front end performance.
I did a couple of tests. One was looking at the memory footprint of five sample pages in Chrome and the other was measuring download times with WebPageTest.
I’ll go through each of the variations I tried and then we’ll look at the results.
We’ll finish up our tour of the body tag with several posts featuring general notes about common content elements. I’ll be taking my time with these as getting this stuff right will go a long way towards getting the most out of your site.
Comfy?
On with it then.
Links <a>
The link is the engine of the web. The concept of Hypertext (the H in HTML) itself is expressed in the power of the link. Google is Google because of the power of links. There is no better place to start.
Basic usage
<a href="http://www.drunkenfist.com/"
class="contact"
title="my personal site"
rel="me">DrunkenFist.com</a>
Write Good Link Text
For body copy you want to write link text that is descriptive of the link destination. generally this means a short phrase (5-10 words, depending on who you ask) that clearly describes the link. For that reason “click here” is generally not the greatest link text. For a live example and more on this topic take a look at link chapter of the the US Government’s Research-Based Web Design & Usability Guidelines. It’s full of really interesting tips on handling links.
For the SEO-minded, the above advice has the added bonus of generally including keywords which flow link juice and context to the targeted page. Read the rest of this entry »
After relaunching my personal site and realizing all my other sites are in pretty good shape for the first time in forever, I’ve suddenly found myself with plenty of free “tech time” to mess around with whatever I want to mess around with. Which is cool, because, while I appreciate being able to tinker in a very practical manner on production sites and learning from what what works now, I really miss being able to mess around with the newness out there. Sometimes, like with the HTML5 work I’ve been doing, the two can meet, but more often than not the brand new stuff needs to sit on the burner a little bit before it’s ready for prime time.
You’ll see where all of this is going when you see the first topic in this month’s recent reading roundup. Read the rest of this entry »
There’s always a slide about performance in my presentations. This time? Every slide will be about performance. I’m chomping at the bit to get started on this one.
The Bocoup guys were crazy enough to invite me down to talk about my favorite topic- front end performance. Here’s the write up:
Front End Performance for the Common Man: Practical Strategies to Speed Up Your Site
Rob Larsen will examine the core concepts and techniques behind the performance of the web’s fastest sites and will translate them into practical examples. This talk will cut across several technologies (JavaScript, CSS, Ant, Apache and more) to present a suite of tools any developer can use to speed up their site- no matter the size or budget. RSVP to The Event Page.
It’s going to be a really good talk- full of practical examples and advice for every flavor and level of web developer. You should totally go.
Actually, you should just go to all the Bocoup talks. Smart people talking about killer technology = fun times. I’ll be a regular there.
Five posts in and finally we get to the heart of the matter- getting your content onto the page for your users to enjoy. This will be done in two parts. This, the first part, will deal with how to structure your HTML so it makes sense from and organizational standpoint and so that you can easily style it with CSS. Let’s look at a stripped down example of what I’m talking about.
