How to make your website work on every device
Websites and web applications look different on different devices for a variety of reasons, but predominantly because all devices have a different size screen and different accessibility features.
We all have so many different devices now, from phones to tablets and various desktop computers. As we all work from different platforms, it is best practice to develop websites and web applications that work well across different devices where you can. Sometimes it’s not particularly relevant or necessary to have them accessible on every platform - like how mobile games are best played on mobile devices, you won’t normally try and play them on a computer.
When you’re considering what to input to your website or web application, it’s important to visualise and think about how your customer will use the platform on a different device and what that experience will be like. This is referred to as user experience (or UX in the industry) and relates to how easy it is for someone to use your website or web application - from the layout, accessibility features, content and the design (you can read more about that here). When you’re crafting your content, there are a few things we recommend that you take into consideration when creating and uploading your content so it’s responsive, we’ll delve into some of the common things you should look out for.
Websites and web applications are often scaled up or down to fill the screen you’re on. There are actually a few lines of code that can enforce this scaling to happen automatically - which is a super handy feature. If you’re visiting a website that looks strangely shrunken/squished, it’s most likely missing this component from the development stage. It’s always best to confirm that your development team will create a mobile-friendly service. This is especially important as over 50% of the global population use a smartphone - which is predicted to continue to grow.
In order for images to look great on a wide variety of devices and browsers, they do need to be optimised correctly. As touched on above, mobile, desktop and different browsers all have different resolutions as they are all different sizes. They need to cram your images into their own resolution, so if they aren’t optimised correctly, they’ll look blurry and squashed. Think of your image like water - to optimise it for drinking you might run it through a filter, but to optimise it for a swimming pool you'll add salt or chlorine. Work out what size and format is optimum for your website and work your image to suit.
Depending on the platform they are built upon, websites and web applications can have endless possibilities on what you can store and display on them, from PDFs, to videos, payment gateways and online learning tools. Not all browsers and devices support all media types, unfortunately, so it is worth investigating what the purpose of your website or web application will be, how your customers will use it and on what device, to determine what it will display.
The media you store on your website or web application will also affect how fast your page is to load. If the site is too big, it might take a long time to load pages, or crash for your customer. This can make your customer frustrated and drive them away from your website or web application - wasting all of the hard work you’ve done.
This time limit is actually not that long - Amazon calculated that if their website took an additional 1 second to load, it would cost them $1.6 billion in sales each year!
Whatever content you are looking to display online, it’s so important to think about its quality and relevance to your page and your audience. Original content that is relevant to what your user is looking for can help improve not only the UX but also your search engine ranking. Produce content that fits the purpose, and is well written - without anything copied and pasted from another site. Any of your images and graphics should fit with the overall design aesthetic of the site, and be of high quality. Don’t panic though - photos can be taken on your smartphone - they are very high quality these days, you don’t need to bring in a camera crew to capture your content.
Creating a website and web application that is suited to your audience and complies with industry best practice for all devices is a difficult process - which is why there are entire fields of developers and designers specialising in this space.
Additionally, having a website/application that is properly optimised for a range of devices will give you good favour with the search engines. Their algorithms are set to recognise sites and apps that have been properly tailored to their audience - because, with Google, the user comes first. So not only are you doing the right thing by your users by being responsive in your design, but you’re also giving yourself a boost in online visibility - which is always a plus.
Learning to think from the perspective of your customer and working alongside your development team can help create a final product that only fits your needs, but the needs of your audience.