Moving Beyond Mobile First in Modern Websites
A few weeks ago, I was digging through the Google Analytics (GA) account of one of our projects. While this may not sound exciting, I love gleaning information that I can use to improve our projects and empower us to do a better job. What I actually encountered was something that will change our approach to web development at its core. I discovered a bit of data that will have a direct impact on the way our team does its job.
Over the past few years, the GA data on all websites we’ve built has justified investing in responsively designed sites. With non-desktop traffic hovering in the 50% range, we could clearly make the argument that desktop and mobile need to have equal investments in time and effort. But what happens when mobile traffic reaches 70%?
I quickly realized that my team and I need to shift our assumptions and change how we design and build websites. While the importance of building websites for mobile has been discussed for years, an example of this starkly leaning mobile trend has altered something. We can’t just be thinking mobile-first, but primary mobile.
Primary Mobile
The concept behind responsive web design (RWD) is an approach that makes web pages render well on a variety of devices, windows, or screen sizes. A site designed with RWD adapts the layout to the viewing environment by using fluid, proportion-based grids, flexible images, and CSS3 media queries, an extension of the @media rule.
While we lay out our websites to display well on desktop, tablet, and mobile, the reality is that our professional work setups are still focused on desktop development. While we have tablets and phones on all of our desks, more time is spent with retina screens and multiple monitors. Our default toolset is monster screens, and this skews our relationship further and further away from how the average person uses digital.
As a result, we are making changes to how we work as an agency. I encourage you to join me on the journey towards a primary mobile design and development process.
Get Ahead of the Curve
If your website traffic is still in the 50% mobile, 50% desktop range, don’t think that this post doesn’t apply to you. If it’s 3 months, 12 months or 2 years, at some point your website traffic is going to flip to a deep majority, non-desktop users.
It’s important to start thinking about your website based on that reality. The key is to be looking at and considering any updates based on mobile. If you’re making decisions about website updates while sitting at your desk, in your office, in front of your computer – you may want to take a different approach.
While your website does a lot of things and serves various audiences, my guess is that the most important thing your website needs to do well is to sell tickets. Your website is transactional, and people need to be able to purchase tickets from wherever they are.
Adjusting Wireframe and Design Reviews
If you are considering, or are in the midst of a redesign or iteration of your website, the way you plan the site internally and with any external consultants, should change.
If you are reviewing wireframes using a tool like Sketch or InVision using mainly widescreen desktop views, it’s time to stop. In fact, even if you are evaluating the design of a mobile interface in a skinny window, you should be doing it on a phone. You won’t be able to get the necessary experience until you are looking at it on the most common device to replicate the mobile experience.
Make sure that you aren’t even looking at desktop documentation until after you are satisfied with the mobile experience.
Code Optimization
Making sure your website code is well optimized is even more critical when dealing with mobile. Rigorous site speed optimization should be a best practice for any site. Theoretically, loading speeds of a website shouldn’t be a problem when 5G speeds launch over the next few years, but that’s not today. In large cities with pervasive 4G speeds, most websites will load just fine — although I’ve seen many sites squeeze uncompressed images and full-screen video into my iPhone X.
As the developer of one of the most important mobile operating systems — on top of the largest search engine — it’s to Google’s benefit that websites render well on mobile devices. As a result, Google will penalize your site in its search results if you don’t implement a proper mobile version. If you want to take a look at how you’re doing, try Google’s Mobile-Friendly Test.
My secret for speed testing in the real world is to try and load a website while traveling on a train. There are always pockets along the way where only 3G service is available, and it offers a humbling experience to see how well, or not, your site images and code have been optimized. If you don’t find yourself on a train regularly, you can use another of Google’s site evaluation tools, web.dev.
Pro tip: build an experience that is optimized for tapping, not clicking. Truly mobile experiences will be optimized for the finger, not the mouse. Things like rollovers and nested submenus won’t work in ways that you’re used to.
Take Advantage of Modern Functionality
Start thinking about using unique technology options that are available and native to mobile and tablet devices. While there are some great things about desktop browser functionality, unique to mobile options should be considered.
Checking your phone first thing in the morning means you’re browsing at home, but chances are you’ll have website visitors who are on the go, so design experiences specifically for them. Unless they have personalized their preferences, you will have a rough idea of where people are. Are they geographically close to your theatre? Remind them that you are close by. Are they in another state or country? Tell them about a local tourism package. Are they physically in your venue? Offer them show information, a deal for a drink or frequently asked questions.
It’s also a good idea to do a little reading on Progressive Web Apps (PWA), which allow for mobile application type experiences, all with cross-platform web technologies and no need to download them from the app stores.
Mobile isn’t all about slapping on a hamburger menu and calling it a day. Users have been using mobile applications for over a decade and know what a quality experience is.
One of the hardest parts of managing and taking care of any digital project, be it a website, social media strategy, or mobile application, is the constant and unending need to adapt and change. Everyone wishes that they could complete a redesign they won’t need to think about for a decade. The reality is if you are going to be working on and managing digital projects, the key is accepting change. Successful projects are ones that are iterative and ongoing. This time, the change to prepare for is reaching beyond mobile first.
Warren Wilansky is the president and founder of Plank, a digital studio based in Montreal that specializes in designing responsive websites and mobile applications. Plank is a proud sponsor of Digital Marketing Boot Camp for the Arts 2019.
