Welcome to Slack-ing Off, a blog series taken from the transcripts of messages on Slack between our Director of Creative Services, Jonathan Olivo, and our Director of Platform Development, Aubrey Berkowitz. Today we brought in a special guest to discuss the future of mobile web design, AEDC⚡️Founder, Nick Alter.
Aubrey [10:10 AM]
Hey Jonathan. Good to be back! It’s been a busy week for us but I’m glad we got to make time to sit down with Nick and talk about the future of mobile web design.
Jonathan [10:11 AM]
Hey Aubrey! It’s definitely been a busy week. Hey Nick!
Nick [10:11 AM]
Heyo!
Aubrey [10:12 AM]
One of the things we’ve been noticing a lot lately is the higher percentage of mobile traffic coming across through the sites we build. Nick – you’ve always pushed us to be mobile first. What does that mean for the web today?
Nick [10:14 AM]
There are a bunch of statistics we can reference from sources like MOZ, Search Engine Land, Google, etc. that talk about the year over year increase of mobile traffic to websites. For our own case studies, we have watched clients like ABC Blind and Square Cow Movers, shift that way as well, although not quite as dramatically as some of the national averages, but not insignificant either.
That being the case, it makes sense to prioritize mobile design in web design and development
But “mobile first” goes a bit deeper than that.
The smaller the screen size, the more intentional, the more focused your design needs to be. Prioritizing certain calls to action and justifying how each pixel on the screen is being used.
And during the process, we have to ask… if it’s not good enough for the mobile design, should it be included in the desktop layout at all?
That’s not to say that it SHOULDN’T but rather is it really, truly justified?
Aubrey [10:18 AM]
Good point about screen size.
We also use our phones differently than we do desktop. Usually, we prioritize being able to take action quickly and find information quickly. Jonathan, what are some of the things you try to incorporate on mobile?
Jonathan [10:20 AM]
Nick, I like what you said about screen size; the more intentional and focused the design needs to be! On mobile, real estate is at a premium – I think of my iPhone screen like a map of downtown Manhattan, where every pixel costs a pretty penny. This means you need to maximize what you’re getting out of your website on mobile.
One easy way to do this is to drop your navbar on mobile!
On a laptop or desktop, your navbar can be incredibly helpful – it’s a simple way for your visitors to browse the pages on your site, making it simple for them to find exactly what they’re looking for.
But on mobile, your navbar can take up a ton of space that could otherwise be used for text, images, or whatever other content you have on your website or landing pages.
The most popular way is to incorporate a hamburger menu, which allows you to create a much smaller (but still branded) top bar. The hamburger menu acts as a drawer, pulling out from the left or right side of your screen to show the various menu items in your navbar.
Aubrey [10:24 AM]
TIL that someone is actually credited with creating the “hamburger menu.”
Nick, from a conversion standpoint, are there things you think need to prioritized on mobile that may not be as important on desktop?
Nick [10:30 AM]
It’s not so much that you prioritize on mobile differently than desktop; rather, as Jonathan said, the menu bar can get consolidated behind a hamburger menu to prioritize the elements you want to direct people’s attention to first.
The hero image, for example, may need to be swapped out or reduced or removed altogether.
On desktop, you may have a certain call to action repeated in order to maximize its exposure.
That may not be necessary on the mobile layout and may come across as too redundant.
Aubrey [10:32 AM]
All of those make sense. We actually built a site recently that has a different hero image on mobile. It still looks great on both!
Jonathan [10:34 AM]
That’s a great point, Nick, it’s key for a mobile design to keep important elements within reach. I mean, just think about how often you use your smartphone. I’m willing to bet you use it pretty often – perhaps reading this right now?
Now, think about how you hold it. If you’re like most of us, you’re only using one of your thumbs to interact with your screen.
You’re not alone: according to a recent study by mobile UX expert Steve Hoober, 75% of people only use one thumb to interact, too.
In the last few years, our phones and screens have been getting bigger and bigger… but our hands are staying the same. The way we hold our phones has changed – as such, screen “hot spots” have shifted, with touch accuracy dropping as we approach the screen’s outer edges. As a result, we as designers need to organize content in a way that puts primary interactions front and center, saving secondary and tertiary functions for the top and bottom screen edges
Nick [10:35 AM]
Are you saying I have tiny hands?
Aubrey [10:36 AM]
No, he’s saying that your hands aren’t growing at the same rate as the screens we use online.
Nick [10:36 AM]
But you are saying there is still hope that they will grow…
Aubrey [10:37 AM]
Back on track. Nick, do you think we’ll ever reach a point where desktops/laptops become almost obsolete?
Nick [10:41 AM]
Very near future? The experience needs to be cohesive. I think that Desktop design needs to meld with tablet design and needs to flow seamlessly to mobile design and visa versa.
In five years? No idea. Could be that we will need to start accounting for AR and VR design.
Aubrey [10:43 AM]
Nick one of the first sites we built at AE was broadacresranch.com.
Nick [10:43 AM]
But remember that websites typically have a design/function lifespan of 3-5 years.
Aubrey [10:43 AM]
Could you imagine VR design incorporated into that design?
Nick [10:44 AM]
That’s the kind of edge we are going to need against Skynet.
Aubrey [10:44 AM]
3-5 years seems like a pretty good lifespan on a website though. What are some of the signs that your site might have issues on mobile?
Jonathan [10:45 AM]
Let me jump in on this one!
The biggest issue is if your site isn’t responsive to mobile — meaning you go to a website on your phone and the design looks like it’s being viewed on a desktop.
That’s why it’s important to design for responsiveness.
If you were around during the advent and uprise of the mobile web, you might recall that most websites actually built entirely new layouts for mobile that would work for the smaller screens of the pre-iPhone era.
These pages often featured minimal images and were relatively text-heavy to combat the slow browsing speeds mobile users received on their non-3G, non-LTE, non-WiFi networks. Fast-forward about ten years, and the mobile landscape has changed entirely. Screens are huge, internet connections have quickened, and tablets exist.
These advancements (and other advancements in front-end design languages like CSS) have paved the way for responsive and adaptive designs
Nick [10:50 AM]
RIP DudaMobile
Aubrey [10:51 AM]
I don’t think I’ve seen an “m.” site in years either.
Nick [10:51 AM]
That’s a good thing.
What a pain in the butt those were.
Jonathan [10:51 AM]
Though there are nuances between these two types of design, their principal purpose remains the same: create a single website layout that responds and changes dynamically based on the device a visitor is using.
Nick [10:52 AM]
Also — taking this in a different direction. Google will blacklist sites from a mobile search that are not mobile friendly.
So if you have noticed your site popping up in search on a desktop but not on mobile, it’s very likely Google doesn’t like the way your site works on a phone (they have tools you can use to test your site by the way).
Aubrey [10:56 AM]
And if there are issues with your site on Google’s mobile search, I’m sure there will be other issues across the site…
Thanks for stopping by Nick, we know you’re on your way to another meeting today. Any good Teague stories?
Nick [10:57 AM]
Actually, I should mention that it’s Lulu’s birthday today.
She is expecting treats from all of you.
Aubrey [10:58 AM]
We’re launching our new website and we completely forgot to include our HR director Jonathan……
Jonathan [10:59 AM]
🐕