With today’s wide variety of devices, it has become even more important that a company’s website works on most of them. It’s highly difficult to make sure that it works on 100% of devices (just think about the amount of Android phones on the market today!). But, it is possible to make them work well on 95% or more. The trick is called responsive websites. There are quite a few ways to achieve this, and we’ll go over some of them.
Any template worth it’s money will be responsive. Before you spend money on that WordPress template, make sure that the site works on mobile and computers. Just point your phone’s browser to the demo and see if it shows up well. If it requires to be zoomed in then it’s not a responsive site. If you don’t have a phone that you can use, then open Google Chrome and then use it’s developer tools by pressing Ctrl + Shift + i on Windows. Then, open the device emulator and now you can choose from a wide variety of devices. You can see how site reacts to different screen sizes and how it’ll load when on varying internet speeds.
If you’re building your own company site then there is are neat code snippets called media queries. What they do is simple. Basically, you’re telling the browser that at certain widths, change the layout of the website to fit the user’s needs. For example, when the browser width is over 700 pixels then show all five columns. However, if it’s less than 400 pixels, then only show two columns. Using this, you can make sure that the pertinent information is showed on smaller screens and extra flair is shown on larger screens. A good tip is to not have more than three media queries. Any more than that will become confusing and there’s no need to change the website layout every 50 pixels!
When building a site for any use, it’s important to think of the mobile users first. This goes double if what you’re aiming for is a responsive site. In the previous section, we used media queries to show the most important information on smaller screens. This is where one should start. Map out what information is absolutely needed for the site to work. If it’s a company site, then make sure you have the services, a picture or two, and how to place an order. Anything else like employee of the month don’t need to be on the smaller screens. Once you have what you need, you can add more information if the user views the site on a bigger device. This way, you’re not cutting down on information, but you’re building up on it. It’ll look more natural and those on a wide variety of devices will be pleased.
There are quit a few ways to make sure that a website is responsive. It’s a mandatory thing to do in today’s world since a majority of people access sites on their mobile devices. If your company’s site looks beautiful on almost every device, then it’s guaranteed to not turn anyone away.