I finally updated the site with a handful of changes I’ve been fiddling with over the past few months. It’s one of those complete overhauls that really don’t look much different at a glance, but it feels good to keep things current and in line with my own sensibilities. To mark the occasion, here’s a non-comprehensive list of what and why:
Centered Layout
A I opted for a single, centered column of text on most pages. The more I use tablets and phones, the more that left-hand margin reserved for meta data bothered me. Things felt unbalanced while reading. Plus, I think I’m going to enjoy having the extra space so that media can extend full-width from time to time.
Embiggened
The max-width of the site container has been increased to 1360px. I increase font-size and column-count for screens greater than 1200px × 500px and 1650px × 800px.
Pagination
At wider views, I stashed an easy-access pagination nav in the margins. I’ve noticed that Chrome has similar arrows appear on left & right swipe. Initially, I was hesitant to keep them because of that, but I found them so useful during buildout that they’re going to stay.
Proportional Grid
I simplified the grid. For posts, content within is centered and the width is governed to maintain good measure. I’ve also got a quick & easy proportional grid in place to split things into halves or thirds with ample 5% margins.
Improved Icon Font Usage
I updated my icon font and implementation to use unicode characters.
Page Updates
Info, Search, and the 404 page (complete with GIFs) each got overhauls.
I bought a Nokia Lumia 920 and have been test driving it over the past few days. Windows 8 has some really nice design touches so I thought I’d take a screenshot (press power + start) whenever I saw something that I got a kick out of. I particularly enjoy how things like indexing and settings are handled.
The phone is 70.8mm (2.8″) wide and 130.3mm (5.1″) tall with a screen resolution of 768px x 1280px. It’s large for a phone, but I’m getting used to it and mind it less when I see the difference those extra pixels can make for my favorite apps and sites.
Dave, Reagan, and I had a great time speaking at Texas State University yesterday. It was a privilege to see the School of Art & Design first hand and hear about their approach to teaching for the web. Sam Kapila, Grayson Lawrence, and other faculty members meet regularly throughout the year to discuss curriculum changes in order to keep up with the ever-changing state of the web. This enables them to add things like responsive web design to the lineup in a timely manner.
Think about it. Right now, students are learning about the multi-device web. They won’t have to unlearn fixed-width or desktop-centric ways of thinking. They’ll graduate with an accurate perception of what the web really is and the ability to build for it.
To top things off, Henri Couvillion gave us his mugshot sketch notes (above), and get this—Sam and her students put together a responsive GIF thank you page (below).
On Wednesday, November 7 at 7:00pm Dave, Reagan, and I will be speaking at Texas State University. We’ll be chatting about Paravel‘s history (embarrassing screenshots guaranteed) as well as our current work with responsive web design. We plan to keep things fairly low-key and conversational with plenty of time for Q&A.
Thanks to Sam Kapila for inviting us. She’s teaching RWD at Texas State currently. We can’t wait to meet the students and see what they’re up to first hand. The event is open to the public and in a 200 seat lecture hall, so feel free to join us!
Over the past few months we’ve been having problems with the Media Temple DV server that hosts sites like this blog, ShopTalk, and Paravel. With each new post or show, we’d inevitably experience a wave of sluggish performance or downtime. This was frustrating. I think the tendency (for me at least) has been to incorrectly point a finger at Media Temple when the real issue was that we’re not experts at server optimization or management.
Thankfully for us, we got connected with the folks at W3 Edge who helped optimize our server and the sites that live there. With all the time we spend optimizing the sites we build, it’s foolish not to invest in having your server fine-tuned by people who know what they’re doing.
I recently got a question about CSS experimentation from Paddy O’Hanlon, and I thought it warranted a quick post.
@TrentWalton I’m reading your interview in the new Insites Book. You mention testing out new CSS. Where do you keep up with what’s new? —@Paddy
My role at Paravel requires me to bounce around from Photoshop to email to my code editor quite a lot. Because of this, I tend to keep my frontend chops up to date with the help of the greater web community (and don’t we all). Here are a few people I’ve learned from recently:
This is in no way a comprehensive list. Above all, resist the urge to try to know everything all the time. Follow your interests and engage in discussion & debate on the things you care about. Read A List Apart, CSS Tricks, and Smashing, but don’t be afraid to dig into what’s happening at The W3C or go off on your own experimental path. As much as keeping up with what’s new can feel like keeping up with the Joneses, it’s important to remember that we always have the opportunity to help define what those new things are.
I can remember listening to Elliot Jay Stocks speak about all that went into getting 8Faces magazine up and running at Brooklyn Beta 2010. I’d bet that the dedication and courage he demonstrated in embarking on such a venture helped pave the way for some of the other delightful grassroots publications we’ve seen launch recently.
The magazine couldn’t have come at a better time. Webfont usage was exploding and the web & type design fields started to become fantastically intertwined. This is one of the reasons I nearly wet myself with excitement when he asked if I’d do an interview for issue #5.
It was a great experience, and I’m honored to be the riff-raff among such a stellar lineup:
Earlier this week the responsive website for Microsoft’s 2012 Build Conference went live. Happily, our favorite honey badger, Nishant Kothary, enlisted Paravel to assist with design and the front-end responsive code. Check it out!
When someone is as good at as many things as Nishant, it’s easy to forget that he’s also an amazing designer. His lead on content and information architecture made our job a breeze. Reagan collaborated with Nishant on fleshing out the layout while Dave and I coded the front-end. Be sure to check out some of Dave’s metro-esque CSS & JS animation work throughout the page.
I had a great time working with Microsoft’s humanist sans typeface, Segoe UI. It scaled beautifully as we increased body font-size from 16px to 32px at wider screens. The resolution independence of the Metro design aesthetic combined with Segoe’s flexibility inspired us to think just as much about extra wide viewports as we did narrow ones. Our widest min-width media query triggers at 1950px.
With each responsive project Paravel completes my perception and approach evolves. This time around I realized that my favorite part of the job is now all the content choreography & media-querying. Whereas code used to be pure execution for me, now it’s where I feel most creative and inventive. Furthermore, I’ve found it near impossible to evaluate the quality of a responsive design outside of the browser.
Lesson learned: Get it in the browser as soon as you can (if you don’t start there). Then, iterate like mad with a team you love to work with. Gosh. I can’t remember a more exciting time to be a web designer.
Also, be sure to check out Nishant’s write-up as well as the other versions of the site for before and during the event.
I haven’t been this excited about a Kickstarter project in months. As we spend more and more time on touch interfaces, it’s refreshing to see something that turns just about any physical object into a button.
MaKey MaKey is an invention kit for the 21st century. Turn everyday objects into touchpads and combine them with the internet. It’s a simple Invention Kit for Beginners and Experts doing art, engineering, and everything in-between.
I love the spirit behind this. As the father of a 15 month old, I can imagine that this will amount to infinite hours of creative invention for me him in the future.
