You’ve created the perfect design. It looks fantastic on your desktop and you sit back to admire your work. The colors fit together perfectly and the site loads quickly–what more could you ask for? You’re done, right? Unfortunately, it’s not that simple. Your boss checks out your design and is definitely impressed. But then they ask you to open the mobile versión and your heart rate picks up. It’s probably fine, right?
Well, we have some bad news: while they are made up of the same content, mobile and desktop designs require different settings and designs to ensure they work well on these respective devices. Why? Well, that’s why we’re here.
Mobile vs. Desktop Designs
There are eight major ways in which mobile and desktop designs differ; let’s explore them to get a better idea of what we need to focus on when creating responsive web designs.
Mobile screens are smaller
This one is obvious, we know! But it is quite major–mobile screens are considerably smaller than those of desktops, meaning your designs need to shrink to scale, all the while maintaining the readability of your text. Web pages will typically appear much longer on a mobile device as the words take up more of the screen; you need to ensure that the mobile design allows users to zoom in or out and is usable–the last thing you want is a tiny, busy screen that users can’t actually read.
2. Mobile and desktops have different processors
Computers have more power and we know this! But what does this entail when it comes to designs? Well, even though phones are getting faster and faster, computers tend to have superior processing power, meaning their loading times and battery lives are superior. When you are adapting your design for mobile, you may have to opt for less markup, JavaScript, and CSS to help your design run faster on mobile browsers.
3. Mobile devices have less bandwidth
It seems like there’s a higher number in front of the “G” every year, right? And while internet speeds are certainly improving and getting faster, desktops that are connected to broadband internet have much higher bandwidth, which helps things run faster, increasing overall user satisfaction. Elements such as large and colorful graphics or videos complicate downloading speed and could cause your user to move on to a competitor’s website; this is something to keep in mind while creating your mobile design.
4. Desktop and mobile devices are operated differently
Using a mouse for a desktop design allows you to take advantage of tons of different things: mouses have way more precision than the human finger and you can hover, right click, or double click on elements to trigger different responses. Mobile designs, which do boast similar tools, are different, however, and you’ll need to take the time to build the proper responses to users swiping, zooming in, grabbing, or pinching the screen.
5. Typing is more challenging on mobile devices
Those small keyboards that pop up when you’re typing on your phone aren’t very conducive to writing a long text, right? The keys are narrow and mistyping is common. You may have to make adjustments, such as autofilling certain fields, providing drop down options to select instead of typing, or shortening URLs to facilitate an easier user experience.
6. Few users switch between multiple screens on mobile devices
Lots of people work from home and are used to using two or even three desktop screens at a time, allowing them to multitask or simply view multiple screens at once. Although switching between mobile tabs is possible and is certainly easier than it was a few years back, it’s still impossible to see two screens at once. Designers must understand this when creating mobile designs and offer adjustments, such as a button to share the link directly via WhatsApp.
7. Lots of mobile users use apps instead of browsers
Particularly for the apps you use frequently, you rarely use the browser function, electing to use the app itself instead. This means that your app design needs to be also optimized for apps; take into consideration the fact that many apps don’t have visible URLs, sharing options, or bookmarking options–something a user might be expecting if they’ve only viewed your website on a desktop.
8. People use mobile designs in varied locations
If you’re using your desktop, you’re probably at work or at home, sitting at a desk. You can control the lighting around you and your experience is almost always the same. Mobile devices, however, are used practically everywhere and at every time--in the dark, in public, in the sunlight, and surrounded by other people. Your mobile designs must reflect this and take it into account; mobile designs have to be usable in a wide range of situations.
Now that you know just how many variations exist between mobile and desktop designs, let’s focus a bit more on responsive web designs and what exactly they entail.
Responsive Web Design
Gaining much more popularity in recent years as mobile and app usage took off, responsive web design is an approach that prioritizes the user’s experience in changing environments, focusing on elements that can improve the overall experience. It’s self-explanatory, so you’re probably employing some of its principles without even realizing, but here are the two components of responsive web design:
Fluid layouts: desktops and mobile devices have completely different dimensions and your design must be malleable, ready to fit whatever browser the user chooses. Using the max-width property or percentage is typically preferred to pixelated designs.
Media queries: instructing your design to change its layout, moving elements around based on browser dimensions helps it become more versatile and usable for users.
When you begin creating your responsive web design, keep in mind these tips:
Your website design needs to support the content: remember, you’re creating a design that will properly display content and not content to support the design. You may be tempted to focus on the content, but if your web design isn’t supported on a mobile device, the content is useless. Keep this in mind throughout your entire design process.
Carefully choose design elements: you found the perfect font selection for your website but when you look at it on your mobile device, it’s completely illegible. Or it’s a web font that needs to be downloaded, lengthening loading time for mobile users. Be flexible and choose a system font that’s supported across all devices and is readable.
Prioritize your first fold: the first fold is the screen your user first sees when they head to your website, before they scroll down the page or navigate to another window. This area should have your company name, an inviting design, and a CTA to direct the user to where you want them to go. Responsive web designs are easy to use and intuitive, meaning your user should find everything they need immediately upon accessing your website.
Include the same content on mobile and desktop designs: shorter and less thorough web designs used to be enough when people spent minimal time using their devices, but today people use their mobile devices for so much and your mobile design needs to support all of the functions that the desktop does, providing an equally intuitive and thorough user experience.
Remember to optimize images: as we mentioned above, one of the biggest struggles when it comes to mobile designs is loading speeds because bandwidth speeds are usually lower and processors are smaller. And images, videos, and graphics are some of the most complex elements that take up the most space and time. To ensure that your mobile design isn’t weighed down by these necessary and enriching elements, optimize them or use vectors to lessen the burden on the mobile browser and processor.
These tips should be a good starting point for you, helping you create intuitive and highly functional designs for multiple designs. But in case you still have some questions, we’ve put together a quick FAQ section:
Which should I design first, desktop or mobile?
Great question! At the end of the day, the decision is up to you, but we recommend starting with the desktop design as it tends to be more complex and larger; it’s easier to simplify it for a mobile design than the other way around. However, if you prefer figuring out what works for mobile designs and then adapting it for desktop, that’s a great option as well.
Why is responsive web design important?
Besides the obvious answer of reaching a broader audience with mobile and desktop designs, responsive web design ensures equal access to your website, regardless of internet speed, disabilities, or anything else that affects how a person accesses the internet. If a person with a physical disability could only access your website via a desktop with a special keyboard, then ensuring that this option exists should be your priority.
Can’t I just prompt my users to head to the desktop site?
Well, the answer is yes, you could. But as we mentioned earlier, mobile usage is becoming increasingly frequent as more and more people need to access the internet from their phones while on the go. And if you don’t take the time to provide these users with a high-quality experience from a mobile device, you’ll ostracize an entire group, pushing them to choose a competitor instead.
Responsive web design is the future; learning the intricacies of both desktop and mobile designs might seem like a drag, but is an absolutely crucial part of accessible and responsive web design. And who doesn’t want to create better web designs?!
If you’re interested in learning more about creating responsive web designs and what the future could hold for you in the field, our
Web Development Bootcamp highlights the importance of quality web designs, preparing you to enter the workforce. If you’re up for the challenge, we can’t wait to see you in class.
