Mobile interfaces are beginning to feel like less of a restrictive experience to users; it's mostly because designers and developers are adopting a smarter ways to tackle different device resolutions with responsive web design. We had a chat with Ethan Marcotte, respected web designer and author of Responsive Web Design, and asked him a couple of questions on this topic.
This Month's Spotlight Interview:
Web Designer and Author of Responsive Web Design
Ethan describes himself as being passionate about web standards and gorgeous design. Learn more about him from his blog.
V: Tell us about your book. When does it come out? Who would benefit most from reading it?
Thanks for asking! The book is called Responsive Web Design
and it’ll be available in paperback and eBook on June 7th. You’ll be able to buy it at Abookapart.com
. Basically, the book is a concise overview of everything a busy designer needs to know about responsive design: how to marry fluid grids, flexible images, and CSS3 media queries to create these designs that adapt and, well, respond
to various devices and browsers. But beyond the technical ingredients, there’s also a discussion on *how* we can adapt our design workflows to this more flexible approach. In short: if you liked my original article
, my book will get you the information you need to start experimenting with responsive design.
V: As a designer that does not code, do you need to embrace a minimalist style to optimize your designs for different classes of devices?
Ethan: Let me start with the short answer: absolutely not! There are some beautiful, intricate responsive designs out there. I’ve got too many favorites to list them all, but check out Trentwalton.com, Webdesignerwall.com, Hicksdesign.co.uk, Designmadeingermany.de, and Stephencaver.com for a sense of what we can do when designing for the web’s inherent flexibility. However, that word “optimize” is interesting. While it’s definitely no longer true that a small screen device equates to low bandwidth, the shift toward the mobile web affords designers a rare opportunity: a chance to focus. For responsive projects, it’s especially critical to make a commitment to our content, and focus on the material that’s absolutely essential to our readers. That’s not to say that a responsive design should be light on content, features, or aesthetics—far from it!—but the book explores a few ways to help us be more responsible with what we design, and to whom we serve it.
V: Are brands aware of user's change in expectations when browsing content from their mobile devices?
Ethan: Well, our users’ expectations don’t necessarily correspond to the device they use. There’s been a lot of discussion online about a “mobile context”: that the needs and goals of a reader browsing the web on, say, a mobile phone will differ from those using a tablet or a laptop. Research has shown that’s far from true; the picture is much more complicated than that. That’s not to say that your audience’s expectations might be context-sensitive: but rather, the terms “mobile” and “desktop” don’t exempt us from researching what it is our users actually need. So if you need separate mobile and desktop experiences, fantastic! But for those sites where there is a high level of contextual overlap - and I think that’s true for many sites - a responsive approach will work
V: What type of business is more likely to fail or lose customers if it would ignore the principles of responsive interfaces?
Ethan: Heh, that sounds so severe! It’s definitely critical for companies to be thinking about life beyond the desktop: mobile web traffic has exploded in recent years, and that trend’s not reversing any time soon. But there are a number of fantastic solutions to that problem, with many businesses exploring native applications, mobile-specific web sites, and, yes, responsive designs. Each should be evaluated based on their unique strengths and weaknesses, and measured up against the needs of your site, of your audience. In the book, I make some suggestions about how you might make that decision, and how to determine whether a responsive approach is right for your project.
V: Can re-thinking an experience to fit a mobile device first, turn into a creative design workflow?
Ethan: Oh, absolutely! In the book, I argue that adopting a “mobile first” approach can benefit any design project, responsive or not, and benefit all our users—regardless of their device.
V: Is there a specific step-by-step process you found to be most efficient when you want to have the interface perfectly optimized for different devices? What's the most important thing to start with?
Ethan: Start with what you know: focus on designing a compelling experience, whether for mobile or desktop, while ensuring that the content you’re designing is essential to all your users. Then, once you feel like your creative direction’s on the right track, I think it’s helpful move into code as soon as possible. By refining the design iteratively in HTML and CSS, we can design in a much more flexible medium than our favorite graphics editors: the web itself. Thanks so much for the great questions, and I hope you enjoy the book!
That was a great interview! Thanks and keep in touch!
The web is changing from emerging technologies that challenge current solutions used in design and development. User experience has grown to incorporate both tactile experiences and our perception of a system's ability to respond quickly and naturally. Building interfaces that are responsive to the way your audience is consuming your content will help keep your visitors engaged on more devices in more places.
|Monthly Freelancer Tip:
Start Using Version Control: Saving hundreds of different filenames to have access to previous versions of designs or code on your hard drive, or not saving past versions at all is not an efficient approach.
Git and Subversion are the most popular version control systems for developers and designers. We like Subversion for design files and Git for code because of its speed. Read more about Subversion and Git to find out which is the best for your workflow. If you are a designer you may be saying at this point, "Wait a second, don't I need to use a command line tool for these?". While many developers may be comfortable and prefer accessing their repository via command line, there are some GUI clients that are extremely easy to use. We like Versions or Cornerstone for Subversion and Tower for Git. Get a repository setup quickly and easily on Beanstalk or Github and start managing your work more efficiently today.
Signup for hosted Subversion and Git repositories on Beanstalk and get 10% off your first month with this link: http://bnst.lk/luiSAM.
If you enjoyed our interview with Ethan, please share it with your friends and check out his new book, which will be available on June 7th: Responsive Web Design.
|Did you enjoy this newsletter? If you did please forward and share it with your friends!
Until next time -
The Velora Studios Team
What makes infographic design fascinating? Check out our interview with @Gerson_Mora, winner of Malofiej Prize '11
Link to Tweet
20 great websites with parallax scrolling from The CSS Awards
Link to Tweet
Can Algorithms Help Design the Ultimate Gestural Interface? via Co.Design
Link to Tweet
Are you a Ruby on Rails Developer?
View positions and apply on our jobs page.