My site is now responsive. The more I work with flexible images & grids and media queries, the more I appreciate what can be achieved.
Any apprehension I may have had about whether or not a responsive approach would harmonize with my design sensibilities and Paravel’s workflow was erased while working on the redesign of The Do Lectures website. We didn’t have to overhaul our process, were able to stay on budget, and ensured that the site hierarchy remained intact all the way from desktop down to mobile device views. I had such a positive experience on the project that I decided to take what I learned and the opinions I formed to this site for an update.
It’s been almost a year since Ethan Marcotte’s watershed A List Apart article on Responsive Web Design, and the horizontal scrollbar that showed when my site was viewed on my wife’s laptop has pained me ever since. My love for responsive centers around the idea that my website will meet you wherever you are—from mobile to full-blown desktop and anywhere in between. To say that people don’t view sites at half-width would have been a cop out. They don’t because we’re not offering it to them. While I’d prefer users to visit at full-width, I can’t deny that being able to compare two posts at once, or reference a web page alongside a text editing window would be handy.
Structural Integrity
If I previously had any hangups, they weren’t about responsive design itself, but centered around some implementations I’d seen. In most cases, I’d say that the drastic reshuffling of page elements on resize sucks can be disorienting to users. Granted, something’s gotta give when 3 columns are blended into 1, but a site’s structure & hierarchy must be preserved. If users visit once at full-width and again in a narrower window or mobile device they should should recognize the site and easily find their way around. I suppose this could be seen as another component of UX design.
We spend so much time focused on the rhyme & reason for the placement of every element on a page, why let all that consideration fall apart when a window narrows? Responsive web design isn’t about fitting content (like repacking a moving van), but about tailoring that content to fit the user (like arranging furniture). As device widths change, content and layout need to scale gracefully.
Introducing FitText
I love taking granular control over web typography and responsive, but I was worried those two things couldn’t coexist. How can the fine-tuned positioning of letters, words, or lines be made scalable? What happens when you want to preserve the lockup between a large format headline and the paragraph or imagery below without the h1 wrapping 2 or 3 times? Even for this site, there are quite a few places where layout depends on text displaying full-width regardless of window size. I realized Lettering.js needed a companion plugin, so I returned to my Paravel cohort, Dave Rupert, with the idea. The next day he introduced me to FitText!
I really wanted to challenge myself with adapting my old posts to my new responsive layout. Each post posed a unique set of problems to solve, and any that remained were solved by FitText. This jQuery plugin inflates web type to fill its parent element. No matter what size window, you’ve got full width text. FitText works perfectly with Lettering.js, or any CSS3 property you throw at it—see the title of this post as an example. It goes without saying that you’d never ever use this on paragraph text (I hope), but in the right place, FitText makes responsive web design even more exciting.
My Go-To Properties
Now that this site is responsive, I’m going to use it as a training grounds of sorts—continually improving how I plan and design for content. Transitioning into thinking about the web responsively isn’t automatic, and there’s some exciting work ahead in figuring out what works best. Since all of my articles have small, unique stylesheets of their own, I was able to learn a lot about how to make them look good at any width. Here are a few properties that truly kept this site update afloat:
- Background-size as a percentage helped me intuitively and seamlessly scale textures, illustrations and text-as-images from older posts.
- Declaring vertical padding or margins instead of height made preserving the aspect ratios of my headline banners a cinch.
- Column-count still isn’t perfectly reliable, but it simplifies transitioning from 4 to 3 to 2 columns on my tags section via media queries. When this and flex-box are ready for the prime time, code-out is going to be insanely efficient.
Ok, that’s enough outta me for now. I’ll post more about responsive web design & FitText soon. In the meantime, click around the blog or build something of your own with FitText. Thanks for reading & I hope you enjoy the site update!