Reware Redesign Nerd Crap Revealed!

Since we spent so much time making sure the new Reware site was the best it could be, Beth asked me to spend a few posts over the next couple weeks going through some of the decisions we made and tools I used building it. Here’s the first one, with an overview of the front-end development. Apologies if it puts you to sleep. — Dan

Reware Vintage on iOS

Ever heard the phrase “the cobbler’s children have no shoes?” Well, that’s been Reware Vintage for the last couple years. The old site had been showing its age for a while. It was a slow, cumbersome process for Beth to add new items, and the user facing side wasn’t much better. The blog was a completely different theme from the shop, finding items in your size was nearly impossible, and the whole design felt very, well… 2006. I’ve been keeping too busy with side work, new houses and new babies, so the Reware redesign kept getting pushed to the back burner. So, this summer, after Beth convinced me it would be in my best interests to do some work on her site (waving the gun around really got my attention), we buckled down and got to it.

There have been lots of changes in web development since I built the original site (and the long-lived second version that you’re probably all familiar with). Web browsers have gotten better, data connections have gotten faster, social media is more important, and, of course, mobile devices are ubiquitous. That meant that the redesign couldn’t just be a new coat of paint on the old one. I started completely from scratch for Reware v.3.

Respond

The new Reware site is a responsive design, which means that it’s built on a fluid, percentage-based grid, and uses CSS media queries to change the layout for smaller screen sizes. Media queries are a great, device-agnostic way to customize the layout to be easier to read and use on mobile devices like tablets and smartphones. Try shrinking the width of your browser window. The layout, and all of the images will shrink to fit the screen. If you’re using a modern browser that supports media queries, you’ll see the layout change to a single column when you get narrow enough. It’s this layout that mobile users will see.

Reware iOS icon(A quick aside for iOS and Android users: If you add the site to your home screen, there’s even a smart looking Reware logo icon. Your cooler friends will be impressed by your taste in apps. And try pulling that bad boy out during a job interview. You’ll be moving into the corner office in no time.)

Math

Making the flexible layout on a percentage-based grid means that it’s time to pull out the calculator. If you want them to flex with the browser window, it’s no longer as simple as making the main column 600px wide and the sidebar 300px. For instance, the relevant rules for those two elements on the page you’re reading right now are styled like this:

Grid Overlay

div[role="main"]{
  width:65.4%;
  margin-right:3.8%;
}
aside[role="complementary"]{
  width:30.8%;
}

And you’ve got to maintain the flexible grid for elements within those main containers. This is how the items in a category in the shop are styled:

.items_list .hentry {
  width: 20.66%;
  margin-right: 5.78%;
}

To make sure everything scales sensibly, there aren’t many dimensions that are set in pixels. Nearly everything is set in percentages or ems.

Sassy

This was the first major project that I used the wildly popular CSS preprocessor Sass (and its companion framework, Compass). I’ve had other developers try to convince me of the benefits for months, so I decided to give it a fair trial on a big site. And honestly, I think I’m the only front-end developer on Earth that dislikes Sass. I don’t feel like it saved me any time at all, or helped me do anything I wouldn’t have ordinarily done with CSS3. I was most interested in how handy the nesting syntax would be, but it turned out to be more of a hinderance than a help, actually. For me, it’s much easier to read a long selector, than to have to scroll up to see what the parent element is.

I’m sure I’ll use it again in the future, based on how popular it’s gotten lately, but, for now, I’m switching back to plain old CSS.

Odds ‘n’ Ends

  • The site’s marked up in HTML5 using WAI-ARIA landmark roles, but, then again, what isn’t these days? Amirite??
  • If you’re using a browser that supports CSS3 transitions, check out that sweet hover animation on the category icons! Whoa dude!
  • I’m using Modernizr to shim HTML5 support and for serving fallback styles to IE, as well as Selectivizr to patch IE’s lack of support for CSS3 selectors. (However, I’m not using anything to add the vowels back into those tools.)

Anyway, that’s a quick wrap-up of some of the front-end technology that’s at work here. If you’ve got any questions for me about any of this, or want to try to bully me into using Sass again, let it rip down in the comments box. I’ll recap some of the other technology and process in the coming weeks. Back to your regularly scheduled posts about old jeans, or whatever it is Beth sells here!