{"id":1276,"date":"2019-06-26T13:06:03","date_gmt":"2019-06-26T13:06:03","guid":{"rendered":"https:\/\/www.chittlesoft.com\/blog\/?p=1276"},"modified":"2024-08-22T07:52:33","modified_gmt":"2024-08-22T07:52:33","slug":"mobile-first-design-the-basics-the-pros-the-cons","status":"publish","type":"post","link":"https:\/\/www.chittlesoft.com\/blog\/mobile-first-design-the-basics-the-pros-the-cons\/","title":{"rendered":"Mobile-First Design: The Basics, the Pros, the Cons"},"content":{"rendered":"\n<figure class=\"wp-block-image size-full is-resized\"><img fetchpriority=\"high\" decoding=\"async\" width=\"770\" height=\"342\" src=\"https:\/\/www.chittlesoft.com\/blog\/wp-content\/uploads\/2022\/10\/Blog-Main-Banner-size-2.jpg\" alt=\"\" class=\"wp-image-9381\" style=\"width:1043px;height:463px\" srcset=\"https:\/\/www.chittlesoft.com\/blog\/wp-content\/uploads\/2022\/10\/Blog-Main-Banner-size-2.jpg 770w, https:\/\/www.chittlesoft.com\/blog\/wp-content\/uploads\/2022\/10\/Blog-Main-Banner-size-2-300x133.jpg 300w, https:\/\/www.chittlesoft.com\/blog\/wp-content\/uploads\/2022\/10\/Blog-Main-Banner-size-2-768x341.jpg 768w, https:\/\/www.chittlesoft.com\/blog\/wp-content\/uploads\/2022\/10\/Blog-Main-Banner-size-2-155x69.jpg 155w, https:\/\/www.chittlesoft.com\/blog\/wp-content\/uploads\/2022\/10\/Blog-Main-Banner-size-2-150x67.jpg 150w\" sizes=\"(max-width: 770px) 100vw, 770px\" \/><\/figure>\n\n\n\n<p>If you\u2019re thinking about launching a new website, it could be helpful to try this strategy: Mobile-first design.&nbsp;<\/p>\n\n\n\n<p>Mobile-first design offers a solution to the problem of catering to users today who use websites on different-sized screens. In general, it makes it easier to give users a consistent and seamless experience across devices.<\/p>\n\n\n\n<h1 class=\"wp-block-heading\"><strong>What\u2019s the difference between desktop-first design and mobile-first design?&nbsp;<\/strong><\/h1>\n\n\n\n<p>A desktop-first design strategy involves considering the desktop version of a website to be the primary, most complete experience of it. Concessions are then made as screen size reduces, to create a pared-down version of the original. Often, our smaller devices and their screens cannot handle a desktop-scale design, making interaction challenging.<\/p>\n\n\n\n<p>On the other hand, a mobile-first approach favors lightweight and low-bandwidth design that can be enhanced based on screen size and available capabilities. Additional content can appear when the device can accommodate it, but it isn\u2019t required for a satisfying user experience. Check out Luke Wroblewski\u2019s demo below to gain a better understanding of this:<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"How to Design Components for Mobile First | Intel Software\" width=\"1200\" height=\"675\" src=\"https:\/\/www.youtube.com\/embed\/xWInGelLGN8?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>In 2010\u2014a time when users were increasingly accessing websites and apps through a range of screen sizes\u2014Wroblewski made the suggestion that designers should design for the smallest screen first, i.e., mobile-first design.<\/p>\n\n\n\n<p>As more users began accessing websites on their mobile phones, web designers recognized the need for separate desktop and mobile experiences. Some created separate desktop and mobile sites. Eventually, responsive design became the standard, where the same desktop-first design could adapt to different screen sizes easily.<\/p>\n\n\n\n<p>By 2015, Google had confirmed that more users were using Google from a mobile device than a desktop. This was a major step towards user-first design, where user preferences and user experience began to take priority in design.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>To stay competitive, it\u2019s important to delight your users. Learn how to <\/strong><a href=\"https:\/\/www.chittlesoft.com\/services\/website-design.html\"><strong>transform your website experience<\/strong><\/a><strong>.&nbsp;<\/strong><\/h4>\n\n\n\n<p>Today, <a href=\"https:\/\/www.chittlesoft.com\/blog\/latest-website-design-trends-our-top-10-for-2022\/\">user-centered design<\/a> is a significant factor in determining website performance and, ultimately, business results. So, operating on the notion that most of your users will be on mobile, mobile-first design may seem like the obvious choice. Before you make that decision, however, take a look at a few pros and cons:<\/p>\n\n\n\n<h1 class=\"wp-block-heading\"><strong>Pros of mobile-first design<\/strong><\/h1>\n\n\n\n<h3 class=\"wp-block-heading\">1. <strong>Better UX across devices<\/strong><\/h3>\n\n\n\n<p>Mobile-first design focuses on helping users navigate a website or app with ease and efficiency. In other words, it\u2019s all about designing for seamless, frustration-free interactions. Because it is designed as a complete experience\u2014rather than a pared down version of a complete desktop experience\u2014it is more likely to offer a better user experience.<\/p>\n\n\n\n<p>In addition, designing for the smallest screen first makes for a more responsive design, where the website or app content and UI adapt more easily to larger screens\u2014i.e., it\u2019s easier to expand a mobile-first design to fit larger screens than condense a desktop-first design to fit smaller screens.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">2. <strong>Easy access to key information<\/strong><\/h3>\n\n\n\n<p>It gets people the information they need, regardless of where they\u2019re accessing your website from. When people look something up on their mobile device, they want <a href=\"https:\/\/www.chittlesoft.com\/services\/website-content-writing.html\">high-quality website content<\/a> that answers their questions or helps them make a decision. A mobile-first approach, which showcases the most important content, would help you meet that need.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">3. <strong>Fewer bugs<\/strong><\/h3>\n\n\n\n<p>The reason for this is simple\u2014less code means fewer opportunities for bugs. As mentioned, desktop-first involves starting with something complex that is then adapted to smaller screens. This code-heavy starting point entails a greater risk of bugs later on. With a simpler mobile-first approach, you will be able to detect and prevent bugs more easily.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">4. <strong>Better ranking on Google<\/strong><\/h3>\n\n\n\n<p>Google prefers faster load times, so how fast your website loads can have a significant impact on your results.<br><br>In July 2018, Google made page speed a ranking factor for mobile searches. This \u2018Speed Update\u2019 has caused companies across the globe to improve their page speeds. After all, as Google stated, \u201cfor every second delay in mobile page load, conversions can fall by up to 20%.\u201d<br><br>What we can take away from this is that speed is a priority. Chances are your competitors are actively trying to improve this. A mobile-first website will have faster load times as compared to a desktop-first one being viewed on mobile, where even hidden elements need to be loaded.<\/p>\n\n\n\n<h1 class=\"wp-block-heading\"><strong>Cons of mobile-first design<\/strong><\/h1>\n\n\n\n<h3 class=\"wp-block-heading\">1. <strong>Smaller canvas and less room for creativity<\/strong><\/h3>\n\n\n\n<p>This is an experience many web designers will have when switching to mobile-first design. They\u2019re used to a more accommodating desktop-sized space. Asking them to work on a smaller canvas with fewer tools could make them feel restricted. Depending on the designer, this could be either a welcome or unwelcome challenge.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">2. <strong>Uncertainty for clients<\/strong><\/h3>\n\n\n\n<p>Since they will not be able to view the desktop version until much later, your clients may not be comfortable with a mobile-first approach. Unless they have complete faith in your judgment, they may not be willing to move away from a desktop-first approach.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">3. <strong>Training time and costs<\/strong><\/h3>\n\n\n\n<p>To develop and execute a mobile-first design strategy, you will need a team that understands the new design methods it will involve. You may have to train your team or hire more resources to help take on this challenge.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>So when should you choose mobile-first design?<\/strong><\/h2>\n\n\n\n<p>It\u2019s important to consider the specific case when choosing between a desktop-first or mobile-first approach, but here are some broad recommendations to help you get started:&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Choose mobile-first design when\u2026<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The primary use will be on mobile<\/li>\n\n\n\n<li>The user flow is simple<\/li>\n\n\n\n<li>The industry in question is using mobile-first design<\/li>\n\n\n\n<li>Users tend to use your website or app on-the-go<\/li>\n\n\n\n<li>Your app or website requires simple features<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Avoid mobile-first design when\u2026&nbsp;<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The primary use will be on desktop<\/li>\n\n\n\n<li>The user flow is complex<\/li>\n\n\n\n<li>The industry in question serves their users primarily via desktop<\/li>\n\n\n\n<li>Users tend to prefer using your website or app at their computers<\/li>\n\n\n\n<li>Your app or website has complex features<\/li>\n<\/ul>\n\n\n\n<p>Ultimately, the choice of mobile-first design or desktop-first design comes down to a few key things: <a href=\"https:\/\/www.chittlesoft.com\/services\/graphic-design.html\">Your design team\u2019s<\/a> skills, your client\u2019s needs\/preferences, and, most importantly, what will create the best user experience.<\/p>\n\n\n\n<p>So, before you select an approach, it\u2019s important to weigh the pros and cons, and see which one will lead to the best outcomes for you.&nbsp;<\/p>\n\n\n\n<p>At <a href=\"https:\/\/www.chittlesoft.com\/\">Chittlesoft<\/a>, our web designers and developers make it a priority to ensure your users have a high-quality, seamless, world-class experience across devices. To create or refresh your website or app design, <a href=\"https:\/\/www.chittlesoft.com\/contactus.html\">get in touch<\/a>.<\/p>\n\n\n\n<style>\n.row {\n  display: flex;\n}\n.row .col {\n  flex: 1;\n}\n.nav .nav-item\n{\n      padding-bottom: 10px;\n}\n\n\/* Accordion styles *\/\n.tabs {\n  border-radius: 8px;\n  overflow: hidden;\n  box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.5);\n}\n\n.tab {\n  width: 100%;\n  color: white;\n  overflow: hidden;\n}\n.tab-label {\n  display: flex;\n  justify-content: space-between;\n  padding: 1em;\n  background: #2c3e50;\n  font-weight: bold;\n  cursor: pointer;\n  \/* Icon *\/\n}\n.tab-label:hover {\n  background: #1a252f;\n}\n.tab-label::after {\n  content: \"\u276f\";\n  width: 1em;\n  height: 1em;\n  text-align: center;\n  transition: all 0.35s;\n}\n.tab-content {\n  max-height: 0;\n  padding: 0 1em;\n  color: #2c3e50;\n  background: white;\n  transition: all 0.35s;\n}\n.tab-close {\n  display: flex;\n  justify-content: flex-end;\n  padding: 1em;\n  font-size: 0.75em;\n  background: #2c3e50;\n  cursor: pointer;\n}\n.tab-close:hover {\n  background: #1a252f;\n}\n\ninput:checked + .tab-label {\n  background: #1a252f;\n}\ninput:checked + .tab-label::after {\n  transform: rotate(90deg);\n}\ninput:checked ~ .tab-content {\n  max-height: 100%;\n  padding: 1em;\n}\n.FAQS-section{\n  display: none;\n}\n<\/style>\n<div class=\"row\">\n  <div class=\"col\">\n    <div class=\"tabs\">\n      <div class=\"tab\">\n        <input type=\"checkbox\" id=\"FAQsBlock\" class=\"FAQS-section\">\n        <label class=\"tab-label\" for=\"FAQsBlock\">FAQs:<\/label>\n        <div class=\"tab-content\">\n          <ul class=\"\">              \n            <div class=\"nav-item\">\n\n                <h3>1. How do you develop a mobile-first design?<\/h3>\n\n                <p>Mobile-first design entails designing a website for mobile\/smaller screen users first. Some steps include wireframing for the mobile screen, using a responsiveness framework for resizing and adjusting to keep the experience consistent across devices, minimizing text and visual clutter, and prioritizing the UI and UX for better interactions and user engagement. <\/p>\n\n            <\/div>\n            <div class=\"nav-item\">\n                <h3>2. Are mobile-first design and responsive design the same thing?<\/h3>\n\n                <p> No\u2014Mobile-first design is a strategy or design method in which a website is developed for mobile users first. It is an approach that designers can take. Responsive design on the other hand refers to the website\u2019s ability to adapt to different screen sizes, i.e., the design will respond and adapt to the environment it is opened in (e.g., desktop, mobile, tablet, etc.). <\/p>\n\n            <\/div>    \n          <\/ul>\n        <\/div>\n      <\/div>      \n    <\/div>\n  <\/div>\n<\/div>\n\n\n\n<style>\n.row {\n  display: flex;\n}\n.row .col {\n  flex: 1;\n}\n.nav .nav-item\n{\n      padding-bottom: 10px;\n}\n\n\/* Accordion styles *\/\n.tabs {\n  border-radius: 8px;\n  overflow: hidden;\n  box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.5);\n}\n\n.tab {\n  width: 100%;\n  color: white;\n  overflow: hidden;\n}\n.tab-label {\n  display: flex;\n  justify-content: space-between;\n  padding: 1em;\n  background: #2c3e50;\n  font-weight: bold;\n  cursor: pointer;\n  \/* Icon *\/\n}\n.tab-label:hover {\n  background: #1a252f;\n}\n.tab-label::after {\n  content: \"\u276f\";\n  width: 1em;\n  height: 1em;\n  text-align: center;\n  transition: all 0.35s;\n}\n.tab-content {\n  max-height: 0;\n  padding: 0 1em;\n  color: #2c3e50;\n  background: white;\n  transition: all 0.35s;\n}\n.tab-close {\n  display: flex;\n  justify-content: flex-end;\n  padding: 1em;\n  font-size: 0.75em;\n  background: #2c3e50;\n  cursor: pointer;\n}\n.tab-close:hover {\n  background: #1a252f;\n}\n\ninput:checked + .tab-label {\n  background: #1a252f;\n}\ninput:checked + .tab-label::after {\n  transform: rotate(90deg);\n}\ninput:checked ~ .tab-content {\n  max-height: 100%;\n  padding: 1em;\n}\n\n<\/style>\n<div class=\"row\">\n  <div class=\"col\">\n    <div class=\"tabs\">\n      <div class=\"tab\">\n        <input type=\"checkbox\" id=\"chck1\">\n        <label class=\"tab-label\" for=\"chck1\">Key References:<\/label>\n        <div class=\"tab-content\">\n          <ul class=\"\">              \n            <li class=\"nav-item\">\n                 When NOT to go mobile-first\n                 <a href=\"https:\/\/outwitly.com\/blog\/ux-design-when-not-to-go-mobile-first\/\" target=\"_blank\" rel=\"noopener\"> https:\/\/outwitly.com\/blog\/ux-design-when-not-to-go-mobile-first\/<\/a>\n            <\/li>     \n            <li class=\"nav-item\">\n                 Where do we go from mobile-first? \n                 <a href=\"https:\/\/www.uxbooth.com\/articles\/where-do-we-go-from-mobile-first\/\" target=\"_blank\" rel=\"noopener\"> https:\/\/www.uxbooth.com\/articles\/where-do-we-go-from-mobile-first\/<\/a>\n            <\/li>         \n            <li class=\"nav-item\">\n                 Mobile First, Luke Wroblewski\n                 <a href=\"https:\/\/www.lukew.com\/presos\/preso.asp?26\" target=\"_blank\" rel=\"noopener\"> https:\/\/www.lukew.com\/presos\/preso.asp?26<\/a>\n            <\/li>            \n            <li class=\"nav-item\">\n                 How to develop and test a mobile-first design in 2021\n                 <a href=\"https:\/\/css-tricks.com\/how-to-develop-and-test-a-mobile-first-design-in-2021\/\" target=\"_blank\" rel=\"noopener\">https:\/\/css-tricks.com\/how-to-develop-and-test-a-mobile-first-design-in-2021\/<\/a>\n            <\/li>   \n            <li class=\"nav-item\">\n                 Freepik\n\t    <a href=\"https:\/\/www.freepik.com\/free-photo\/discussing-mobile-app_5698277.htm#query=Mobile%20Design&#038;position=29&#038;from_view=search&#038;track=sph\" target=\"_blank\" rel=\"noopener\">Image by pressfoto<\/a> on Freepik\n            <\/li>                   \n          <\/ul>\n        <\/div>\n      <\/div>      \n    <\/div>\n  <\/div>\n<\/div>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>If you\u2019re thinking about launching a new website, it could be helpful to try this strategy: Mobile-first design.&nbsp; Mobile-first design offers a solution to the problem of catering to users today who use websites on different-sized screens. In general, it makes it easier to give users a consistent and seamless experience across devices. What\u2019s the [&hellip;]<\/p>\n","protected":false},"author":9,"featured_media":9384,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[59],"tags":[97],"class_list":["post-1276","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design","tag-website-design"],"_links":{"self":[{"href":"https:\/\/www.chittlesoft.com\/blog\/wp-json\/wp\/v2\/posts\/1276","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.chittlesoft.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.chittlesoft.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.chittlesoft.com\/blog\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/www.chittlesoft.com\/blog\/wp-json\/wp\/v2\/comments?post=1276"}],"version-history":[{"count":7,"href":"https:\/\/www.chittlesoft.com\/blog\/wp-json\/wp\/v2\/posts\/1276\/revisions"}],"predecessor-version":[{"id":12400,"href":"https:\/\/www.chittlesoft.com\/blog\/wp-json\/wp\/v2\/posts\/1276\/revisions\/12400"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.chittlesoft.com\/blog\/wp-json\/wp\/v2\/media\/9384"}],"wp:attachment":[{"href":"https:\/\/www.chittlesoft.com\/blog\/wp-json\/wp\/v2\/media?parent=1276"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.chittlesoft.com\/blog\/wp-json\/wp\/v2\/categories?post=1276"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.chittlesoft.com\/blog\/wp-json\/wp\/v2\/tags?post=1276"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}