- Posted by Pek Pongpaet
- On July 27, 2017
- 0 Comments
- mobile first, mobile first design, pwa, responsive, web
As smartphones continue to improve in performance, mobile devices can possibly replace traditional desktop experiences. It isn’t a surprise that most content is now viewed on mobile devices. If you have a website or web application, understanding how your content will be viewed is important. Creating a user experience that is uniform across all platforms is important if you want to engage your end users. This mindset alongside an increasing number of smartphones gave birth to the idea of mobile first design.
What is mobile first design? Knowing that a majority of your end users will be on a mobile device, it’s the idea of designing for mobile devices first and then scaling the application or website for all platforms. With frontend technologies advancing at an exponential rate, it’s very easy for developers to create mobile designs that function just as well as they would in a desktop environment. A mobile first design simplifies the design process for desktops because there will be an existing design to build from.
Of course, you can argue that if you can design from a mobile design, you can easily design from a desktop design, but you’d be wrong. Going from a small screen to a big screen design is simple; you’re creating more screen real estate so it becomes a matter of moving content to fit the larger display. On the other hand, from big to small screens is difficult because the content you’ve created now has to be shown on a much smaller device. Additionally, fonts and buttons will have to be enlarged to be viewed on a small screen. A mobile first design provides developers an easy blueprint for the desktop version. This ultimately saves development and design turnaround time.
Here is an example using Facebook’s desktop view. The desktop view is on the right and the left is resized for mobile screens. When viewed on a normal desktop aspect ratio, there are no problems. If the browser window is resized to the view of a mobile device, you’ll notice a lot of content is missing.
Here’s the same example using Facebook’s mobile view. Regardless of the view, the content is uniform and information isn’t lost. This demonstrates the importance of mobile first design; a mobile application can easily alter its appearance to compensate for extra screen real estate. A mobile first design will save your developers and designers a lot of time.
Although smartphones continue to increase, the trend of downloading native mobile apps have been on a decline. For many, there is no need to download a native mobile application for single time use. Designing mobile first eliminates the need for end users to install an application for a good user experience. Modern front end technologies allows developers to port mobile web applications to native mobile apps.
If you’ve been interested at all in web development, you’ve probably heard of Angular and React. These new technologies allow developers to really focus on mobile first design. These frameworks and libraries provide web developers the tools to create web applications that provide a universal user experience on all platforms. Ionic and React Native allows Angular and React developers to create native mobile applications using the language they’re familiar with. If the application was designed mobile first, it’d be easy for the developers to scale their native mobile applications to desktop devices. Their existing source code could easily be altered to provide views for desktop users.
This is a trend that is growing at an exponential rate. Even Google has been pushing developers to design mobile first. Progressive Web Applications are web applications that work on both mobile and desktop devices as if the applications are natively installed on the devices. This requires optimized assets being cached, and a mobile first design. It’s Google’s initiative to get more websites to embrace the growing trends of smartphones and its impact on content consumption.
If you are planning on creating an application, it’s important to understand your end users, their demographic, their browsing trends, and the types of content they consume. A small step into understanding your end users is understanding that, most likely, they consume most of their content on mobile devices. It’s conscious decisions to develop for these end user characteristics that will help you create engaging applications. Our team at Impekable works hard to design and develop with end users in mind. Clients will come to us with ideas and we will always attack the problem mobile first and move from there.