A new trend in website design is the use of media queries, this is because of the amount of devices that can now access the internet all the websites need to usable on any device type. This is where responsive design comes into action, this is the process of discovering what device the visitor is using so we can change the design to adapt to the visitor.
For example if a visitor is using a desktop then the screen resolution is a lot more than on a smartphone, because of the higher resolution we can display more on the screen and increase the width of all elements. If the visitor is using a smartphone then we have a limited screen size so we may need to rearrange some of the elements to fit nicely on the screen.
In this article we are going to look at media queries, have a code snippet you can use to start your media queries and show how you can combine CSS transition with the media queries to show an animated change to your elements.
What Are Media Queries
CSS3 brings us many new features we use for our web designs and one of the features that can help improve the web site usability is Media Queries.
Media Queries are used by find out the current max resolution of screen and allow you to use different CSS for this state than normal CSS. This is what’s called responsive design it discovers what resolution the visitor currently has and responds to this by the use of Media Queries.
In the past the only way we can adapt a website to any resolution is to use a fluid page design but media queries allows you to do so much more. With media queries you can hide the sidebar of the page on smaller screen to show more of your content or you can increase the size of the font on bigger screens, which you can’t do with a fluid page design.
Alternatives To media Queries
If we want our website to be used by visitors on all devices and we don’t use media queries then what are the alternatives?
We can use mobile apps, this is a good solution and you will be able to create some nice looking apps which can alert people directly to their phone whenever something new comes on your site. The problem with this is that it will take up a lot more resources to create the app than to just use media queries. There is also the problem of different device operating systems, if you want to create an app you will have to create a different app for iOS, Android, Windows Mobile, Blackberry…etc, media queries will fix your site on any device.
Another alternative is use jQuery Mobile this creates a HTML5 based website which can be used on all the most popular mobile devices. The problem with this is that it’s another system to keep maintained on top of your website.
A similar solution to jQuery Mobile is to use the Server-side to find what browser the visitor is using and get a different stylesheet depending on what browser they are in. The down side is again you need to maintain multiple versions of your CSS file for all the different browsers.
Media queries mean you get to keep your original CSS file, it can be used on all the newest browsers and mobile devices, it’s easy to maintain and can be developed by your existing web designer.
Media Queries Boilerplate
Here is a code snippet to help get you started with your media queries it comes from a previous snippet I have posted it’s the Media Queries Boilerplate.
|
1 |
<br /> /*Smartphones (portrait and landscape) ———– */<br /> @media only screen<br /> and (min-device-width : 320px)<br /> and (max-device-width : 480px) {<br /> /* Styles */<br /> }</p><p>/* Smartphones (landscape) ———– */<br /> @media only screen<br /> and (min-width : 321px) {<br /> /* Styles */<br /> }</p><p>/* Smartphones (portrait) ———– */<br /> @media only screen<br /> and (max-width : 320px) {<br /> /* Styles */<br /> }</p><p>/* iPads (portrait and landscape) ———– */<br /> @media only screen<br /> and (min-device-width : 768px)<br /> and (max-device-width : 1024px) {<br /> /* Styles */<br /> }</p><p>/* iPads (landscape) ———– */<br /> @media only screen<br /> and (min-device-width : 768px)<br /> and (max-device-width : 1024px)<br /> and (orientation : landscape) {<br /> /* Styles */<br /> }</p><p>/* iPads (portrait) ———– */<br /> @media only screen<br /> and (min-device-width : 768px)<br /> and (max-device-width : 1024px)<br /> and (orientation : portrait) {<br /> /* Styles */<br /> }</p><p>/* Desktops and laptops ———– */<br /> @media only screen<br /> and (min-width : 1224px) {<br /> /* Styles */<br /> }</p><p>/* Large screens ———– */<br /> @media only screen<br /> and (min-width : 1824px) {<br /> /* Styles */<br /> }</p><p>/* iPhone 4 ———– */<br /> @media<br /> only screen and (-webkit-min-device-pixel-ratio : 1.5),<br /> only screen and (min-device-pixel-ratio : 1.5) {<br /> /* Styles */<br /> }<br /> |
Animating CSS Changes
With CSS we can add animation to your different elements, we can also assign animation to the different properties on those elements.
If we are using media queries then we are most likely going to change the Width and Height of an element so that it can fit on the page. As we know that width and height are changing we can add animation to the CSS property of Width and Height by using the following code.
|
1 |
<br /> /* webkit */<br /> -webkit-animation-property: -webkit-width;<br /> -webkit-animation-property: -webkit-height;<br /> -webkit-transition-duration: 1s;</p><p>/* moz */<br /> -moz-animation-property: -moz-width;<br /> -moz-animation-property: -moz-height;<br /> -moz-transition-duration: 1s;</p><p>/* opera */<br /> -o-animation-property: -o-width;<br /> -o-animation-property: -o-height;<br /> -o-transition-duration: 1s;<br /> |
Adding the above to an element of your media queries adds animation to the width and height changes of your media queries.
Websites With Animated Media Queries
Here are some websites which show what you can do with animated CSS3 media queries.
CSS-Tricks
Trent Walton
Naomi Atkinson
Converge
A Different Design
The Sweet Hat Club
Lapse
Have a look at the above websites, remember to change the width of the browser so you can see the animation at work.
How To Add Animation In Media Queries
Above in this article you have seen 2 code snippets, one for the boilerplate media queries and another to add animation to your media queries, now we can put these together to create media queries with animation.
First pick a device to change the layout in this example we are going to change the smartphone layout. We are going to change the width of the main element and the sidebar to be the same width so instead of being next to each other they will be on top of each other.
|
1 |
<br /> .main{<br /> width:800px;<br /> display:inline-block;<br /> }<br /> .sidebar{<br /> width:300px;<br /> display:inline-block;<br /> }</p><p>/*Smartphones (portrait and landscape) ———– */<br /> @media only screen<br /> and (min-device-width : 320px)<br /> and (max-device-width : 480px) {<br /> .main{<br /> width:480px;<br /> }<br /> .sidebar{<br /> width:480px;<br /> }<br /> }<br /> |
As you can see from the above we have a simple layout of a main div and a sidebar div they will be displayed easily next to each other on desktops as we are using a total width of 1100px. Then we need to change the width of these elements on smartphones because there isn’t enough room on that screen. So we change the width of both elements to be the max width of the 480px, as both elements are the same width they will appear on top of each other.
Now we can add the animation snippet to animate the change of width and height in elements.
|
1 |
<br /> .main{<br /> width:800px;<br /> display:inline-block;<br /> }<br /> .sidebar{<br /> width:300px;<br /> display:inline-block;<br /> }</p><p>/*Smartphones (portrait and landscape) ———– */<br /> @media only screen<br /> and (min-device-width : 320px)<br /> and (max-device-width : 480px) {<br /> .main{<br /> width:480px;<br /> /* webkit */<br /> -webkit-animation-property: -webkit-width;<br /> -webkit-animation-property: -webkit-height;<br /> -webkit-transition-duration: 3s;</p><p>/* moz */<br /> -moz-animation-property: -moz-width;<br /> -moz-animation-property: -moz-height;<br /> -moz-transition-duration: 3s;</p><p>/* opera */<br /> -o-animation-property: -o-width;<br /> -o-animation-property: -o-height;<br /> -o-transition-duration: 3s;<br /> }<br /> .sidebar{<br /> width:480px;<br /> /* webkit */<br /> -webkit-animation-property: -webkit-width;<br /> -webkit-animation-property: -webkit-height;<br /> -webkit-transition-duration: 3s;</p><p>/* moz */<br /> -moz-animation-property: -moz-width;<br /> -moz-animation-property: -moz-height;<br /> -moz-transition-duration: 3s;</p><p>/* opera */<br /> -o-animation-property: -o-width;<br /> -o-animation-property: -o-height;<br /> -o-transition-duration: 3s;<br /> }<br /> }<br /> |
Conclusion
That’s how you would create a an animated look with your media queries, now why would you want to use this? One of the main reasons is that it looks good when people are changing between screen sizes and you get to show off your skills as a designer with added CSS animation.
But most people don’t browse the internet by going to a web page and changing the browser size so what good is it? The main situation you would use this is on smartphones or tablets where you can change from portrait to landscape easily and with that change the visitor is changing the screen size. With a screen size change you can add the animation to the media queries.
Give it a go, let me know what designs you can come up.
