Responsive Design Beyond Media Queries….Exploring Other Avenues!05 Sep 13, Kelly N. Wilson
Media queries, another blessing linked with responsive design (which we consider to be the cure to all design issues), is being widely used by designers. You’ll be surprised to find out it’s not all bed of roses, media queries have limitations, for this reason it is not the perfect, secret ingredient to crafting your responsive design recipe.
Quoting Ethan Marcotte: “Fluid grids, flexible images, and media queries are the three technical ingredients for responsive web design, but it also requires a different way of thinking.”
Why is it being stressed on ‘thinking differently’ is because while taking a bird’s eye view, your end product, the layout in this case should be user friendly, flexible and adaptable to fit into to any environment, any screen size. Your experience should not be hampered by the device you’re logged in from. To achieve this, the tools and technologies are improvised and used to enhance performance and extendibility. For this, you can wire up with us on regularly to bring change in your mind set.
Why Go Beyond Media Queries?
The goal is to have a website which will work for everyone on any device. Responsive design our savior hands down, allows for the layout of the website changing according to the size of the device, as per the media queries fed into CSS codes. However, when it comes to designing modular designs, media queries lose the battle, with a clear margin.
With web browsing on mobile phones is increasing exponentially these days; the requirement is to go beyond viewport and have container that can adapt instantly to any content. The aim is to respond to the size of the container, which can be done with modular design.
Don’t bother yourself thinking over the number of devices your content will be viewed on, you can’t precisely do that. A media query break point will not be so useful in this case, hence an approach towards content hierarchy will give better control as to what is viewed and when.
Element query based on elements, is similar to media query though not confined to browsers. Even if we are not able to surpass the complexity and incompatibility it has with CSS, it is worth giving a try, for experimentation sake, to enhance usability using different approaches.
As they say, “Responsive design” is not a single technology but a set of techniques. So then why not explore more techniques ?