登录查看更多内容

How can mobile web designers reduce page size and complexity without sacrificing functionality?

由人工智能和领英社区提供技术支持

Mobile web design is not just about making websites look good on smaller screens. It is also about making them load faster, use less bandwidth, and deliver a smooth user experience. However, reducing page size and complexity can be challenging, especially when you want to maintain functionality and features. In this article, we will explore some tips and techniques that can help you achieve this goal.

此文章中的业界达人

由社区从 4 条内容中精选。了解更多

Alireza Jahandideh

Frontend Engineer ? Designer

1 Use responsive images

One of the biggest factors that affect page size and performance is images. Images can take up a lot of space and slow down loading times, especially on mobile devices with limited bandwidth and processing power. To optimize images for mobile web design, you should use responsive images, which are images that adapt to the screen size and resolution of the device. Responsive images can be implemented using HTML attributes, such as srcset and sizes, or CSS properties, such as image-set and object-fit. Responsive images can help you reduce the amount of data transferred and improve the visual quality of your website.

添加您的观点

Alireza Jahandideh

Frontend Engineer ? Designer
举报内容
This is something that should be always done, not only for mobile experience. You should always make sure correct and accurate image sizes are served to the client.

已翻译

赞

2 Minify and compress code

Another way to reduce page size and complexity is to minify and compress your code. Minifying means removing unnecessary characters, such as whitespace, comments, and line breaks, from your HTML, CSS, and JavaScript files. Compressing means using a tool, such as Gzip or Brotli, to reduce the file size by encoding the data more efficiently. Minifying and compressing your code can help you reduce the number of HTTP requests, improve the loading speed, and save bandwidth. You can use online tools, such as MinifyCode or CSSNano, to minify and compress your code, or use plugins, such as WP Rocket or Autoptimize, if you are using WordPress.

添加您的观点

Alireza Jahandideh

Frontend Engineer ? Designer
举报内容
This is something that should be always done, not only for mobile experience. Always minify code. Less Javascript is always a good idea.

已翻译

赞

3 Simplify your layout and navigation

To reduce page size and complexity, it's important to simplify your layout and navigation. This can make your website easier to use and understand, especially on mobile devices where space is limited. To do this, you should use a single-column layout that adapts to different screen widths, a clear and consistent hierarchy of headings and subheadings, a hamburger menu or tab bar for your main navigation, icons, buttons, and links that are large enough and easy to tap, and avoid using too many images, animations, pop-ups, and sliders that can distract and annoy users.

添加您的观点

Kristen Morris

Web Designer | Data-Driven Design | Websites for Creative Weirdos ??
举报内容
Making sure to streamline or minimize elements which might look great on desktop but don't translate or go wonky on mobile. I also like creating a link in bio page on client websites by getting rid of the header and footer with CSS.

已翻译

赞

4 Implement lazy loading

A fourth technique to reduce page size and complexity is to implement lazy loading. Lazy loading is a technique that delays the loading of non-critical or below-the-fold content until the user scrolls down or interacts with the page. This way, you can prioritize the loading of the most important or above-the-fold content, which can improve the perceived performance and user satisfaction. Lazy loading can be implemented using JavaScript, such as Intersection Observer API or LazyLoad library, or HTML, such as loading attribute or picture element. Lazy loading can help you reduce the initial page weight, save bandwidth, and enhance the user experience.

添加您的观点

5 Use web fonts wisely

When reducing page size and complexity, it is important to use web fonts wisely. Web fonts can be beneficial in terms of aesthetics and readability, but they can also add to page size and loading time if used excessively or with large file sizes. To use web fonts effectively, you should limit yourself to two or three different fonts, only use the font weights and styles that are necessary, employ font subsetting or compression tools such as Font Squirrel or Google Fonts, and implement font loading strategies such as font-display or Font Face Observer to control how your web fonts are loaded and displayed.

添加您的观点

6 Here’s what else to consider

This is a space to share examples, stories, or insights that don’t fit into any of the previous sections. What else would you like to add?

添加您的观点

Alireza Jahandideh

Frontend Engineer ? Designer
举报内容
It really comes down to less JavaScript. Reducing main thread work. Defer 3rd party js to load later or even after user interaction. Use facade for video and audio players.

已翻译

赞

Web Design

+ 关注

给文章评分

我们借助人工智能创建了此文章。您认为这篇文章怎么样？

很棒不太好

举报此文章

查看全部

How can mobile web designers reduce page size and complexity without sacrificing functionality?

1

2

3

4

5

6

1 Use responsive images

2 Minify and compress code

3 Simplify your layout and navigation

4 Implement lazy loading

5 Use web fonts wisely

6 Here’s what else to consider

Web Design

给文章评分

感谢您的反馈

更多Web Design相关文章

更多相关阅读内容

How can mobile web designers reduce page size and complexity without sacrificing functionality?

1

2

3

4

5

6

1 Use responsive images

2 Minify and compress code

3 Simplify your layout and navigation

4 Implement lazy loading

5 Use web fonts wisely

6 Here’s what else to consider

Web Design

给文章评分

感谢您的反馈

查看其他技能