The secrets to creating a mobile-first, responsive website

An interview with Matt Kannenberg, ACD Schifino Lee.

We’re sitting in a dimly lit corner office, post-its randomly stuck around his desk with illegible scribbles. A photo strip is tacked to the wall of his beloved wife and son, Vernie. He wears a crinkled black T-shirt with 2-day stubble, and barely looks up from the screen to finish his half-eaten Publix ham and cheese on rye – yet his pool-blue eyes light up when we start to discuss the launch of the new agency website.

How did you and the team come up with the core concept for the new site—what was your inspiration?

Matt: Well, we knew that clients really do look to us as a guide for their brand. The branding process is a never-ending journey today, so to express that idea of being “Brand Wayfinders” I used a lot of cartography and travel imagery to support that idea. And we knew designing in a modular way would work well in a responsive environment.

Speaking of responsive design, why is designing mobile-first so important now?

Matt: I absolutely knew this site had to work on a phone first. The people we are targeting are busy folks, marketing directors, VPs and CEOS. And that’s how people interact today, mostly on their phones, on the go. It’s easier to design with the mobile specs, then scale it out to respond on all other devices, like tablet and desktop.

What are some key considerations for designing a mobile-responsive site?

Matt: Do your research. Make sure you design for the devices your audience use most. People use a single thumb to scroll, so take that into account as to where you put your call to action buttons, and the size of the scrolling section. Build mobile like a pyramid, starting with the broad points but then quickly and succinctly getting down to more detail. At the same time, you can include various CTAs along the scroll instead of waiting until the bottom of the page.

Where do you see technology going when it comes to mobile design?

Matt: I think it’s coming soon that we will have better integration opportunities for video, better control over type and an even better e-commerce experience.

More tips from Matt and our digital team:

• Mobile should never be an afterthought
• You never want to make a phone user have to use their other hand to navigate
• Hamburger menu at top is best practice
• Toggle sliders are a must
• Use large, simple buttons
• Your CTAs should span the width of the column