Striking a balance between visually engaging content and customer-focused context is crucial for the future of any website. Responsive web design is key to this balancing act. It adapts to the type of device and the screen size on which it is viewed. This means that your content automatically reorganizes to optimize for a specific context.
Media queries are CSS (cascading style sheets) determine how content is laid out in a responsive design framework. The data from media queries gets optimized for each individual viewer.
For example, a media query will tell you whether a page is being viewed on an iPhone 5 or a smaller screen. That simple data point tells you how much of the main content on a page will be visible “above the fold,” or without the need to scroll. Many websites display a large top section on desktop browsers, full of navigation menus and full-bleed graphics. If your site does the same, you can use a media query to display all of that at the bottom of the page. This prioritizes main content like blog posts.
Designing Beyond Screen Size
In the web design world, responsive web design is described as optimizing the content for context. Contextual web design caters to each user’s situation. But truly contextual web design is about more than just screen size. Location, device type, and time of day are just a few examples of data points which provide a far richer context when used together.
Media queries don’t provide designers with enough creative license. Instead, you can use a more a simpler CSS component, the class. A class in CSS is a way to reformat a common element by making it part of a subgroup. So if images fill the screen by default, a class can be used with the image element to prevent that behavior on mobile devices.
Looking Forward to the Future
The future of websites is the focus on context – more than the current media queries allow. This is not a new idea. If you Google alternatives to media queries, almost five million results appear. But implementation requires you to do a lot of work up front to get to know the contexts in which your audience finds your work.
Once you have at least a few common contexts, you can begin to look at these and other ways to move beyond media queries. This lets your creativity shine, and allows you to focus on people and not devices. Once you shift your perspective, your website can shine into the bright future.