Mobile First Responsive Design | Điểm Mạnh Của Responsive

by Shubkids
16 February, 2024

Mobile Design 101: How to Design for Mobile First

MY LOGO

HOME
PRODUCT
PRICING
ABOUT US
CONTACT

body { overflow-x: hidden; } body h2, body li{ font-family: 'Roboto', sans-serif; } .header { background-color: white; box-shadow: 0 0.25rem 0.125rem 0 rgba(0,0,0,0.05); height: 64px; display: flex; justify-content: space-between; align-items: center; padding: 0 20px; } .logo { font-weight: bold; font-size: 25px; } .header i { display: none; } .nav { display: flex; flex-flow: wrap; } .nav li { line-height: 30px; width: 100px; text-align: center; } @media only screen and (max-width: 633px) { .nav { display: none; } .header i { display: block; position: absolute; left: 20px; } .header { justify-content: center; } }

Như trên là kết quả ta đạt được sau khi thực hiện style cho giao diện desktop. Tiếp theo với giao diện Tablet (với kích cỡ 768px). Do thanh header của chúng ta khá đơn gian nên khi bạn thử thu nhỏ màn hình xuống kích cỡ này sẽ thấy giao diện vẫn rất ổn nên không cần sửa gì cả:

Tiếp theo với giao diện mobile. Các kích thước mình chọn ở đây là các kích thước tương ứng khi ta sử dụng công tụ test responsive trong Chrome Dev Tool:

Kích cỡ màn mobile lớn nhất đầu tiên mình thấy trong Chrome Dev Tool là 633px (kích cỡ khi ta quay ngang màn hình), ta sẽ sửa giao diện thành như sau:

Đến đây nghe chừng có vẻ là ổn ổn rồi, tuy nhiên tự nhiên một ngày nào đó có cái màn quái dị nằm giữa 768px và 633px của bạn thì điều sau đây sẽ xảy ra (644px):

Điều này sở dĩ xảy ra là do giao diện của bạn chỉ thay đổi nếu độ rộng màn hình của nó nhỏ hơn hoặc bằng 633px nên khoảng giữa các break point hoàn toàn có thể xảy ra lỗi nhất là khi bạn có một giao diện phức tạp. Tuy nhiên nếu bạn chọn đi theo con đường Mobile First thì giao diện của bạn ban đầu sẽ có dạng:

Giao diện bạn thấy ở trên sẽ duy trì cho đến khi màn hình của bạn có kích cỡ lớn hơn hoặc bằng 768px thì nó mới chuyển thành như thế này:

Như vậy bạn có thể đảm bảo được rằng giữa các break point theo hướng mobile first sẽ không làm vỡ giao diện của bạn nếu gặp 1 số kích cỡ màn hình hơi lại một chút vì nó sẽ mãi mãi nhìn giống giao diện mobile cho đến khi nó đủ lớn – hay chính xác là kích cỡ màn lớn hơn hoặc bằng 768px. Nếu bạn chưa tin thì có thể xem thử ví dụ trên nhưng với phiên bản Mobile First ở đây.

Lý do khác

Nếu bạn tìm hiểu về SEO thì chắc hẳn bạn cũng biết được rằng chính Google cũng yêu cầu rất cụ thể về mobile friendly nếu bạn muốn trang web của bạn đạt được đánh giá cao
Chắc hẳn các bạn cũng không hề lạ với các thư viện hỗ trợ việc Front-end như Bootstrap. Chính bản thân Boostrap cũng đi theo hướng Mobile First, nếu không tin bạn có thể tự mở code của bootstrap lên xem sẽ thấy được điều này

Why Mobile-First Design Matters for Your Digital Campus

Mobile-First Design is an Audience-Based Strategy

If you were developing your social media plan and you found out that 90 percent of your target audience used Instagram while only 10 percent used Facebook; you’d likely focus most of your energy on creating great Instagram content (and leave some room in your schedule for adapting content to perform well on Facebook).

Similarly, if you know that half or more of your audience is visiting your website on a mobile device (and they are!), it doesn’t make sense to focus your design decisions solely around the desktop. Take in these stats:

A design that “wows” on mobile can help schools and districts attract and retain those community members who will never see the design on a desktop.

Mobile-First Design Increases Community Engagement

It’s important to make your website easy for families to browse on mobile devices because they are what makes your community thrive. Happy parents, students and community members are more likely to engage with your school’s content, stay connected, and support school initiatives.

6 Qualities Of Great Mobile-First Design

Mobile First And Other Tips From Lincoln Community School’s Website Redesign

Set your content priorities

A “mobile-first approach” differs from “desktop-first” in that we add information to each progressively larger layout rather than cut away as we design smaller. Thinking mobile doesn’t mean eliminating information. It means sorting information into primary, secondary, and tertiary content.

In this example, we know that the home page should have certain elements, like the company’s name and links to products. A blog post wouldn’t hurt either. But like we said, not everything will fit into a smartphone view, so we set priorities based on what will achieve the site’s goal: selling bikes.

1. The newest model bike

2. The best-selling bike

3. “Find your perfect ride” CTA

4. Company name and hero image

5. Navigation

6. Search

7. The second-best-selling bike

8. Gift certificates

9. A testimonial

10. The latest blog post

Based on that ordered list, we can create with the confidence that our work will solve a design problem of getting sales.

Smartphone View

How much do users need?

Thinking mobile-first forces us to think about what’s really important. In this smartphone view, the top-selling bike and newest model will lead directly to sales, so can we leave other items — such as gift certificates, a less-popular model, the latest news — for inside pages. The final call to action is especially prominent and easy to hit with a single tap of the finger.

Mobile-First Responsive Build #1 - Introduction — Mobile-First Responsive Build #1 – Introduction

Nhược điểm của Mobile first và cách khắc phục

Dẫu có những ưu thế rất lớn, nhiều nhà thiết kế website vẫn không lựa chọn hướng đi này. Đơn giản vì thực hiện nó chẳng vui vẻ hay dễ dàng gì. Chúng ta đâm đầu vào những hạn chế và quy định ngay từ bước đầu tiên. Chúng ta đau đầu hơn với một màn hình nhỏ hơn, ít tài nguyên hơn, và không gian hạn chế.

Nhưng phản biện này là không đủ để phủ nhận những lợi thế của Mobile First. Điều đó chỉ có nghĩa là các nhà thiết kế cần vượt qua chính mình, chấp nhận những thử thách đến từ hướng tiếp cận này, và chấp nhận rằng mình cần phải học hỏi và phát triển nhiều hơn về kĩ năng thiết kế UX.

Và cần phải nhấn mạnh rằng, Mobile First không có nghĩa là Mobile Only. Việc cắt giảm ngân sách thiết kế có thể khiến cho chúng ta nghĩ rằng chỉ thiết kế một giao diện mobile là đủ. Nhưng khi rất nhiều người dùng chuyển đổi linh hoạt giữa các giao diện để dành cho các tính năng khác nhau, việc chúng ta tập trung vào nội dung, điều hướng, và sự đồng nhất giữa các giao diện càng trở nên quan trọng.

Trong một báo cáo gần đây về mobile marketing, nhà sáng lập Smart Insights, Dave Chafey, đã phân tích các dữ liệu và kết luận:

“Dẫu thực tế là người dùng sử dụng di động nhiều hơn cho một số hoạt động như social media, nhắn tin, hay nắm bắt các tin đồn hay cập nhật tình hình thời sự mới, phần lớn người dùng ở thị trường phương Tây vẫn thường sử dụng desktop để xem các thông tin chi tiết, hay mua hàng điện tử.”

Trong quá trình thiết kế, không có một công thức cố định nào. Các dự án khác nhau sẽ cần những cách tiếp cận khác nhau, và chúng ta cần phải cân nhắc kĩ lưỡng khi thực hiện kế hoạch. Chúng ta cần phải quyết định dựa trên quyết định nào là tối ưu cho doanh nghiệp của mình, nhưng cần nhớ rằng, mobile và mobile apps đang càng ngày càng chiếm nhiều thị trường và phát triển càng mạnh mẽ.

Nguồn: Khóa học UI/UX Design

In 2021, there were 4.32 billion mobile internet users globally–and that number is only growing. On top of that, mobile accounts for more than half of all web traffic, with an even larger share in mobile-first markets such as Asia and Africa.

What does this mean for your website? These days, a site that looks beautiful on desktop isn’t enough. To account for all the traffic that comes through phones and tablets, your site’s UX needs to be mobile-friendly–and that means you’ll need to know the difference between mobile versus responsive web design.

Among professional designers, these are the two main approaches for improving mobile UX. Contrary to what some may think, mobile and responsive design are not synonymous. Instead, they each come with a unique set of strategies and advantages.

To help you optimize your site’s mobile UX, we’re going to break down the differences between mobile-first versus responsive. We’ll also go over the benefits of each to help you determine the best UX strategy for your next project.

Tạm kết

Trên đây là những chia sẻ mới của mình về việc sử dụng Media query sao cho hiệu quả, để các bạn nắm rõ khi nào nên dùng Mobile first, khi nào nên dùng Desktop first hay là dùng cả 2. Từ đó đúc kết được nhiều kinh nghiệm khi code hơn, tối ưu hơn, dễ dàng sửa hơn và tránh xung đột code nhất có thể nhen. Cám ơn bạn đã đọc và chúc các bạn 1 ngày tốt lành.

Bài viết có tham khảo các đoạn code từ blog Ishadeed

A Hands-On Guide to Mobile-First Responsive Design

Mobile-first design is an approach to designing UIs that prioritizes small-screen experience.

Given that different devices need different layouts based on their screen size and orientation, it makes sense to design multiple arrangements for your users. This article will show you how to create a mobile-first prototype of a product and transform it into tablet and desktop screens.

Make your own responsive or adaptive variations right in UXPin. Create a mobile-first design and scale it up for tablet and desktop views in UXPin – an advanced prototyping tool. Go ahead and create a free trial and follow along below.

Still Struggle with Mobile-first Responsive?

Frequently Asked Questions

If I have a mobile-first website, do I still need a mobile app?

Yes!

A mobile-first website is not the same as a mobile app.

Your website is a critical marketing tool for communication with prospective families in particular. It’s where you share your unique value proposition, highlight your academic programs, and provide content offers that fuels your school’s admissions funnel or communicate with important stakeholders.

But for individuals already in your school community, a mobile app is an incredibly valuable resource. An app can help parents access more specific content that isn’t relevant to the general public (or filter only the content they want to see). Plus, push notifications and other direct messaging features provide instant communications in a way that isn’t possible with only a mobile-first website.

Mobile Apps Vs. Mobile-First Websites: Why Your School Should Use Both

If my website isn’t mobile-first, should we redesign now?

Absolutely!

All schools and districts should be thinking about whether their website is optimized for the growing number of people who use the web exclusively on their mobile phones. By ensuring that the mobile experience comes first, you can put your communities’ needs first. Informed families are more engaged and supportive of the work that’s happening in your schools, so it’s a win for your school, too.

Tại sao Mobile First ?

Như ví dụ mình đưa ra ở trên, bạn có thể thấy chúng ta sẽ thu được kết quả giống hệt nhau thế thì câu hỏi đặt ra là tại sao lại chia ra làm hai hay tại sao lại là Mobile First.

Số lượng thiết bị Mobile

Ngày nay số lượng các thiết bị di động được sử dụng ngày càng nhiều lên so với thiết bị desktop. Điều này đơn giản là do sự tiện dụng bởi ta có thể mang theo một chiếc điện thoại di động mọi lúc mọi nơi và truy cập vào internet tức thì. Còn đối với Desktop thì việc này thì không thể, hãy tưởng tượng ta phải luôn vác theo 1 màn hình và 1 cái case máy tính cùng đống dây dợ lằng nhằng xem.

Chính vì lý do này mà số lượng thiệt bị Mobile càng ngày càng tăng đồng nghĩa với việc truy cập internet từ Mobile cũng tăng nên sẽ không có gì lạ nếu người dùng truy cập vào website của bạn từ Mobile nhiều hơn so với các thiết bị khác. Mình có xin được một bức ảnh thu được từ Google Analytic về lượng traffic truy cập vào trang web của bạn mình và kết quả nó như sau:

Như bạn thấy lượng truy cập vào từ Mobile là tận 77.4% so với Desktop chỉ có 17.9%, một khác biệt khá lớn. Vì thế ngay từ đầu nếu bạn đi theo con đường Mobile First thì sẽ tối ưu rất nhiều cho các thiết bị Mobile.

Tối ưu nội dung

Đối với mỗi trang web chúng ta có thể thấy chứa rất nhiều nội dung khác nhau nằm trong nó. Với màn hình desktop rộng lớn, ta có thể cho vô vàn các nội dung, các thành phần khác nhau như sidebar, slider, .. để tăng lượng thông tin xuất hiện trên màn hình của chúng ta:

Tuy nhiên khi màn hình của chúng ta bé đi rất nhiều, cụ thể là kích cỡ màn chỉ còn một nửa hoặc 1/6 kích cỡ ban đầu thì chắc chắn chúng ta sẽ cần phải tối ưu hóa lại nội dung, tối ưu hóa lại các thành phần xuất hiện trên trang web bằng cách xóa cái nọ bỏ cái kia và cân đo đong đếm xem trong đống nội dung trong màn hình chỗ nào cần chỗ nào không. Việc bạn mất công thêm thắt đủ các thứ vào cái màn to kia để cho nó là
hoàn hảo
trong mắt bạn rồi lại phải xóa dần đi thì thật khó chịu. Nhưng với phương pháp Mobile First thì ngay từ đầu màn hình chúng ta chỉ có kích thước vỏn vẹn khoảng 320px chiều rộng nên tất nhiên chúng ta sẽ cần phải tập chung vào nội dung cũng như các thành phần quan trọng nhất mà người dùng mong muốn và có thể chưa cần suy nghĩ đến các thứ màu mè khác.

Sau đó khi phát triển lên các màn hình tiếp theo, ta có thể thoải mái hơn khi thêm các nội dung mới hay các thành phần mới như slider, side-bar vào.

Hạn chế lỗi

Như bạn biết tới thời điểm hiện tại, số lượng các thiết bị với kích cỡ màn hình khác nhau là nhiều vô cùng và chúng ta không có cách nào để code giao diện với break point phù hợp với từng màn hình một

Với ví dụ đơn giản nói trên thì tất nhiên không có vấn đề gì cả tuy nhiên giao diện thực tế của bạn sẽ phức tạp hơn rất nhiều. Để minh chứng cho điều trên ta sẽ có thêm một giao diện như sau (link tham khảo) theo hướng Desktop First (với độ rộng ban đầu 1440px):

Are you writing responsive CSS the wrong way?

What is mobile-first web design and how is it different from a responsive website?

Creating a responsive site doesn’t automatically make it mobile-first. In fact, there are several distinguishing features of mobile-first versus responsive design.

Mobile-first design is a technical strategy in which the original design is created with mobile devices in mind, often beginning with the smallest screen sizes. This approach is based on the concept of progressive advancement, meaning that the designer starts by creating for mobile screens and then afterward adapts the content for larger sizes.

It’s worth noting that mobile first and responsive design aren’t mutually exclusive, either. Mobile-first design is always responsive, since its layout will always adapt to the device someone is browsing from. In contrast, a responsive site is not always mobile-first.

Here’s another way to look at it: a responsive site is reactive–it shifts content to fit different device sizes, but it doesn’t necessarily prioritize the user experience on those devices. Mobile-first design, on the other hand, is a proactive approach to improving mobile UX and prioritizes the mobile experience.

This proactive strategy involves keeping content lean and to-the-point, as well as giving your site clear visible hierarchy conducive to scrolling on long, narrow screens. This also involves minimizing visual clutter so as not to confuse or overwhelm the user on a small screen. Mobile-first design tips include slimming down bulky chunks of content, using tap targets, and an expandable hamburger menu to simplify the navigation bar, and enlarging fonts for easy readability.

Key Takeaway

Responsive websites are a technical norm. Mobile-first is a design and content strategy. If your digital campus strategy is not prioritizing the mobile experience, it’s time for a mindset shift — and, more than likely, a new website.

ABOUT THE AUTHOR

As Finalsite’s content specialist, Leah promotes new school websites and exemplary content marketing examples from schools around the world. She’s also writer and editor of numerous blog articles, eBooks and presentations on best practices for digital marketing, social media, and school web design. Leah found her passion for international education at Arcadia University, where she earned her BA in Global Communications and studied abroad in England, Greece, Vietnam and Australia. When she’s not exploring new places, she’s either blogging, doodling, or dreaming about it

What is Mobile-First Approach?

The mobile-first approach is exactly as it sounds: designing for the smallest screen and working your way up. It is one of the best strategies to create either a responsive or adaptive design.

The mobile-first approach is a tenet of progressive enhancement. It is the ideology that mobile design, as the hardest, should be done first. Once the mobile design questions are answered, designing for other devices will be easier. What it boils down to is that, the smallest of the designs will have only the essential features, so right away you have designed the heart of your UX.
The opposite approach is graceful degradation. This incorporates all of the complexities right from the start, then strips them away later for smaller devices. The problem with graceful degradation is that when you build the all-inclusive design right from the start, the core and supplementary elements merge and become harder to distinguish and separate. The entire philosophy runs the risk of treating mobile design as more of an afterthought since you’re “cutting down” the experience.

We, along with others, strongly recommend progressive enhancement with a mobile-first approach. In this post, we’ll explain tips & techniques, then finish off with a hands-on lesson in which we build a hypothetical website with the mobile-first workflow.

Setting the Viewport

This example does not really do anything, other than showing you how to add the viewport meta element.

.title { color: brown; } .content { color: green; } @media only screen and (min-width: 768px) { .title { color: orange; } .content { color: aqua; } } @media only screen and (min-width: 1024px) { .title { color: red; } .content { color: blue; } }

Đối với Mobile First ta sẽ sử dụng thuộc tính min-width thay vì max-width như Desktop First. Lúc này giao diện của chúng ta cũng sẽ thay đổi khi chạm các break point cụ thể nếu màn hình của chúng ta có độ rộng (width) lớn hơn hoặc bằng các break point mà chúng ta đặt ra thì (768px, 1024px). Khi bạn chạy đoạn code trên sẽ thấy kết quả thu được giống hệt với phương pháp đầu tiên chỉ có điều cách làm ngược lại.

Nói chung với mỗi phương pháp sẽ khác nhau như sau:

Desktop First:

Sử dụng
max-width
Giao diện thay đổi khi độ rộng màn hình nhỏ hơn hoặc bằng
break point

Mobile First:

Sử dụng
min-width
Giao diện thay đổi khi độ rộng màn hình lớn hơn hoặc bằng
break point

Key Differences Between Responsive Design and Mobile-First Design

The main difference between responsive web design and mobile-first design is how the designer approaches the website. A responsive website is reactive — the design moving fluidly to fit devices. A mobile-first website is when the mobile website planned and designed in tandem with the desktop site, making proactive changes to the overall design to ensure the mobile experience is just as good as the desktop experience.

While both designs make your school or district’s website accessible on all devices, a mobile-first experience offers a better overall user experience because a variety of considerations are taken into account during the design phase, such as white space, font size, and load time.

Tablet View

As we design for a tablet-sized view, we’re better able to add secondary information like additional products (e.g. “The Capacitor”). We can also expand the navigation at the top of the page and add content that encourages sales without actually leading to them — namely, the testimonial.

Because more options are available, this can be surprisingly more difficult than deciding what to include in a smartphone UI. The difference between secondary and tertiary elements is a blurry line, and temptation is strong to include everything.

Resist the urge. Use the ordered content list. Like smartphones, space is still limited.

WRD

Đầu tiên chúng ta sẽ cùng nhau tìm hiểu về sự khác nhau trong việc phát triển WRD theo lần lượt Desktop First và Mobile First.

Desktop First

Đối với phương pháp Desktop First giao diện của bạn sẽ được ưu tiên code sao cho phù hợp với màn hình Desktop của bạn trước rồi sau đó mới tiếp tục thêm code CSS mới vào bằng @media query sao cho giao diện và bố cục trang web của bạn phù hợp với các màn hình bé hơn lần lượt là Laptop, Tablet và Mobile. Quá trình phát triển sẽ có dạng như sau:

Giả sử chúng ta có một đoạn code HTML và CSS đơn giản như sau (link tham khảo):

What is responsive web design? Responsive web design is a design approach that makes web pages render well across various devices and screen sizes. Responsive sites detect the device users are browsing from and then automatically adjust the layout to conform to their device’s viewport. The result is that visitors have a smooth experience navigating your site, regardless of the type or size of their device. Designing a responsive site is particularly crucial for improving the mobile user experience. A responsive mobile site minimizes the need for users to zoom, pan, or scroll. This can be achieved using advanced breakpoint control and resizing images using CSS. (Note that this is different from adaptive design, which uses static designs to match the width of the browser). Having a responsive website is an effective way to ensure a positive mobile browsing experience for your site visitors. (For a closer look at responsive websites, take a look at these responsive website design examples. To make a responsive website yourself, get started with these fully customizable responsive templates, and familiarize yourself with how AI is now being used in web design.) The Secret to be Mobile Friendly in 10 Minutes | Truly Responsive Web Design Mở đầu Đối với các bạn làm Web Developer ở phía Front-end hay Back-end chắc hẳn không còn xa lạ gì với khái niệm Web Responsive Design (WRD) nữa, nó là một phương pháp giúp cho trang web của bạn có thể hiện thị tốt trên các loại màn hình khác nhau như Desktop, Laptop, Tablet hay Mobile. WRD dường như tồn tại trong mọi website mà bạn truy cập hàng ngày và cũng như trong mọi sản phẩm web mà bạn tham gia phát triển. Trước đó mình làm chủ yếu với Back-end bằng Laravel tuy nhiên gần đây mình có cơ hội tham gia làm responsive cho giao diện web và đã thử đang thực hiện WRD theo hướng cả hai hướng Mobile First + Desktop First. Sau khi tìm hiểu kĩ hơn thì hiện tại mình đã chuyển theo phương pháp duy nhất là Mobile First vì những ưu điểm mà theo mình nó mang lại nhiều hơn so với Desktop First. Bài viết này của mình sẽ chia sẻ với các bạn những điều mà mình tìm hiểu về cả hai được. WRD Đầu tiên chúng ta sẽ cùng nhau tìm hiểu về sự khác nhau trong việc phát triển WRDtheo lần lượt Desktop First và Mobile First. Desktop First Đối với phương pháp Desktop First giao diện của bạn sẽ được ưu tiên code sao cho phù hợp với màn hình Desktop của bạn trước rồi sau đó mới tiếp tục thêm code CSS mới vào bằng @media query sao cho giao diện và bố cục trang web của bạn phù hợp với các màn hình bé hơn lần lượt là Laptop, Tablet và Mobile. Quá trình phát triển sẽ có dạng như sau: Giả sử chúng ta có một đoạn code HTML và CSS đơn giản như sau (link tham khảo): 10 11 12 Make a mobile-first website in Framer (step-by-step) Implementing mobile-first versus responsive approaches in your next design Given the upsurge in mobile browsing, having a mobile-friendly website isn’t just a luxury–it’s the new norm. At the very minimum, you need to have a responsive website that adapts to mobile phones as well as desktops. But you should also consider pushing yourself to prioritize mobile even further so that it lies at the very core of your design. Desktop isn’t going away anytime soon, but it’s no longer the standard, either. Design device-appropriate layouts yourself If you’re using UXPin, it’s fairly easy to create different layouts for these views. Open a UXPin prototype. Tap “Add new adaptive version” at the bottom right of the UXPin editor Choose a preset size or enter your own dimensions. You don’t have to recreate everything from scratch. Choose a size from which to copy your design’s elements. And that’s it. Switch between breakpoints by tapping the different sizes above your canvas, and adjust each to suit your needs. If you’d like to try prototyping mobile-first yourself, go ahead. Start a free trial in UXPin. Mobile First Design: What it is and How to Implement it By Jash Unadkat, Community Contributor - May 18, 2023 Mobile first design is important for customer engagement. Mobile devices are at the forefront of the digital revolution that has taken place in the last decade. With approximately 54% of overall web traffic coming from mobile devices, a mobile-first approach has taken hold of the marketplace. Widespread usage of mobile devices to access the web has led to new development methods like mobile-first design which encourages mobile-friendly web design. This guide will help you incorporate the mobile first design strategy for building device-friendly apps and websites that keep mobile user experience a priority. What is Mobile-First Design? Mobile-first design or Mobile-first approach enables web designers to start product design for mobile devices first. This can be done by sketching or prototyping the web app’s design for the smallest screen first and gradually working up to larger screen sizes. Prioritizing design for mobiles makes sense as there are space limitations in devices with smaller screen sizes, and teams need to ensure that the key elements of the website are prominently displayed for anyone using those screens. Designing and developing for small screens compels designers to remove anything that isn’t necessary for seamless website rendering and navigation. Recommended Read: How to Make Websites Mobile-Friendly How Mobile-First Design Strategy Came To Be? Earlier, websites were often developed with the assumption that they would be primarily accessed from desktops. Eventually, developers made an attempt to modify these websites by cutting down some functions to enhance browsing on mobile or tablet devices. This approach of scaling down the websites is popularly known as Graceful Degradation or Desktop-First approach. A downside to this approach is that several web elements do not adapt well to smaller screen sizes. Consequently, this degrades the visual appearance of websites on smaller devices. To address this problem, developers came up with another approach – Progressive Advancement or Mobile-First Design. A mobile-first approach encouraged designers to begin the website designing process for the smallest devices first and then add more functionalities for bigger screen sizes. Why is Mobile-First Design Critical? Mobile devices have become an integral part of the present web landscape and will continue to be vital for the future as well. As mentioned in the beginning, mobile contributes to approximately half of the overall web traffic. One must also bear in mind that the number of mobile users has surpassed desktop users. As per Statcounter GlobalStats, overall mobile users continue to grow with a leading market share of 60.43% as compared to desktop users. Smartphone Usage Statistics addresses a few stats to reconsider the mobile-first approach: Smartphone users tend to spend an average of 3 hours and 15 minutes on their phones. Millennials spend more than 5.7 hours on their smartphones per day People check their phones 58 times a day on average The stats above clearly reveal how users across the globe are slowly shifting from desktops to mobile devices. Naturally, it would make sense for web designers to prioritize their efforts and follow the “mobile-first” rule in product design. Must-Read: What is Responsive Design? How to Implement Mobile-First Approach in Product Design? Now let’s understand how designers can bring mobile-first responsive design into practice. Let’s assume a web designer needs to work on a website for a restaurant. Since the designer needs to follow the mobile-first approach, they must think about what a user will expect from a restaurant website on a mobile device. Designers must identify the primary things that an end-user is looking for while accessing a restaurant website on a mobile device. Given the user is on mobile, it would be safe to assume that they are mainly searching for – operating hours, exact location, and contact details (or click to call button given it’s mobile). On the basis of these assumptions, the page can be designed precisely as follows. In the case of tablets, users have more space and probably more time to explore the website. Designers can leverage this by adding more functionalities or information regarding the food menu (images), or chef details as displayed below: When it comes to desktops, web designers have all the required space to showcase more details. These details can include blog posts, images of party events recently hosted, the ambiance, or contact forms to promote the restaurant better. Following the approach above will help designers build websites keeping the mobile audience in mind. Additionally, expanding functionalities for larger screen sizes will also be easy to accomplish for teams. Learn More: Ideal Screen Size for Responsive Design Best Practices for The Mobile-First Approach For complex and layered designs, web designers UI/UX experts must bear in mind the following best practices to ensure a mobile-first approach effectively: 1. Prioritize Page Content When it comes to mobile-first design, designers must bear in mind the fact that content is the key. As there are space restrictions on smaller screens, web designers must ensure that the most critical elements are prominently displayed since those are the ones users will actively look for. 2. Deliver Intuitive Navigation Intuitive navigation is of utmost importance when it comes to delivering a neat and clean user experience on mobile devices. Web designers can leverage features like navigation drawers (using Hamburger menus) to display secondary elements of the website. This will help users to find the necessary information easily. Speed and intuitiveness go hand in hand. SpeedLab by BrowserStack instantly provides you Page Speed Score out of 100 for both Desktop and Mobile platforms. With these insights, your design team can optimize for a mobile-friendly interface across different mobile devices and browsers. With BrowserStack, you also get actionable recommendations and insights to improve your overall design and website layout. The report generates accurate mobile and desktop scores along with key metrics like Navigation Timing API, Page Resource Summary, and more, to help you align your mobile-first design approach with actual performance. 3. Avoid Disruptive Pop-ups As mentioned frequently, mobile devices have space constraints and no user likes to be accosted with sudden pop-ups or advertisements taking over the screen. Website owners or designers must only focus on what’s important for users and provide them with the things they are looking for in the first place. 4. Test on Real Devices Under Real Conditions The most effective way of ensuring that a website delivers optimal user experiences across devices is by testing them on real devices. This helps designers verify whether the website renders as expected across mobiles, tablets, and desktops. BrowserStack’s real device cloud provides teams and individual testers with 3000+ real devices and browsers for instant testing in real user conditions. You can opt for both BrowserStack Live and App Live to conduct extensive cross-browser testing and interactive app testing to satisfy mobile-first design implementation. BrowserStack also offers individual users or teams an intuitive Responsive Checker tool. This tool allows users to instantly view their websites across different device types like mobiles, tablets, and desktops. This enables users to verify whether their websites render correctly as expected on specific devices. How to run a responsive test on BrowserStack? Enter the URL of the website that is being tested. Once you sign in, you can enter the website URL and click Check to test responsiveness. When a particular device is selected, the user will get a view of what the site looks like on it. Use BrowserStack Responsive Testing Conclusion Increasing numbers of web users across the globe have shifted from desktop to mobile devices for accessing the web and the trend shows no sign of stopping. Consequently, it makes sense for designers to develop websites keeping the mobile audience as a priority. Incorporating a mobile-first design will not only help businesses reap the rewards of mobile growth today but will also prepare them for the explosive growth that is predicted in the coming years. Review Case Study: Leaf Design Agency Cuts Build Time by 50% Using BrowserStack Take Your Mobile UI Design From Drab to Fab - Before & After 6! Kết bài Qua những gì mình vừa chia sẻ trong bài viết mong rằng bạn sẽ tăng thêm được một chút kiến thức về Responsive Web Design. Cám ơn bạn đã đọc bài !!! All rights reserved Mobile-First Responsive Web Design This post hasn't been updated for 4 years Responsive là gì ? Điểm mạnh của responsive Tại sao Mobile-First lại quan trọng ? Thực hiện Mobile First Kết luận Responsive là gì ? Responsive là cách nhà phát triển thiết kế website phù hợp trên tất cả các thiết bị, mọi độ phân giải màn hình. “Responsive Web Design” là xu hướng thiết kế web hiện điện nhất và cần thiết nhất. "Responsive Web Design" đây có thể nói là khái niệm rất hot và đang phát triển rất mạnh mẽ hiện nay, Responsive Web Design là một công nghệ web mới và đang là 1 trong những xu hướng web hiện nay, nếu chúng vẫn còn chưa thực sự tin điều này có thể kiểm chứng Google với keyword: “xu hướng web”. Với những điều tôi nói trên thì chúng ta có thực sự muốn biết nó là gì và nó mang lại lợi ích thiết thực gì đối với việc phát triển web? Ví dụ về Web Responsive: Chúng ta mở trang chủ website Responsive, rồi thu nhỏ trình duyệt hoặc đổi độ phân giải màn hình, chúng ta sẽ thấy website của mình không hề xuất hiện Scrollbar ngang, mà nó sẽ tự động co dãn sao cho phù hợp với chiều rộng màn hình máy tính chúng ta. Để thực hiện điều này chúng ta cần thêm 1 thẻ html : Điểm mạnh của responsive Responsive Web Design là một điều tất yếu phải có trong thời đại bây giờ. Tuy là nói chạy trên nhiều chế độ phân giải màn hình tuy nhiên chúng chỉ cần một CSDL, một layout website tất cả chỉ là CSS làm việc. Có thể nói Responsive Web Design sẽ làm cho website chạy tốt trên mọi thiết bị di động, tăng tính tương thích cho website của chúng ta, tạo độ tin cậy và sự chuyên nghiệp với khách hàng. Nếu so sánh một website đã được thiết kế responsive với một website không thiết kế responsive thì khách hàng chắc chắn sẽ ưa thích hơn responsive web. Ngoài ra nếu css được viết một cách rõ ràng thì việc bảo trì và nâng cấp sẽ được thực hiện dễ dàng hơn khi responsive. Tại sao mobile first lại quan trọng ? Thiết kế Mobile-First rất quan trọng để xem xét vì chúng ta có loại bỏ những không gian không cần thiết ở thiết bị di động. Điều này có nghĩa là người dùng sẽ có ít trải nghiệm hơn hoặc màn hình nhỏ hơn sẽ xuất hiện chật chội và quá đầy sẽ ảnh hưởng nghiêm trọng đến trải nghiệm của khách hàng của chúng ta. Tuy nhiên, nếu chúng bắt đầu thiết kế responsive từ thiết bị nhỏ cho đến lớn dần, chúng ta sẽ nhận ra rằng việc sửa css vào màn hình lớn hơn sẽ dễ dàng hơn khi tổng không gian tăng lên. Nó mang lại lợi ích cho chúng ta theo nhiều cách khác nhau vì một trang web hoạt động tốt trên một thiết bị nhỏ hơn có thể đảm bảo rằng việc bị vỡ khung nhìn khi ra màn hình lớn sẽ ít hơn Việc thiết kế trên các thiết bị khác nhau mang lại trải nghiệm giống nhau cho bất kỳ thiết bị nào họ đang xem trang web của chúng ta hơn là hai phiên bản hoàn toàn khác cho di động và máy tính riêng. Ngoài ra việc thiết kế mobile first cũng giúp chúng ta giảm được số lượng dòng css đáng kể so với thiết kế thông thường. Thực hiện thiết kế mobile first Trình tự thực hiện mobile first như sau : Tiến trình thiết kế responsive của chúng ta xuất phát từ màn hình nhỏ và xây dựng dần lên thiết bị có kích thước to Để thực hiện việc này chúng ta sẽ sử dụng min-width thay vì max-with như thông thường: /*Smart phone nhỏ*/ @media screen and (min-width: 240px){ } /*Iphone(480 x 640)*/ @media screen and (min-width: 320px){ } /*Tablet nhỏ(480 x 640)*/ @media screen and (min-width: 480px){ } /*Ipad dọc(768 x 1024)*/ @media screen and (min-width: 768px){ } /*Ipad ngang(1024 x 768)*/ @media screen and (min-width: 1024px){ } Thực hiện theo mô hình này chúng ta sẽ viết style css cho thiết bị từ nhỏ tới lớn. Kết luận Trên đây là những gì mình tìm hiểu được về Mobile-First Responsive Web Design Mình đã thực hiện theo cách này và số lượng style css đã giảm đi đáng kể. Các bạn có thể tìm hiểu thêm tại đây All Rights Reserved Nội dung bài viết Chào các bạn, hôm nay chúng ta sẽ đến một chủ đề khá là hay đó là khi chúng ta code giao diện Responsive thì nên code theo hướng Mobile first hay là Desktop first ? Đây là 1 vấn đề mà có khá nhiều người thảo luận, có người bảo thì code Mobile first dễ hơn vì nó đang là xu hướng, có người thì bảo là Desktop first dễ hơn…. Ở bài viết này mình sẽ chia sẻ cho các bạn theo góc nhìn của mình để các bạn nắm rõ hơn về những cái này và biết áp dụng như thế nào cho hợp lý nhé. Chiến thôi Desktop View Finally, the desktop view can support as much information as you decide is important. This is where the home page can accommodate all of the information you see fit, whether or not it fits. Notice some of the additional content we’ve included: Gift certificates Customer testimonials Blog post exploring the newest Lightning Bolt bike A practical guide to responsive web design Responsive web design benefits There are several advantages of a responsive design approach, both for your audience and for you as a designer: 1. Attracts a wide audience You can expect people to access your site from a variety of device types, whether that’s desktop, mobile, or tablet. Responsive web design offers cross-browser compatibility and ensures that your website will accommodate visitors regardless of the type or size of their device. 2. Offers efficient design and maintenance With a responsive website, making a change in content and design carries over to every possible rendition of your site. Whether you’re altering the text, adding an image, or even doing a full rebrand, those changes will automatically be implemented on your site’s desktop and mobile versions. 3. Gives you a consistent brand image You wouldn’t want your brand image to be dependent on the type of device people are using. A responsive site ensures that the mobile version of your site isn’t cumbersome or awkwardly formatted, but instead offers the same great UX as the desktop version. Overall, you’ll be able to achieve the same look and feel across any device. 4. Strengthens your SEO Google’s mobile-friendly update back in 2015 forever changed the search giant’s algorithm. Mobile-friendly pages automatically get a boost in SEO, ranking higher on Google, while those that weren’t mobile-friendly now get penalized. This alone signifies that it’s no longer enough to have a beautiful desktop site. For your site to rank in search engine results, it needs to readily adapt to the mobile screen. 5. Improves your conversion rate If you’ve ever clicked away from a site with poor UX, you know the important role design plays in engaging visitors and influencing their perception of your brand. People scanning the web don’t want to work hard for their content; if your site isn’t compatible with their device, they’ll quickly leave your page for a competitor’s. Having a responsive mobile site reduces bounce rate, encourages visitors to spend time browsing, and improves your conversion rate as a result. What is Responsive Web Design? Responsive web designs respond to changes in device display sizes. So when you display a website on a smartphone, for example, you’ll be looking at different dimensions than if you were viewing it on your tablet, laptop, or desktop, for example. Think of responsive web design as water: it will fit into whatever you pour it. Because it is shifting content to fit other devices, rather than taking into consideration the experience on those devices, the mobile experience can be lacking. Related Articles: 5 Tips For Great Responsive School Websites 5 Undeniable Reasons Why Your School's Website Needs To Be Responsive Responsive Web Design Tutorial For Beginners With Examples Tại sao Mobile First ? Như ví dụ mình đưa ra ở trên, bạn có thể thấy chúng ta sẽ thu được kết quả giống hệt nhau thế thì câu hỏi đặt ra là tại sao lại chia ra làm hai hay tại sao lại là Mobile First. Số lượng thiết bị Mobile Ngày nay số lượng các thiết bị di động được sử dụng ngày càng nhiều lên so với thiết bị desktop. Điều này đơn giản là do sự tiện dụng bởi ta có thể mang theo một chiếc điện thoại di động mọi lúc mọi nơi và truy cập vào internet tức thì. Còn đối với Desktop thì việc này thì không thể, hãy tưởng tượng ta phải luôn vác theo 1 màn hình và 1 cái case máy tính cùng đống dây dợ lằng nhằng xem. Chính vì lý do này mà số lượng thiệt bị Mobile càng ngày càng tăng đồng nghĩa với việc truy cập internet từ Mobile cũng tăng nên sẽ không có gì lạ nếu người dùng truy cập vào website của bạn từ Mobile nhiều hơn so với các thiết bị khác. Mình có xin được một bức ảnh thu được từ Google Analytic về lượng traffic truy cập vào trang web của bạn mình và kết quả nó như sau: Như bạn thấy lượng truy cập vào từ Mobile là tận 77.4% so với Desktop chỉ có 17.9%, một khác biệt khá lớn. Vì thế ngay từ đầu nếu bạn đi theo con đường Mobile First thì sẽ tối ưu rất nhiều cho các thiết bị Mobile. Tối ưu nội dung Đối với mỗi trang web chúng ta có thể thấy chứa rất nhiều nội dung khác nhau nằm trong nó. Với màn hình desktop rộng lớn, ta có thể cho vô vàn các nội dung, các thành phần khác nhau như sidebar, slider, .. để tăng lượng thông tin xuất hiện trên màn hình của chúng ta: Tuy nhiên khi màn hình của chúng ta bé đi rất nhiều, cụ thể là kích cỡ màn chỉ còn một nửa hoặc 1/6 kích cỡ ban đầu thì chắc chắn chúng ta sẽ cần phải tối ưu hóa lại nội dung, tối ưu hóa lại các thành phần xuất hiện trên trang web bằng cách xóa cái nọ bỏ cái kia và cân đo đong đếm xem trong đống nội dung trong màn hình chỗ nào cần chỗ nào không. Việc bạn mất công thêm thắt đủ các thứ vào cái màn to kia để cho nó là hoàn hảo trong mắt bạn rồi lại phải xóa dần đi thì thật khó chịu . Nhưng với phương pháp Mobile First thì ngay từ đầu màn hình chúng ta chỉ có kích thước vỏn vẹn khoảng 320px chiều rộng nên tất nhiên chúng ta sẽ cần phải tập chung vào nội dung cũng như các thành phần quan trọng nhất mà người dùng mong muốn và có thể chưa cần suy nghĩ đến các thứ màu mè khác. Sau đó khi phát triển lên các màn hình tiếp theo, ta có thể thoải mái hơn khi thêm các nội dung mới hay các thành phần mới như slider, side-bar vào. Hạn chế lỗi Như bạn biết tới thời điểm hiện tại, số lượng các thiết bị với kích cỡ màn hình khác nhau là nhiều vô cùng và chúng ta không có cách nào để code giao diện với break point phù hợp với từng màn hình một Với ví dụ đơn giản nói trên thì tất nhiên không có vấn đề gì cả tuy nhiên giao diện thực tế của bạn sẽ phức tạp hơn rất nhiều. Để minh chứng cho điều trên ta sẽ có thêm một giao diện như sau (link tham khảo) theo hướng Desktop First (với độ rộng ban đầu 1440px): Setting the Viewport This example does not really do anything, other than showing you how to add the viewport meta element. .title { color: red; } .content { color: blue; } @media only screen and (max-width: 1024px) { .title { color: orange; } .content { color: aqua; } } @media only screen and (max-width: 768px) { .title { color: brown; } .content { color: green; } } Đối với phương pháp Desktop First chúng ta sẽ sử dụng thuộc tính max-width như bạn thấy trong đoạn code CSS. Hay nói cách khác, giao diện của chúng ta sẽ thay đổi nếu chiều rộng (width) của màn hình hiện tại nhỏ hơn hoặc bằng các break point, mà chúng ta đặt ra ở trên. Các break point bạn có thể hiểu chính là chiều rộng (width) của màn hình mà chúng ta muốn giao diện thay đổi và ở đây sẽ là này lần lượt là 1024px và 768px . Kết quả đoạn code trên sẽ cho ta kết quả như sau: Ở màn hình Desktop giao diện sẽ có dạng: Khi màn hình của chúng ta chạm break point đầu tiên hay nói cách khác có động rộng nhỏ hơn hoặc bằng với 1024px thì sẽ có dạng như sau: Và cuối cùng khi chạm break point cuối cùng là chiều rộng màn nhỏ hơn hoặc bằng 768px sẽ có dạng như sau: Với cách làm nói trên thì với màn Desktop hay có thể nói là mặc định thì tiêu đề và nội dung sẽ có màu đỏ và xanh lục. Với màn hình nhỏ hơn nó cụ thể ở đây có thể coi là màn Tablet (<= 1024px) thì tiêu đề và nội dung sẽ có màu cam và xanh nhạt hơn. Và cuối cùng ở màn hình Mobile (<= 768px) sẽ có màu nâu và xanh lá cây. Mobile First Ngược lại đối với Desktop First thì ở phương pháp này, giao diện web của bạn sẽ được thực hiện theo hướng từ thiết bị có màn hình nhỏ (Mobile) rồi mới đến các thiết bị có màn hình lớn hơn lần lượt là Tablet, Laptop và Desktop. Tương tự với Desktop First thì chúng ta cũng sẽ sử dụng @media query của CSS để thực hiện quá trình này. Cụ thể nó sẽ như sau: Chúng ta sẽ sử dụng lại ví dụ giống như trên và chỉ thay đổi lại 1 chút như sau (link tham khảo): Responsive Web Design | 10 Basics Mobile-First = Content-First If your site is good on a mobile device, it translates better to all devices. More important, though, is that a mobile-first approach is also a content-first approach. Mobile has the most limitations, screen size, and bandwidth to name a few, and so designing within these parameters forces you to prioritize content ruthlessly. The mobile-first approach organically leads to a design that’s more content-focused, and therefore user-focused. The heart of the site is content — that’s what the users are there for. One caveat, though, is that mobile users sometimes require different content than desktop users. Device-specific content can be gauged by considering context — what, in a given situation and a given environment, will your user appreciate more. The best way to plan ahead for these is by creating user scenarios. Another advantage to the mobile-first approach is that the small-screen breakpoints can better fit around the content. Again, the alternative is worse: having to squeeze an already plump design into a tiny framework. But with the mobile-first approach, the breakpoints develop naturally around content, so you don’t need any awkward edits. Setting the Viewport This example does not really do anything, other than showing you how to add the viewport meta element. 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 .title { color: red; .content { color: blue; @media only screen and (max-width: 1024px) { .title { color: orange; .content { color: aqua; @media only screen and (max-width: 768px) { .title { color: brown; .content { color: green; Đối với phương pháp Desktop First chúng ta sẽ sử dụng thuộc tính max-width như bạn thấy trong đoạn code CSS. Hay nói cách khác, giao diện của chúng ta sẽ thay đổi nếu chiều rộng (width) của màn hình hiện tại nhỏ hơn hoặc bằng các break point, mà chúng ta đặt ra ở trên. Các break point bạn có thể hiểu chính là chiều rộng (width) của màn hình mà chúng ta muốn giao diện thay đổi và ở đây sẽ là này lần lượt là 1024px và 768px . Kết quả đoạn code trên sẽ cho ta kết quả như sau: Ở màn hình Desktop giao diện sẽ có dạng: Khi màn hình của chúng ta chạm break point đầu tiên hay nói cách khác có động rộng nhỏ hơn hoặc bằng với 1024px thì sẽ có dạng như sau: Và cuối cùng khi chạm break point cuối cùng là chiều rộng màn nhỏ hơn hoặc bằng 768px sẽ có dạng như sau: Với cách làm nói trên thì với màn Desktop hay có thể nói là mặc định thì tiêu đề và nội dung sẽ có màu đỏ và xanh lục. Với màn hình nhỏ hơn nó cụ thể ở đây có thể coi là màn Tablet (<= 1024px) thì tiêu đề và nội dung sẽ có màu cam và xanh nhạt hơn. Và cuối cùng ở màn hình Mobile (<= 768px) sẽ có màu nâu và xanh lá cây. Mobile First Ngược lại đối với Desktop First thì ở phương pháp này, giao diện web của bạn sẽ được thực hiện theo hướng từ thiết bị có màn hình nhỏ (Mobile) rồi mới đến các thiết bị có màn hình lớn hơn lần lượt là Tablet, Laptop và Desktop. Tương tự với Desktop First thì chúng ta cũng sẽ sử dụng @media query của CSS để thực hiện quá trình này. Cụ thể nó sẽ như sau: Chúng ta sẽ sử dụng lại ví dụ giống như trên và chỉ thay đổi lại 1 chút như sau (link tham khảo): 10 11 12 Responsive Flutter Web Tutorial: Build for Mobile, Desktop, and Tablet Responsive versus mobile-first design: Which should you design? Now that you know the difference between mobile versus responsive design, you’ll need to decide which approach is best for your next project. Keep in mind that mobile-first design is always responsive, so it’s no question that you need to start with a responsive website either way. Whether you opt to add a mobile-first approach on top of that is up to you. To help you determine the best strategy for your site, let’s take a look at the benefits of each approach. MY LOGO HOME PRODUCT PRICING ABOUT US CONTACT









        10
       

        11
       

        12
       

        13
       

        14
       

        15
       

        16
       

        17
       

        18
       

        19
       

        20
       

        21
       

        22
       

        23
       

        24
       

        25
       

        26
       

        27
       

        28
       

        29
       

        30
       

        31
       

        32
       

        33
       

        34
       

        35
       

        36
       

        37
       

        38
       

        39
       

        40
       

        41
       

        42
       

        43
       

        44
       

        45
       

        46
       

        47
       





        body {
       

        overflow-x: hidden;
       

        body h2, body li{
       

        font-family: 'Roboto', sans-serif;
       

        .header {
       

        background-color: white;
       

        box-shadow: 0 0.25rem 0.125rem 0 rgba(0,0,0,0.05);
       

        height: 64px;
       

        display: flex;
       

        justify-content: space-between;
       

        align-items: center;
       

        padding: 0 20px;
       

        .logo {
       

        font-weight: bold;
       

        font-size: 25px;
       

        .header i {
       

        display: none;
       

        .nav {
       

        display: flex;
       

        flex-flow: wrap;
       

        .nav li {
       

        line-height: 30px;
       

        width: 100px;
       

        text-align: center;
       

        @media only screen and (max-width: 633px) {
       

        .nav {
       

        display: none;
       

        .header i {
       

        display: block;
       

        position: absolute;
       

        left: 20px;
       

        .header {
       

        justify-content: center;
       








   Như trên là kết quả ta đạt được sau khi thực hiện style cho giao diện desktop. Tiếp theo với giao diện Tablet (với kích cỡ 768px). Do thanh header của chúng ta khá đơn gian nên khi bạn thử thu nhỏ màn hình xuống kích cỡ này sẽ thấy giao diện vẫn rất ổn nên không cần sửa gì cả:
  

   Tiếp theo với giao diện mobile. Các kích thước mình chọn ở đây là các kích thước tương ứng khi ta sử dụng công tụ test responsive trong Chrome Dev Tool:
  

   Kích cỡ màn mobile lớn nhất đầu tiên mình thấy trong Chrome Dev Tool là 633px (kích cỡ khi ta quay ngang màn hình), ta sẽ sửa giao diện thành như sau:
  

   Đến đây nghe chừng có vẻ là ổn ổn rồi, tuy nhiên tự nhiên một ngày nào đó có cái màn quái dị nằm giữa 768px và 633px của bạn thì điều sau đây sẽ xảy ra (644px):
  

   Điều này sở dĩ xảy ra là do giao diện của bạn chỉ thay đổi nếu độ rộng màn hình của nó nhỏ hơn hoặc bằng 633px nên khoảng giữa các break point hoàn toàn có thể xảy ra lỗi nhất là khi bạn có một giao diện phức tạp. Tuy nhiên nếu bạn chọn đi theo con đường Mobile First thì giao diện của bạn ban đầu sẽ có dạng:
  

   Giao diện bạn thấy ở trên sẽ duy trì cho đến khi màn hình của bạn có kích cỡ lớn hơn hoặc bằng 768px thì nó mới chuyển thành như thế này:
  

   Như vậy bạn có thể đảm bảo được rằng giữa các break point theo hướng mobile first sẽ không làm vỡ giao diện của bạn nếu gặp 1 số kích cỡ màn hình hơi lại một chút vì nó sẽ mãi mãi nhìn giống giao diện mobile cho đến khi nó đủ lớn – hay chính xác là kích cỡ màn lớn hơn hoặc bằng 768px. Nếu bạn chưa tin thì có thể xem thử ví dụ trên nhưng với phiên bản Mobile First ở đây.
  

   Lý do khác

  


    Nếu bạn tìm hiểu về SEO thì chắc hẳn bạn cũng biết được rằng chính Google cũng yêu cầu rất cụ thể về mobile friendly nếu bạn muốn trang web của bạn đạt được đánh giá cao
   

    Chắc hẳn các bạn cũng không hề lạ với các thư viện hỗ trợ việc Front-end như Bootstrap. Chính bản thân Boostrap cũng đi theo hướng Mobile First, nếu không tin bạn có thể tự mở code của bootstrap lên xem sẽ thấy được điều này
   

Flutter Fully Responsive Design for Web, Tab and Mobile

  Mobile first

 

  Nói theo nghĩa của nó thì chúng ta sẽ code một giao diện từ thiết bị nhỏ cho tới thiết bị to, từ mobile tới tablet rồi tới laptop và các màn hình lớn như Retina.
 

  Tuy nhiên khi code Mobile first thì chúng ta nên có thiết kế mobile trước để chúng ta biết mà code như thế nào cho đúng, nếu không có giao diện mobile mà chỉ có desktop thôi mà chúng ta code mobile first thì sẽ khá là cực đó. Cho nên trường hợp mà chỉ có giao diện desktop thôi thì theo bản thân mình nghĩ lúc này code theo hướng Desktop first là 1 giải pháp tốt hơn.
 


  Tại sao chúng ta cần quan tâm?

 

  Đơn giản vì Mobile First sẽ giúp chúng ta thu được nhiều lợi nhuận hơn. Một ưu thế lớn của thiết kế Mobile First là giúp tải site của chúng ta nhanh hơn. Đầu tiên, cải thiện tốc độ trang web sẽ cải thiện Google Ranking của bạn. Google không chỉ coi trọng các site di động đã được tối ưu hóa cho giao diện này mà còn xem xét cả tốc độ tải như một nhân tố quan trọng. Google rất ít khi công bố những thành phần được tính để xếp hạng, nhưng điểm này được họ chính thức công nhận từ năm 2010.
 

  Hơn nữa, thiết kế Mobile First sẽ giúp cắt giảm rất nhiều chi phí băng thông. Khách hàng càng ngày càng sử dụng mobile để thanh toán và mua hàng nhiều hơn, dữ liệu mới nhất từ Black Friday năm 2015 cho thấy số lượng mua hàng qua mobile chiếm 36.5% tổng số lượng đơn hàng, và trong Cyber Monday là 26%.
 

  Một dữ liệu khác về thống kê sử dụng internet toàn cầu cho thấy lưu lượng băng thông của mobile đã vượt qua desktop, và từ đây chúng ta có thể thấy rằng, tại sao thiết kế theo Mobile First trở nên thực sự hữu ích cho việc kinh doanh trực tuyến.
 

  Việc tối ưu hóa cho ứng dụng mobile đã trở nên quan trọng đến nỗi một số công ty thậm chí còn thực thi các hạn chế về tốc độ mạng nhằm mô phỏng các kết nối chậm. Facebook đã tổ chức “Thứ Ba 2G” để khuyến khích đội ngũ UX của họ thấu hiểu trải nghiệm mobile của hầu hết những người dùng không thể chi trả hoặc truy cập được những hệ thống kết nối tốt hơn.
 
03: Responsive Design – Tailwind CSS v2.0: From Zero to Production

          Setting the Viewport

         


          This example does not really do anything, other than showing you how to add the viewport meta element.

.title {

color: brown;

.content {

color: green;

@media only screen and (min-width: 768px) {

.title {

color: orange;

.content {

color: aqua;

@media only screen and (min-width: 1024px) {

.title {

color: red;

.content {

color: blue;

Nói chung với mỗi phương pháp sẽ khác nhau như sau:

Desktop First:

Sử dụng
max-width
Giao diện thay đổi khi độ rộng màn hình nhỏ hơn hoặc bằng
break point

Mobile First:

Sử dụng
min-width
Giao diện thay đổi khi độ rộng màn hình lớn hơn hoặc bằng
break point

Mobile-first web design benefits

The mobile-first approach is, arguably, the future of web design. Adopting this approach for your responsive website is the best thing you can do to ensure a positive browsing experience for your visitors. Let’s take a closer look at the advantages of going mobile-first:

1. Captures more website traffic

According to Global Web Index, more than half of Gen Z say that their phones are their most important internet devices. On top of that, one in five adults only use the internet through a mobile device, according to data from Pew Research Center. When you consider that mobile–and not desktop–is the default browsing tool for a good chunk of the population, designing from a mobile-first standpoint is a natural way to cater to your target audience.

2. Encourages user engagement

Nearly 80% of people in the US spend at least 3 hours on their phones daily. Perhaps, that’s because mobile devices are readily accessible on-the-go and are more conducive to casual browsing. Having a mobile-first website is a great opportunity to engage users seeking information or entertainment on the web, particularly if you offer features like a compelling blog or interesting forum.

3. Helps you generate leads from social media

If you consider social media an important tool for getting traffic and clicks, having a mobile-first design is a must. Research shows that 83% of social media usage happens on mobile devices, meaning that people who click on a social campaign are likely to arrive at the mobile version on your site. A mobile-first design will give them a smooth and pleasant user experience, leaving them with a positive first impression of your brand.

4. Gives you insight into high-priority content

With a mobile-first approach, you need to pare down the site content to only the most important elements. Since a small screen has limited real estate, you’ll need to pick and choose which information to include. This helps you eliminate fluff and make your website clean and concise. This leaner approach to design is a helpful way to not only optimize your mobile site, but also to refine your own skills as a web designer.

5. Improves page load speeds

Google not only rewards websites that are optimized for mobile; it also boosts the SEO of sites with faster page load speeds. Luckily, having a mobile-first design approach gives you SEO points for both. Not only will you get a bump for being mobile-friendly, but the slimmed down approach to content will also accelerate your page load speed.

24 | MAKE A WEBSITE RESPONSIVE FOR ALL DEVICES | 2023 | Learn HTML and CSS Full Course for Beginners

Mở đầu

Đối với các bạn làm Web Developer ở phía Front-end hay Back-end chắc hẳn không còn xa lạ gì với khái niệm Web Responsive Design (WRD) nữa, nó là một phương pháp giúp cho trang web của bạn có thể hiện thị tốt trên các loại màn hình khác nhau như Desktop, Laptop, Tablet hay Mobile.

WRD giường như tồn tại trong mọi website mà bạn truy cập hàng ngày và cũng như trong mọi sản phẩm web mà bạn tham gia phát triển. Trước đó mình làm chủ yếu với Back-end bằng Laravel tuy nhiên gần đây mình có cơ hội tham gia làm responsive cho giao diện web và đã thử đang thực hiện WRD theo hướng cả hai hướng Mobile First + Desktop First. Sau khi tìm hiểu kĩ hơn thì hiện tại mình đã chuyển theo phương pháp duy nhất là Mobile First vì những ưu điểm mà theo mình nó mang lại nhiều hơn so với Desktop First. Bài viết này của mình sẽ chia sẻ với các bạn những điều mà mình tìm hiểu về cả hai được.

The Mobile-First Design Process

We’ll describe a process that helps our designers at UXPin.

As usual, wireframing is a recommended early step to most efficiently structure your layout. When wireframing or prototyping, we use the responsive breakpoint menu to streamline the process of moving to different screen sizes, starting with the smallest.

These presets layout the proper screen size for you, so you can wireframe keeping only the content in mind.

Our procedure follows these steps:1. Content Inventory — This is a spreadsheet or equivalent document containing all the elements you want to include. Learn more about doing an inventory of content.

Source: Maadmob

2. Visual Hierarchy — Prioritize the elements in the content inventory and determine how to display the most important elements prominently. Learn more about visual hierarchy.

3. Design with the smallest breakpoints and then scale up — Build the mobile wireframe first, then use that as the model for larger breakpoints. Expand the screen until there’s too much negative space.

4. Enlarge touch targets — Fingers are much wider than pixel-precise mouse cursors, and so need larger elements on which to tap. At the time of this writing, Apple recommends 44 pixels square for touch targets (read about mobile design for iOS and Android). Give hyperlinks plenty of space, and slightly enlarge buttons, and make sure that there’s enough space around all the interactive elements.

5. Don’t count on hovers — It almost goes without saying, but designers often rely on hover and mouseover effects in their interactive work. If you’re thinking mobile-friendly, don’t do that.

6. Think “app” — Mobile users are accustomed to the motion and a modicum of control in their experience. Think about off-canvas navigation, expandible widgets, AJAX calls, or other elements on the screen with which users can interact without refreshing the page.

7. Avoid large graphics — Landscape photos and complex graphics don’t display well when your screen is only a few inches across. Cater to mobile users with images that are readable on handheld screens.

8. Test it in a real device — Nothing beats discovering for yourself how usable a website is (or isn’t). Step away from your desktop/laptop computer and load up your product on a real phone or tablet. Tap through pages. Is the site easy to navigate? Does it load in a timely fashion? Are the text and graphics easy to read?

This is just a basic outline. For the complete guide to our process, download the free Content Wireframing for Responsive Design.

Mobile first là gì?

Khi nhắc đến Mobile First có hai vấn đề cơ bản cần được đề cập tách biệt: triết lý thiết kế và thao tác kỹ thuật. Tuy nhiên khi cụm từ Mobile Responsive xuất hiện lại gây ra một sự khó hiểu.

Xét về triết lý thiết kế, từ lâu các nhà thiết kế thường phát triển màn hình từ lớn nhất rồi mới đến nhỏ nhất, nghĩa là thiết kế đầu tiên – thiết kế “chính” – sẽ cho chế độ xem toàn màn hình lớn nhất và nhiều chức năng nhất.

Việc dành sự ưu tiên hàng đầu cho những người sử dụng laptop và desktop này có một nhược điểm rất lớn, bởi nghiên cứu cho thấy rằng có tới 25% người dùng ở Mỹ chỉ dùng điện thoại. Tại các khu vực khác trên thế giới, chẳng hạn như vùng nông thôn Trung Quốc, việc chỉ sử dụng điện thoại để kết nối mạng có thể chiếm đến 45% số người dùng (dựa theo báo cáo năm 2013 của On Device Research).

Rất nhiều tiện ích và chức năng cho cái nhìn và tính năng hoàn hảo trên laptop và desktop không thể chuyển đổi thành một giao diện mobile đem lại cho người dùng những trải nghiệm hoàn hảo. Trong trường hợp xấu nhất, chúng có thể khiến cho cả site không thể, hoặc cực kỳ khó để sử dụng và điều hướng.

Triết lý Mobile First giúp chúng ta khắc phục vấn đề này ngay từ đầu. Điều này không có nghĩa là bạn chỉ tập trung vào mỗi giao diện mobile, mà bạn bắt đầu từ thiết kế mobile với sự cân nhắc về các quy định và ràng buộc của giao diện này, và từ đó phát triển thành các màn hình lớn hơn. Khi đó, chúng ta phải xác định những thông tin cần thiết và phù hợp nhất cho một giao diện nhỏ, và ẩn hoặc loại trừ những tiện ích không cần thiết.

Ví dụ, khi nhận được một email quảng cáo giảm giá trong kỳ nghỉ lễ của Best Buy, đường link trong email đó sẽ đưa chúng ta đến những giao diện hoàn toàn khác nhau, tùy thuộc vào thiết bị mà ta đang sử dụng.

Trên phiên bản dành cho di động, chúng ta có thể thấy rất nhiều sự khác biệt: hero image và phần giới thiệu rất ngắn gọn, các danh mục được thu gọn theo mặc định và không gian chứa hình ảnh, các nút điều hướng được thiết kế rất hợp lý và thuận tiện…

Từ góc nhìn kỹ thuật, Mobile First có thể được thực hiện nhờ một số kỹ thuật như phát hiện server từ máy chủ của người dùng hay thiết kế responsive web của khách hàng. Ví dụ, thiết bị của khách hàng sẽ tìm kiếm các đánh dấu HTML và tìm file CSS tương ứng với các điều kiện cụ thể của thiết bị đó để tải kiểu dáng và thông tin tương ứng. Điều này sẽ tác động đáng kể đến khả năng sử dụng, và đặc biệt là thời gian tải – việc chọn lọc những thông tin phù hợp khiến dung lượng của phần mềm “nhẹ” hơn, và giúp tốc độ tải nhanh hơn.

Từ đó, việc phân biệt giữa Mobile First và Mobile Responsive trở nên rất quan trọng, vì Mobile Responsive có thể giảm kích thước của các thành phần từ bản website xuống chứ chưa chắc đã giảm được kích thước của file.

Vì vậy mặc dù Mobile Responsive có thể đáp ứng được tính thẩm mỹ của các giao diện website nhưng dung lượng lớn của nó tiêu tốn data một cách không cần thiết, và có thể khiến việc tải site chậm hơn và việc kết nối dữ liệu bị ngắt quãng.

Kết bài

Qua những gì mình vừa chia sẻ trong bài viết mong rằng bạn sẽ tăng thêm được một chút kiến thức về Responsive Web Design. Cám ơn bạn đã đọc bài !!!

Nguồn: Sưu tầm từ internet via Viblo

You might be thinking: wait, doesn't that mean the same thing?

And the answer is, no it doesn’t. A mobile-first website is always responsive, but a responsive website isn’t always mobile-first. The former is a technical approach, while the latter is an intentional design choice centered around understanding how people interact with mobile devices differently than desktops.

Why is this important to know now — in light of COVID-19?

Prospective and current families depend on your school or district’s website more now than they ever have before. From distance learning to virtual campus tours, graduation ceremonies, and fundraising events, the ability to provide high-quality online experiences has become a distinguishing factor in both K-12 and higher education.

Moving forward, this distinction will be even stronger. A school or district whose digital campus matches the caliber of its in-person experiences will be favored by parents over the schools and districts that don’t make the effort. As such, any decision you make about your website that may hinder or improve the user experience should not be taken lightly.

In this blog, you will learn:

What Is Responsive Web Design?
What Is Mobile-First Web Design?
Key Differences Between Responsive Design and Mobile-First Design
Why Mobile First Design Matters for your School

Mobile-First Responsive Build #3 - Mobile-First Approach

What is Mobile-First Web Design?

Mobile-first design, on the other hand, is a proactive approach to web design. It’s about creating a website that not only works on mobile devices, but is designed for users on mobile devices.

Key Features of Mobile-First Design

When browsing a website on your phone, it’s annoying to have to open multiple tabs — or worse, lose the page you were on because you clicked away too soon. Yet on many responsive websites, users have to click several times just to navigate to one interior page (and often it's not even the page they were looking for). A mobile-first approach modifies the navigation process significantly.

Hebron Academy, for example, uses an accordion-style navigation menu to give a preview of what you can find inside each section. It’s much more user-friendly; visitors simply scan each section and navigate directly to the information they need.

Cell phone users navigate with their thumbs, not an itty-bitty computer cursor. Therefore, mobile-first designs pay special attention to anything clickable— buttons are larger, hyperlinked sections are larger, and items in a clickable list or accordion are spaced further apart. No need to make it more difficult for folks with clumsy thumbs!

Less is more, especially when it comes to the mobile experience. While responsive websites do condense all the content on a desktop to make it physically possible to read, the end result is often not conducive to the average mobile visitor’s reading preference. Most people scroll past long paragraphs, and they’d rather not have to scroll through it at all.

Mobile-first websites simplify bulky content and provide information in a way that today’s mobile-users will engage with.

If you’re looking to see these features in action, check out Jackson County Public School’s website. Its navigation is noticeably different than the standard responsive website shown in this video example.

Your text sizes also play a role in reading comprehension. To improve readability on your mobile-first website, font sizes should be no smaller than 16 pixels. (No one should have to zoom in on the screen just to read a few body paragraphs!).

For header text, go even larger. The key for mobile devices is to make information easy to scan so that users can find what they are looking for at a glance. Large headings help to separate content into smaller, scannable sections.

Desktop first

Ngược lại với mobile first thì chúng ta sẽ code các giao diện từ lớn đến bé từ Retina cho tới laptop, rồi tới tablet và cuối cùng là các thiết bị mobile. Một điểm hay của Desktop first là nếu chỉ có giao diện desktop thì chúng ta vẫn code bình thường, và lúc này nếu các bạn tự hỏi vậy làm giao diện tablet mobile kiểu gì ?

Lúc này buộc các bạn phải có thêm kiến thức về UI UX, để làm cái gì ? Để tự có thể tuỳ biến sao đó cho những giao diện ở desktop xuống giao diện tablet, mobile cho phù hợp và đẹp là ổn(UI/UX). Vì đôi khi các bạn đi làm khách hàng chỉ cung cấp cho bạn 1 giao diện Desktop mà thôi và họ yêu cầu mobile các bạn phải tự căn chỉnh sao cho hợp lý. Vì thế tuỳ vào trường hợp ví dụ như trường hợp này thì lựa chọn Desktop first sẽ tốt hơn là Mobile first.

Nếu chỉ có 1 giao diện desktop mà yêu cầu code Mobile first thì khá là khó vì bạn phải tưởng tượng code giao diện điện thoại như nào cái đã để khi nó lên thiết bị lớn hơn thì giống với thiết kế hiện có là desktop. Theo quan điểm mình là thế, nếu bạn có ý tưởng nào hay hơn thì có thể bình luận nhé.

Như vậy là chúng ta đã đi qua khái niệm và vấn đề gặp phải, giờ mình sẽ nói đến best practice nhé, nghĩa là những ví dụ, trường hợp khi đi làm thực tế để áp dụng cho tốt nhen

Đây là 1 ví dụ điển hình luôn, khi làm giao diện menu ở trên Desktop thì đơn giản là các bạn dàn hàng ngang thôi với cấu trúc ul li a nhỉ. Nhưng khi code xuống điện thoại thì thường chúng ta sẽ làm fixed menu rồi kết hợp với Javascript để nhấn vào nút toggle cho menu chạy ra chạy vào thì lúc này các bạn sẽ thấy 2 phong cách code của Mobile first và Desktop first sẽ như sau:

Mobile first

.nav { position: fixed; left: 0; top: 0; width: 100%; height: 100%; overflow-y: auto; padding-top: 2rem; } .nav__toggle { position: absolute; right: 1rem; top: 1rem; } .nav__item { padding: 1rem; display: block; } .nav__item:not(:last-child) { border-bottom: 1px solid #fff; } /* Desktop styles */ @media (min-width: 1024px) { .nav { position: initial; width: initial; height: initial; overflow-y: initial; display: flex; align-items: center; padding-top: 0; background-color: blue; } .nav__toggle { display: none; } .nav__item:hover { color: blue; background-color: initial; } .nav__item:not(:last-child) { border-bottom: 0; border-left: 1px solid #fff; } }

Lúc này các bạn sẽ thấy là khi code ở màn hình >= 1024 thì các bạn phải đè code rất là nhiều luôn. Chưa kể nhiều vấn đề khác như là ở màn hình 1024 mình muốn bỏ
border-bottom
của class
nav__item
thì code lại không chạy được là vì đoạn
:not(:last-child)
ban đầu nó có độ ưu tiên cao hơn

.nav__item:not(:last-child) { border-bottom: 1px solid #fff; } @media (min-width: 1024px) { .nav__item{ border-bottom: 0; // not working } }

Lúc này các bạn muốn nó hoạt động thì phải code làm sao để có độ ưu tiên cao hơn là được như dưới đây, mình đơn giản chỉ là copy đoạn code ban đầu và thiết lập CSS lại thôi là ổn.

.nav__item:not(:last-child) { border-bottom: 0; }

Đó chính là Mobile first, vậy còn Desktop first thì code trông như nào nhỉ ? Cùng xem dưới đây nha

Desktop first

.nav { display: flex; align-items: center; background-color: blue; } .nav__toggle { position: absolute; right: 1rem; top: 1rem; } .nav__item { padding: 1rem; display: block; } .nav__item:hover { color: blue; background-color: initial; } .nav__item:not(:last-child) { border-bottom: 0; border-left: 1px solid #fff; } @media (max-width: 1023px) { .nav { display: block; position: fixed; left: 0; top: 0; width: 100%; height: 100%; overflow-y: auto; padding-top: 2rem; } .nav__toggle { display: block; } .nav__item:not(:last-child) { border-bottom: 1px solid #fff; } }

Các bạn có thấy điều gì khác không ? Đó chính là các bạn đỡ hạn chế đè code hơn so với việc dùng Mobile first lúc nãy đó, và code trông nó có vẻ ngắn hơn và thoáng hơn. Tuy nhiên đây vẫn chưa là cách tốt nhất. Theo quan điểm của mình để hạn chế việc đè code lên nhau mình sẽ kết hợp cả 2 luôn. Khám phá tiếp theo dưới đây nha

Mix desktop first and mobile first

// base styles .nav{} .nav__toggle { position: absolute; right: 1rem; top: 1rem; } .nav__item { padding: 1rem; display: block; } // desktop styles @media screen and (min-width: 1024px){ .nav { display: flex; align-items: center; background-color: blue; } .nav__item:hover { color: blue; background-color: initial; } .nav__toggle { display: none; } .nav__item:not(:last-child) { border-bottom: 0; border-left: 1px solid #fff; } } // mobile styles @media screen and (max-width: 1023px){ .nav { position: fixed; left: 0; top: 0; width: 100%; height: 100%; overflow-y: auto; padding-top: 2rem; } .nav__item:not(:last-child) { border-bottom: 1px solid #fff; } }

Khi mà mình kết hợp cả 2 luôn thì các bạn sẽ thấy không còn xung đột nữa và không cần phải lo vấn đề đè code nữa nhen. Và mình có chia ra làm 3 phần theo trường hợp mình đang nói đến là base styles là những styles chung áp dụng cho toàn bộ giao diện, min-width là áp dụng cho kiểu Mobile first và max-width là cho kiểu Desktop first nhen.

Một lưu ý nhỏ nữa là các bạn không được code trùng số khi dùng media query nhé ví dụ dưới đây tại break-point 1024 nó sẽ xung đột cả 2 đoạn code này cho nên sẽ dẫn đến trường hợp sai mà các bạn không mong muốn cho nên hãy cẩn thận.