Mobile vs. Desktop: Why Are Designers Starting Layout on Big Screens?

Contents:

• Old school and habit
• Large content
• Ability to use multimedia and complex graphic elements
• Okay, let's start with mobile layout... We still can't do without a desktop, right?
• How do you finally layout a website correctly?

Mobile versions of websites account for 60% to 80% of all traffic, underscoring their importance in modern web design. However, many designers create the desktop version first during development, which can lead to layout errors and loss of functionality. This approach not only reduces the quality of the user experience but also negatively impacts search engine optimization. It's important to start development with a mobile version in mind to ensure all key features are accessible and optimized for mobile users.

Nika Oktyabr, Art Director at maryco studio, analyzed the reasons for the current web design trend and explained how the type of site and its target audience influence the designer's work. It's important to understand that each web space has its own unique characteristics that must be taken into account when developing a design. The type of site, whether corporate, informational, or online store, determines the style and functionality, while the target audience dictates preferences in visual design and user experience. Nika shares practical recommendations that will help designers adapt to market demands and create more effective and attractive sites.

Old School and Habit

Mobile sites have become popular relatively recently. Let's recall the first versions of social networks like Odnoklassniki and VKontakte, which appeared in 2006, as well as the responsive websites developed by Lebedev Studio. These early examples demonstrated the importance of adapting content for mobile devices, which subsequently became a standard in web development. With the growing number of smartphone users, the need to create mobile versions of websites only increased, contributing to an improved user experience and increased traffic. Currently, mobile optimization is a key factor for successful website promotion in search engines.

We are currently actively experimenting and developing new approaches to our work. We are introducing elements of virtual reality into websites and using artificial intelligence to improve user experience. These innovations help us create more interactive and engaging platforms, allowing our clients to stand out from the competition.

Most designers were educated in traditional educational institutions, where the focus was Desktop versions of design. However, the quality of education depends largely on the educational institution. At institutions with young faculty, students can not only master basic academic knowledge but also gain relevant experience that meets modern industry requirements. This allows them to successfully adapt to rapidly changing market conditions and apply their acquired skills to create effective and modern design solutions.

Even if a designer has a degree in Design and Programming, to confidently master their skills, they need to practice on real projects. Practical experience not only deepens knowledge but also develops creativity and masters current design tools and technologies. Working on real projects helps designers better understand client needs and market specifics, which is a key aspect of a successful career in this field.

Many designers began their careers in an era when websites were primarily viewed on desktop computers. Creating a mobile version of a website became a necessity, a skill they had to master on their own. In today's world, where mobile traffic significantly exceeds desktop traffic, the ability to adapt design to different devices has become critical to successful web development.

I continue to learn new things every day. Interacting with reality provides a unique experience and promotes personal growth. This process allows me to expand my knowledge and skills, which is an important part of my development. Every day brings new challenges, and I strive to make the most of them.

UI/UX design is becoming increasingly popular every year, prompting graphic designers to retrain, sometimes on their own. Such designers usually focus on "large screens," as their daily work involves creating presentations, guidelines, magazines, and banners, which require desktop visualization skills. With the growing demand for high-quality user interfaces and experiences, it is important to adapt to new requirements and master modern technologies and tools. The transition to UI/UX allows designers to expand their horizons and offer clients more holistic and functional solutions that improve user interactions with products.

Reading is an important part of our lives. It not only develops thinking but also broadens horizons. Books, articles, and blogs help us learn new things and delve deeper into topics of interest. Reading also improves memory and concentration. It's important to choose a variety of sources to gain a more complete understanding of the world. Don't forget about modern technology, which allows easy access to a large amount of literature and information in digital format. Read to develop and enrich your inner world. UX/UI design is a field that focuses on creating user-friendly and attractive interfaces. UX (user experience) concerns how users interact with a product, while UI (user interface) focuses on the visual presentation and design elements. This profession requires a combination of creative and analytical skills, as it requires understanding user needs and translating them into effective solutions. To start a career in UX/UI design, you need to learn the fundamentals of interface design and development. It is recommended to take courses or training programs that cover key aspects of design, such as prototyping, working with graphic editors, and the basics of usability. It's also important to develop skills in tools such as Figma, Sketch, or Adobe XD.

Practice plays a crucial role in developing a specialist. It's worth creating a portfolio that includes completed projects, even if they're just for training. Participating in internships or freelance projects will help you gain real-world experience and establish contacts in the industry. It's also helpful to keep up with the latest trends and new technologies in UX/UI design to stay competitive in the job market.

Large Content

Text content takes up a significant portion of a website, accounting for about half of its content. For landing pages, the amount of text can be significantly greater. Therefore, it's more convenient for designers to first place all the text on the desktop version of the website and then adapt it for mobile devices. This helps preserve the structure of the content and ensure its optimal perception on different screens, which is important for improving usability and improving search engine rankings.

The problem of adapting website content often arises when it is created not by UX editors, but by specialists from other fields, such as executives, marketers, and copywriters. These professionals, focused on presentation formats, tend to write large blocks of text, which makes information difficult to digest. Effective content must be adapted to user needs to ensure their comfortable interaction with the site. Therefore, it is important that the content creation process includes the participation of UX editors, who will help make the text more structured and accessible.

In this situation, it is advisable to discuss with the author of the text, explaining why a concise writing style is preferable. However, on a more general level, there is a significant communication gap between the designer and the manager. Effective interaction between these two roles is critical for the successful implementation of projects. Misunderstandings often lead to distortions in the final result, so it's important to establish clear lines of communication and information exchange. Improving the dialogue between designers and managers can significantly improve productivity and work quality.

It's easier for a beginning freelancer to complete an order by strictly following the technical specifications and the specified text, without trying to convince the client to make changes to achieve a better result. This is because following the specifications simplifies the work process, and a beginner may not have sufficient experience in arguing their point of view.

At our studio, most clients—approximately 80%—bring significant amounts of content, often exceeding the capacity of a mobile phone screen. Clients are eager to share information about their products, striving to convey every detail. We explain which elements can and should be cut to make the content more effective. However, at the initial stage of our work, we also faced difficulties trying to manage large volumes of information due to a lack of experience in communication.

Ability to use multimedia and complex graphic elements

The Desktop First approach contributes to the development of more attractive and functional products. Using a large screen allows you to integrate a variety of elements, such as photos, videos, and complex graphics, as well as apply effective animations to improve the user experience. This makes the interface more interactive and visually rich, attracting users' attention and promoting deeper engagement with the content.

Modern smartphones offer powerful capabilities, but mobile internet speeds often prevent users from taking full advantage of these features. On average, users are willing to wait only 2-3 seconds for a page to load. If a site takes longer than this, it's likely to be abandoned. Therefore, it's important to optimize web resources to ensure they operate efficiently even with slow internet speeds. Simplifying the interface and minimizing the load will help ensure stable operation of all functions, regardless of the connection quality.

Okay, let's start with the mobile layout... Without Is a desktop version still unavoidable?

Regardless of the purpose of your website, if you and your client decide to start with a mobile version, sooner or later users will want to access the site from a desktop. This is especially true for apps and marketplaces, where usability and accessibility across various devices are key. Therefore, it is important to consider the site's responsiveness, ensuring a comfortable user experience on both mobile and desktop platforms.

Most clients are often unaware of the specifics of mobile layouts, as they are accustomed to viewing websites on large screens. As a result, even if a designer initially develops a mobile version, they will still need to create a desktop layout. This is because the interface and navigation elements familiar to users can differ significantly across devices. Therefore, it is important to consider user needs and adapt the design to different formats to ensure an optimal user experience.

Designers often strive to simplify their work, and the desire to start with a desktop version is quite justified. The process of approving and making edits on larger screens can be more convenient and intuitive. However, it's important to remember that creating a responsive design requires considering all possible devices. Starting with desktop users can miss important usability aspects for mobile users. Therefore, a wise approach is to balance user experience with end user needs.

How to ultimately design a website correctly?

Studying the target audience is a key step in website development. It is necessary to determine who will use the resource, what devices they will use, and what features are most important to them. Understanding user preferences helps create a convenient and attractive interface that meets their expectations. Analyzing the behavior of the target audience allows you to adapt the content and functionality of the site, which in turn increases its effectiveness and contributes to the achievement of business goals.

It is important to understand what business problems your website solves and what its main purpose is for the client. For example, one client may only need an attractive business card website, while another requires a functional tool to increase conversion. These differences in goals directly affect the final layouts and functionality of the site. Understanding the client's needs will help create a personalized approach and ensure an effective solution to their problems.

When developing a design, it is important to consider multiple screens at once. In addition to standard sizes such as monitors and phones, there are at least three intermediate formats: landscape phones, tablets, and small monitors. When creating a design, it's important to consider how various elements will adapt to different devices. It's recommended to discuss with the development team how many layouts and what sizes should be prepared to ensure an optimal user experience.

It's important to consider the context in which the user arrives at the site. If the situation requires quick information transfer, avoid overloading the site with special effects. Instead, emphasize key data and highlight it to simplify access to the information they need. This will help users quickly find what they need, improving the overall perception of your website. Ease of navigation and clarity of content are the keys to successful interaction.

Learn more about design by subscribing to our Telegram channel. We share interesting ideas, current trends, and useful design tips. Join us and stay up to date with the latest news in the world of design.

Mobile Layout: Important Aspects and Recommendations

Mobile layout is becoming increasingly important with the growing use of mobile devices to access the internet. Properly adapting websites to mobile screens improves user experience and increases conversion. In this context, it is important to consider several key factors.

First, you should use responsive design, which allows the site to automatically adjust to different screen sizes. This ensures ease of navigation and reading content on mobile devices.

Second, optimizing page load speed is paramount. Fast-loading sites reduce bounce rates and improve search engine rankings. It is necessary to minimize image size and use modern file formats.

Also, it is worth paying attention to the use of user-friendly navigation. The menu should be simple and accessible so that users can easily find the information they need.

The next aspect is ease of interaction with interface elements. Buttons and links should be large enough and easy to click, which is especially important on touchscreens.

It is important to keep the content up to date. Regularly updating information and using keywords related to mobile layout will help improve the visibility of the site in search engines.

Finally, don't forget about testing. Check how your site is displayed on different devices and browsers to ensure the optimal user experience.

Mobile layout is not just a trend, but a necessity for successful business in the digital age.

• Simple rules of mobile typography
• What does "responsive" mean? Explained in simple terms
• Adaptive design, responsive and mobile version: why is it needed and what are the differences