HTML CSS JavaScript

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

Day: Wednesday May 19th 2010
Time: 6:30pm – 8pm
Cost: Free

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.

Read the rest of this entry »

I launched the redesign of DrunkenFist.com last night. It's my second HTML5 site. I took a lot of what I learned from the work we did on A Wider Net and applied it to a much larger project. Fun times.

A couple of notes.
Read the rest of this entry »

The body is clearly going to take a while, since it contains all of the content on the page. I'll be breaking it out into chunks. This first post will focus on how I use the body tag itself.

I generally use the body tag to hold basic information about the page to use with both CSS and JavaScript. I want to capture the general type of page (home pages, landing page, gallery page, tertiary page, form page) and then the style of the page within the general type (e.g., art, movies, blog.) Coming up with a good, logical scheme for this kind of thing can generate plenty of unexpected benefits throughout a site build.

It can also help with planning as these classifications can be used as part of the estimation process- "I've got 5 major templates and 10 variations, that'll be 2 weeks of work."

Here are some examples from the ongoing redesign of DrunkenFist.com. These might help to crystallize what I'm trying to do.
Read the rest of this entry »

This won't be the longest entry in this series, but I did want to take a second to outline the way I organize files. You can come up with your own scheme. There are many. This one works for me, so I use it. The basic idea is to keep everything in a logical, easy to find place every time I make a site.

Let's take a quick look at the generic file structure I use:

Grab a copy from the starter assets repository if you'd like to play along at home.

Let's look at each in turn:
Read the rest of this entry »

You've all seen this, but now here it is from the official channel.

Speaking of WordPress and HTML5, I'm knee deep in the process of getting DrunkenFist.com relaunched and I've been doing the WordPress component for the past few days. It's super complicated. Which means, of course, I'm having a blast with it

There's a lot of content this week, including about 5 hours of video embedded right in the page for your viewing pleasure. Enjoy.

Analytics – The Usability Lab of the new decade

Peter Merholz from Adaptive Path talks up analytics. Don't I feel like a smart guy with all my fancy analytics experience?

That's probably something I don't talk enough about here- analytics. I've got a ton of experience with both Omniture and Google Analytics, doing some pretty advanced work. I should share that.

Anyway, good article talking about the UX benefits of analytics data. Check it out.

Short Code resources

This is a little resource page from one of the WordCamp Boston Ingite talks. Wordpress Short Codes are clearly awesome and I don't use them enough. I aim to change that.

I'm actually using them for the table of contents on my ongoing How To Make a Web Site series.
Read the rest of this entry »

Last time out we looked at the Anatomy of a Web Page. Using that, let's move on and look at the first of the two major sections, the head.

For the sake of this blog post, the head includes two pieces of code that are actually before the head. Sue me

Using the head from my (recently updated) starter assets project as an example, let's look at the code in detail. First, what it looks like in total:
Read the rest of this entry »

I have a real post queued up to go in an hour or two. To tide you over until then, I present the web development quote of the week:

Since my attempts at capturing web developers’ hearts and minds by publishing fundamental research have failed miserably but my thirst for attention continues unabated, today I will once more shout at iPhone developers. That’s proven to work.

More specifically, today I will shout at web developers who think that delicately inserting an iPhone up their ass is the same as mobile web development.

My emphasis.

Read the rest of the excellent post* over at Quirksmode:

The iPhone Obsession.

*it really is. It starts off with the above quote but goes deep into some issues that people ought to keep in mind when working on mobile sites- especially when faced with the titular iPhone obsession

HTML + CSS + JavaScript = Content + Style + Behavior

This the one of the guiding principles of the way I make sites. We want to keep our content/data, in the form of HTML (HyperText Markup Language) code, neatly separated from the rules that tell the browser what it's supposed to look like, in the form of one or more CSS (Cascading Style Sheets) and rules that tell the browsers what it's supposed to do, for our purposes, written in JavaScript.

Why?

Well, there are many reasons. I'll give you two big ones and then it's onto the next section. We've got a lot to cover.

Read the rest of this entry »