Back Button


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 sầu or adaptive kiến thiết.

Bạn đang xem: Back button

We, along with others, strongly recommover progressive sầu 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 trang web with the mobile-first workflow.

Mobile-First = Content-First

If your site is good on a thiết bị di động 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 kích thước, & bandwidth to name a few, and so designing within these parameters forces you to prioritize nội dung ruthlessly.

The mobile-first approach organically leads to lớn a design that’s more content-focused, và therefore user-focused. The heart of the site is nội dung — that’s what the users are there for.

One caveat, though, is that điện thoại users sometimes require different nội dung than desktop users. Device-specific nội dung 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 lớn the mobile-first approach is that the small-screen breakpoints can better fit around the nội dung. Again, the alternative sầu is worse: having lớn squeeze an already plump design inlớn a tiny framework. But with the mobile-first approach, the breakpoints develop naturally around content, so you don’t need any awkward edits.

The Mobile-First Design Process

We’ll describe a process that helps our designers at

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

These presets layout the proper screen kích cỡ for you, so you can wireframe keeping only the nội dung in mind.

Our procedure follows these steps:1. Content Inventory — This is a spreadsheet or equivalent document containing all the elements you want lớn include.


Source: Maadmob

2. Visual Hierarchy — Prioritize the elements in the content inventory & determine how to display the most important elements prominently.

3. Design with the smallest breakpoints và then scale up — Build the Mobile wireframe first, then use that as the Model for larger breakpoints. Expvà the screen until there’s too much Trắng space

4. Enlarge touch targets — Fingers are much wider than pixel-precise mouse cursors, & so need larger elements on which to lớn tap. At the time of this writing, Apple recommends 44 pixels square for touch targets. Give sầu hyperlinks plenty of space, & slightly enlarge buttons, và make sure that there’s enough space around all the interactive sầu elements.”

5. Don’t count on hovers — It almost goes without saying, but designers often rely on hover và mouseover effects in their interactive sầu work. If you’re thinking mobile-friendly, don’t. There is no hover control for fingertips yet.

6. Think “app” — sản phẩm điện thoại users are accustomed to lớn the motion & 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 & complex graphics don’t display well when your screen is only a few inches across. Cater lớn thiết bị di động users with images that are readable on handheld screens.

Xem thêm: Các Cách Quảng Cáo Website Hiệu Quả, Công Ty Quảng Cáo Web, Quảng Cáo Trên Internet

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/máy tính computer và load up your hàng hóa on a real phone or tablet. Tap through pages. Is the site easy lớn navigate? Does it load in a timely fashion? Are the text & graphics easy khổng lồ read?

This is just a basic outline. For the complete guide to lớn our process, download the không lấy phí Content Wireframing for Responsive Design.

A Mobile-First Design Tutorial

Given that different devices need different layouts based on their screen size & orientation, it makes sense to lớn thiết kế multiple arrangements for your users. Luckily you can make your own responsive or adaptive sầu variations right in Sạc.

We’ll create an example và describe how khổng lồ scale up nội dung from a điện thoại thông minh to the tablet and desktop views. Go ahead & create a free trial & follow along below.

Join the world"s best designers whouse Sạc.

Sign up for a không tính phí trial.Try it for free!

Set your content priorities

A “mobile-first approach” differs from “desktop-first” in that we add information to lớn each progressively larger layout rather than cut away as we thiết kế smaller. Thinking di động doesn’t mean eliminating information. It means sorting information into lớn primary, secondary, and tertiary nội dung.

In this example, we know that the home page page should have sầu certain elements, lượt thích the company’s name and link to products. A blog post wouldn’t hurt either. But like we said, not everything will fit inlớn a điện thoại thông minh view, so we mix priorities based on what will achieve sầu 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 và nhân vật 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 danh sách, we can create with the confidence that our work will solve sầu a thiết kế problem of getting sales.

điện thoại thông minh View


How much bởi users need?

Thinking mobile-first forces us to lớn think about what’s really important. In this điện thoại thông minh view, the top-selling bike and newest model will lead directly to sales, so can we leave sầu other items — such as gift certificates, a less-popular mã sản phẩm, the lademo news — for inside pages. The final Điện thoại tư vấn khổng lồ action is especially prominent and easy to lớn hit with a single tap of the finger.

Tablet View


As we thiết kế for a tablet-sized view, we’re better able lớn add secondary information like additional products (e.g. “The Capacitor”). We can also expvà the navigation at the top of the page & add content that encourages sales without actually leading to lớn them — namely, the testimonial.

Because more options are available, this can be surprisingly more difficult than deciding what khổng lồ include in a điện thoại thông minh UI. The difference between secondary và tertiary elements is a blurry line, & temptation is strong to lớn include everything.

Resist the urge. Use the ordered nội dung danh mục. Like smartphones, space is still limited.

Desktop View


Finally, the desktop view can support as much information as you decide is important. This is where the trang chủ page can accommodate all of the information you see fit, whether or not it fits. Notice some of the additional nội dung we’ve sầu included:

Gift certificatesCustomer testimonialsBlog post exploring the newest Lightning Bolt bike

Design device-appropriate layouts yourself

If you’re using UXSạc Pin, it’s fairly easy to create different layouts for these views.

xuất hiện a UXSạc prototype.Tap “Add new adaptive version” at the bottom right of the UXSạc editor
Choose a preset kích thước or enter your own dimensions.You don’t have to lớn recreate everything from scratch. Choose a size from which lớn copy your design’s elements.

And that’s it. Switch between breakpoints by tapping the different sizes above your canvas, and adjust each to lớn suit your needs. If you’d lượt thích to lớn try prototyping mobile-first yourself, go ahead and start a không tính tiền trial in UXSạc Pin.

Join the world"s best designers whouse UXSạc.

Sign up for a không lấy phí trial.Try it for free!

Found this useful? Share with