Me, Talking About HTML5, Flash, and the Cloud as Part of the Isobar 50

by Rob Larsen

What’s the Isobar 50? Glad you asked:

Got questions? Get answers!

Let’s face it. Marketing in the digital age is hard. Where will you put your efforts? How do you know it will pay off? The Isobar 50 is our list of the top 50 challenges that online marketers are grappling with today, and our recommendations for dealing with them. If you’re an online marketer, this is the place to get answers to your most pressing marketing and online business questions.

I provided answers for three of the questions and I even sound like I know what I’m talking about:
Read the rest of this entry »

I’m Going to Enjoy Writing Code for Internet Explorer 9 (I Can’t Believe I Just Typed Those Words)

by Rob Larsen

In case you missed it the latest Internet Explorer 9 Platform Preview is out and it’s a thing of beauty. It added Canvas support so the first thing I did was run it through some demo code. It’s faster than Chrome. Visibly faster. No benchmarks needed. It’s such an incredible difference from the current Internet Explorer family which are many times slower than the good browsers out there.

The good news doesn’t stop there. There’s actual standards support.

PPK enthuses:

In the past few days I’ve been revising the CSS compatibility table with information about the latest crop of browsers. There’s no doubt about it: this is IE9’s show. It just supports nearly everything. No hassle, no buts.

And then enthuses some more:
Read the rest of this entry »

In Case You Missed It:

by Rob Larsen

I started doing some writing for Isobar/Molecular.

My first post:

An Introduction to HTML5

HTML5 is the latest version of the language that serves as the foundation of the web. It’s the first major revision in over 10 years and as it’s gotten closer to its final form and more and more browsers begin to implement its features it’s become a source of intense interest and contention in the technology community. This article hopes to explain the realities of HTML5, dispel a couple of myths and shine some light on the future of the web.

To begin we’ll need to define what we’re talking about when we say “HTML5.” There is a specification to refer to and much of what falls under the HTML5 name lives in that spec. In addition, there are several related specifications and APIs that are lumped together and called “HTML5″ when people talk about these things informally.

So, conversationally, HTML5 consists of the following:

New Semantic Elements

HTML5 has introduced several new elements. They aim to introduce more meaning to markup and codify existing web development patterns. Some examples of these new elements are nav (for navigation), article, header and footer.

Read the rest of this entry »

I also added a few bits and bobs to our our front-end development best practices, a doc which has been making the rounds a little bit over the past week.

Check ‘em out.

How To Make a Web Site the Modern Way. Part 3: A Quick Aside on Organizing Files

by Rob Larsen

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 »

Recent Reading (Analytics, WordPress Short Codes, Jira, JavaScript Videos, Protocol Relative URLS, Facebook)

by Rob Larsen

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 »

Let Me Direct You to the Quote of the Week.

by Rob Larsen

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

How To Make a Web Site the Modern Way. Part 1: The Anatomy of an HTML Page

by Rob Larsen

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 »

How To Make a Web Site the Modern Way. Part 0: Introduction

by Rob Larsen

Well, I leaked it earlier this week, so I might as well get started.

Welcome to How to Make a Web Site the Modern Way, a blog series outlining, to the best of my ability. how to build an HTML page using today’s best practices. The focus won’t be on specific coding techniques, although there will be some of that, it will be on how the pieces fit together. Without experience, it’s tough to know how the pieces of a web page fit together in the best way. I’ve got some of that experience and I’d like to share it with people. So at the end of all of this, I’m hoping this series will serve as a one stop shop for people looking to understand the big picture.

First up: The Anatomy of an HTML Page .

Some basic principles:

  • Fast: I want pages to be as fast as possible by default.
  • Findable: This isn’t really the same as SEO, but it’s kind of like a cousin to it. I want to make pages spiderable, human scannable, computer readable and generally information rich.
  • Standards compliant: I’m not a standards zealot, but I try my best to follow web standards wherever possible.
  • Accessible: I try to make pages as accessible as possible.
  • Usable: Usability is a deep topic, but there are things you can do, by default that will enhance the usability of your site.
  • Intuitive: I want developers to look at the stuff I do and say “hey, that makes sense.” I also want it to make sense to me when I return to it in six months :)
  • Breakable: Which is a funny way of saying “graceful degradation,” a concept that colors a lot of what I try to do. The idea being- if something’s going to break, or not work as expected, make sure that it’s not totally screwed up

The Rest of the Series

Starter Assets

by Rob Larsen

I just wanted to point folks to the small project I started on Google code- Starter Assets.

It’s based on some work I did at Cramer to standardize the development process there. The idea was to provide a standard set of files and a standard file/folder structure for people to start with whenever they were initiating a new project. I’ve expanded on it in this case to (eventually) include several doctypes (right now it’s just xHTML strict- HTML5 will follow soon) and links to popular JavaScript libraries on the Google Ajax Library CDN (just jQuery for now.)*

To use, you’d just download or SVN export the folder that corresponds to the doctype/library combination that strikes your fancy and you’re good to go.

I’ve released it in advance of a blog series I mentioned during my JavaScript presentation this past Thursday. It’s a step-by-step tutorial on how I build web sites called, “Building a Modern Web Site.”
Read the rest of this entry »