The rapid spread of mobile devices has turned the world of web design upside down. Users no longer view web content only on traditional desktop systems, but are increasingly using smartphones, tablets, and other devices with a wide range of dimensions. The challenge for web designers is to ensure that their websites look good not only on a big screen, but also on a tiny phone and everything in between.
In brief, responsive web design means that the website will adapt according to the visitor’s device. A desktop user might see a widescreen layout with columns laid out across the page but to maintain readability the mobile device might only show a single column view of scrolling content. Web development responding to the format of the device.
Media queries allow designers to target styles based on a number of device properties, such as screen width, orientation, and so on.
Adapting our content for screen size makes much sense. Modern smartphones and tablets from a range of manufacturers have flooded the market and we are going seriously mobile – we have to be as accurate as we can.
So media queries are the way forward in web design …
There are still a few mobile phones that cannot understand media queries so the website must have a very basic layout incorporated to cover those. This can then be built upon to allow more complex layouts for intelligent devices to display content. Achieving a truly responsive design solution for all devices, from the smallest to the largest screens.
Device detection also has a place in web development – we can use it to target devices that support location services or GPS and add something clever if they do. For example if the visitor is mobile and browsing a retail site then the website can ping them they are near an outlet.
Also some of the styles and layouts don’t look to good on smartphones in landscape format so we can use device detection to change some of the styles in certain circumstances.
In summary it is all about making sure your visitors get the best possible experience from your website, whatever their device.