Technology is constantly evolving. Long gone are the days when you could make a simple website, built for desktop, and tons of leads would come your way. Today, you have to build your site for both desktop and mobile visitors. In fact, you may even find that the majority of site visitors are on mobile devices, rather than desktops. Mobile versus desktop site usage varies by industry and website type, but the message is still the same... Your website has to be designed for mobile. For website owners, knowing how to tell if your site is truly mobile friendly is often difficult and time consuming. That's why it is important to find a great web design company that you can trust (hint hint, Ventura Web Design & Marketing).
While not everyone is a web design expert, we do believe that the more a store owner knows, the more successful the website will be. This doesn't mean that you should become the primary web designer for your site. If you did, you would never have time for your vendors, your customers, or your family. Nevertheless, the information below is presented in a "How-To" style so that you, the store owner, can understand what your web designer should be doing for you. I hope that these tips are easy to understand and help you to get the most out of your website design project.
Start from the Ground Up with Mobile-First Design
The best way to optimize your site for mobile devices is to start when your site is being built. You can approach your website build or redesign from a mobile-first perspective.
You might be wondering what the heck does "mobile first" even mean? It means to begin your design for the smallest screen possible. This approach may seem odd, but it has advantages over "traditional" design techniques.
The small size of a mobile device forces you to focus on what the most important features of the site are. This provides a solid foundation to build into larger sizes. Large display usually include all the bells and whistles. When you start with large screens, you have to strip away as you go smaller. You run the risk of losing features on mobile devices or making it feel like an afterthought.
With mobile-first design you can focus on content. This allows you to create a hierarchy of what's most important. An emphasis on user experience makes your site easy to use. Optimizing for speed allows more people to see your site. To truly have a site that's mobile-optimized, it needs to be built for mobile.
Mobile-First Breakdown:
- Design your site from the ground up for mobile devices
- Focus on content and essential features
- Build to larger size devices to expand on the core content and features
While all that is great, what do you do if your site was not built using a mobile first approach? Well, we've got some helpful tips to improve your mobile performance no matter how your site was built!
Size Your Images for Mobile
Let's talk about the elephant in the room: images! It's true, images are a huge contributor to heavy and slow loading websites on mobile. Technology continues to improve, many desktop displays are now 4k resolution or higher. This is great for the web, we can show so much more detail, and quality throughout websites. But, sometimes it's easy to overlook smaller devices, particularly mobile phones.
For example, let's consider two image sizes: a large desktop web hero image and a mobile hero image. Our example desktop version at full quality comes in at 923kb, while the mobile image is only 302kb (32.7%). Even then, you would be surprised how many websites don't change the image on mobile devices.
Image file types and quality have a lot to do with file sizes. For many images, it's possible to greatly reduce the file size. In the web design & development industry this process is called "optimization". Here's our example image sizes when optimized: Desktop = 207kb (-77.5%), Mobile = 68kb (-77.4%). That's a massive difference! Optimizing your images for mobile will have a huge impact on your site's performance.
Lastly, when it comes to image file types, the standard and most widely format used is the "JPG" format. JPGs are great for photos, textures & background images. They do lack the ability to be transparent. When you compress JPG files, it usually results in a slightly blurry or "fuzzy" version of the image. For this reason, they're not ideal for logos, crisp text or similar applications.
When you need to display a logo, text, icon or similar small elements, the go to filetype is "PNG". PNG files use a lossless compression algorithm. Lossless compression means you don't lose colors or quality when the file is saved. They also include an "alpha channel" used for transparency. The downside is that PNG files tend to have a larger file size than their JPG counterparts.
Image Size Breakdown:
- Resize mobile images to appropriate size
- Optimize images for smaller file sizes
- Use the correct filetype for the situation
Responsive Design Concepts
You may have heard the term "responsive design", but what does it mean? It's an approach to website design development in which the website responds to the user. The way that the site changes is usually based on screen size, platform, and orientation.
We build responsive websites using technology designed that responds to the user's device. From a practical standpoint, this has the advantage of allowing only one site to be built. Responsive websites support a huge number of devices. Without responsive design, we would need to build a site for each device.
Using this technology we can decide which images are seen based on the user's device. We can also change the layout and design styles as needed. This provides the most efficient version of the site for every device.
Responsive Breakdown:
- Make your site react to user's devices
- Create one website that works on a large number of devices
- Optimize image delivery, layout and styles for each size device
Reduce Code & Scripting Bloat
Even with "mobile-first design", other factors can affect how efficient your site is. One major contributor is your site's code structure and scripting.
With so many plugins, apps & other features that can be added to your site, it's easy to go overboard. Sometimes those features can slow your site down and make it less efficient. That's especially true for less powerful mobile devices.
The best way to remedy this is to decide what features are most important to your site and slowly add one at a time. Keep track of your site's performance before and after the addition. As you add more and more you'll notice that it may start slowing down. Don't give it too many tasks (or the wrong tasks) to do when a user arrives at the page. Try to make your website do the least amount of work needed.
Remove excess scripts, organize and minify code, "turn off" scripts that are unneeded. For many owners, this needs a developer to optimize the site without breaking it.
Scripting Breakdown:
- Watch out for code bloat and unneeded scripting slowing down your site
- When adding features, test, test and test again to make sure it's working as intended.
- Remove or alter scripts as needed to improve performance
Optimizing your site for mobile is a great way to improve your user's experience. This affects all areas of the business, particularly if you run an e-commerce site. Customers are more likely to buy if your mobile site works well.