6 Reasons I Updated My Website

Revisiting your site is a tough project because you want everything to be perfect. This is also the most common reason to let your web property get decrepit. However, there’s a secret advantage to pulling your boots tight and jumping into a personal project: you get to learn. When you’re digging in your own sandbox… Read more »

Fishy Devices
Fishy Devices

Revisiting your site is a tough project because you want everything to be perfect. This is also the most common reason to let your web property get decrepit. However, there’s a secret advantage to pulling your boots tight and jumping into a personal project: you get to learn.

When you’re digging in your own sandbox you can do what you want with the castles. There are a number of reasons I decided to revisit PMarich.com, most of which have something to do with a process or idea I’ve picked up in the last couple years, but haven’t been able to fully explore in my other work. While the site isn’t exactly where I’d like, v.1 has some core new features that are worth sharing:

  1. It’s designed and built with ‘Mobile First’ in mind
  2. More responsible Responsive Design
  3. HTML5 page elements, I’m not afraid anymore
  4. SVG images and font icons
  5. CSS written with LESS
  6. We’ve got a blog, and content too!

Mobile First, it’s Not Just Evangelical, it’s Smart

I try and be practical about process and with my expectations for my websites. Mobile First was a notion that only partially clicked with me until I saw someone demonstrate it in a ‘real world’ scenario. I get it: there’s a lot of freakin phones out there. I have one, I know. The real value here is in the process.

This site, and this applies to responsive sites, was coded for mobile devices first. Then code for larger screens was added in media queries and scripts. So Ted’s little flip phone doesn’t have to load all the crap that Margret wants to see on her iMac (See, personas make it real). That’s how simple Mobile First is, and there are great benefits:

  1. Speed, you load smaller images for phones and larger ones for larger screens. Google conditional image loading if you have questions. Dave Rupert writes about methods for this, he gives a great overview in this post. Lastly, if the image is presentational, load it with a media query.
  2. Well Structured Content, you start with your content in order based on importance. You have a better idea of it’s value and relation to other content as you work outward.
  3. Designing as you scale gives you better perspective on the ubiquitous nature of your site rather than just designing around key break points, something we’ll talk about…

Luke Wroblewski will help you test the waters with his book Mobile First, from A Book Apart. He also expands on the topic frequently on his site lukew.com.

Now. More Responsible Responsive Design

Did you know that you don’t have to have a separate page, or designated space for media queries? That never occurred to me till I saw Jen Simmons slap one in the middle of a style at the Artifact Conference in Austin. Mind blown. OCD tickling. Pages, very flexible.

The point is: you shouldn’t make assumptions. Designing around a 420px break point assumes a better Android phone won’t come out tomorrow, and we all know that one will. Your site should be functional at every screen width (please tell me if mine breaks). As I was designing this out, expanding my browser and adding things, I was only using the width of the browser as an arbitrary number to put in my code when something started to suck. The number wasn’t something I focused on.

Great tools for monitoring your browser width are included in the Web Developer Toolbar from Chris Pederick (I like to add the width to my title, even though it can make for weird Evernote perusal). Firefox also has a great tool built in under Tools>Web Developer> Responsive Design View.

A year or two ago I broke a lot of semantic rules getting this site to work at different break points. The updated version focuses more on percentages and being flexible.

The bible for responsive web design is, again from A Book Apart, Responsive Web Design by Ethan Marcotte. I’d Recommend more research though, it’s only a two year old bible.

HTML 5, woo!

This is easy. I’ve been using the HTML5 Boilerplate as a framework for a lot of my work. It may be irresponsible of me, but I still don’t know all of the goodies hidden in it. It does work though, and seemingly well. This site wasn’t built on the boilerplate, but WordPress incorporates a lot of the same benefits. I simply thought I’d add some of the structural code.

The HTML5 Cookbook, by Christopher Schmitt and Kyle Simpson, helped me make a lot of these decisions.

Font Icons & SVG Images

As a designer, I’ve learned to loath the sprite. I have seen people put very large and cumbersome things in sprites, often with a background position of 2345px 234#$234px. Salvation is here.

Font icons have the benefits of sprites in that they load once, because they’re just a font with all your icons in it. They’re also super light and easy to make and edit, unlike sprites. They’re vectors though, so despite scaling beautifully, they’re monotone and don’t support details like gradients.

I used Icomoon.io for the icons on this site, some of which are from their free collection.

Another thing I had to consider is the problem of responsive sites becoming really heavy, using SVG for flat images helps. While it’s not 100% supported, it’s supported by modern browsers and there are work-arounds. Check out Chris Coyier’s CSS Tricks for the 411. For your non-vector images there are also some great ways to further compress images after Photoshop. I used this PNG compressor for Mac, but TinyPNG is also popular.

LESS, CSS Pre-processor

This is where things get beyond my meager cognitive abilities as a pixel pusher. So, if you have a local hosting tool like MAMP (sorry, I work from a mac), you can do some crazy things with LESS or SASS, or whatever preprocessed you choose. The framework I build on top of is definitely set up for LESS, why? Because:

  1. Variables. you can modularize any style or color. It’s like Javascript, but lovely lovely CSS.
  2. Mix-ins, these are like functions or extended variables. Honestly- not good with these yet. It takes a lot of fore-site, but redundant chunks of CSS can be instantly called with a variable this way.
  3. @import. Not a new idea, but you can nest a dozen stylesheets and still your site only queries one.
  4. Nesting. You can wrap styles within styles. This is amazing for organization- but has drawbacks…

Concerns: Nesting and @import work in organizational opposition. I have ideas about this, which I intend to write about later, but I say limit the stylsheets you use. This works for me. I also say to remember that every style you wrap within another adds at least one more selector. This can compound quickly. I’ve tried to be cautious of this and to not let LESS keep me from using commas to share common styles across selectors.

This introduction, by Steven Bradley at Vanseo Design, helped me choose LESS and get my feet off the ground. If you’re worried you’ve gone nest crazy, using Google’s PageSpeed tool or even Firebug can tell just how much excess selectors are weighing down your code. Don’t worry it’s probably not too bad…

BLOG BLAH BLOG

As I get better at this stuff I’m realizing that I’m not much good to anybody if I don’t share. The least I can do is make this stuff visible, and hopefully I get in on some conversations that will help me grow and maybe even shatter the stalwart confidence I’ve erected at the alters of HTML & CSS. Anyway, this is more exciting than the portfolio site I had before. I like stories, and I like content. Go team.