Mobile shopping has grown. This isn’t just phone use, but tablet sales have totaled 144 million units last year. In the third quarter of 2019 mobile devices generated 51.5% of global website traffic and that isn’t going to get smaller. So what do you need to do to stay ahead of the curve and make your web presence stand out among the competition? Phone apps, Responsive web design and Progressive Web Apps known as PWA’s.
Mobile apps have grown and have their own pros and cons, and they are not the best solution for every online business. There are some other ways for you to take advantage of this growing market: better responsive websites and PWA’s. Your business can take advantage of Responsive Design technologies to help gain an edge on the competition. And if you are an online store you can take it to the next level with PWA’s.
Responsive Design – Mobile First
The first step in any website development is creating a responsive website. Mobile first has been the buzzword for the last few years. No matter what type of website you have, an informational website, eCommerce website or some other kind of website, your website probably is already following responsive best practices for layout, navigation and functionality.
These best practices include:
1. Minimize and prioritize your layout and content. We accomplish this by making the best use of the screen real estate for the majority of devices. By creating websites “Mobile First” we can make sure the content the user sees is the most important. We accomplish this through layout and conditional loading of content. We also can help them navigate the site easier to get to the content they are most interested in finding. So whether they are looking for information, a service or a product they can find it quickly.
2. Make your Call-to-action easy to find. You can feature this with your navigation as well as a section on your website so when the user is ready to connect they don’t have to figure out how. With eCommerce websites, we can accomplish this by making purchase options and add-to-cart buttons easy to find.
3. Use SVG images if you are using computer generated graphics. This image type is not available for photographs, but is great for logos, icons, buttons and other UI assets so that these are fast to load, easy to read and scalable for desktop and mobile use. If your site is extensively using these UI assets then you should consider SVG format.
4. User Interface (UI) for both mobile and desktop use is important to consider because a mouse click is different than a finger tap. Clickable elements need to be at least 48 pixels in height – buttons, form fields, product options and anything else that requires user interaction.
5. Responsive Images are important if your site has a heavy use of photographs. You can just use a large image and have it scale, but if there are many images you may want to consider specifying a different image size for different screen sizes reflecting devices used. This may not be the most important on the list but this can help your page load speed especially if the user is using their mobile carrier connection to view your website.
One more feature to help with images is Lazy Loading. This is just a way to load images as they appear on the screen rather than loading all of the images at once. This makes the content that the user is viewing load faster and provides a better experience. And since the images are waiting to load, the initial view the user sees loads faster.
6. Typography is important because you need to make sure your content can be read as easily on mobile devices as it is on a desktop. This includes size, typeface and spacing.
7. Finally, take advantage of device features such as email, phone numbers and social media.
While this may not be an exhaustive list, this will help your website read better, navigate easier and load faster offering a great user experience. Every website, whether informational or selling products, should be built using a Mobile First approach and best practices. It is what we do for our clients. Everyday.
Please contact us or visit our website for reviews, projects and more information.
To take your web presence to another level, stay tuned for Part 2, PWA’s – Create an App-like Experience for Your Online Store.
#magento #magento2 #ecommerce #pwa #matt6studios #webdeveloper #webdeveloperusa #vuestorefront