Expert Advice: A Taste of Responsive Web Design
Thursday March 27th, 2014
The Internet turned 25 last week and I have to say that it’s only looking better with age. Twenty-five years is not a long time for something that’s become so prevalent in our culture. One computer used to take up an entire room, and now we can hold them in our hands and carry them around wherever we go.
When mobile browsing first became a possibility, designers and browsers alike didn’t quite know how to handle it. We were so accustomed to thinking of a website the same way we think about the print medium—in pages—when in fact the two are very different. Desktop-sized websites didn’t scale down well and viewing them on a smaller scale just wouldn’t do—far too much zooming and mis-tapping and frustration involved. So what were we to do with this strange magic of the Internet in our hands, with screens we could touch and tiny virtual keyboards rising up to greet us?
Some companies began creating mobile apps, while others developed “mobile-optimized” versions of their desktop counterparts which were especially necessary because of the prevalence of Flash-based websites at the time. Flash sites became popular for their spiffy page animations, sleek transitions, and elaborate functionality. The problem became, however, that Flash animations wouldn’t work on mobile devices, and Flash websites wouldn’t load at all. With a mobile-optimized version of a website, the site was essentially saying, “if we can’t show the main site, load this version to your phone instead,” and that worked pretty well for a while.
Pretty soon though, more kinks popped up when we realized that we’d targeted these mobile sites to the exact screen sizes of the phones we had at the time. All of a sudden, there were new devices of all different shapes and sizes coming out. To create and code a new version for each new device would be far too time-consuming, not to mention costly. That’s when we realized that we’d put a bandaid on the issue of mobile browsing instead of really addressing the problem.
In May of 2010, web designer and developer Ethan Marcotte coined the term “Responsive Web Design” (RWD), which takes the misguided “page” approach to the Internet, and looks at it in a whole new light—that the Internet has no edges. It is boundless, fluid, and infinitely flexible. Most importantly, RWD proposes that the web experience should ebb, flow, and adapt to deliver the best possible viewing experience for us, based on where and how we’re viewing. Where previous web design focussed on pixels, RWD targets proportions and ratios. It champions a “liquid layout” that is fluid and adjusts for your viewing pleasure by use of things like fluid grids, flexible images, and media queries. Media queries tell a site what screen size you’re viewing it on as well as how and what the site should load.
Since its inception almost 4 years ago, the web world has embraced RWD philosophy and practices, and as a result, we’ve witnessed the advent of a mobile-first, experience-driven digital renaissance. At first, building responsively was full of uncharted waters and seemed far more costly, since the site would need to be rebuilt from the ground up instead of just tacking on a mobile-optimized version to the existing framework. However, we quickly began to realize that a responsive foundation looks great in any scenario, on any screen, and will likely have a longer lifespan.
That said, building a completely custom responsive site from the ground up is still pretty costly and not always necessary. Not to mention, sometimes a mobile-optimized site is perfectly acceptable if it’s providing different functionality based on the paired down or altogether different needs of a mobile viewer. In the realm of portfolio sites, there are plenty of sites that offer perfectly suitable website templates that will serve all your needs for a low monthly or yearly hosting fee. The two template sites we most often recommend are aPhotoFolio and Squarespace. aPhotofolio offers one base template with tons of customization options, and is technically a scaleable desktop site with a mobile-optimized version. aPF has beautiful functionality, a built-in WordPress blog, and a PDF Builder a lot of our photographers love. Squarespace, on the other hand, offers several different templates with specialized features for the different needs of their subscribers. Squarespace is built responsively, offers built-in blog and E-Commerce integration, and translates extremely well on mobile devices.
The last time we discussed Rick Souders, I covered his rebranding and the customization of his new commercial portfolio site. Rick is a perfect example of when to use a template site vs. when to spring for a custom responsive site. Rick’s portfolio site is built on aPhotofolio, which suited his needs, had big beautiful images, robust SEO capabilities, and a customizable PDF Builder. aPF had just about everything Rick was looking for in a website and was mobile-optimized, so it made complete sense to go with this template, and the result is nothing short of excellent.
As I mentioned in my previous post about Rick Souders, his studio has not one but two blogs, which is both ambitious and admirable. The first, called Drizzle & Spritz, is a more conventional blog, updating us on studio happenings, recent projects, awards, recognition, etc.
The second, formerly named Souders Cookery, is a recipe blog that features a new recipe each week which Rick and long-time friend and fellow creative, Shelly Ruybalid, have prepared and photographed. While blogs can be somewhat simple, and Content Management Systems (CMS) like WordPress have plenty of responsive themes these days, sometimes custom is the only way to go.
For those of you curious about what a CMS is and does, it provides a user-friendly admin interface on the back end of your website which makes it easy for you to organize, edit, and add content, posts, pages. You can even tweak the look of your site without having to use custom code every time. Essentially, a good CMS makes it so you won’t have to seek out a developer or web designer every time you want to add new content to your site or make a slight cosmetic change.
Rick was looking for the redesign of his blogs to be unique, mobile-friendly, and in the case of the recipe blog, for it to have the distinct look and feel of an actual cookbook. Now that’s a pretty tall order and an electronic cookbook definitely wasn’t something we could achieve well with a theme or template. Luckily, we were up for the challenge, and that’s when we decided that the way to go was a brand new set of custom responsive WordPress blogs. We even decided to go the extra mile and design a simple wordmark for the header of each blog.
Drizzle & Spritz implements a sleek and minimal design which transforms itself depending on the size of your screen and the device you’re browsing on—each one a unique yet complimentary viewing experience.
In the recipe realm, we decided to rename “Souders Cookery” and that’s how Deliciously Different was born. Designing this blog proved to be much more of a challenge since Rick had requested that it mimic an actual cookbook and be mobile-friendly. I distinctly remember him saying something like, “I want it to look like an electronic recipe book. I’m not really sure what that means but I’ll let you figure it out” and we ran with it. I designed a brand new blog site from the ground up, creating a book-like format with actual paper texture for the blog posts, a woodgrain background, and even tweaked the new blog header to look like it was carved into the wood. I wanted the blog to feel as tactile and three-dimensional as possible, and I think the end result really achieves that, making for a rich viewing experience.
I brought recipe tabs into the mix as well in order to separate and organize the various categories and pages. These tabs then transform into two fold-out menus for tablet and phone viewing. My favorite part of the Deliciously Different blog though, is the full width “Today’s Special” feature at the top, which uses the most recent recipe image and showcases it to create a substantial and savory first introduction to the site. When you click on this feature banner, it even acts as a shortcut which navigates down to the first recipe post for you. Finally, the Souders Studios brand colors are reinforced throughout the site, from links and social media icons, to headers and hover states.
Rick was extremely pleased with the blog results and couldn’t wait to launch them. But don’t take my word for it; I’ll let him speak for himself: “Melissa did a fabulous job with the design of the new responsive blogs. Melissa was energetic and excited. She took the project very seriously and I have to say, she was a fun creative to collaborate with. The end result of the new look is spectacular!”
The blogs were equally challenging and rewarding to design and I’m thrilled with the end results. These blogs are a great example of responsive design, but also a reminder that if templates don’t have the unique appeal or functionality you’re after, a custom site might be the way to go. A custom site is a substantial investment, but when done right, it will be extremely rewarding and exactly what you’re looking for.
Pro Tip: If you’re curious whether a site is responsive or not, try dragging the corner of your browser and resizing your window. Watch how the website responds. A lot of sites have images that will scale and while that’s a characteristic of RWD, it doesn’t mean the site is fully responsive. Pay attention to how the menu behaves and whether elements are rearranging themselves and adapting as your browser approaches its minimum width. If so, then you’re looking at a responsive site. If it looks great on your mobile devices but isn’t responsive, and the site functions a little differently on mobile, then you’re looking at a mobile-optimized site.
Feel free to contact me regarding anything discussed here or if you’d like to embark on your very own design consulting project. Until next time, happy browsing!