August 21st, 2012

The way we design for the web is broken.

Now, that sounds like a pretty extreme statement. And it’s meant to be – we have to be able to separate ourselves from the traditional ways of doing things to break the norm and evolve with the way that visitors, companies, and others expect the web to work (and to set new expectations for the way the web should work).

The old way of designing for the web was simple: create a Photoshop file with the copy and images (and hover states), pass it off to a developer for slicing and coding, and then poof! You had a webpage! Visitors would flock to you in droves to gaze at the wonder of what you had created. Of course, this process didn’t take into account the variety of devices that would be used to view it (from mobile to tablets to laptops to desktops and beyond), the variety of experiences that users would have (whether it’s using a different browser than expected or requiring 508 compliance for a screen reader), or even the locations the site is viewed from (a user on the go versus sitting on the living room couch, for example). With that in mind, it’s pretty clear that a static file handoff just doesn’t make the cut for what designing for the web could (and SHOULD) be – hence, the way we do it is broken and needs to change.

Within the past year and a half, every creative and design agency has realized this same thing. The explosion in numbers of smartphones and tablets, the increased capabilities of HTML5/CSS3/JavaScript, and even the increasing users and sharers of social media has shown that visitors expect more from their experiences (and as the creative agency who puts it together, it’s on us to provide that and even surpass their expectations).


Example of Responsive Design: The Boston Globe (Filament Group, 2011)

But, there’s no set answer or solution. Sure, there are a lot of suggestions and ideas out there (some of which we’ll explore here in a minute), but none of them are set in stone. Each agency and collective needs to figure out what works best for them, their clients, and their creative process to deliver the future of the web.

The term “responsive web design” gets thrown out there a lot these days, but it’s not just a new fad designed to tingle the senses of marketers chanting “we want mobile!” At its heart, responsive design is future-proofing the design – not just designing for the current batch of devices and users, but also accommodating what’s coming in the days (and months, and years) ahead. It’s taking into account the variety of devices, from mobile to tablet to laptop to desktop (and the resolution and browser differences that come along with that – including fancy-schmancy terms like “retina displays”). It’s also taking into account new design elements and technologies, such as parallax scrolling, animations, and the continued march of web sites and designs to incorporate more “app-like” elements and interaction. The goal, always, is to make the online experience more interactive – not just a one-way street from the screen to the visitor (“we make it, you look at it”), but also including the visitor in the discussion and experience from beginning to end. And, going along with the whole “responsive” idea, making sure that the experience is the same (note: I didn’t say identical) whether they’re viewing the site from their iPhone at the mall or their laptop on the couch.


Example of Parallax Design: Nike Air Jordan (Blast Radius, 2012)

So, where does that leave us? We can scramble to try to fit our current way of doing things (you know, the one that’s broken) into a method that works with the new goals, or we can take a step back (and a deep breath) and take a look at the whole process, from beginning to end, to figure out a new way of doing things that will ensure that we continue to evolve and push the envelope (and, as always, deliver big).

There have been a lot of theories and ideas proposed on the web and beyond (mostly by those far more knowledgeable and advanced than myself) exploring how we as creatives move forward to a new way of delivering the best web experience possible. Some of them have suggested only showing sketches and concepts to the client at the beginning, skipping full mockups as they only show one way of looking at the design. Another suggestion is to only create enough wireframes to develop the basic wireframe and flow and then move immediately into full design. Yet another is to mock up an interactive comp, with some design styles in place to suggest the future of the site but also allow the client to see how the site interacts with visitors (and across devices). All of these are excellent ideas that definitely break the mold of the traditional mockup to slice to code method – but of course, as with anything, it all depends on what the client expects to see and how you find it most successful to show off the best work possible.


Example of New Technology: Beercamp2012 (nclud, 2012)

The best bet, no matter the final process, is to bring in developers from the very beginning to work with designers, art directors, and clients through the entire creative process, including solving for the best deliverables (i.e. responsive, new technologies, etc.) to meet the client’s needs. Instead of merely handing off a mocked up Photoshop file, designers and developers must work hand-in-hand the entire time, building as they go – primarily in code, accommodating design ideas (and copy and messaging, of course) while using semantic HTML and CSS as the building blocks of the entire experience. Only then should Photoshop even be opened, with designers working to design to and improve upon those basic building blocks. It’s an iterative process – building, designing, building, designing, and then revisiting builds and designs to constantly improve until the final product is the best you can provide. The end result? An awesome web experience that both the client and creative agency are proud of, that not only conveys the right idea but also is also future-proofed, and that people love.

 

Tags: web applications web development

Connect with us

Job Openings

Want to be part of our growing team?

View More
Work with us

Learn how DMI can help you grow, or launch your business.

Get In Touch
Offices

See all of our locations around the world

View Locations