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!

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!

Ads by Fusion

66 Responses

Leave a comment or contact me via Twitter @TrentWalton

  • Tim Brown

    Great job, Trent. And thanks to you and Dave for FitText!

  • Gary Aston

    Looks great Trent. I also love what you did with the Do Lectures site — I’d be interested in reading about your methods for fluid video in a responsive layout on that site ;)

  • Gustavo

    Sweeeeeet....makes me so jealous.

  • Rob Alan

    Excellent, Trent! Looking forward to trying out FitText when I get a chance.

  • Ethan

    This is a goddamned beautiful thing, Trent.

    Congratulations on the redesign, and on the impossibly fine-looking FitText. Can’t wait to play more with both.

  • Tim Smith

    Just when I thought you guys couldn’t top lettering.js, you come out with something awesome like this! When I grow up, totally want to be like you :p

  • Paul Wallas

    Great working on the adaptivness of your site to smaller devices. With FitText, do you still set a base font-size? Is it FitText that is also reducing the size of the font on smaller resolutions?

  • Gustavo

    Sweet...you make me jealous. Thanks for sharing.

  • Elliot Jay Stocks

    Congratulations on the responsive-isation (technical term!) of the site, man. And thanks so much to you and Dave for creating this plugin. You’ve just improved the world of responsive web design even further!

  • Thomas Hooper

    Awesome work, you (and Dave) just raised the bar in art-directed content :)

  • Brad

    “Art directed content” is a scary thought.

  • Cameron Koczon

    Man. This looks good. Leaving this comment from my iPhone.

  • Yaron Schoen

    Damn, this is just amazing. You took customizable posts to a whole new level with this responsiveness. The typography was really the missing link for me when I redid mine. I am soooo looking forward to messing around with FitText.

    Beautiful work Trent, as usual.

  • Steven Bradley

    About 12 hours ago I was looking at your site and I wondered why it wasn’t responsive. I wake up this morning and now it is responsive.

    Are you reading my mind? Should I be filled with paranoid fears? :)

    Looks great. The site looked great before of course, but now it looks great on more devices.

  • Brandon Houlihan

    This is fantastic, you guys making the web even more awesome with every project.

  • Ryan Merrill

    Great redesign, Trent. This whole Responsive Web Design really is the Web Standards of 2011.

    I’ve been pondering something for awhile now: What to do about images in the posts themselves? I know there are a number of JavaScript and CSS solutions out there to address this issue (http://unstoppablerobotninja.com/entry/fluid-images), but does that mean you load up the largest possible image size to all devices and screen resolutions? Does it make sense to load a 3mb JPG to both large screen and small screen devices, only to use CSS and JavaScript to scale down the ratio for small screen devices? What about bandwith? Or do you take the time to crop all images to multiple widths/heights? It’s a tough question, and one I don’t know the answer to as I work on a minor realignment of my personal site.

    Any thoughts?

    Kudos again on the site.

  • Trent

    @Gary Aston:

    I’d be interested in reading about your methods for fluid video in a responsive layout on that site

    That’d be a job for Dave Rupert. He put so much work in on that front and saved the day a number of times.

    @Paul Wallas: I do set a base font-size, but it should have little effect. Perhaps it’ll show if you’re loading FitText lower down on a page.

  • Ethan

    @Ryan Merrill, you might check out Filament Group’s responsive images script. Might be of interest.

  • Chris Armstrong

    I can think of a dozen uses for this already, nice!

    Oh and the site looks great on my phone.

  • Tanner

    Hands down one of the best responsive website designs I’ve seen yet.

  • Mau

    Trent, this is beautiful!

    Congratulations!

  • cooljaz124

    ^^ JEALOUS. Wow, this is so beautiful. I’m from my iPhone and the site looks sexy !

  • Trent

    Thanks, everybody. It’s been such an encouraging day.

    @Ryan Merrill: Looks like Ethan beat me to the punch on that handy resource from the Filament Group. For this blog specifically, I wasn’t too concerned about file size for mobile devices because I’m fairly concerned with file size & load times in general. Responsive has proven to be the right tool for this job—now my custom post designs display optimally at any width you like.

  • Gene Locklin

    Amazing. Now I can finally finish my site. Thank you.

  • Marc

    Great work Trent! This kind scaling functionality really shows you respect everyone type of users that visits your site, however they browse and whatever device they visit from. I usually have a lot of windows on the go on my laptop so I generally have my browser take up only half (or less) of the screen), site’s that respond according to the viewport they are in really impress me.

  • Rob

    Excellent work Trent! I’m a huge fan of the readability of your site. Now it even looks great on different devices.
    Thank you and Dave so much for sharing FitText. This plugin was exactly what I needed.

  • Jamie Neely

    Great implementation, Trent. A good act to follow.

  • Bart

    Sweet! Thanks for sharing.
    Little note, wanted to tweet this page but my Feedly button wouldn’t let me. It’s all messed up.

  • Trent

    @Bart: I’m not sure, but that may be a Feedly deal. I don’t have any tweet this code stuffs that’d get in the way. I’m glad you dig the post though :)

  • Erik

    I’m glad to see this blog in a responsive layout - what a great candidate. This is one of the more seamless implementations that I’ve seen (mixing fluidity with width stops), and I think it raises the bar for (and revitalizes my interest in) these types of layouts. I tend to dislike responsive designs that rely too much on fluid resizing, but this is a very nice balance. Likewise for the Do Lectures site.

  • Zach

    This is just simply amazing. What I like most about a lot of your posts, on top of them always being extremely innovative, is they get me really excited about working on the web. I’m way more of a designer than a developer, but it’s stuff like this that is gradually melding those two things together.

    Great post as always. And a huge congratulations to Dave and yourself on FitText, which will be making it’s way onto my site, and probably about 100,000 others, very soon.

  • Christian Krammer

    Nice job you have done there Trent! I really like the simplicity of the layout which remains unique at the same time.

  • Igor

    Rocks! The whole thing just works.

  • Paris Vega

    Nicely done, sir. Looking forward to making my next project responsive.

  • Gabrielle

    This is beautiful! It’s always a pleasure to visit your website. I’m going to try FitText after I’m done with my finals!

  • bberg

    awesome! unfortunately the websites i work on have loads of ads. if they shift 1px my head gets ripped off.

  • Christopher

    This is interesting, and I can see how it would be an instant value on simpler sites, but I think this would worth my investigating on a more complex design that has to pass muster in the Board Room setting.

    Intriguing, indeed.

  • bloodnok

    been playing with fluid designs for a while now and have yet to solve the problem of what happens to the site when you rotate your iphone in mobile safari. your site fails this test just as badly as my experiments do. a solution would be really nice ....

  • Jordan Terry

    You sir. have created a masterpiece. In the league of the Mona Lisa.

    The site truly is amazing great work with fit text.

  • Evan O'Connell

    I just want to let you know this post has inspired me to make my current project responsive. Now that I have a phone that can access the internet, I truly value a design that caters to all its viewers.

    I know some people were wondering about scaling images. One way I just thought of is to have a few different images that will be of reasonable file size and resolution for the screen resolution range you want to display for. Then you can define them in the different CSS media queries using the background-image property. It is a little extra work in Photoshop or what have you, but it should make for a simple solution.

    Thanks.

  • Sara Reffler

    Between this and the responsive redesign of the Web Designer Wall I have been itching to redesign my portfolio site to be more fluid and provide a better user experience. Reading the details on how you got it done makes me even more excited! I might just have to do it now!

  • Ben Tollady

    Hey Trent,

    I notice you’re using the 960 grid for site layout, but obviously a fluid version using % instead of px for the RWD. Did you modify your own or use a pre-built fluid version? If the latter - which fluid version of the 960.gs did you use?

  • Trent

    Thanks again everyone... I’m encouraged :)

    @Sara Reffler: Go for it!
    @Ben Tollady: I dropped in the fluid version at http://grids.heroku.com, and am pretty sure I didn’t change a thing.

  • Yeal

    Hey reading on kindle and it’s delivering very well ~ oddly better than Ethan’s due to contrast and crushed navigation.

  • Martin Lapietra

    I’m going to try FitText after I’m done with my finals..!

  • SeanF

    Great site and inspiring ideas - but crashes the browser on my Android HTC wildfire (as does the “do lectures” site) - could it be the FitText that causes this?

    • Trent

      @SeanF: Thanks for the heads up. I don’t think it’ll be FitText because Do Lectures doesn’t use it. I’ll have to look into this further. Let me know if you find out more.

  • Andrew Lohman

    Hey Trent,

    I’ve been doing some research regarding the (meta name=“viewport”) tag for some up coming projects. I noticed you didn’t include a “maximum-scale=1″ in your content tag. Just curious if you think this should be included or not included? It sounds like when switching orientations in Mobile Safari it might prevent some unwanted zooming. Anyway, I know this is a really nerdy response but any advice would be appreciated.
    - thanks.

  • Grey Lindley

    Hi there,
    Thought it was cool - then I switched off javascript on the demo page. Am I missing something? If it doesn’t degrade gracefully it’s nonDoublePlusGood.
    Looks like this could be solved with some further development? (e.g. “.no-js” styles).
    Otherwise - it’s cool! Thanks

  • Dave Rupert

    @Grey Lindley: That’s our fault. The plugin is still good, we’re just using a slightly broken version of FitText along with no proper fallback styling (currently set to 10px font). We’ll patch that up but feel free to file an issue on github if you think there’s more problems.

  • Boris Penev

    As much as I love the concept of responsive design, I have to say that I started getting suspicious about its real-world application among mobile users that don’t have a fancy iPhone in their pocket.

    I opened trentwalton.com on a nice touch screen Nokia mobile device (2010 model, 360px x 640px) running Opera mobile - no signs of a responsive design.

    I am beginning to question myself if responsive design isn’t just a drooling dream... or we are just responsive to those who can afford a high-class mobile device.

    Or is responsive design targeted at just our community? I don’t think so.

    • Trent

      @Boris Penev: I don’t think one could cry foul just because a particular responsive site doesn’t work on a particular device—especially when the issue is undiagnosed. Is Opera ignoring media queries or is it something else?

  • Gerry Straathof

    I have a function for my site which handles recalculations of widths and variables for several elements. This is called onload, onorientationchance and on resize. I have found that fittest doesn’t work on orientation change on the iPad, but putting the call for fittest within this special function works on orientation change.

    Will this add to memory overhead, or is it necessary to destroy/rebuild fittext stuff each time?

  • Greg Black

    Wow, what a large form. An interesting article you have here. A responsive structure is certainly made easier by not having much design and by that I mean the lack of personality this site has.

  • Dan

    Lovely website. I’m wondering what sort of font the fit for scale title is? Where did you get the font?
    I’d like to do something similar but the font I’m thinking of using is a vector so i’m confused.

    How would I replicate this? Thanks.

  • Trent

    @Dan: Sure! It’s Liquor Store via Typekit.

  • Artesanias

    Will this add to memory overhead, or is it necessary to destroy/rebuild fittext stuff each time...!!

  • Micha Posthumus

    I think you did a great job! Thx for the FitText thingy!

  • Anders Grimsrud

    @SeanF and @Trent:
    A bit late, but still nice to know: The HTC Wildfire will crash on any site using Typekit (unless you disable support for Android in the Kit Settings)!

  • Mohammed Munawar

    Hi, Just wondering if we can have the fittext with option to increase spacing, maintaining the original font size. This I require in parsed lines of an article with to show justify text and to make article auto pagination.

  • Trent

    @Mohammed Munawar: Not at the moment, but you’re not the first person to ask about it. I’ll see about putting it on the list. Also, I was curious to see if you can apply viewport percentage lengths to letter spacing, but it seems to be a no-go.

  • Richard

    I randomly stumbled upon your site and was struck by the imapact of the simple use of fonts. You have really inspired me with regards to the simple and clean feel that you’ve achieved.

    Would it be cheeky to ask you to have a quick look at my site and point out any ways I could simplify the look and improve font usage?

    Rich

  • Aardvark

    If I resize the window while being scrolled partly down the page, it jumps up and down painfully. Not that we expect people to mess around much once they are reading, but is there a solution to keep the page frozen while resizing?

  • Trent

    @Aardvark: I kinda just think that’s how the web works. Content is going to reflow on resize, so height is just going to change no matter what we do. Maybe that’s something on the browser or OS level that could happen though.

  • Bryan Veloso

    So nice! It works like magic! :D

  • Tim

    Massive font size and massive scroll bar does not lend itself to a usable web experience. This looks to me like a mobile site that has been painfully forced to work on a desktop, where the designer failed to consider the desktop environment. (I am using a 16:9 ratio monitor, and it doesn’t rotate to a vertical orientation) Large text sizes create longer scrollbars and necessitate more frequent scrolling. Scrolling text is more difficult for the eye to track than stationary text. The natural movements of the eye (saccades) allow a person to scan a large area of text very quickly. A person quickly reading, looking for keywords on a page, for instance, would be better served by a natural text size, as we commonly see in printed books and magazines. Reading this page is more like browsing a magazine with 350 pages, printed in 40point font, and flipping pages trying to find a good article to read while sitting in the waiting room at the doctor’s office.

Leave a Reply