Every so often I come across sites that I become really enamored with, and in the age of responsive web design it pays to pay attention when sites do it well. Marvel.com is one of those sites. Upon landing on Marvel.com, you’re greeted with a clear navigation system, which is something that we as cultured users of the internet have come to expect. Looking more closely, Marvel.com’s navigational system(on desktop view) offers a hover state, which is something we’ve also grown accustomed to.
But in the age of mobile and responsive web design, how do web designers solve the issue of mobile devices not being able to perform hover states? Web designers are now turning to media queries to create custom functions depending on the size of the screen the content is being viewed on. Notice in the mobile version of Marvel.com, they are using an accordion style for menu items which are nested inside it’s parent page.(instead of using a hover state)
What is a media query? Simply put, it’s a line of code that makes part of a website act in a certain way. For instance, you may have an h1 media query for screen sizes that are meant for desktop viewing that would look something like this:
@media only screen and (min-width : 1224px)
{
h1 { font-size: 50px; }
}
What this line of code is saying is that at screen sizes of no less than 1224, the h1 tag will be displayed at 50 pixels. Let’s say 50 pixels is too big for mobile devices, so we can create a custom media query just for mobile that would look like this:
@media only screen and (min-width : 320px)
{
h1 { font-size: 30px; }
}
While this is only one example of a custom media query, the most functional sites out there on the internet use hundreds if not thousands of custom media queries in their code. Gone are the days of creating websites intended just for viewing on a large screen. Nope, designers must now take into account all screens as well as knowing behavioral patterns that are specific to those devices. Knowing how users interact with their online devices will help you design content that looks good but more importantly functions at an appropriate level.
