登录查看更多内容

全部
HTML

How do you optimize web pages for different media types?

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

Web pages are not just viewed on desktop browsers anymore. They can be accessed on different devices, such as smartphones, tablets, laptops, and TVs, each with different screen sizes, resolutions, orientations, and capabilities. How do you optimize web pages for different media types, so that they look good and function well on any device? In this article, you will learn how to use HTML and CSS to create responsive and adaptive web pages that can adjust to different media types.

本文章的要点总结

Embrace media queries:

Use media queries to tailor styles for specific device features. For instance, adjust font sizes or background colors based on screen width or resolution to ensure optimal viewing across devices.### *Consider a hybrid approach:Combine responsive and adaptive strategies by adding media queries for specific problematic devices. This allows you to maintain overall responsiveness while addressing unique device issues efficiently.

本摘要由 AI 和以下专家提供支持

1 What are media types?

Media types are categories of devices that have different characteristics and features, such as screen size, color depth, resolution, aspect ratio, input method, and so on. For example, a media type can be print, screen, speech, or projection. You can use media types to specify different stylesheets or rules for different devices, using the <link> or <style> elements in HTML, or the @media rule in CSS. For example, you can use the media attribute in the <link> element to link to a stylesheet that only applies to print media, like this:

添加您的观点

Alexey Istomin

Lead Frontend Engineer | 5+ years of experience at E-commerce | Vue.js | @OZON
举报内容
Media types in CSS, like screen, print, and speech, define styles for specific devices or usage scenarios. For instance, @media screen applies to screens, @media print is for print layouts, and @media speech targets screen readers. These help tailor styles for different contexts, enhancing the user experience. Media queries further refine styling based on characteristics like screen width or device features.

已翻译

赞

2 What are media queries?

Media queries are expressions that allow you to test the features and conditions of a media type, such as width, height, orientation, resolution, color, and so on. You can use media queries to apply different styles or rules depending on the result of the test. For example, you can use a media query to change the font size of a paragraph if the screen width is less than 600 pixels, like this:

@media (max-width: 600px) {

p {

font-size: 14px;

}

You can use media queries in the media attribute of the <link> or <style> elements, or inside the @media rule in CSS. You can also combine multiple media queries using logical operators, such as and, or, and not. For example, you can use a media query to apply a different background color if the screen is in portrait mode and has a high resolution, like this:

@media (orientation: portrait) and (min-resolution: 300dpi) {

body {

background-color: lightblue;

}

添加您的观点

3 What are responsive and adaptive web pages?

Responsive web pages are web pages that use flexible layouts and grids, fluid images and videos, and relative units, such as percentages, ems, and rems, to adapt to the size and orientation of the screen. Responsive web pages use the same HTML and CSS code for all devices, but they change the appearance and arrangement of the elements based on the screen width and height. For example, you can use a responsive grid system, such as Bootstrap or Flexbox, to create columns and rows that can shrink or expand according to the screen size.

Adaptive web pages are web pages that use fixed layouts and breakpoints, static images and videos, and absolute units, such as pixels and points, to adapt to the device type and capability. Adaptive web pages use different HTML and CSS code for different devices, and they change the content and functionality based on the device features and conditions. For example, you can use an adaptive approach to create different versions of a web page for desktop, tablet, and mobile devices, and use media queries to detect the device type and load the appropriate version.

添加您的观点

4 How do you choose between responsive and adaptive web pages?

When considering whether to use a responsive or adaptive approach to optimize web pages for different media types, there is no definitive answer. Both approaches have advantages and disadvantages depending on your goals, resources, and audience. Responsive web pages are easier to maintain and update, but can be slower to load and render. On the other hand, adaptive web pages are faster to load and render, but require more code and testing for different devices. Responsive web pages are more flexible and scalable, yet may not account for the specific needs of different users and devices. Adaptive web pages can tailor the content and functionality to these needs, but may not cover all possible variations of different devices.

添加您的观点

Kimberly Morrow, UXC

UX & Service Designer | Content Strategist | Teacher & Facilitator | AI Explorer | Ex-Fidelity | Ex-MIT | Harvard Design Graduate Cert | Berkeley AI Strategy Cert | Nielsen Norman Group UX Certified (UXC, Management)
举报内容
One rule of thumb is to use adaptive when you are certain that your users are on a particular device. For example, you’re designing an internal, employee-facing site and you know that all employees either do work on a certain laptop or a certain mobile device. Then you can ensure the experience js pixel-perfect on each of those devices. If you have a user base that uses many different types of devices, or you don’t know, responsive is probably best. You can decide how many breakpoints to have (specified changes in layout and images as you go larger or smaller than a certain width). How many breakpoints should you have? At least 3 (small/mobile, medium/tablet, large/laptop/desktop), but it depends on your users and project resources.

已翻译

赞

5 How do you test and debug web pages for different media types?

Testing and debugging web pages for different media types is an essential part of optimizing web pages. You need to make sure that your web pages look good and function well on different devices, browsers, and platforms. To do this, you can use developer tools such as Chrome DevTools or Firefox Developer Tools to inspect and modify HTML and CSS code, and simulate different screen sizes, resolutions, orientations, and media types. Additionally, online tools like BrowserStack or LambdaTest can be used to test and debug web pages on real devices. Testing frameworks like Selenium or Cypress can help automate tests on your web pages for different media types. Finally, feedback and analytics tools like Google Analytics or Hotjar can be used to collect data on how your web pages perform on different media types, as well as identify any issues or problems users encounter.

添加您的观点

Kimberly Morrow, UXC

UX & Service Designer | Content Strategist | Teacher & Facilitator | AI Explorer | Ex-Fidelity | Ex-MIT | Harvard Design Graduate Cert | Berkeley AI Strategy Cert | Nielsen Norman Group UX Certified (UXC, Management)
举报内容
Even if you are not a developer or the person doing debugging, I recommend that every designer (UX, Content, Product, Learning, or otherwise) know how to use dev tools like inspect element (which requires only basic HTML and CSS knowledge). I’ve used it countless times for many reasons, but the most common was to see how different content looked at different breakpoints within a responsive design. Why? Often, product/marketing stakeholders will want way too much content because “it’s all important.” If you’re doing responsive deign, you need to design mobile first. I can’t count the times I showed them how their content wrapped to 15 lines on a mobile device and then they agreed to prioritize their messaging and shorten things up.

已翻译

赞

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?

添加您的观点

Kimberly Morrow, UXC

UX & Service Designer | Content Strategist | Teacher & Facilitator | AI Explorer | Ex-Fidelity | Ex-MIT | Harvard Design Graduate Cert | Berkeley AI Strategy Cert | Nielsen Norman Group UX Certified (UXC, Management)
举报内容
You may also want to consider a hybrid between responsive and adaptive. Say you design a responsive site with 3 breakpoints and it looks good on most devices you test, but something weird happens on a certain device (or operating system, service provider, browser, etc.). You could keep your 3 breakpoints and add a media query looking for the “problem” device. Then you can have an adaptive version just for that device. In any case, make sure you know as much as possible about what devices, operating systems, service providers, and browsers your users actually use. Spending too much time and money to design for an edge case may not be worth it, or maybe you start with an MVP and add more adaptive versions in later sprints.

已翻译

赞

HTML

+ 关注

给文章评分

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

很棒不太好

举报此文章

查看全部

How do you optimize web pages for different media types?

1

2

3

4

5

6

1 What are media types?

2 What are media queries?

3 What are responsive and adaptive web pages?

4 How do you choose between responsive and adaptive web pages?

5 How do you test and debug web pages for different media types?

6 Here’s what else to consider

HTML

给文章评分

感谢您的反馈

更多HTML相关文章

更多相关阅读内容