Mobile vs Desktop:
Planning and Executing Web Designs

Why

When creating digital content, it is crucial to establish what audience this is intended for. According to W3Schools.com, a website created for web and software developers, when designing web layouts today, it is especially important to plan and execute with the concept of “Mobile First” in mind. Because of a growing audience heavily relying on mobile devices and a clear transition of the use of media types, it seems as a non-brainer to design content for mobile devices first, as the concept suggests, and then implementing media queries to optimize it for a desktop experience. As the website infers, “Instead of changing styles when the width gets smaller than 768px, we should change the design when the width gets larger than 768px” (W3Schools, 2020).

How

This translates into making “our design Mobile First” (W3Schools, 2020). But how do we implement the oh-so-acclaimed concept of “Mobile First” when designing and executing web layouts? There are two main strategies to bear in mind and apply as we go along in the creation process: Media queries and breakpoints. The second, however, is thought of as, perhaps, one of the most if not the most crucial part of the design planning process.

When

Establishing what content to display for a specific range of display sizes as well as fixing “breakpoints” for each of them is essential because it allows us to tailor and optimize content in relation to the device it is meant to be displayed, therefore, targeting specific audiences. Through the implementation of media queries and breakpoints, in fact, we can optimize user experience by adjusting font size, what elements ought to be displayed, the arrangement of given elements that would clearly differ from a desktop view, and more.

Breaking It Down

As we previously explained, to better understand the planning process it is vital to establish breakpoints first. To do so we need to learn more about the most popular devices used today so to establish similarities in display sizes and resolutions. From there it is indeed feasible to ascertain crucial data between ranges of devices so to create groups that allow different designs to take place.

Take a look at how W3Schools website will treat content differently based solely on screen widths. This is done by instructing the browser to enable different CSS files or different CSS styles within one CSS stylesheet through special instructions called media queries (inquiring the local machine what media type it is using along with some important specifications such as width, height, etc.).