Chuyển tới nội dung
Home » Mobile First Web Design | Frequently Asked Questions

Mobile First Web Design | Frequently Asked Questions

Mobile First Web Design Tutorial

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.

Mobile-first so với Responsive có những điểm nào khác biệt?



Sự khác biệt của Mobile-first và web responsive



Có một câu hỏi được đặt ra, website responsive đã có tính tương thích trên di động, vậy tại sao lại phải quan tâm đến Mobile – first?
Bạn phải hiểu rằng, web responsive ở mặt kỹ thuật thực chất đã được điều chỉnh từ phiên bản nào đó để làm cơ sở. Đến ngày nay, thì cơ sở của nó chính là giao diện màn hình rộng, bởi một phần do nó được thiết kế từ thời các di động màn hình nhỏ chưa được ra đời và cũng chưa phổ biến để truy cập website. Đồng thời, quá trình để smartphone thay đổi và được cải tiến không phải ngắn. Đồng thời, việc ứng dụng website đã và đang được vận hàng sẵn trên desktop sẽ giúp người thiết kế tiết kiện được công sức, thời gian và chi phí,… Đồng thời còn vận dụng chung mã nguồn Back – end và ẩn đi những thông tin thật sự không cần thiết, gọn nhẹ trong vấn đề tập trung vào việc thiết kế sao cho phù hợp với màn hình nhỏ cùng các tính năng khác trên cùng hệ điều hành và trình duyệt ở điện thoại di động.
Vì lẽ đó, khi lấy màn hình điện thoại hay các thiết bị di động để làm cơ sở thiết kế website sẽ giúp cho website có độ tương thích cao hơn, tương tác với người dùng lớn hơn. Đồng thời tại thời điểm này, số lượng người truy cập vào website tăng đột biến và chiếm tỷ lệ cao. Chính vì thế mà, Mobile – first cần được ưu tiên và quan tâm, đó mới chính là xu hướng mới.
Sau khi đã thiết kế website tương ứng với các thiết bị di động thì cần phải chú ý đến phương án vận hành nó như thế nào cho phù hợp?

Mobile First Web Design Tutorial
Mobile First Web Design Tutorial

7 Reasons Why Mobile-First Design is Important

  1. Mobile Devices Are Now the Primary Means to Access the Internet
  2. Mobile-Friendly Websites Have Higher Reach and Visibility
  3. Mobile Devices Have Unique Constraints
  4. Mobile-First Design Leads to Better UX
  5. It Can Save Time and Money
  6. It Uses the Phone’s Built-in Features
  7. Mobile-First Design Improves Navigation

Mobile-first design is important for several reasons:

Mobile Devices Are Now the Primary Means to Access the Internet

58.43% of web traffic comes from mobile devices, and that number is only increasing. By prioritizing mobile-first design, you can ensure that your website or application is optimized for most users.

Mobile-Friendly Websites Have Higher Reach and Visibility

Ensuring your website or application is accessible on any device, mobile-first design can increase your visibility and make it easier for users to find you online. Mobile-friendly websites are more likely to rank higher in search engine results, which can further increase your reach and visibility.

Mobile Devices Have Unique Constraints

Mobile devices have smaller screens, slower internet connections, and less processing power than desktop computers. Prioritizing mobile-first design forces you to focus on the most important content and functionality and create a fast and easy design for any device.

Mobile-First Design Leads to Better UX

By simplifying the layout and focusing on the most important content and functionality, you can create a website or application that is easier to use and more intuitive. Providing better UX has many benefits leading to increased user engagement, better conversion rates, and higher customer satisfaction.

It Can Save Time and Money

Starting with a mobile-first approach, you can build a basic design that works well on any device. Expanding on that foundation can create an equally effective desktop experience. When compared to starting with a desktop design and attempting to convert it to mobile devices, you can save time and money.

It Uses the Phone’s Built-in Features

Mobile devices have built-in features such as touchscreens, cameras, GPS, and voice assistants that enhance the UX. By designing for mobile first, you can take advantage of these features and incorporate them into your design to create a more engaging and interactive UX.

Mobile-First Design Improves Navigation

Seamless navigation is essential to creating a good UX on smaller screens. It can help reduce bounce rates and increase engagement, as users are more likely to stick around when they can easily navigate your site or application. By designing with easy navigation in mind, you can create a website or application that is intuitive and easy to use, even for new users.

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):



Mobile Design 101: How to Design for Mobile First
Mobile Design 101: How to Design for Mobile First

5 Best Practices in Mobile-First Web Design

  1. Place Your Users at the Forefront of Your Design
  2. Establish the Visual Hierarchy of Your Content
  3. Keep Your Website Simple
  4. Make CTAs and Other Mobile-First Elements Consistent and Bold
  5. Work on Your Site’s Loading Speed

People who use your website or app on mobile and experience poor UX are 62% less likely to buy something from you in the future, even if you have attractive and data-driven marketing campaigns. That’s the difference a well-designed website makes.

To ensure your website’s poor design doesn't turn away customers, follow these mobile-first design best practices to improve the quality of your mobile-first website:

Place Your Users at the Forefront of Your Design

Mobile-first designs start with research and identifying your visitors’ pain points. A mobile-first website should help visitors complete a task or solve a problem quickly and efficiently.

Determine what user flows and user journeys to implement on your mobile-first website. Consider different user behavior scenarios on each site page and adjust your user’s journey accordingly.

To make your website more user-friendly and intuitive, think about the possible interactions between a user and a website interface and identify your users’ pain points by:

  • Researching and analyzing your competitor’s mobile-friendly solutions
  • Asking your visitors directly about the issues they are experiencing with your mobile website through surveys

Establish the Visual Hierarchy of Your Content

Content for a mobile-first website should be as concise and to the point as possible. Avoid fluff, clutter, and any other unnecessary content that could distract or overwhelm the user or make the content hard to read.

Mobile websites come with certain screen size constraints; therefore, present content to your audience in a way that respects the visual hierarchy according to the importance of content. You will easily discern which elements are most important and should be placed first.

Content optimization improves website performance and facilitates UX. It also makes the website more accessible and ADA-compliant.

Regarding mobile-first content and its hierarchy, follow these best practices:

  • Keep titles on top and article previews above the fold so readers can see and understand the content immediately.
  • Optimize image and video sizes for flawless performance on mobile devices.
  • Keep the content concise and brief.
  • Divide long copy into numerous skimmable one-sentence paragraphs.

Crafting visually compelling and meaningful content can be demanding, especially if content marketing is not your expertise. If you need help, contact top content marketing agencies to develop strategic content for every digital channel and stage of your online conversion funnel.

Keep Your Website Simple

Simple and minimal web design improves content clarity and focuses users’ attention on what matters the most. When building a mobile-first website, keep the most important elements and lose the rest. Especially avoid using annoying and distracting elements, such as pop-ups and ads.

When looking to simplify your mobile-first website, consider taking these measures:

  • Reduce the number of links in your navigation menu
  • Use simple typography, and don’t make it too small for mobile screens
  • Use wide borders and clean lines
  • Use as few pages on your website as possible
  • Integrate a helpful search engine feature
  • Use white space to make the layout less cluttered and more readable
  • Use two columns of content at most

Make CTAs and Other Mobile-First Elements Consistent and Bold

Clean lines, bright colors, and typography work wonders for mobile-friendly websites. Combining these elements in a compelling call-to-action (CTA) button is a mobile-first imperative. Use these visually impactful CTAs rather than links that can be hard to tap on mobile screens.

Other graphic mobile-first elements that enhance UX and lead users down the sales funnel should also be eye-catching. These include:

  • Easy-to-read navigation buttons
  • Contrasting color schemes and vivid hues
  • Geometric shapes and abstract patterns
  • Parallax scrollers and image or video backgrounds
  • A dash of personalization with hand-drawn illustrations
  • Strong typography

Work on Your Site’s Loading Speed

Research shows visitors will leave a website if it takes more than three seconds to load fully. Loading speed is just as important on mobile devices since it affects search engine rankings and UX. That is why you should unburden mobile-first websites of unnecessary elements.

Speed-improving protocols you should follow include:

  • Compress your images so they “lose weight” but remain quality.
  • Use “lazy load,” which loads website elements separately and sequentially so that some parts of your website are visible to users immediately.
  • Switch to safe HTTPS protocol, which is faster and contributes to better SEO. Use a CDN that loads the site’s content from a cache closest to the user.

Mobile-first so với Responsive có những điểm nào khác biệt?



Sự khác biệt của Mobile-first và web responsive



Có một câu hỏi được đặt ra, website responsive đã có tính tương thích trên di động, vậy tại sao lại phải quan tâm đến Mobile – first?
Bạn phải hiểu rằng, web responsive ở mặt kỹ thuật thực chất đã được điều chỉnh từ phiên bản nào đó để làm cơ sở. Đến ngày nay, thì cơ sở của nó chính là giao diện màn hình rộng, bởi một phần do nó được thiết kế từ thời các di động màn hình nhỏ chưa được ra đời và cũng chưa phổ biến để truy cập website. Đồng thời, quá trình để smartphone thay đổi và được cải tiến không phải ngắn. Đồng thời, việc ứng dụng website đã và đang được vận hàng sẵn trên desktop sẽ giúp người thiết kế tiết kiện được công sức, thời gian và chi phí,… Đồng thời còn vận dụng chung mã nguồn Back – end và ẩn đi những thông tin thật sự không cần thiết, gọn nhẹ trong vấn đề tập trung vào việc thiết kế sao cho phù hợp với màn hình nhỏ cùng các tính năng khác trên cùng hệ điều hành và trình duyệt ở điện thoại di động.
Vì lẽ đó, khi lấy màn hình điện thoại hay các thiết bị di động để làm cơ sở thiết kế website sẽ giúp cho website có độ tương thích cao hơn, tương tác với người dùng lớn hơn. Đồng thời tại thời điểm này, số lượng người truy cập vào website tăng đột biến và chiếm tỷ lệ cao. Chính vì thế mà, Mobile – first cần được ưu tiên và quan tâm, đó mới chính là xu hướng mới.
Sau khi đã thiết kế website tương ứng với các thiết bị di động thì cần phải chú ý đến phương án vận hành nó như thế nào cho phù hợp?

The problem with mobile-first CSS
The problem with mobile-first CSS

Mobile-First Design FAQs

When did mobile-first design start?

Mobile first design became important in 2010, when Eric Schmidt, former CEO of Google, announced that the company would begin prioritizing mobile users in their design practices.

Is mobile-first design better than responsive design?

Mobile-first and responsive design are two entirely different design approaches. Mobile-first design is intended for creating mobile versions of websites and can be scaled up to larger screens. In a responsive design, on the other hand, a website is designed to adapt to different screen sizes and devices.

While both design approaches have advantages, if we had to choose, our vote would go to mobile-first design. More than half of all internet traffic comes from mobile devices; by prioritizing mobile-friendliness, designers improve the content structure and website functionality, contributing to better UX.

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

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.

Are you writing responsive CSS the wrong way?
Are you writing responsive CSS the wrong way?

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:

  1. Smartphone users tend to spend an average of 3 hours and 15 minutes on their phones.
  2. Millennials spend more than 5.7 hours on their smartphones per day
  3. 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?

  1. Enter the URL of the website that is being tested.
  2. Once you sign in, you can enter the website URL and click Check to test responsiveness.
  3. 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

Mobile First CSS

This post hasn't been updated for 4 years

Giới thiệu:

Mobile First là gì?

Mobile First được coi là các tiêu chuẩn ưu tiên mặc định cho mobile devices (các khung hình nhỏ như thiết bị di động) sau đó mới override các giá trị cho tablet, và sau cùng là desktop. Khái niệm này được đưa ra bởi Luke Wroblewski vào năm 2009.

Mobile First dịch từ tiếng Anh có thể hiểu là Ưu tiên hàng đầu cho thiết bị di động. Cụm từ này hay được sử dụng trong các ứng dụng công nghệ như Mobile First web design (Thiết kế website ưu tiên cho thiết bị di động). Như vậy, Mobile First về mặt ứng dụng ngày nay có thể hiểu là Thiết kế sản phẩm ưu tiên cho thiết bị di động.

Thế nhưng, vì sao Mobile First đang bắt đầu và sẽ trở thành xu hướng được quan tâm mạnh mẽ kể từ năm 2018? Mobile First web design so với PC First web design (Thiết kế web thích ứng) có những điểm nào khác biệt?

PC First trong Responsive

PC First là khái niệm để chỉ tuần tự responsive giao diện từ màn hình to xuống màn hình nhỏ.

Để làm việc với mô hình này chúng ta sử dụng max-width trong media query.

Dưới đây là các media query điển hình mà ta cần thêm vào dự án.


/*Ipad ngang(1024 x 768)*/ @media screen and (max-width: 1024px){ } /*Ipad dọc(768 x 1024)*/ @media screen and (max-width: 768px){ } /*Tablet nhỏ(480 x 640)*/ @media screen and (max-width: 480px){ } /*Iphone(480 x 640)*/ @media screen and (max-width: 320px){ } /*Smart phone nhỏ*/ @media screen and (max-width: 240px){ }

Ngoài ra, nếu mình cần responsive trên nhiều thiết bị hơn thì công việc của chúng ta là cần xác định kích thước của nó và thêm vào danh sách media query kia theo thứ tự màn hình to ở trên màn hình nhỏ query ở dưới.

Theo cách này thì khi một Selector trong css cần style đi qua từ màn hình to đến nhỏ sẽ được thay đổi theo thứ tự ưu tiên.

Trái ngược với PC First chúng ta cùng đi qua Mobile First.

Mobile First trong Responsive

Tuần tự tiến trình 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.

Để làm việc với mô hình này chúng ta sử dụng tham số min-width trong media query.


/*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){ }

Với mô hình này thì khi style Css cho cùng một đối tượng thì theo thứ tự được ưu tiên từ màn hình nhỏ đến to, càng về sau các các Css ở các query màn hình to hơn được ưu tiên hơn.

Mobile First so với PC First có những điểm nào khác biệt?

Website responsive đã có tính tương thích với thiết bị di động, vì sao lại cần phải quan tâm đến Mobile First? Đến đây, bạn cần hiểu rõ một điều rằng:

Web responsive về mặt kỹ thuật thực chất chỉ là điều chỉnh lại từ một phiên bản nào đó làm cơ sở. Đa phần cho đến ngày nay, các website responsive được lấy giao diện màn hình rộng làm cơ sở. Một phần là do các website đã được thiết kế sẵn từ thời các thiết bị di động màn hình nhỏ chưa được phổ biến dùng để truy cập web. Một phần là do để trở nên phổ biến và chiếm đa số người dùng truy cập website thông qua thiết bị di động cần một quá trình không ngắn. Việc ứng dụng web responsive ứng dụng lại website đã vận hành trên desktop làm cơ sở sẽ tiết kiệm thời gian, công sức và chi phí hơn. Các nhà thiết kế web vẫn có thể tận dụng chung mã nguồn Back-end và chỉ cần điều chỉnh lại ẩn bớt các thông tin không cần thiết, tinh gọn lại tập trung thông tin cần thiết hơn với màn hình nhỏ, điều chỉnh một số tính năng trên nền tảng hệ điều hành và trình duyệt trên điện thoại di động.

Chính vì lẽ đó, đến thời điểm người dùng thiết bị di động truy cập web trở nên đông hơn và chiếm tỉ lệ cao hơn. Việc lấy màn hình nhỏ (màn hình điện thoại di động - mobile) làm cơ sở khi thiết kế web sẽ giúp cho website có độ thích ứng cao và tương tác tốt hơn với số đông người dùng. Đây chính là lý do Mobile First cần được quan tâm và ưu tiên, hay xu hướng thiết kế web ưu thiết bị di động sẽ là xu hướng mới.

Giải pháp đối với Web Mobile First sẽ có hai hướng:

  • Vẫn ứng dụng Reponsive: Tức là bạn vẫn tiếp tục sử dụng chung mã nguồn Back-end, điều chỉnh các tính năng Front-end cho tương thích với các loại thiết bị, ẩn hiện tuy theo kích thước màn hình. Nhưng cần ưu tiên lấy màn hình nhỏ làm cơ sở. Tuy nhiên, phương pháp này sẽ gây không ít cản trở nếu muốn tối ưu rốt ráo cho điện thoại di động. Điều này sẽ được nói rõ hơn ở các tiêu chí sẽ được đề cập ở bên dưới.
  • Thiết kế một phiên bản riêng cho mobile: Với cách này bạn vẫn có thể sử dụng chung cơ sở dữ liệu website nhưng cần tinh gọn lại những xử lý Back-end không cần thiết đối với thiết bị di động, những xử lý sẽ bị ẩn trên thiết bị di động như cách làm Responsive. Việc thay đổi hay nâng cấp cho từng nền tảng thiết bị có tính độc lập, ít ràng buộc hơn.

Sau đây là một số tiêu chí cơ bản cần quan tâm khi chuyển sang thiết kế web Mobile First:

  • Bố cục nội dung: Với màn hình nhỏ trên điện thoại di động, bạn cần quan tâm đến bố cục sao cho dễ tương tác nhất.
  • Tốc độ xử lý: Giảm bớt các xử lý tối đa tập trung cho những thứ cần thiết trên thiết bị di động. Trên thiết bị di động, cấu hình máy thấp hơn nhiều so với PC/Desktop/Laptop.
  • Tương thích hành vi: Tập trung xử lý các tính năng liên quan đến hành vi thao tác trên thiết bị di động.
  • Tốc độ tải web: Giảm tối đa lượng yêu cầu (Request), kích thước hình ảnh, nội dung ưu tiên cho màn hình nhỏ để tăng tốc độ tải web. Cần lưu ý rằng tốc độ đường truyền trên thiết bị di động đa phần chậm hơn trên PC/Desktop/Laptop.

Kết luận

Qua bài viết này, hy vọng mọi người hiểu hơn về Mobile First, phân biệt được sự khác nhau giữa Mobile First và PC First qua đó thấy được sự khác nhau giữa chúng.

Tham khảo:

https://blog.vietsol.net/thiet-ke-website/mobile-first

https://codetot.net/nao-la-viet-code-theo-tieu-chuan-mobile-first/

All Rights Reserved

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.

Sẽ có hai hướng cho cả nhà thiết kế và các Marketer

Vẫn sẽ ứng dụng Responsive

Nghĩa là bạn sẽ tiếp tục sử dụng mã nguồn Back – end, đồng thời các chức năng Front – end cần điều chỉnh sao để tương thích với các thiết bị, được ẩn hiện theo đúng kích thước màn hình (Vẫn phải ưu tiên cho màn hình nhỏ, đây là cơ sở). Tuy nhiên, ở phương pháp này, chắc chắn sẽ khiến bạn gặp không ít cản trở nếu muốn tối ưu cho điện thoại di động. Điều này sẽ được đề cập chi tiết hơn sau đây:

Phiên bản Mobile vẫn sẽ được thiết kế riêng



Thiết kế website ở Webtravel sẽ tương thích với mọi thiết bị



Ở cách này, bạn vẫn có thể sử dụng chung cơ sở dữ liệu một cách bình thường, tuy nhiên cần phải tinh gọn để xử lý những Back – end không cần thiết đối với các thiết bị di động khác, tương tự như Responsive – các xử lý đều sẽ bị ẩn trên thiết bị di động. Từ đó, việc thay đổi hoặc nâng cấp cho từng tảng thiết bị sẽ có tính độc lập, đồng thời ít ràng buộc hơn.
Một số tiêu chí bạn cần quan tâm khi chuyển sang thiết kế website Mobile – first:
- Bố cục của nội dung: Bởi vì với điện thoại di động là màn hình nhỏ, bạn cần phải trình bày sao cho phù hợp nhất, dễ tương tác nhất.
- Tốc độ xử lý: Nên tập trung cho những thứ cần thiết, có liên quan đến các chức năng phù hợp với nhiều thao tác của điện thoại di động.
- Tốc độ tải trang: Đó là cần giảm đi tối đa lượng yêu cầu, nội dung thì ưu tiên màn hình nhỏ, kích thước hình ảnh phù hợp. Đồng thời phải lưu ý rằng, tốc tộ tải trang trên di dộng bao giờ cũng sẽ chậm hơn rất nhiều so với laptop/desktop/PC.
- Sự tương tác trong hành vi: Cần chú ý cải thiên các tính năng liên quan đến hành vi thao tác ở các thiết bị di động.

PRO Vs AMATEUR Website Layouts (With Examples)
PRO Vs AMATEUR Website Layouts (With Examples)

List of Top Web UI and Design Systems Engineers

If you wish to read on, check out the top and best design systems that exist today.

  • Google Material Design System
  • Apple Human Interface Guidelines
  • Microsoft Fluent Design System
  • Atlassian Design System
  • Uber Design System
  • Shopify Design System
  • IBM Carbon Design System
  • Mailchimp Design System
  • Salesforce Lightning Design System
  • Helpscout Design System

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):



Complete Layout Guide
Complete Layout Guide

What Is Mobile-First Design?

Design for mobile first aims to create the best user experience (UX) for people visiting websites via smartphones. By building a website prioritizing smartphone and tablet users, web designers and developers can help achieve a seamless experience for these visitors.

With a mobile-first design, the process starts with creating a website or application optimized for mobile devices and then scaling up to larger screens, rather than starting with a desktop design and trying to adapt it to mobile devices.

Since mobile devices have become the primary way people access the internet, designing for mobile first ensures that users on smaller screens have a seamless and intuitive experience. Working with the best IT service providers can be crucial for successfully implementing a mobile-first design strategy.

Mobile-first design typically involves simplifying the layout, using responsive design techniques to ensure that the website or application looks good on any screen size, and focusing on the most important content and functionality.

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.

I Worked 8 hours in the Vision Pro and THIS Happened..
I Worked 8 hours in the Vision Pro and THIS Happened..

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.

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.

How to Properly Layout A Website (For Beginners)
How to Properly Layout A Website (For Beginners)

Sẽ có hai hướng cho cả nhà thiết kế và các Marketer

Vẫn sẽ ứng dụng Responsive

Nghĩa là bạn sẽ tiếp tục sử dụng mã nguồn Back – end, đồng thời các chức năng Front – end cần điều chỉnh sao để tương thích với các thiết bị, được ẩn hiện theo đúng kích thước màn hình (Vẫn phải ưu tiên cho màn hình nhỏ, đây là cơ sở). Tuy nhiên, ở phương pháp này, chắc chắn sẽ khiến bạn gặp không ít cản trở nếu muốn tối ưu cho điện thoại di động. Điều này sẽ được đề cập chi tiết hơn sau đây:

Phiên bản Mobile vẫn sẽ được thiết kế riêng



Thiết kế website ở Webtravel sẽ tương thích với mọi thiết bị



Ở cách này, bạn vẫn có thể sử dụng chung cơ sở dữ liệu một cách bình thường, tuy nhiên cần phải tinh gọn để xử lý những Back – end không cần thiết đối với các thiết bị di động khác, tương tự như Responsive – các xử lý đều sẽ bị ẩn trên thiết bị di động. Từ đó, việc thay đổi hoặc nâng cấp cho từng tảng thiết bị sẽ có tính độc lập, đồng thời ít ràng buộc hơn.
Một số tiêu chí bạn cần quan tâm khi chuyển sang thiết kế website Mobile – first:
- Bố cục của nội dung: Bởi vì với điện thoại di động là màn hình nhỏ, bạn cần phải trình bày sao cho phù hợp nhất, dễ tương tác nhất.
- Tốc độ xử lý: Nên tập trung cho những thứ cần thiết, có liên quan đến các chức năng phù hợp với nhiều thao tác của điện thoại di động.
- Tốc độ tải trang: Đó là cần giảm đi tối đa lượng yêu cầu, nội dung thì ưu tiên màn hình nhỏ, kích thước hình ảnh phù hợp. Đồng thời phải lưu ý rằng, tốc tộ tải trang trên di dộng bao giờ cũng sẽ chậm hơn rất nhiều so với laptop/desktop/PC.
- Sự tương tác trong hành vi: Cần chú ý cải thiên các tính năng liên quan đến hành vi thao tác ở các thiết bị di động.

Implementing A Mobile-First Design Approach

Now that we have a thorough understanding of the concepts of Mobile-First design, it is time to discuss how to implement these practices into your web design phase.

When crafting your website, it is best to ensure that communication between the design team, web managers, and web developers are consistent and robust to foster an efficient and clear end result.

#1: Creating a Content Inventory

Prior to crafting, developers and designers must discover all possible needs and requirements of an end-user when interacting with your website or application on their mobile devices. Features such as operating hours, locations, contact numbers, drop-down menus, directories, and so on must be taken into account in order to make a holistic design.

Mobile-first usually translates to content first. When identifying which content is ideal to be placed on the primary pages of your website. Having a good mobile version usually translates to a better version across other devices.

Before proceeding with your design, it is best to bank, sort, and list all of your available content on a spreadsheet or document. This allows you to identify which content to include in various devices, and which are better left out.

#2: Identifying A Visual Hierarchy

Once you have sorted out your content, it is time to craft a visual hierarchy to guide you along your design process in your mobile-first web design. Visual content such as logos, themes, typography, videos, and other types of media that contribute to the overall design must be considered in the visual hierarchy. Here are the things to consider when creating a visual hierarchy:

  • Use size to enhance or reduce visibility
  • Color and contrast
  • Use complementary typeface categories and styles
  • Font sizing
  • Make room for white space
  • Ensure a proper design structure
  • Avoid large graphics
  • Enlarge touch objects

These are a few of the many aspects you should consider when designing a mobile-first website. Taking the time to look into these aspects can significantly help you identify and produce a well-rounded design for your website.

Although primarily darted toward mobile use, developers can take the base of this design and expand it further through tablets, PCs, and other devices.

Responsive Website Using HTML And CSS Step By Step
Responsive Website Using HTML And CSS Step By Step

Vậy thì, các Marketer cần chú ý điều gì về Mobile – first?



Nếu bạn đang quan tâm đến việc

Xem thêm:

Thiết kế website du lịch chuyên nghiệp, đẳng cấp với Webtravel

Hiện nay, để có thể đưa sản phẩm của mình ra thị trường, hay quảng bá thương hiệu thì chắc chắn không thể thiếu các thiết bị công nghệ, kỹ thuật số. Bởi đây chính là công cụ chính, đắc lực để các marketer có thể tiếp cận và phát triển, áp dụng. Hiển nhiên đó là không thể bỏ qua để tiếp cận được khách hàng tiềm năng một cách nhanh chóng và tốt nhất. Nếu như sản phẩm của bạn có ít độ tương tác, gây nhiều cản trở khi xem bằng thiết bị di động trong các chiến dịch quảng cáo. Đó chính là yếu tố tất yếu, khiến bạn đánh mất nhiều khách hàng vào tay của đối thủ đáng gờm. Hãy nhớ nhé, nền tảng công nghệ và xu hướng đó chính là thành phần không thể thiếu để góp phần thành công cho doanh nghiệp của bạn.Nếu bạn đang quan tâm đến việc


thiết kế website du lịch


theo đúng chuẩn Mobile, đừng ngần ngại hãy nhấc máy lên liên hệ với chúng tôi tại WEBTRAVEL.


Out of the 7.33 billion mobile device users worldwide, 61% of mobile searchers are more likely to contact a local business with a mobile-friendly site. Many people use mobile devices to find content and research products/services, which indicates the growing need for mobile-friendly and mobile-first sites.

This article explains what mobile-first design is, why it is important, its key elements, and the difference between mobile-first and responsive design.

Table of Contents

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.

11 Section layouts to make your website ultra UNIQUE
11 Section layouts to make your website ultra UNIQUE

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

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.

Related Articles:

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.

The Best Homepage Layout In Web Design (Supported by UX)
The Best Homepage Layout In Web Design (Supported by UX)

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

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

Build and Deploy a Fully Responsive Website with Modern UI/UX in React JS with Tailwind
Build and Deploy a Fully Responsive Website with Modern UI/UX in React JS with Tailwind

Vì sao phải thiết kế web responsive?



Không chỉ vậy, ứng dụng của các thiết bị này vô cùng được phổ biến và phá triển, số lượng người dùng ngày một tăng. Và những nhà thiết kế bắt buộc phải chạy theo xu hướng để tạo ra những sản phẩm mang lại cho người dùng trải nghiệm tốt nhất.
Chẳng hạn: sự phát triển của Smartphone kéo theo việc thay đổi của người dùng, nó không đơn giản là nghe, gọi điện hoặc nhắn tin,… Nó còn có rất nhiều chức năng khác nhau, đa dạng và phong phú, dần thay thế các thiết bị cổ điển khác như: quay phim, chụp hình hoặc truy cập Internet,… Đồng thời nó còn giúp cho việc tương tác, kết nối trong quản lý và hỗ trợ cho các công việc hàng ngày của doanh nghiệp.
Có smartphone, người dùng không nhất thiết phải sử dụng laptop hoặc máy tính xách tay để truy cập vào website. Và những thiết bị này cũng có hệ điều hành thông minh, kích cỡ màn hình đủ lớn và còn nhiều ứng dụng khác nhau để hỗ trợ. Trước đây, khi thiết kế website, chủ doanh nghiệp chỉ quan tâm việc làm sao đầu tư cho giao diện được đẹp mắt, bố cục rõ ràng cùng nhiều tính năng hợp lý. Kể cả là Desktop và laptop có nhiều kích thước thì chúng ta vẫn phải đáp ứng được. Nhưng bây giờ, thuật toán Google đã thay đổi cùng xu hướng người dùng từ đó cũng đổi theo, nên bắt buộc các nhà thiết kế phải đưa giao diện được tích hợp với các thiết bị di động, vừa màn hình, thay đổi nhanh chóng.
Bên cạnh đó, không gian tương tác với các thiết bị này cũng khác nhau, điện thoại là cảm ứng khi chạm bằng tay trên không gian hẹp thì không thể xem được giao diện nếu nó không được chuyển hóa. Còn đối với laptop hay máy tính để bàn thì chỉ cần có chuột click trên màn hình rộng lớn. Vì thế, đừng khiến người dùng cảm thấy khó chịu khi sử dụng website, không phải zoom lớn để nhìn rõ từng chi tiết trên website cũng như các thông tin phù hợp.

Xem thêm:

5 bước tạo ra một thiết kế website mobile một cách hiệu quả

Thiết kế web responsive hay còn gọi là thiết kế web thích ứng, làm sao cho website có thể hiện thị cùng các tính năng vừa với kích thước màn hình cùng hành vi tương tác trên các thiết bị khác nhau như Mobile, Tablet, Desktop.Không chỉ vậy, ứng dụng của các thiết bị này vô cùng được phổ biến và phá triển, số lượng người dùng ngày một tăng. Và những nhà thiết kế bắt buộc phải chạy theo xu hướng để tạo ra những sản phẩm mang lại cho người dùng trải nghiệm tốt nhất.Chẳng hạn: sự phát triển của Smartphone kéo theo việc thay đổi của người dùng, nó không đơn giản là nghe, gọi điện hoặc nhắn tin,… Nó còn có rất nhiều chức năng khác nhau, đa dạng và phong phú, dần thay thế các thiết bị cổ điển khác như: quay phim, chụp hình hoặc truy cập Internet,… Đồng thời nó còn giúp cho việc tương tác, kết nối trong quản lý và hỗ trợ cho các công việc hàng ngày của doanh nghiệp.Có smartphone, người dùng không nhất thiết phải sử dụng laptop hoặc máy tính xách tay để truy cập vào website. Và những thiết bị này cũng có hệ điều hành thông minh, kích cỡ màn hình đủ lớn và còn nhiều ứng dụng khác nhau để hỗ trợ. Trước đây, khi thiết kế website, chủ doanh nghiệp chỉ quan tâm việc làm sao đầu tư cho giao diện được đẹp mắt, bố cục rõ ràng cùng nhiều tính năng hợp lý. Kể cả là Desktop và laptop có nhiều kích thước thì chúng ta vẫn phải đáp ứng được. Nhưng bây giờ, thuật toán Google đã thay đổi cùng xu hướng người dùng từ đó cũng đổi theo, nên bắt buộc các nhà thiết kế phải đưa giao diện được tích hợp với các thiết bị di động, vừa màn hình, thay đổi nhanh chóng.Bên cạnh đó, không gian tương tác với các thiết bị này cũng khác nhau, điện thoại là cảm ứng khi chạm bằng tay trên không gian hẹp thì không thể xem được giao diện nếu nó không được chuyển hóa. Còn đối với laptop hay máy tính để bàn thì chỉ cần có chuột click trên màn hình rộng lớn. Vì thế, đừng khiến người dùng cảm thấy khó chịu khi sử dụng website, không phải zoom lớn để nhìn rõ từng chi tiết trên website cũng như các thông tin phù hợp.


Why is Mobile-First Design important?

Fostering a mobile-first approach when designing your web pages is a crucial aspect to consider. The world is constantly generating new innovative technology, which is becoming more handheld and mobile to cater to the fast-paced movement in today's society.

Incorporating a mobile-first design is imperative due to the exploding growth of mobile use over the years. Let’s look at the statistics for mobile usage in recent years:

In October 2020, approximately 4.66 billion people were active mobile internet users, while 3.6 billion were social media users. In the United States (US), consumers spent around 90% of their mobile time on applications and mobile internet, resulting in a growth of 504% in daily media consumption since 2011. Additionally, over 76% of US citizens use their phones to respond to emails and conduct online messaging while watching TV.

As you can see, these statistics show the impact of how heavily reliant people nowadays are on their mobile devices and even use them as a main source of communication, web suffering, and online interaction.

Web vs Mobile Development | Which Should You Learn?
Web vs Mobile Development | Which Should You Learn?

Best Tools to Use for Mobile-First Design

Here are the best tools to use when creating a mobile-first design for your website.

  • Google’s Mobile-First Friendly Test

Mobile-Friendly Test is a tool by Google that identifies what score your website has according to Google Search calculation parameters. It is a set of factors that help determine the level of convenience your website’s mobile version provides to end-users.

  • Gator Website Builder

If you’re looking for inspiration on how to design your web page, or simply need the necessary tools to help you design your website, you can take a look at Gator Website Builder. It houses over 200 templates of mobile-responsive designs, allowing you to easily craft your own mobile-friendly website.

  • WordPress Themes

WordPress is one of the most popular and well-known CMS platforms worldwide. With WordPress Themes, you can set up a mobile-friendly website without going through coding yourself. It also offers a large range of free and paid themes and templates.

  • Adaptive Images

As mentioned above, multimedia is a powerful tool to have within one’s website. Adaptive Images allows your website to detect the user’s screen size and automatically resizes the images laid out on your web page. Additionally, it can speed up the load time of your images, which can decrease UI lag.

  • Bootstrap

Bootstrap is another popular front-end open toolkit for designing mobile-first websites. It features Software-as-a-Service (SaaS) variables and mixins, a responsive grid system, and extensive prebuilt components that expedites your website creation process.

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.

18 Hero Section Designs You Can Steal
18 Hero Section Designs You Can Steal

Final Thoughts

Fostering a mobile-first approach to product creation and website building allows companies to take a better look at the user experience design services and features they offer to their clients. Given that the world is rapidly becoming a more fast-paced and mobile-heavy society, it is beneficial to ensure that your mobile applications and platforms are in their best shape as users are likely to interact with your brand through said platforms.

Moreover, it allows you to grasp your product holistically and sure thorough and clear planning on the products and services you offer to your consumers while ensuring that their demands are met.

Takeaways on Mobile-First Design

Mobile-first web design aims to deliver a complete mobile UX through less copy, large fonts, remarkable CTAs, faster loading speed, and optimized video and image material.

With the advancement of mobile technology, smartphone devices, and their browsers will use features like cameras, voice detection, and haptic feedback more prominently. This will put the mobile-first approach in the driving seat for providing optimal user experience. Businesses that use it will stay ahead of their competition in driving valuable traffic and generating leads.

If you need help improving the mobile-friendliness of your website, top web design companies will help you develop a mobile-first design strategy and create a website tailored to your audience’s needs.

Designing a Mobile HERO Section + 13 Layout Variations
Designing a Mobile HERO Section + 13 Layout Variations

Mobile-first là gì?



Mobile-fisst - công cụ cần thiết



Đây là cụm từ ưu tiên cho các thiết bị di động và hay được sử dụng trong các ứng dụng công nghệ như Mobile-first website design(ưu tiên thiết kế website cho thiết bị di động). Hay còn có thể hiểu sản phẩm này được dành cho di động.
Nhưng từ năm 2018, Mobile – first sẽ đang và trở thành một xu hướng mạnh mẽ. Vậy nó sẽ có những điểm khác biệt gì?

Mobile-FirstResponsive Design - What Is the Difference?

Responsive web design is adapting desktop websites to mobile screens. It begins on the desktop and scales down to smaller screens. The content, navigation, and layout decrease to fit the mobile screens but remain geared for “classic” desktop websites.

Mobile-first design is more like designing a mobile app and adjusting the layout for desktop devices while retaining the traits of a great UX, such as fast download speeds and streamlined content to engage the audience. By collaborating with a reputable mobile app development company, you can ensure that your design is optimized for mobile devices and delivers an exceptional user experience.

Responsive web design helps website content fit the screens of different devices automatically and in a way that makes it comfortable for users to read. The mobile-first method considers mobile users’ needs first, arises from the more restrictive mobile end, and works toward expanding features for the desktop.

6 Mobile Section Layouts and Examples You Must See
6 Mobile Section Layouts and Examples You Must See

What is Mobile-First Design?

Mobile-first design means that web developers start the product design from the mobile end, which exists with more restrictions. They then expand its features and translate them towards a tablet and desktop version or other devices that may need a different set of dimensions.

The concept of mobile-first design encapsulates two sub-concepts: Responsive Web Design (RWD) and Progressive Advancements and Graceful Degradation, which assist in ensuring that platforms achieve a “mobile-first” approach when creating online and digital platforms.

These concepts and methodologies come hand-in-hand in order for developers and web managers to achieve a mobile-first design. Let’s talk about both concepts to give you a better grasp of mobile-first design.

Responsive Web Design

Responsive web design (RWD) is a web design method that allows active and live web pages to automatically adapt and fit various dimensions that are required for different devices. As the webpage translates to other devices, the design and arrangement also alter slightly to ensure that the user comfortably sees the contents on the screen.

Incorporating RWD into your web page design significantly reduces the need for users to pan, pinch, zoom, and scroll while browsing the web.

Progressive Advancement & Graceful Degradation

These concepts first are usually placed before the incorporation of responsive web design. When creating a web design or application interface display that caters to different screen sizes, developers draft customized versions of the products for different platforms such as tablets, web, mobile, smartwatches, etc. If you notice, your browser or application on your laptop or personal computer (PC) appears different in comparison to the ones displayed on your smartphone or other handheld devices.

  • Progressive advancement refers to the building of a version for a relatively lower browser that includes the most basic functions and features. This lower browser typically means that of the mobile phones. Once finished, developers tend to the advanced version for tablets or PC where developers include more complicated effects, animations, interactions, and other features to improve user experience.
  • Graceful Degradation, on the other hand, starts its product design process from a more advanced end, such as desktops, and builds a version that possesses fully rounded features from the get-go. Developers then continue to create degraded versions of them and apply them across various platforms such as tablets, mobile phones, etc.

These concepts allow developers and web managers to carefully depict their web designs or application while ensuring that the features across various devices are met to produce a high-quality customer experience.

5 Best Mobile-First Website Examples

We will now take a look into some mobile-first websites that fulfill the criteria of a great mobile design and even go above and beyond in this regard by setting standards for everyone else.

Festa de Francofonia

Festa de Francofonia is one of the best examples of mobile-first web design. This event industry website promotes content updates and implements notification techniques. It uses HTTPS protocol (it redirects HTTP traffic to it) which greatly enhances its speed.

It also minifies CSS, HTML and JavaScript and uses file compression for optimal mobile performance.

In terms of user experience, the use of legible font sizes, color contrasts and prioritization of visible content make this website cater to the needs of portable device users.

Key mobile-first elements:

  • Geometrical design
  • A very simple menuFast loading times
  • Custom animation

La Teva Web

The web design agency La Teva Web has a mobile-first website that checks most boxes with the PWA best practices, as it avoids application cache and requesting the geolocation permission on page load.

Very user-friendly, this website has content that is sized correctly for the viewport and size tap targets appropriately. To improve performance, the website uses progressive JPEGs.

Key mobile-first elements:

  • Intuitive navigation
  • Short Contact Us form
  • Scrollable content
  • Mobile-friendly typography

The Rocks

Eat & Drink website The Rocks is a content-rich portal whose informative nature translates to a mobile-first environment with quality imagery and essential blocks of text that introduce blog articles.

Big CTAs complement these bits of content as smaller links would be too inconvenient to use.

For even better usability, the brand logo is linking to a homepage, the active section is highlighted in navigation menus and all mistakes users may make in forms are highlighted immediately, along with given instructions for correct completion.

Key mobile-first elements:

  • Streamlined menu with just a few items
  • Big images
  • Short content intro
  • Bold CTAs

Inventure (Age of Pythia)

Futuristic-looking website is a 100% mobile-friendly experience, with excellent CTAs, legible font sizes, satisfactory color contrast and content sized just right for mobile screens.

Safe and fast-loading, the website uses HTTPS protocol that also boosts reachability and visibility on search engines.

The unique design uses background animations and parallax scrolling that don’t affect the loading times of the website.

Key mobile-first elements:

  • Page load speed
  • Compressed images
  • Parallax scroller
  • The bare minimum of written content

International Energy Agency

On this mobile-first website, elements such as user profile, search and menu are neatly tucked away at the top along with the brand’s logo, opening and presenting their abilities at the single tap.

Since this website has plenty of blog articles, the useability is improved with a single column layout that invites users to scroll down for more content.

Visitors are presented with a big headline against high-quality photography and a CTA link that opens the piece of content.

Key mobile-first elements:

  • Hamburger menu with additional content that is easy to reach
  • High-quality images that are well-compressed for site speed
  • Large headlines with one-sentence intros
  • One-column layout
How to Make a Business Website: #WebDesignTips #OnlinePresence #BusinessSuccess #webdesign
How to Make a Business Website: #WebDesignTips #OnlinePresence #BusinessSuccess #webdesign

Design device-appropriate layouts yourself

If you’re using UXPin, it’s fairly easy to create different layouts for these views.

  1. Open a UXPin prototype.
  2. Tap “Add new adaptive version” at the bottom right of the UXPin editor
  3. Choose a preset size or enter your own dimensions.
  4. 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 trong Web Responsive Design

Bài đăng này đã không được cập nhật trong 4 năm

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.

Related Articles:

6 Qualities Of Great Mobile-First Design

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

UI/UX - Should you start with Mobile or Desktop Design FIRST?
UI/UX - Should you start with Mobile or Desktop Design FIRST?

Vậy thì, các Marketer cần chú ý điều gì về Mobile – first?



Nếu bạn đang quan tâm đến việc

Xem thêm:

Thiết kế website du lịch chuyên nghiệp, đẳng cấp với Webtravel

Hiện nay, để có thể đưa sản phẩm của mình ra thị trường, hay quảng bá thương hiệu thì chắc chắn không thể thiếu các thiết bị công nghệ, kỹ thuật số. Bởi đây chính là công cụ chính, đắc lực để các marketer có thể tiếp cận và phát triển, áp dụng. Hiển nhiên đó là không thể bỏ qua để tiếp cận được khách hàng tiềm năng một cách nhanh chóng và tốt nhất. Nếu như sản phẩm của bạn có ít độ tương tác, gây nhiều cản trở khi xem bằng thiết bị di động trong các chiến dịch quảng cáo. Đó chính là yếu tố tất yếu, khiến bạn đánh mất nhiều khách hàng vào tay của đối thủ đáng gờm. Hãy nhớ nhé, nền tảng công nghệ và xu hướng đó chính là thành phần không thể thiếu để góp phần thành công cho doanh nghiệp của bạn.Nếu bạn đang quan tâm đến việc


thiết kế website du lịch


theo đúng chuẩn Mobile, đừng ngần ngại hãy nhấc máy lên liên hệ với chúng tôi tại WEBTRAVEL.




Đối với các Marketer hiện nay, việc phải cập nhật thông tin thường xuyên về công nghệ và thiết kế web là vô cùng quan trọng, để phục vụ cho chiến dịch Marketing Online. Có lẽ vậy, nên cụm từ Mobile-first đã trở nên quen thuộc và không còn xa lạ. Bài viết sau đây,


WEBTRAVEL


xin giới thiệu một số vấn đề liên quan đến xu hướng thiết kế website Mobile-first.

Đối với các Marketer hiện nay, việc phải cập nhật thông tin thường xuyên về công nghệ và thiết kế web là vô cùng quan trọng, để phục vụ cho chiến dịch Marketing Online. Có lẽ vậy, nên cụm từ Mobile-first đã trở nên quen thuộc và không còn xa lạ. Bài viết sau đây,xin giới thiệu một số vấn đề liên quan đến xu hướng thiết kế website Mobile-first.


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.

Responsive Web Design Tutorial For Beginners With Examples
Responsive Web Design Tutorial For Beginners With Examples

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

Mobile-first là gì?



Mobile-fisst – công cụ cần thiết



Đây là cụm từ ưu tiên cho các thiết bị di động và hay được sử dụng trong các ứng dụng công nghệ như Mobile-first website design(ưu tiên thiết kế website cho thiết bị di động). Hay còn có thể hiểu sản phẩm này được dành cho di động.
Nhưng từ năm 2018, Mobile – first sẽ đang và trở thành một xu hướng mạnh mẽ. Vậy nó sẽ có những điểm khác biệt gì?

Still Struggle with Mobile-first Responsive?
Still Struggle with Mobile-first Responsive?

FAQ about Mobile-First Design

Here are the most common queries regarding the mobile-first design approach

  1. When did mobile-first design start?

    The concept of mobile-first design first surfaced in 2010. Former Google CEO Eric Schmidt announced this idea at a conference that the company would be focusing on mobile users for their design practices.

  2. What is mobile-first design?

    It is simply the concept where web designers and developers begin product design for mobile devices first before expanding to larger-screened devices such as tablets and PC.

  3. Why is mobile-first design important?

    Incorporating a mobile-first design approach allows designers to start on smaller screens while working their way up and focus on the core functions of their product.

  4. What is the mobile-first strategy?

    A mobile-first strategy refers to the approach where developers shape business products and platforms with mobile users in mind. This is where businesses prioritize mobile apps and mobile web capabilities over desktops and other devices.



Đối với các Marketer hiện nay, việc phải cập nhật thông tin thường xuyên về công nghệ và thiết kế web là vô cùng quan trọng, để phục vụ cho chiến dịch Marketing Online. Có lẽ vậy, nên cụm từ Mobile-first đã trở nên quen thuộc và không còn xa lạ. Bài viết sau đây,


WEBTRAVEL


xin giới thiệu một số vấn đề liên quan đến xu hướng thiết kế website Mobile-first.

Đối với các Marketer hiện nay, việc phải cập nhật thông tin thường xuyên về công nghệ và thiết kế web là vô cùng quan trọng, để phục vụ cho chiến dịch Marketing Online. Có lẽ vậy, nên cụm từ Mobile-first đã trở nên quen thuộc và không còn xa lạ. Bài viết sau đây,xin giới thiệu một số vấn đề liên quan đến xu hướng thiết kế website Mobile-first.


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.

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

The Best Practices for Mobile-First Design

Crafting a website possesses its own challenges. That said, there are a number of practices that development teams must be aware of to ensure that your website is fully maximized and caters to the needs of your consumers. Here, we listed several best practices on mobile-first design to help guide you as you incorporate this approach into building your website.

#1: Prioritize Content

It is well known that “Content is King”, and for good reason. Ensuring that you prioritize crafting high-quality content and incorporating them into your website can significantly drive your platform to success. Having a good collection of content allows you to attract more customers while reinforcing your credibility and rank on popular search engines such as Google and Bing.

#2: Ensure an Intuitive Navigation

Nothing ruins a platform better than having a confusing and messy navigation system. Proving intuitive navigation allows you to deliver a neat and clean user experience on mobile devices. Leveraging features such as navigation drawers, or an interactive sitemap, can help your users tread through your website easily and more effectively.

#3: Avoid Unnecessary and Disruptive Popups

Mobile devices have spatial constraints that limit a user’s field of view when interacting with your web page. Having unnecessary popups and ads taking over their screen will likely disrupt their experience on your website, resulting in a negative customer experience.

#4: Always Perform Beta Testing before Going Live

Testing your application or website before going live is one of the most crucial and essential parts of creating an online platform. This is also one of the most effective ways to ensure that your website is delivering optimal user experiences across devices.

Doing so can help you spot flaws and issues within their design and address them before it reaches your customers. Moreover, this allows you the chance to verify the website renders response and translates properly across mobile, tablets, and desktops.

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



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):



Should you do Mobile First or Desktop First?
Should you do Mobile First or Desktop First?

Vì sao phải thiết kế web responsive?



Không chỉ vậy, ứng dụng của các thiết bị này vô cùng được phổ biến và phá triển, số lượng người dùng ngày một tăng. Và những nhà thiết kế bắt buộc phải chạy theo xu hướng để tạo ra những sản phẩm mang lại cho người dùng trải nghiệm tốt nhất.
Chẳng hạn: sự phát triển của Smartphone kéo theo việc thay đổi của người dùng, nó không đơn giản là nghe, gọi điện hoặc nhắn tin,… Nó còn có rất nhiều chức năng khác nhau, đa dạng và phong phú, dần thay thế các thiết bị cổ điển khác như: quay phim, chụp hình hoặc truy cập Internet,… Đồng thời nó còn giúp cho việc tương tác, kết nối trong quản lý và hỗ trợ cho các công việc hàng ngày của doanh nghiệp.
Có smartphone, người dùng không nhất thiết phải sử dụng laptop hoặc máy tính xách tay để truy cập vào website. Và những thiết bị này cũng có hệ điều hành thông minh, kích cỡ màn hình đủ lớn và còn nhiều ứng dụng khác nhau để hỗ trợ. Trước đây, khi thiết kế website, chủ doanh nghiệp chỉ quan tâm việc làm sao đầu tư cho giao diện được đẹp mắt, bố cục rõ ràng cùng nhiều tính năng hợp lý. Kể cả là Desktop và laptop có nhiều kích thước thì chúng ta vẫn phải đáp ứng được. Nhưng bây giờ, thuật toán Google đã thay đổi cùng xu hướng người dùng từ đó cũng đổi theo, nên bắt buộc các nhà thiết kế phải đưa giao diện được tích hợp với các thiết bị di động, vừa màn hình, thay đổi nhanh chóng.
Bên cạnh đó, không gian tương tác với các thiết bị này cũng khác nhau, điện thoại là cảm ứng khi chạm bằng tay trên không gian hẹp thì không thể xem được giao diện nếu nó không được chuyển hóa. Còn đối với laptop hay máy tính để bàn thì chỉ cần có chuột click trên màn hình rộng lớn. Vì thế, đừng khiến người dùng cảm thấy khó chịu khi sử dụng website, không phải zoom lớn để nhìn rõ từng chi tiết trên website cũng như các thông tin phù hợp.

Xem thêm:

5 bước tạo ra một thiết kế website mobile một cách hiệu quả

Thiết kế web responsive hay còn gọi là thiết kế web thích ứng, làm sao cho website có thể hiện thị cùng các tính năng vừa với kích thước màn hình cùng hành vi tương tác trên các thiết bị khác nhau như Mobile, Tablet, Desktop.Không chỉ vậy, ứng dụng của các thiết bị này vô cùng được phổ biến và phá triển, số lượng người dùng ngày một tăng. Và những nhà thiết kế bắt buộc phải chạy theo xu hướng để tạo ra những sản phẩm mang lại cho người dùng trải nghiệm tốt nhất.Chẳng hạn: sự phát triển của Smartphone kéo theo việc thay đổi của người dùng, nó không đơn giản là nghe, gọi điện hoặc nhắn tin,… Nó còn có rất nhiều chức năng khác nhau, đa dạng và phong phú, dần thay thế các thiết bị cổ điển khác như: quay phim, chụp hình hoặc truy cập Internet,… Đồng thời nó còn giúp cho việc tương tác, kết nối trong quản lý và hỗ trợ cho các công việc hàng ngày của doanh nghiệp.Có smartphone, người dùng không nhất thiết phải sử dụng laptop hoặc máy tính xách tay để truy cập vào website. Và những thiết bị này cũng có hệ điều hành thông minh, kích cỡ màn hình đủ lớn và còn nhiều ứng dụng khác nhau để hỗ trợ. Trước đây, khi thiết kế website, chủ doanh nghiệp chỉ quan tâm việc làm sao đầu tư cho giao diện được đẹp mắt, bố cục rõ ràng cùng nhiều tính năng hợp lý. Kể cả là Desktop và laptop có nhiều kích thước thì chúng ta vẫn phải đáp ứng được. Nhưng bây giờ, thuật toán Google đã thay đổi cùng xu hướng người dùng từ đó cũng đổi theo, nên bắt buộc các nhà thiết kế phải đưa giao diện được tích hợp với các thiết bị di động, vừa màn hình, thay đổi nhanh chóng.Bên cạnh đó, không gian tương tác với các thiết bị này cũng khác nhau, điện thoại là cảm ứng khi chạm bằng tay trên không gian hẹp thì không thể xem được giao diện nếu nó không được chuyển hóa. Còn đối với laptop hay máy tính để bàn thì chỉ cần có chuột click trên màn hình rộng lớn. Vì thế, đừng khiến người dùng cảm thấy khó chịu khi sử dụng website, không phải zoom lớn để nhìn rõ từng chi tiết trên website cũng như các thông tin phù hợp.


How we built

an HR tech app that was acquired by StepStone

Learn more

#3: Combining Function and Form: Creating Mobile, Tablet, and Desktop Designs

Now it’s time to combine both aspects into one melting pot. As a developer or web manager, it is essential to keep in mind that users are likely to want to enjoy a seamless navigation experience while absorbing an aesthetically pleasing design and content. Combining function and form is essential to producing a well-rounded website.

  • Mobile Design Designers and web developers must take into consideration that mobile design is limited to smaller screens. When crafting a design for mobile devices, developers must consider a content-first approach that would place vital and important details on the page first.

Let’s say that we are creating a design for a restaurant, usually, customers are likely to look for the menu, location, operation hours, or even a contact number to be able to call for reservations. Keeping this in mind, developers should place such content at the very top of their mobile design.

  • Tablet DesignAlthough similar to the mobile design, tablets have a significantly larger screen of real estate, allowing designers and developers to place more information on the page. Here they can refer to the content bank mentioned before and add more details.

Following our restaurant website example, designers can leverage more space by adding more functionalities such as a snippet of the menu, the specials, and reviews, along with the existing content placed on the mobile version.

  • PC or Desktop Design Moving into the desktop design, developers have significantly more room to play with the design of the website and provide as much content as possible. Desktop design enables you to provide more content such as blog posts, a full feature of the menu, a restaurant gallery, a review page, an about us page, and many more.
Mobile First Web Design - what is it?
Mobile First Web Design - what is it?

The Difference Between Mobile First and Responsive Web Design

The difference between RWD and mobile-first design mainly trickles down to how the developer approaches your website.

  • A mobile-first design is an approach that covers all aspects of the web design from its planning, to the way its design tandems with desktop and other versions of the website. This allows for the developer to create proactive changes to the overall design to ensure that all platforms perform the same and provide the highest quality customer experience.
  • A responsive web design, however, is a more reactive approach to web design. This means that developers and web managers tend to alter the design in a more fluid and flexible approach when fitting on other dimensions.

While both designs ensure that consumer needs are met and are accessible across all devices, a mobile-first design approach is ideal due to the considerations taken into the planning and the design phase.

The Connection Between Mobile-First Design and Accessibility

Mobile-first design and accessibility have the tendency to overlap, which translates mobile-first design to become more accessible in comparison to other web design approaches. Here are a few easy the two can overlap:

  • Mobile and Portable Device Friendly. A Mobile-first design takes importance in fostering a design that best caters to being more readable on smaller screens, such as phones and tablets. This allows room to make your webpage more accessible to users, making it easier for them to access the web through the use of their mobile devices.
  • Hierarchy of Information. Since mobile devices have smaller screens, developers and web managers usually tend to place key content and content assets in front to ensure that users interact with them first.

Ensuring that you secure accessibility and ease of use on your website is crucial to achieving a successful online platform. Apart from planning and using methodologies that help foster a well-rounded website, you can also take advantage of tools that can provide insight into user experience and how to incorporate features that give a better customer experience.

Google CrUX (Chrome User Experience Report)

The Chrome User Experience Report is a series of online tools that provides experience metrics on the experience of real-world chrome users across popular and well-known websites online. It is powered by real user measurement of key user experience metrics across the public web.

The data collected come from users who have allows Google to sync their browsing history, have not set up a Sync paraphrase, and have usage statistic reporting enables. The data gathered can be viewed through the following platforms:

  • PageSpeed Insights. URL-level user experience metrics for popular URLs identify by Google’s web crawlers.
  • Public Google BigQuery project. This aggregates user experience metrics by origin and is split across multiple dimensions.
  • CrUX Dashboard on Data Studio. Here, you can track the origin’s user experience trends.
  • CrUX API. This provides metrics by origin and URLs.

Google Core Web Vitals

Another Google tool that can assist you to track and getting insight about your website is its Core Web Vitals report. This platform allows you to take a look at the performance of your existing web pages, allowing you to spot flaws, bugs, and other functions and maximize their operations overall.

The Core Web Vitals reports provide you with data on how your pages are performing, based on real-world usage data. Taking advantage of this tool is imperative to give you an idea of how your webpage is currently performing. It shows URL performance grouped by the following aspects:

  • Status
  • Metric Type
  • URL Group

This report only shows indexed URLs based on three metrics: Largest Contentful Paint (LCP), First Input Delay (FID), and Cumulative Layout Shift (CLS). These three metrics dictate whether your web page and URL performance is good, needs improvement, or poor. Google identifies and ranks your URL by providing URL status. Their criteria are as follows:

  • A URL on mobile with Poor FID but Needs improvement LCP is labeled Poor on mobile.
  • A URL on mobile with Needs improvement LCP but Good FID is labeled Needs improvement on mobile.
  • A URL on mobile with Good FID and CLS but no LCP data is considered Good on mobile.
  • A URL with Good FID, LCP, and CLS on mobile and Needs improvement FID, LCP, and CLS on a desktop is Good on mobile and Needs improvement on desktop.

It is best to note that if a URL does not have a minimum amount of reporting data within these metrics, it is likely to be omitted from the report.

Tips on How to Design a Mobile First Website
Tips on How to Design a Mobile First Website

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

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 Design: The Best Practices

The modern world of online and digital spaces have expanded significantly in the past few decades, evolving and improving its reach to users of various backgrounds, abilities, and economic status.

As the world becomes more reliant on technology and the connectivity of the world wide web, developers and companies alike are seeking ways to ensure that their platforms are accessible across multiple devices to match the needs of their consumers.

To give you a complete understanding of mobile-first design, this blog article will talk about the fundamentals of this approach, its importance, and ways on how you can apply the best practices of mobile-first design to your company’s web pages and online platforms.

Master Media Queries And Responsive CSS Web Design Like a Chameleon!
Master Media Queries And Responsive CSS Web Design Like a Chameleon!

Keywords searched by users: mobile first web design

How To Develop And Test A Mobile-First Design In 2021 | Css-Tricks -  Css-Tricks
How To Develop And Test A Mobile-First Design In 2021 | Css-Tricks - Css-Tricks
What Is Responsive Web Design - Digital Media Ninja
What Is Responsive Web Design - Digital Media Ninja
Importance Of Mobile-First Website Design | Nimble Digital
Importance Of Mobile-First Website Design | Nimble Digital
Responsive Web Design Vs Adaptive: Which Should You Go For?
Responsive Web Design Vs Adaptive: Which Should You Go For?
Tips On How To Design A Mobile First Website - Youtube
Tips On How To Design A Mobile First Website - Youtube
Mobile First Trong Web Responsive Design | Devmaster
Mobile First Trong Web Responsive Design | Devmaster
Mobile First Web Design Tutorial - Youtube
Mobile First Web Design Tutorial - Youtube

See more here: kientrucannam.vn

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *