Mobile First
A lot has been written in the last three years about the merits of “mobile-first” design, and with good reason, a recent comscore report indicates that over 60% of web traffic now comes from mobile devices. You’re forced to be deliberate about hierarchy.
You’ll have to optimize your content. Buzzword-y title aside, mobile-first design is exactly what it sounds like,thinking from the start about the way content is served to mobile devices, and making design choices that make things easier for your mobile users. While this approach can be challenging, starting small can have benefits that extend all the way up to the largest screens and can improve the quality and usability of your entire site.
Users are used to scrolling, but you still need to make sure they see the most important content when the page loads. The decisions that come out of arranging content in the linear format necessitated by narrow device widths can be useful in deciding what actions and messaging are truly the most important for the audience to see. This in turn can help the designer have a clearer idea of create a layout with a more intentional hierarchy on larger screen sizes.
Time to channel your inner Hemingway. Since there is less space to make your point, considering small screens first forces you to be efficient with your words. Ask yourself, am I repeating myself? Could I say the same thing in a simpler way? A wordy block of copy which might thoughtlessly be dropped into a roomy desktop layout becomes problematic on a small screen and can prompt a conversation about whether it is truly necessary to include.This thinking extends to the visuals as well. Does this complex graph (tough to read
You’ll have to optimize your content.
I have found that it is easier to make frivolous choices when only considering the space and data speeds provided by a desktop experience. Starting with mobile and considering the weight of assets you’re asking people to download in order to view your site can help you be more intentional about including certain visual flourishes.
For example, an illustration that consists of a big raster image such as a transparent .png flush with gradients and drop shadows — might be better as a simpler, flatter vector-based .svg. It will load faster, eat up less of your audience’s mobile data, and might even be cleaner and more visually appealing.
You’ll consider some of the toughest design problems at the beginning.
Deep navigation systems or a interactive visualizations are knotty design problems on their own. Trying to shoehorn a complex element created with desktop in mind into something that makes sense on a phone only makes things more difficult. Instead, by considering how complex interactions function on small screens first and then working up to desktop, you can create systems that function beautifully on both.
It’s important that you’re representing your brand in the best light regardless of where your users encounter it. By attempting from the outset to create a visually dynamic, memorable, emotionally resonant experience on a small screen, your finished product won’t feel full of concessions for users who access it on their phones.
Having considered the benefits outlined above, A logical question might be “great, now what steps do I follow to implement a mobile-first design workflow on my next project?”. I would argue, however, that instead of approaching mobile first design as a rigid, linear series of steps, it’s more useful to consider it as a philosophy which helps guide design choices you make.
This process isn’t about starting with a mockup of a mobile view then expanding it to tablet and finally to desktop. Rather, it’s about considering the smallest implementation from the outset, orienting your problem solving around making your experience as satisfying on mobile as it is on desktop. Being conscious of the interplay between different screen sizes can get you thinking about how the website grows and responds, and allows you to visualize the end product as what it is: not something constrained by a set of fixed widths, but dynamic and mutable, able to flow into a screen of any size.
http://www.addthis.com/blog/2016/10/03/why-you-should-design-mobile-first
You’ll have to optimize your content. Buzzword-y title aside, mobile-first design is exactly what it sounds like,thinking from the start about the way content is served to mobile devices, and making design choices that make things easier for your mobile users. While this approach can be challenging, starting small can have benefits that extend all the way up to the largest screens and can improve the quality and usability of your entire site.
Users are used to scrolling, but you still need to make sure they see the most important content when the page loads. The decisions that come out of arranging content in the linear format necessitated by narrow device widths can be useful in deciding what actions and messaging are truly the most important for the audience to see. This in turn can help the designer have a clearer idea of create a layout with a more intentional hierarchy on larger screen sizes.
Time to channel your inner Hemingway. Since there is less space to make your point, considering small screens first forces you to be efficient with your words. Ask yourself, am I repeating myself? Could I say the same thing in a simpler way? A wordy block of copy which might thoughtlessly be dropped into a roomy desktop layout becomes problematic on a small screen and can prompt a conversation about whether it is truly necessary to include.This thinking extends to the visuals as well. Does this complex graph (tough to read
You’ll have to optimize your content.
I have found that it is easier to make frivolous choices when only considering the space and data speeds provided by a desktop experience. Starting with mobile and considering the weight of assets you’re asking people to download in order to view your site can help you be more intentional about including certain visual flourishes.
For example, an illustration that consists of a big raster image such as a transparent .png flush with gradients and drop shadows — might be better as a simpler, flatter vector-based .svg. It will load faster, eat up less of your audience’s mobile data, and might even be cleaner and more visually appealing.
You’ll consider some of the toughest design problems at the beginning.
Deep navigation systems or a interactive visualizations are knotty design problems on their own. Trying to shoehorn a complex element created with desktop in mind into something that makes sense on a phone only makes things more difficult. Instead, by considering how complex interactions function on small screens first and then working up to desktop, you can create systems that function beautifully on both.
It’s important that you’re representing your brand in the best light regardless of where your users encounter it. By attempting from the outset to create a visually dynamic, memorable, emotionally resonant experience on a small screen, your finished product won’t feel full of concessions for users who access it on their phones.
Having considered the benefits outlined above, A logical question might be “great, now what steps do I follow to implement a mobile-first design workflow on my next project?”. I would argue, however, that instead of approaching mobile first design as a rigid, linear series of steps, it’s more useful to consider it as a philosophy which helps guide design choices you make.
This process isn’t about starting with a mockup of a mobile view then expanding it to tablet and finally to desktop. Rather, it’s about considering the smallest implementation from the outset, orienting your problem solving around making your experience as satisfying on mobile as it is on desktop. Being conscious of the interplay between different screen sizes can get you thinking about how the website grows and responds, and allows you to visualize the end product as what it is: not something constrained by a set of fixed widths, but dynamic and mutable, able to flow into a screen of any size.
http://www.addthis.com/blog/2016/10/03/why-you-should-design-mobile-first
Comments
Post a Comment