In a previous blog post, The History of the Shift from Desktop to Mobile Part I: Website Design Methodology I discussed the history behind the transition from desktop-first to mobile-first design methodologies. Now, to the question designers and web developers continue to discuss: which methodology is the better approach?
There are many advantages and disadvantages to using the desktop-first approach. But there are also many advantages and disadvantages to using the mobile-first approach. Is one way better than the other? Realistically, there is not a yes or no answer to that question.
When I was in college and learning how to design and code websites, we were taught using the desktop-first methodology. To this day, I prefer to use that methodology for several reasons. When I am designing websites using the desktop-first methodology, I have trained my brain to continuously think about what elements will and what elements will not be crucial enough to appear on the mobile design of a website. I have always preferred to get everything I want in my design including little details I might include making the website unique out on the page first then go back and eliminate or change the appearance of sections to fit the mobile version. When attempting to use the mobile-first design methodology, I struggle to essentially re-wire my brain to think backwards.
When designing using the website-first methodology, there are many advantages that allow you to be more creative in your design approach. The most obvious advantage when designing for a desktop website is the size of the screen. When approaching the design of a website for desktop first you have the advantage of being able to add everything you can think of for the layout and then come back and either modify or delete the less important elements for the mobile design of the website.
Designers frequently add creative elements to enhance the branding of a website such as stylizing pictures to better fit the website color palate, incorporating textures into section backgrounds to draw attention to an important section, or adding icons to specific parts of the website design to indicate changing topics. Designers might also add interactive features that engage users and entice them to continue exploring the website. Websites containing a gallery of photos such as a wedding venue website would be the opportune time for a designer to layout large photos for the viewer. Or it might be an opportunity to use a large background for a section of the website containing a picture of the wedding venue. The downside to this approach is you run the risk of adding too many elements to the design of the desktop version of the website that doesn’t translate well to the mobile design.
For example, any hover elements on a desktop website cannot be translated to mobile. Adding hover elements can be a conducive way to indicate whether an element is clickable or interactable. Unfortunately, (at least for now) our phones and tablets cannot tell when our finger is hovering above a precise position.
Vast amounts of pictures and/or large sections of text are another example of components that do not translate well to mobile. The sizable picture background highlighting a part of the wedding venue mentioned a moment ago isn’t apt to translate well on the mobile view. On a computer screen a large section of text might be effortless to read but, on a phone, the amount of scrolling a user will endure is likely to trigger the user to either not read all the text displayed on a page or leave the site altogether. People want their information fast, and users want to put in as little effort as possible to get the information they are looking for. Readability is another issue with large amounts of text on a mobile website. For longer paragraphs of text, typically designers will increase the size of fonts to increase readability. This results in the user having to scroll even further depending on the size of the paragraph. But what would happen if you started your design with the mobile version of the website first?
Pretend you are designing a website for a restaurant. Presumably, a menu for a restaurant is going to be viewed on a mobile phone. Logically, designers would start with the mobile design of the restaurant website. When using the mobile-first design method in this case, designers can establish what elements need to be prioritized by the user on the website because the space you have to work with is significantly smaller. How are the categories of the menu going to be separated? How are users going to get from one page to another? Are they going to be able to find the food item they want fast? Because functionality is prioritized over design on a mobile site, these are all elements that would be prioritized on a mobile website.
When using the mobile-first design methodology designers can feel restricted creatively due to the amount of room they have to work with. Image size and the amount of text are all limited when using the mobile-first design. When using the mobile-first design methodology large paragraphs are reduced to bulleted text points or brief statements. Large photo galleries are reduced to a tiled grid of photos that users can click through without forcing the user to scroll and scroll to get through all the pictures. Beautiful large sections containing a background image might be changed to a solid-colored background to accommodate the smaller screen size. Icons might replace photos because they take up less space. When translating mobile designs to desktop, designers like myself often find it frustrating to add elements instead of eliminating them.
When it comes to choosing which design methodology is the better option, a designer must consider a variety of factors. Who is the client and how is their website going to be viewed? Is their website going to be primarily viewed on desktop or mobile? Who is the target audience? What kind of design elements are going to be a priority? All of these questions need to be answered before you decide which design methodology is going to be better suited for you and the project at hand.