Essential tips for converting a desktop site, to mobile

Default avatar.
October 23, 2015
Essential tips for converting a desktop site, to mobile.
Since mobile devices have now overtaken the desktop in popularity it’s necessary that designers design with mobile in mind. Mobile-first is popular as a technique because it is easier to scale mobile up, than scale desktop down. However, sometimes the choice is taken out of your hands. Commonly designers find themselves adapting existing desktop designs to mobile. And because some elements don’t translate well, it’s essential designers understand what specific adjustments to make when designing for the small screen. Here’s how…

Embrace minimalism

Minimalism has been popular in web design for years now, simply because it often aids usability and looks nice, too. When it comes to mobile, though, minimalism is less of an aesthetic choice, as it is one based purely on usability. According to the Nielsen Norman Group, cutting features is a necessity in mobile design. So what does this mean for designers as they try to build a mobile site from an already-established desktop one? It means doing away with what’s not essential to the mobile user experience. For instance, if you’re transitioning an e-commerce store from desktop to mobile, keep the same amount of products displayed on the mobile site; it only makes sense, because shoppers want to be able to find everything an online store has to offer, just as the online store wants to show everything it has to sell to its site visitors. A big ad carousel for the latest deals, however, might reasonably be be pared down a bit.

Hide navigation

One of the most common features on mobile screens is the hamburger menu, that almost omnipresent little icon with three horizontal line segments piled on top of each other. This is another perfect case where the smaller screen size of mobile forces designers to change around elements that are expected to look a certain way on desktops. In spite of the divided opinion on the hamburger menu’s presence, it is pretty much ubiquitous on mobile screens simply because this is the best solution that designers have found for downscaling the navigation menu from desktops to mobile devices. Check out famed chef Bobby Flay’s website for his chain eatery called Bobby’s Burger Palace. As expected, the navigation menu is horizontally laid out across the top of the homepage, yet when you go on the site’s mobile version, the horizontal menu is gone. In its place is the neat and tidy hamburger menu, right in the same place of the screen where the longer horizontal menu would be on the desktop version. Bobbys-Burger-Palace-Desktop-Screenshot Bobbys-Burger-Palace-Mobile-Screenshot Walmart also makes use of the hamburger menu in its desktop-to-mobile design transition. On its desktop site, Walmart displays the “All Departments” dropdown navigation that opens up a second layer of navigational choices all on the same page. On the mobile site, though, that feature isn’t possible due to the small screen size, so a replacement has been designed: the second layer of navigational choices are in the hamburger menu and these open up more and more navigational choices with every selection—almost like flipping the pages of a book from left to right. Walmart-Navigation-Layers-Desktop-Screenshot Walmart-Mobile-Navigation-Screenshot

Switch to a single-column

In keeping with the fact that simpler is just better when it comes to mobile design, you’ll do well for your clients if you remember that a single-column layout is cleaner and easier for their users to operate on a smaller screen. The big benefit of a single-column layout is that you do away with horizontal scrolling, as if you had a lot of text on a page and wanted your readers to swipe the screen from left to right, to read on. When you introduce a single-column layout, you streamline the user experience, encouraging users to simply scroll down to read on or click on a link they want to see on a new page. This beats forcing them to swipe left to right, which is harder to do than simply scroll down, especially when you consider your user’s thumb position relative to how they hold a mobile device. The desktop website of The New York Times newspaper features multiple columns. That’s easy to use on a desktop, when your client’s users can simply move the cursor from left to right with no issues on a trackpad or mouse. nyt Of course, The New York Times’ mobile site understands how things have to change on smaller screens, so it introduces a clean and efficient single-column design that boosts the user experience, as readers can just effortlessly scroll down for more content with their thumbs. nyt_mobile

Mobile considerations

Because of mobile’s influence on users today, designers have to always design for mobile. It’s not good enough to simply design a mobile site along with the desktop site and call that designing for mobile, though! Designing for mobile means actually being considerate of the specific adjustments you’ll have to make for your client’s site when you design for the small screen. This includes everything we talked about above, from minimalism in design to hiding the navigation bar to moving to a single-column layout. By adopting these best practices in your skillset, you’ll create sites that are a perfect fit for mobile.

Marc Schenker

Marc’s a copywriter who covers design news for Web Designer Depot. Find out more about him at thegloriouscompanyltd.com.

Read Next

3 Essential Design Trends, February 2024

From atypical typefaces to neutral colors to unusual user patterns, there are plenty of new website design trends to…

Surviving the Leap from College to Real-World Design

So, you’ve finished college and are ready to showcase your design skills to the world. This is a pivotal moment that…

20 Mind-Bending Illusions That Will Make You Question Reality

Mind-bending videos. Divisive Images. Eye-straining visuals. This list of optical illusions has it all. Join us as we…

15 Best New Fonts, February 2024

Welcome to February’s roundup of the best new fonts for designers. This month’s compilation includes some innovative…

The 10 Best WordPress Quiz Plugins in 2024

Whether it’s boosting your organic search visibility or collecting data for targeted email marketing campaigns, a great…

20 Best New Websites, February 2024

It’s almost Valentine’s Day, so this latest collection is a billet-doux celebrating the best of the web this month.

Everything You Need to Know About Image Formats In 2024

Always trying to walk the tightrope between image quality and file size? Looking to branch out from JPGs and PNGs this…

The 10 Best Logos of 2023 - Ranked

From vintage aesthetics to innovative new color schemes, we’ve seen a lot of creative logo designs this year. In this…

Exciting New Tools for Designers, February 2024

2024 is well underway and shaping up to be an interesting year. So, to help you keep your focus on working hard and…

The Art of Engineering AI Prompts

In the rapidly evolving world of artificial intelligence, the ability to communicate effectively with AI tools has…

15 Best New Fonts, January 2024

In this month’s roundup of the best new fonts, we find a large number of vintage, retro, and revival typefaces. Is it…

5 Web Design Disasters That Will Ruin Your 2024

Welcome to 2024, where web design is as fast-paced as ever. You know how crucial a killer website is nowadays — your…