We all know by now (or at least we should know) the importance of mobile design when it comes to websites. With mobile and tablet taking over desktop as the most used way of browsing the web, it is important now, more than ever, to make sure your visitors have the best experience no matter the device they are using. This is also the reason why designers are flipping the script and designing for mobile first.
Responsive design is in essence is a design that adjusts (or responds) to the size of the screen it is being viewed on. Generally this is done by calculating the width of the screen, but occasionally you may also want to use the height. As the screen width gets smaller you will likely want to change elements on your website such as font size, number of columns, alignment, visibility and other variables to give the visitor a better experience. In terms of responsive design a better experience is one that allows the visitor to easily read information, view images, click on links and navigate your website. If your website is not responsive then anyone viewing on mobile will have the annoying task of zooming in and out and scrolling horizontally and vertically just to read your content.
Take a look at the example below of how the site changes from a laptop screen to a mobile screen, and the difference between a responsive website and a website that is not responsive.
Laptop Screen:
As can be seen quite clearly from the example above, a responsive design has a huge effect on user experience. So the question you need to ask yourself is “Is my website responsive?”. Luckily for us our friends over at Google have a handy tool that tells us if a website is mobile friendly or not. All you need to do is visit Google’s Mobile Friendly Test and enter your URL and it will give you the good or bad news!
