Redesigning Archetyped: Start with a Solid Foundation

By Sol in Know

Way back in 2007, there were a number of doctypes to choose from depending on how you wanted your site to appear. At that time, the XHTML 1.0 (Strict) doctype was selected for Archetyped because it was among the most forward-looking and structured of all the available doctypes.

Enter HTML5

Six years have passed since those dark days and thankfully the web has seen the light. Today, HTML 5 is the only option I would consider as a foundation for a website. I now build all sites with HTML5 and I even have fun using it. Though specification is not quite done yet, HTML5 is well-supported by all modern browsers both on ball & chain (desktop) and free-spirited (mobile) devices (yep, it’s even decently supported in IE 10).

Give it Structure

We now live in a world filled with an astounding variety of devices for consuming content. People are using desktops, tablets, smartphones, and everything in between (phablets, slimtops, lunchboxes, etc.) to access your website’s content more than ever before. What’s more, new devices and new form factors are constantly being introduced. In order for your content to be accessible to the multitude of current and future devices, it must have structure. With new elements in HTML5 like nav, section, article, and aside, we can finally give real meaning to the various parts of a page to assist devices in formatting your site’s content properly for optimal viewing. With HTML5, the semantic web is finally a reality. If for only that reason, HTML5 is the ideal starting point for a website.

Keep it Simple

Remember when you had to compare the different doctypes and then you had to find the URI for that doctype in order for the browser to understand it properly? For example, here’s Archetyped’s old doctype declaration:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

And here’s all you need for HTML5:

<!doctype html>
<html lang="en">

HTML5 takes away the pain of getting started so that you can keep on moving forward with building your site. Pound it.

Foundation as the Foundation

There’s no doubt that HTML5 is the best choice for a modern website, but it’s only the first part of building a solid foundation for your site. You could totally geek out on this and build everything from scratch. It’s great fun and it’s the way I’ve done things for years, but times have changed. Standards-based front-end frameworks have matured to the point that they serve as perfect foundations for high-performance websites. That’s why I highly recommend using a framework as a foundation for your site. Your goal should be to get the foundation sorted and out of the way as quickly as possible so that you can get on with the actual design. For example, Archetyped will be built using Foundation.

Zurb Foundation

A monster with glasses, I’m home.

Why Foundation?

Foundation is a robust front-end framework that is suitable for building all manner of websites. There is no shortage of high-quality frameworks out there, but here are some things that make Foundation my top pick:

  • Based on HTML5 — See above if you’re curious why that’s important.
  • Flexible Grid — This makes it incredibly easy to quickly create an clean layout that will look at home on any screen.
  • Uses Sass — CSS preprocessors like Sass and LESS all have great features, but I’m partial to Sass. There are several reasons for this, but in the end, it’s mostly a stylistic choice. As a bonus, Foundation uses Sass’ SCSS syntax which I also prefer over the older indented syntax.
  • Responsive to the core — Foundation was built intentionally to be responsive so that you have full control over your site’s presentation on any device and form factor.

I’ve used Foundation on several production sites so far and plan to eventually migrate all of my sites over to this framework, starting right now with Archetyped.

It’s about Access

As I said in the overview of Archetyped’s redesign, the main goal is to support Archetyped’s growing community of users. By starting with a solid foundation, users will be able to effectively access Archetyped’s tools and resources (tutorials, documentation, forums, etc.) on any device from anywhere in the world. The paint may change again some time in the future, but your site’s foundation should continue to be a solid base for a long time to come.

Follow the Redesign: New Episodes Every Friday

This is only the second episode, but I’m even more excited about this redesign and what it means for Archetyped and it’s community. I’m opening up my design process and sharing everything as I post updates every Friday on the redesign’s progress. I’d also love to hear about your experiences with redesigning your site, so leave a comment and link below!