July 9-10, 2013
San Francisco, CA

Early Bird Tickets on Sale

Igor Faletski is CEO of Mobify.

Until recently, almost everyone who accessed the web used the same device: a desktop computer. In 2006, just two screen sizes accounted for 77% of all web usage. If designers were building bridges instead of web sites, in 2006 they only had to plan for Ford Model T’s.

As you know, this paradigm has completely shifted. Our research found that today, eight screen sizes—various laptops, smartphones, tablets, monitors, web-enabled TVs, and netbooks—account for 77% of web usage. What’s more, no one screen size has more than 20% of the market share. Today, we must plan for all sorts of vehicles crossing bridges, from the slowest scooter to speedy Ferraris to enormous Mac trucks.

The fix for today’s multi-screen world where smartphone and tablet users expect as rich and graceful a web experience as desktop users is responsive design. Responsive has become the darling of web designers and developers, and is fast becoming the dominant approach to building new websites. With good reason, too. A responsive design workflow is one of the most effective ways to build tailored web experiences for different screen sizes.

But responsive isn’t a magic bullet. It may solve the problem of screen size layout, but there are inherent problems with the responsive approach that many developers gloss over. Here are four common mistakes that could plague your responsive project.

Mistake #1: Your responsive site is over resourced

At Mobify, we analysed responsive websites for 15 top e-commerce vendors. The data revealed that the average homepage uses 87.2 resources, consisting of 1.9 MB of data. The reason those numbers are so high is because together they dictate how web pages must render on a whole range of different devices and screen sizes. What happens when your responsive site needs to load 87 resources before your site renders? It slows down.

It goes without saying, we all hate waiting for websites to load. When smartphone customers are forced to wait an extra second, conversion rates drop by an additional 3.5%. By the three second mark, 57% of users will have left your site.

To improve responsive website performance, make sure only necessary resources are sent to customers’ smartphones, tablets and desktops. You can compress and concatenate JavaScript and CSS resources with tools like SASS for CSS compression and Uglify for JavaScript compression, or with Mobify’s automated JavaScript and CSS acceleration tool.

Mistake #2: Your images are bloated

Images pose a major responsive design problem. Since a responsive website uses a single markup across devices, how do you make sure that only big, beautiful images are served to Retina iPad displays, while old smartphones get smaller low-resolution images that will load quickly?

For image-rich websites, page performance on mobile can tank along with conversion rates. Plus, the wasted bandwidth costs of sending weighty images to the wrong devices is practically throwing money away.

The good news is that several solutions exist for dynamically optimizing your images for all screen sizes and resolutions, including an automated tool we created. This means you can always send the right images to the right devices.

Mistake #3: Mobile doesn’t mean “lite”

When it comes to content, responsive designers currently have two choices. They can choose to load all the existing desktop content, or load specific content for small, mobile screens. We used to think that accessing the web via a small screen meant that users wanted a “lite” experience. Not true. According to Google, 90% of web users move between devices to accomplish a goal. That means someone accessing your website from a smartphone likely wants to perform the same actions—like buying your product—as someone from the desktop.

Truly sophisticated websites will need to move past responsive layout and take content—not just context—into account. That could mean more thoughtfully creating additional content, structure and metadata that works across all screens.

Mistake #4: You broke the bank

Shoehorning an existing website design into a responsive framework that works on every browser and will degrade gracefully in older, legacy browsers is complicated and expensive. Try rebuilding a site from the ground up instead of manipulating existing design—it’s generally cheaper and easier.

Another option is to use adaptive templates rather than a single responsive design. Adaptive templating lets you break up the design into multiple responsive templates that are targeted to different device screen sizes and resolutions. This solution lets you test and launch iteratively, bringing down the time, development and quality assurance costs of going responsive.

Responsive design is indeed a big step forward in solving the multi-screen conundrum. But it’s still a nascent approach and requires thoughtful implementation to deliver top-notch customer experiences in today’s post-PC world where 31% of all traffic to US e-commerce sites already comes from smartphones and tablets.

Mobile design image via Shutterstock

Igor Faletski is CEO of Mobify.

Webflow is a fascinating tool for would-be web/mobile designer/developers. It lets you create beautiful, responsively designed websites in a simple user interface, then it exports production-ready CSS and HTML code.

The GUI is like a kid-friendly version of Photoshop: tool panel on the left side; tool details and “layers” on the right side; plenty of fun with drag-and-drop.

“The initial inspiration for Webflow came nearly a decade ago, when Blogger first came out,” said Webflow co-founder Vlad Magdalin (pictured) in an email conversation with VentureBeat today.

“It was amazing how many barriers that tool took down for people who wanted to share their thoughts on the web. You no longer needed to worry about hosting, FTP servers, HTML code, maintenance, yadda yadda — just type up a post and hit ‘Publish’ — almost magical.”

From that moment on, Magdalin tinkered with ideas for visual web development, paying the bills with web design and development for clients. Webflow evolved as a way to do all of the above more elegantly and efficiently.

You can check out the dog-foodie demo and play with it yourself, or you can watch this video clip for a better idea of how it works:

In some ways, it really, really reminds us of Adobe Edge products, especially Reflow, the company’s all-in bid on responsive design software.

“There are lots of recent startups (and Adobe, of course) that are trying to abstract away some of the the complexity behind web design,” said Magdalin.

“As far as I know, we are the first (and only?) visual tool to focus very strongly on abstracting away some of the core concepts behind CSS, namely selectors and cascading. These are pretty hard concepts to pick up at first, and are not as easy as just dragging-and-dropping something, but are insanely powerful because they mimic the process of people who are fluent in CSS.”

Founded in September 2012, Webflow is the work of brothers Vlad (the hacker half) and Sergie (the designer half) Magdalin. The company is based in Mountain View, Calif.

---

Big Data and Predictive/Real-time Analytics startups: Are you looking to jumpstart development & accelerate market traction? Sign up for the SAP Startup Focus program to receive technology, support, resources and community to help you develop new applications on SAP HANA, a cutting edge database platform. Get started here, and enter promo code “VB2013″ on the form.

---

2013 is going to be an exciting year for designers. We’ll be involved in the tight personalization of services across a connected web of content and devices. And we’ll be challenged to make several new experiences intuitive to users. Above all, the following five trends will have the most impact on what we do in the new year.

Contextual Design

Contextual Design will be the next “secret sauce” in digital marketing.

For those of you new to the notion of  ”contextual design”, imagine this scenario: You’re walking into BestBuy to shop for a new camera. You have your iPhone with you and location services are turned on. You’re phone “knows” you’re at Best Buy. You find a few cameras that seem like the perfect fit for your needs, but you’d like to see some reviews to be sure.

So you ask Siri on your iPhone for information on the new Nikon you’re holding in your hand. She returns data in the form of public reviews, reviews from your trusted friends on Facebook, information served from Best Buy on accessories and product details, and pricing from BestBuy, Amazon, and a local camera shop. You browse the information and confirm that this is the camera for you.

You could order the camera on Amazon because it’s five to ten percent less expensive than in the store, but because you are in Best Buy, and have accessed the data served to you through Siri from Best Buy, Best Buy decides to sweeten the deal buy sending you a “live” promotion in the form of a 15 percent discount on accessories for the camera if you purchase it from them while in the store today. Sold! You grab the gear, and make your purchase in store using your Best Buy Rewards app to apply the offer and collect your reward points.

Possible? Absolutely! Everything mentioned in this scenario is absolutely doable with today’s technology, but it hasn’t been designed or executed yet. The opportunity to supply users with contextually relevant content on the go is huge! What you do for your customers requires you to understand them and cater to them… which you should already be doing, right?

The Internet of Things

When we combine contextual design with the intelligent, web connected, stuff that exists around us, and we’ve got an extremely powerful source of data. Enter products like Twine, a simple, Internet-connected sensor that can be easily programmed through the web to collect data and send messages.

By using Twine to monitor a simple thing like the moisture level in your basement, you could be notified via text or email that your sump pump isn’t functioning properly. Combine this with a simple iPhone app and you could have an emergency preparedness system to protect your home while you’re away.

The Nest  thermostat is a more developed example of this same concept. Capable of learning users’ preferences,  Nest helps them control the temperature of their homes in a way that’s beautiful, simple, and powerful. By using Nest in their homes, consumers are already saving some serious money.

As we open our lives to these new connected devices, the “Internet of things” relevant to each of us becomes more diverse. Data in our day-to-day functions as human beings is captured, recorded, and processed. How that data is leveraged and used is up to us as designers and technologists. There are wonderful opportunities for this information to enhance our lives if we aren’t intimidated by devices watching and learning about how we live.

 Responsive web design

This is an obvious one, but it still merits mention. Responsive web techniques will move from experimental to mainstream in 2013. A mobile-first approach with responsive web techniques will allow your consumers to access content in a contextually relevant way on their terms. For the enterprise, a responsive approach will allow for a more centralized management of content and help to mitigate desktop only or mobile only approaches to content delivery.

In your responsive approach it’s important to consider a system that is based on content first. It’s easy to get caught up in the graphical solution of your designs prior to considering the contextual relevancy of the content you are designing for. Therefore, design your experiences from the inside out. Work out the relevant content only, for a mobile user, a tablet user, and a desktop user. Leverage a consistent grid-system of your choice. Then, layer on the graphical solution. You’ll find that by taking this approach, you’ll have a flexible system that is serving content contextually important to your audience while still maintaining your brand experience.

Second screen experiences

Many have tried, but few have found great success with the second screen. The opportunity however, is too great to ignore. In 2013, the secrets of the second screen experience will be unlocked.

Content distributers and advertisers are constantly looking to differentiate their products. The challenge for a second screen option is in the focus of the viewer. Simply having content that enhances the experience on the big screen is interesting but has proven a challenge.

When watching a game on TV, I’m only interested in statistics during a break in the action. While watching a movie, I’m not interested in the depth of the character that I can look up on my iPad — I’m watching the movie! So how do content providers introduce the extraordinary amount of supplemental content to people in a way that doesn’t interfere with the primary viewing experience? Universal Mind is working closely with some exceptional content providers on this very thing! Stay tuned this year to see some exciting headway in this space.

 A return to simplicity

With Jony Ive at the design helm on all things Apple (hardware and software), we’re likely see some shifts in the user interface appearance of the Mac OS, iOS, and Apple created applications. These shifts will drive a design trend towards Apple’s new UI design aesthetic — just as they’ve done in the past.

Simple, clean, UI design will make a strong presence this year. You can already see the influence of Microsoft’s Metro UI on applications both for Windows and other platforms. The focus of “content over chrome” is an approach that fits very well within the concepts of contextual design, mobile first, and responsive web.

---

Big Data and Predictive/Real-time Analytics startups: Are you looking to jumpstart development & accelerate market traction? Sign up for the SAP Startup Focus program to receive technology, support, resources and community to help you develop new applications on SAP HANA, a cutting edge database platform. Get started here, and enter promo code “VB2013″ on the form.

---

As we play taps for 2012, let’s take a look at what developers and designers got into over the past 12 months, aesthetically speaking.

Web (and tablet and smartphone) design this year was more than ever characterized by relatively new technological capabilities. Advances on the dev side made tricks and conventions on the design side simpler, faster, or just plain possible.

Also, in many ways, mobile design, and especially tablet design, had a huge influence over web design. We started seeing more touch interface-friendly navigation, even in situations where touch navigation was unlikely. Which, as you’ll see, drove us freakin’ bonkers.

But hey, at least Comic Sans and Flash sites are on their way out, right?

Most of these trends got their start in years past, but we feel they came into their own in 2012. We’ve organized them into a few groups on a love-to-hate scale. If you disagree with our admittedly subjective analyses, go right ahead and tell us what you think in the comments section. And come on, this is web design; if you don’t disagree with some of it, you might be dead.

The Best

Larger-than-life images

We see this as a subtrend of the magazine aesthetic (see below), but boy, do we ever love how huge images are getting these days. They look great as page backgrounds, in lightboxes, or as full-page masterpieces in a tablet app. If you’re letting pictures go way outside the envelope, we appreciate what you’re doing and hope you’ll keep up the good work.

The Metro grid

Microsofties can call it whatever they want, but we know a Metro mosaic when we see one. For the longest time, we were mimicking Apple and iPhone design. Now it’s Windows’ turn to shine. The flat tiles in vibrant colors, the mosaic of constantly refreshing content, and the slick sans serifs were all the rage this year, whether seen on a Windows phone or on a designery knock-off page.

The print-mag aesthetic

More than ever, the web is starting to feel a lot like the glossy magazines of (what is quickly becoming) another era. Swipe-friendly navigation lets readers flip languidly or rapidly through content. Full-bleed photos take over the page, and elegant serif web font families let running text remain readable.

And speaking of web fonts, with more than 600 specimens in Google’s directory, headlines content have seen a massive upgrade as well. With sexy Didones, aggressive slabs, and retro scripts, typography is finally entering its online heyday. (Want more proof? Check out our list of the best mobile and web fonts of 2012, now with 900 percent more out-of-the-box web compatibility!)

The Good

Responsive design

With champions like Mozilla and Adobe (and to a lesser extent, the behind-the-scenes nerds at Facebook), responsive design* held its own in 2012. Barely. This trend is still emerging, and designers still face many challenges to getting one page to look good on an innumerable cornucopia of devices. We may not have the technology — especially agreed-upon mobile browser standards — just yet, but responsive design looks like it’s shaping up to be the future of how we build for the web, wherever the web is found.

*Responsive design is the practice of designing a site to resize and adapt automatically to function well across multiple screen sizes.

The Pinterest/Timeline grid

A splash of thumbnail images and a smattering of text! Highlight the algorithmically determined “important” stuff by doubling its size. What do you get? Pinterest! Or Facebook’s Timeline. Or something in between

The Pinterest clones and also-rans of 2012 featured this trend to a fault. It’s gorgeous for commercial and retail purposes or for displaying image-heavy content with a diverse array of sources and subjects. And it works great for social content, too, where image quality varies and large image sizes can make programmatically generated pages look cheap.

Rounded typefaces

Museo is sooo 2009, you guys. You know what’s so right now? Rounded sans-serif fonts*.

They’re structured but friendly, lean but distinct, casual without being childlike. If you’re looking for an alternative to the same old slabs and scripts and hand-lettered faces, check out some of the more modern rounded families.

*It is what it sounds like: A sans-serif with rounded edges instead of hard corners at the ends of the letterform.

WordPress Premium

The slider menus, the sticky content, the glossy images prominently displayed. … We know we’ve seen this look somewhere before. From photographers to doctor’s offices to cupcake shops to extreme body modification enthusiasts, everyone is using this design trope around the web. As as an accessible, populist aesthetic goes, the web could do worse (see: Geocities circa 1998).

What we love about the “WordPress Premium” look is that although it’s becoming ubiquitous, it’s the good kind of ubiquitous, like clean drinking water is ubiquitous in the States but no one’s complaining about it. And when the bar is raised for the workaday standard, creating truly standout designs for sites becomes even more of a challenge.

The Meh

Mouseover madness

We will always remember 2012 as the Year of the Mouseover. We just about choked on the panoply of tooltips, thumbnails, and mega-menus that popped up every time our fingers hesitated a little too long over the trackpad. It made us twitchy.

Mouseover tricks are great for a lot of things — quickly offering an explanation, giving a brief preview of content to come, or showing options. But brevity, dear designers, is the soul of your users not hating you and getting frustrated and confused when your belabored tooltip obscures every other bit of content on the page.

Kid stuff: Cowboys, cartoons, and crap

It was cute when GitHub and Forrst did it; now, it’s more likely to be annoying. We get that you’re a 28-year-old, hoodie-wearing genius who still eats Froot Loops on the daily and longs to return the entire adult world to a happier place, but you’ve got to stop shoving this Saturday morning aesthetic down our throats. That goes for the kawaii-illustrated-character logos, the cartoonish fonts, and the “Hi, we’re Super App. We make walking fun” copy.

The Internet is in its 30s. We can take a little elegance, and so can you.

Single-page design of doom

Single-page sites can be amazing, beautiful in their simplicity. But in 2012, we saw a lot of single-pagers that strove too hard to cram too much content into one unnavigable, infinitely scrolling jumble.

Also, the single-page aesthetic isn’t right for every project. If you’re building a site to sell a single product, show a portfolio, or introduce a concept, sure. Go single-page. But if you’re building a website for an enterprise-level business application, give yourself a break and give your end users the information design they expect and deserve.

The Not-So-Good

Modal pop-ups

You know what makes pop-ups less annoying? Rounded corners, lightboxing, and cute fonts! Right?

Wrong. Your jQuery tricks are bad at hiding your annoying navigation flow and/or advertising, Mister Designer Man. At least try to limit your use of modal pop-ups in 2013. The Internet thanks you.

The We Hate You

I can’t get no navigation

Is this a test? Are you seriously testing our rage limits? Or are you just showing off all the neat-o tricks you learned in Internet 410: Stupid Navigational Bullcrap Senior Seminar?

Look, unless we’re browsing your site on a tablet or smartphone — and your site should know whether or not we are — we don’t want swiping-style navigation. There we are, scrolling happily down a page of lovely images and enlightening text, and in one slightly diagonal finger-twitch on the ol’ trackpad, we’re pulled kicking and screaming from the page we were on to the next page in the feed.

And while we’re talking about show-off navigational bullcrap, let’s talk about horizontal scrolling. Are you designing an art gallery website? OK, then, are you showing off some kind of timeline-linked portfolio or info-design case study? Then you do not need horizontal scrolling.

Designers, before you do some complicated, unexpected navigational bullcrap, ask yourselves: “Am I doing this just because I can?” If the answer is anything close to a yes, take the high road of elegant simplicity, and make your users happy. Design isn’t just art, after all; it’s function.

Top image courtesy of Hasloo, Shutterstock

---

Big Data and Predictive/Real-time Analytics startups: Are you looking to jumpstart development & accelerate market traction? Sign up for the SAP Startup Focus program to receive technology, support, resources and community to help you develop new applications on SAP HANA, a cutting edge database platform. Get started here, and enter promo code “VB2013″ on the form.

---

For the past year, digital marketers have been trying to come to grips with the fact that 35 percent of all emails are viewed on mobile devices and tablets. Marketers are asking questions such as:

• How do I create an email template that looks great on an iPhone or Android device?
• How do I know when a user is opening my email on a smartphone so I can send an email with the proper design?
• How do I create design templates for each type of device?</li

At the crux of these questions is an ambitious goal: ensuring customers have the best possible user experience any time they open your email — on any device.

However, the mobile marketplace continues to explode with new products, and it’s now impossible to keep up with designing and testing emails across all the devices being released every month. Just recently, the iPhone 5, Kindle Fire HD, and iPad Mini have been released, all with different screen sizes and resolutions.

Here’s a brief rundown of a few of the more popular mobile devices and their screen resolutions:

Many digital marketers are under the impression that they need to create email templates specifically optimized for laptops, tablets, and mobile devices. The reality is that the marketers I speak with don’t have the design resources to create different versions of each email for multiple devices, and they have even less time to manage this process. Relying on a device-specific email strategy is simply untenable.

Email templates must become device-agnostic

Digital marketers must break out of the device-specific strategy and develop an email design that renders beautifully across all devices and email clients. Imagine that — an email template that adapts responsively and yields messages that are aesthetically appealing on any device, whether it’s a tablet, smartphone, laptop or any other related product.

Sound too good to be true?

Here are three steps to help you quickly ramp up your device-agnostic strategy.

Use a one-column design

Emails that contain multiple columns are the most significant cause for headache in designing device-neutral emails. Multiple columns create problems when your emails are rendered on smaller screens, as the content within each column tends to get squashed together when the smartphone or tablet tries to display the entire template within a small window.

Transitioning to a one-column design as soon as possible will help ensure you’re completely in control of your design and your content appears front and center, no matter which device the email is being rendered on.

Simplify calls to action

The opportunity to create action from emails is varied depending on the device. With mobile and tablet users, you have even less time and real estate to capture readers’ attention. When designing your email templates, optimize your design for the one most significant action you want a user to take. Because we’re now device-neutral, make sure your call to action is big enough for a finger to touch.

Simplifying your calls to action will also make it easier to fit your content within a one-column design. As an added bonus, focusing your calls to action is a smart practice no matter what device is being used to view your email.

Become familiar with media queries

For designers that simply must customize their designs for different devices, media queries provide a way to dynamically optimize your design across multiple devices. Media queries enable you to change the size of text and lay out items based upon the resolution of the device on which the email is being rendered.

For many designers, it’s not incredibly intuitive to start using media queries. However, more and more email clients are supporting media queries, providing an easier way for designers to dynamically optimize their content for different devices.

The bottom line? Break out of the “mobile template” mindset and focus on developing a library of responsively designed, device-agnostic email templates. As more tablets and smartphones are introduced, your emails will continue to render beautifully. Your designers and customers will thank you.

Adam Steinberg is segment marketing director of digital marketing technology provider Silverpop.Silverpop does marketing automation for mobile, email, and social marketing.

---

Big Data and Predictive/Real-time Analytics startups: Are you looking to jumpstart development & accelerate market traction? Sign up for the SAP Startup Focus program to receive technology, support, resources and community to help you develop new applications on SAP HANA, a cutting edge database platform. Get started here, and enter promo code “VB2013″ on the form.

---

WordPress launched version 3.5 of its popular blog management software today.

Known informally as “Elvin” (after jazz drummer Elvin Jones), this version’s marquee feature is a new process for uploading media — specifically images — and creating galleries.

I spoke with WordPress founder Matt Mullenweg earlier today for a separate story (more on that soon), and he noted that WordPress is at its “highest levels of engagement ever.”

WordPress.com, the free blog service hosted by Mullenweg’s company Automattic, has close to 400 million monthly unique users, as measured by Quantcast, Mullenweg told me. Add in users of the open-source WordPress.org blogs, which are hosted by ISPs or by users’ own web servers, and that number nearly doubles.

“It’s been really exciting,” Mullenweg said. “As people publish more, the readers go up.”

In other words, blogging is far from dead, and Facebook and Twitter haven’t killed it: It may even be undergoing a bit of a renaissance.

The new media-upload dialog is a radical departure, visually speaking, from the old upload box, but the process is essentially the same if you’re uploading a single image: Just drag and drop the image onto the box, wait for it to upload, then fill out details like the image description and alt text.

If you’re creating a gallery of multiple images, however, the new interface is a wonderful improvement. It lets you browse a mini-gallery of thumbnail images (both images that you’ve uploaded with a particular post as well as other images in your media library) and simply check off the ones you want to include in the gallery.

“Media has long been a friction point and we’ve listened hard and given a lot of thought into crafting this new system,” Mullenweg noted in his blog post on the new version.

If you’ve been using a WordPress.com blog or a WordPress VIP installation, as we do here at VentureBeat, you’ve seen the new media-upload dialog for the past few weeks. With WordPress 3.5, this improvement now comes to self-hosted WordPress.org users as well. I tested it briefly on my personal blog today, and it’s a big step up.

Also in the update: A new theme, called Twenty Twelve, which offers a fully responsive design, making it suitable for smartphones and tablets as well as desktop browsers. Twenty Twelve also offers a host of easy customizations, from color to background images.

There’s also a new tool for importing Tumblr posts, and a number of developer updates. Check out the WordPress.org blog for more details.

It’s clear now that design is a big part of the mobile experience — heck, we dedicated an entire conference to the topic — but it’s still difficult for developers to balance touch functionality with an attractive interface. The design firm Zurb intends to fix this with Plunk, a new app runs simple tests for touchscreen targets.

In Plunk, you upload a mobile screen — it can be from an app, a mobile website, or anything else viewable on a mobile device — and create simple tests to make sure your users can easily touch where they need to. This Plunk test asks you to touch the flower in a cartoony image. Plunk’s results page for every test lets you see just how successful visitors are in real time — in this example, it could eventually tell the designer that the flower isn’t distinguished enough from the other images.

The app is just the latest in many design tools from Zurb, which includes the visual feedback app Bounce and the design framework Foundation.

With Plunk, designers should be able to easily see what works for mobile touch interaction. It’ll be especially appealing to the responsive design movement, which is focused on creating web designs that morph to fit different device screen sizes.

Front photo via Shutterstock

---

Big Data and Predictive/Real-time Analytics startups: Are you looking to jumpstart development & accelerate market traction? Sign up for the SAP Startup Focus program to receive technology, support, resources and community to help you develop new applications on SAP HANA, a cutting edge database platform. Get started here, and enter promo code “VB2013″ on the form.

---

Peter argues for designing interfaces that take advantage of users’ familiarity with native device features, such as swiping on a tablet, scrolling on a website and paging through a mobile interface. Elliot Jay Stocks does a pretty nice job of taking Peter to task on his blog, “Has adaptive design failed? Of course it bloody hasn’t,” so I won’t pile on here. However, given the intensity of the debate, I think it’s worth furthering the dialogue.

I’ll start by clarifying the difference between adaptive and responsive design. When a company continually adapts its design over a long period of time due to new data, business models, or customer needs, it’s called adaptive design. Adaptive web design adapts to new devices by altering how the layout of a site is shown on a screen, but it doesn’t have a scalable grid, so the layout “adapts” to the device being used. Responsive design, on the other hand, is built from the ground up and look at the entire breadth of how your audience reaches you through mobile, desktop, tablet, and any other resolution. Rather than designing each channel at a time, a responsive design approach ensures that all channels are approached uniformly through clear content prioritization and knowing how content will display differently by resolution rather than device. For a good example of responsive design, check out The Boston Globe site.

Responsive design techniques can help businesses meet the dual challenge of achieving superior user experiences while minimizing the cost and complexity of managing in a multi-device world.

Mobile Content Monetization
Peter says, “Users are not perturbed at all to see a full page interstitial ad stuck into the mix while paging through content …,” but, like Stocks, I beg to differ. I don’t know anyone who is clamoring to see more interstitials. And while it’s obvious that ads are a must-have for ad-supported business models, sacrificing the user experience with random interstitials is hardly the solution. Responsive design allows you to design ad placement into an experience best suited for that resolution. The point here is that you can control the experience across all resolutions you have designed for, making the tracking of ads easier on the same system. Measuring the success of an ad is crucial as publishers seek to gear content to be contextually relevant.

Consistent Experiences across Devices
Responsive design techniques give users a fluid transition across resolution sets. By designing for the smallest device first, then adding more content and design elements as more screen real estate is available, brands can provide content users need in a consistent format. Navigation and branding remain consistent, regardless of the device. Providing a consistent experience breeds familiarity, which has numerous benefits, including higher levels of affinity and retention.

Saving Time and Money
Using responsive design techniques, brands can efficiently prioritize and re-use content and digital assets, saving significant time and development resources. Those benefits are conveyed across the full content value chain. Contrary to Peter’s assertion, engineers aren’t the only beneficiaries— you can generate significant business value, too. Here’s why: It can be prohibitively expensive to deploy a mobile team, a desktop team, a tablet team, etc. Costs can skyrocket, particularly as more devices are introduced and must be supported from a content, design, and development perspective. A single, multi-disciplinary team ensures business and customer goals are met upfront for all resolutions. The benefit here is that you set up a plan to measure success across the board, instead of starting separately.

To take advantage of the efficiencies inherent in a responsive design approach, brands have to consider each channel in context. Creating and maintaining a consistent user experience across all channels using responsive design techniques can provide significant time and cost savings. Businesses benefit by freeing up design and development resources whose talents can be applied to inventing new and innovative ways to compete in what will continue to be an ever-changing, multi-channel world.

Tim McLaughlin is president and co-founder of Siteworx, an interactive agency based in Reston, VA.

Yesterday morning I read Peter Yared’s provocative article, ‘What’s next for mobile now that adaptive design has failed?’ which is based entirely on the misassumption that mobile users don’t scroll. If that were true, the reasoning might be valid, but it’s not. It’s utter nonsense.

As if this misassumption wasn’t bad enough, Peter’s agenda is disproportionately skewed towards the impact on advertising. In fact, you could very easily translate the whole article into: ‘listen, we need to get designers and developers to use pages instead of scrolling, because ads get hidden below the fold in a scrolling scenario, but with pages the ad can actually be a full page itself, which means we can make loads more money from advertisers.’

Okay, let’s not blame Peter for his bias. He is, after all, CTO of a company whose primary revenue stream comes from advertising. Of course he’s going to be concerned about the impact of ads. But I — as both a content creator and a content consumer — take issue with two key points; namely:

• that responsive web design (a term he mistakenly refers to as interchangeable with ‘adaptive’ design) has somehow failed; and
• that it’s somehow possible to judge success of failure of a design methodology by ad revenue alone.

Please allow me to address some claims that are, in one way or another, wrong:

We [...] are learning the hard way that a one-size-fits-all solution delivers a subpar user experience.

Not only does this completely contradict the notion of what responsive design actually is (the core content might be the same, but the design should be flexible enough to allow for multiple adaptations without needing to know specific device details), but saying it delivers a subpar user experience is akin to claiming all oil paintings are inferior to all watercolour paintings. Criticising the tools is a fruitless exercise.

The tablet is essentially a magazine form factor.

Actually, my iPad’s form factor is closer to my chopping board, but I’m hardly going to prepare dinner on it. Tablets may have magazine apps, and ebook apps might also use swipeable pages rather than vertical scrolling, but it’s only one type of interaction. And if we’ve learned anything about tablet-based publishing in the last couple of years, it’s that recycling print-formatted magazines into an app is a bad, bad idea (unfortunately, most of the major publishers have yet to be enlightened). And it’s nothing to do with pages vs. scrolling.

Users are perfectly happy to swipe through an article that is split into several pages.

This behaviour, right here, is the bane of the internet. Do users enjoy reading articles on websites that are split across multiple pages? Hell no, we don’t. The only reason this exists is so ad people can sell more ads.

Users are not perturbed at all to see a full page interstitial ad stuck into the mix while paging through content.

Oh yeah, sure! I just love having my reading experience disrupted by a full-page ad! Actually, I’ll admit that in some scenarios, this is okay. I don’t mind this too much if I’m reading a magazine-like app, and if the ad itself is relevant. But as advertising is very rarely relevant and very frequently infuriating, suggesting this behaviour should become some sort of norm is all kinds of wrong. It is of benefit only to ad execs. See the pattern emerging here?

It is painful for engineers to have to support three different use cases for three different form factors.

And finally, we have it: solid proof that Peter Yared does not understand responsive design. (And I’m sorry, Peter. Perhaps you’re a very nice man, but I’ve got to call you out on this.) The web is not experienced simply through desktop, tablet, and phone; it is experienced in every shape and form imaginable, and some unimaginable. True responsive design is not about catering for specific device pixels — whose dimensions become outdated with every new model that appears on the market — or labelling an experience as ‘this type’ or ‘that type’. It is about creating designs so fluid and adaptable that specifics are not needed; so organic and open that the notions of desktop and mobile and TV and whatever else are blurred. After all, my 11″ MacBook Air is far closer to a tablet than my 24″ iMac, so the ‘desktop’ label no longer applies. Yet my iPad’s pixel dimensions are far closer to my iMac’s, so ‘mobile’ no longer applies. And let’s not forget that browsing the web on Mobile Safari is a wildly different experience to doing so on other, less advanced mobile phones.

Sometimes, sites work well across the board with only minor adjustments. The simpler the design, the less work has to be done. This is certainly the case with my site, Trent’s, Tim’s, or Zeldman’s. And it’s not because we’re lazy designers — our sites are this way because the emphasis is on content; on cutting away the cruft regardless of the platform. (Zeldman said it best.) And yes, of course there is a lot more work involved on some websites and applications. But to tar everyone designing responsively with the same brush shows nothing but a gross misunderstanding of the term itself. And, as Fernando Mateus said to me on Twitter this morning, ‘The last person [who thought] a webpage was like a magazine was a 7 year old child.’

So, ladies and gentlemen, we have a high-profile ad executive at a high-profile company who doesn’t understand the web from anything but an advertiser’s perspective. Who knew?

Responsive design is absolutely the future. Sadly, for many people, it has yet to become the present.

The original version of this article was published on elliotjaystocks.com.

Elliot Jay Stocks is a designer, speaker, and author from England whose portfolio includes work for clients such as Virgin, Microsoft, Brooklyn Beta, Founders Fund, Smashing Magazine, and MailChimp. He is the editor of typography magazine 8 Faces, co-founder of Viewport Industries, and a regular contributor to publications such as Codex: The Journal of Typography, .Net, and Computer Arts. Follow him on Twitter at @elliotjaystocks.

Top photo by Dirk Vorderstraße/Flickr

Design is determining the winners in everything mobile. The most successful players are focusing on one thing: How to make products, services, and devices as compelling and delightful as possible – visually, and experientially. MobileBeat 2012, July 10-11 in San Francisco , is assembling the most elite minds to debate how UI/UX is transforming every aspect of the mobile economy, and where the opportunities lie. Register here.