A responsive design for your WordPress site is no longer optional – it’s a necessity. At least, it is according to Google’s updated algorithm, which penalizes site’s that aren’t fully optimized for mobile devices.
And Google’s algorithm update makes sense. According to comScore, mobile has become the leading digital platform, with total activity on smartphones and tablets accounting for 60% of digital media time spent in the US.
Using CSS3, you can update your site to make it responsive. Unlike other methods, such as Bootstrap, CSS3 is less complicated and a lot easier to learn and implement, but since there’s also CSS in Bootstrap, it’s great styling language to learn or brush up on for both beginners and pros.
In this post, we’ll go through the steps you need to take to make your website responsive with CSS3. Continue reading, or jump ahead using these links:
- Responsive vs Mobile-Friendly
- What Is the @media Rule?
- Defining Different Screens
- Styling for Screen Sizes
- Testing Your Site for Responsiveness
Responsive vs Mobile-Friendly
The terms “responsive” and “mobile-friendly” are often used interchangeably when describing a site, but it’s important to understand what both words really mean to ensure your site meets the necessary requirements needed to look great across all devices.
Sure enough, a responsive design is different from a mobile-friendly design by definition.
A fully responsive design fits perfectly on a smaller screen and has icons, images and other elements that are sized so they’re easy to see and use when you tap on them.
Mobile-friendly sites, on the other hand, just barely meet the requirements of being viewable on mobile screens. This also means they’re not responsive.
For example, a site can be considered mobile-friendly when you don’t have to scroll left and right to view all the content, but that also means the entire page and its content shrinks to make that happen.
Content becomes illegible unless you pinch the touch screen to make the page and its content bigger.
Sites that aren’t responsive or mobile-friendly display the standard desktop site across all mobile devices.
On smaller screens, you would need to scroll left and right to read all the content on the page since it doesn’t all fit on the screen. These types of sites are difficult to use on mobile devices.
Ideally, you want your site to be responsive and not just mobile-friendly. Luckily, CSS3 includes the @media rule, which has the tools to help you create a theme and site content that are fully responsive.
What Is the @media Rule?
To make your WordPress site responsive with CSS, you need to use the @media rule. You would use it in much the same way you would with regular styling with curly brackets, except this property encloses around other styles such as in this example:
With this structure, the enclosed elements take on the rules set by @media. You can define the type of media to display, such as phones and tablets, printers or screen readers. Once you choose a media type, you can then set their values in terms of sizing with an expression.
With this CSS rule, it can tell a browser to display specific content depending on what device is being used to view your site. This means you can create a desktop – or full – version of your site along with a whole other style that views well on smaller phone screens and tablets that visitors who are using those devices can see.
Your responsive site would be compatible with all major browsers and would be comfortably viewable for everyone.
In fact, all the major browsers have been able to display the @media rule for quite some time. Here’s a breakdown of the first versions of each browser that support it:
- Chrome – 21.0
- Safari – 4.0
- Firefox – 3.5
- Edge – 12.0
- Internet Explorer – 9.0
- Opera – 9.0
There’s so much you can do with CSS when creating a responsive site and it starts with choosing the type of media that you want to be responsive.
Defining Different Screens
First thing’s first: Start by backing up your style.css file for safe keeping in case you make a mistake and need to restore your original version. Once you have the file open and after you type in @media, you need to add the media type right next to it.
If you decide not to add anything, then it defaults to all screen types or the specific size you outline in the next step. You can use all as well.
Here are the other options you have for media types:
screen– You can use this for any screen from mobile phones and tablets to laptops and desktops.print– This one’s used for printers. You can create a printer-friendly version of a page with this type of media.speech– This media type is used for screen readers that analyze a page and read the text content out loud for those who are visually impaired.
Before the media type, you can also enter not to display a style for any screen that isn’t the media type you enter or only to display styling for only the media type you define. If you use either of these, you do need to also add a media type since this won’t be optional any longer.
With all this in mind, so far you can type something that looks similar to this:
Styling for Screen Sizes
Next up, you can get more specific and define the screen sizes that are required in order to apply the styles you enter later on. After the media type, enter and, then follow it with an expression. If you use multiple expressions, they should all be separated with and as well.
In this case, an expression is used to add media features such as sizing and they are entered in between parentheses. When you’re done adding the expressions, type your curly brackets and add your CSS to style your design for the media type you defined.
Here’s what it looks like when it’s all put together:
In this example, I used a max-width of 1024 pixels. This means I set the maximum width to the size of an iPad screen. This is also how you can use an expression to define a specific size of a screen.
Why would you want to do this exactly? When you use any of the following as expressions, you can control how different mobile devices view your site’s design and content:
max-width– The maximum size of the media type’s screen width that’s allowed in order to display the styles that are set within the@mediarule. Anything larger and the styles won’t displayed.min-width– This is the opposite of the above. It sets the minimum size of the media type’s screen width. Anything smaller and the styles won’t be displayed.max-height– This sets the maximum height a media type’s screen is allowed to have in order for the enclosed styles to be displayed.min-height– You can set a minimum height for a screen. If a screen is the same or larger than the amount you entered, the enclosed styles are displayed on the device.
Typically, the widths are usually set and you can leave out the height unless you have a specific style that requires it. Keep in mind that all devices are meant to scroll up and down to view all the content on the page and this is precisely why it’s usually not used.
Once you know the width of the different screen sizes for mobile devices, you can easily style your theme and content to display well for the specific devices you choose.
Here’s a quick reference for the widths of the screens for the most popular devices:
- iPhone – 640px
- iPad – 1024px
- Tablets – 1366px
- Android phones – 640px, 720px, 854px, 960px are the most typical sizes
- Extra large android phones – 1024px or 1066px
- Smaller Windows phones – 480px
- Larger Windows phones – 768px
- Smaller and older phones – 320px
- Netbooks and small desktops – 128px
- Ultrabooks/Laptops – 1366px
- Desktops and TVs – 1920px
If you use these screen widths for your screen media type, you’re on the right track to making your site look great across all devices.
There’s a whole treasure trove of other expressions and media features you can use. For example, you could also define the resolution, color ratio and color index for your media types, to name only a few.
Here’s an example of what these media features could look like to give you a better idea of how you could use them:
In this example, to display the content’s style the screen size must be at least 1920 pixels wide with a minimum aspect ratio of 16:9 for the device. Simply put, this code is perfect for displaying styles that are only for TVs and large desktop screens, which is great for showing high definition videos.
To see a full list of all the available ones, check out w3Schools and Mozilla’s developer site.
Testing Your Site for Responsiveness
When you’re done, it’s important to test out what you created to make sure it really does work across multiple or all screen sizes. If you have those devices handy, you can easily fire it up and test it out, but this can be difficult if you don’t have them all handy.
Luckily, there are many ways to test out your styles and site to make sure it’s suitable.
You can use the Window Resizer Chrome browser extension, ResponsiveResize or ResizeMe Safari extensions and Fire Resizer or Window Resizer for Firefox.
There are also many online mobile device emulators that you can use for free.
-
Responsivepx
I think this site is by far my favourite for checking a site’s responsiveness since you’re able to toggle the sample screen to any size you want. It’s practically a one-stop shop for site testing, at least when it comes to responsiveness.
It may be important for you to know that this site uses frames to display the URL you enter at the top of the page so some sites won’t display at all if they are coded to disable loading in a frame.
-
iPad Peek
This site is great for testing your site on the latest Apple devices including the iPad and iPhone. Just enter your site’s URL and you’re ready to go.
It may be important to note that if you have coded your site to not be displayed in a frame, then the site won’t display at all.
-
Mobile Phone Emulator
This is a great tool for testing for older and smaller phone sizes. You can easily see exactly how your site looks on the device you select from the drop down box in the menu.
You also see specs for the phone to help you figure out what you need to change if you find things look a bit wonky. The good news is, all sites should be able to load with this tool.
-
Screenfly
This site is able to load sites in certain sizes from desktops to tablets like the Kindle Fire, Samsung Galaxy Tab and Google Nexus 7, many phone types and televisions.
It also has other options available such as custom sizes you can enter, refresh, turn sample window area on its side for landscape view on tablets and smartphones and even a custom link to share your results.
This site doesn’t play well with any site that has disabled its view in frames so keep that in mind if it sounds as though this describes your site.
After you have tested your site and you’re satisfied it looks great across devices, there’s one more test you can try and it’s an important one: Google’s Mobile-Friendly Test.
All you need to do is enter the URL of your site and this tool displays a report and a displays a pass/fail score. If you pass the test, your site won’t be penalized by Google’s algorithm and may even give you a boost in your ranking.
If you’re not too keen on coding or even if you want to use the new skills you learned here, check out our Upfront theme. It’s infinitely customizable, has built-in mobile displays to test your site’s responsiveness and you can create a site with little knowledge of HTML or CSS. You can also create robust changes with some coding as well.
You’re All Set to Get Responsive
Ensuring your site is responsive is essential as more and more people access the web on a growing number of devices with different screen resolutions.
If you would like more CSS3 inspiration, check out Media Queries, a showcase of responsive website designs.
With all the tools and information in this article, you should have everything you need to make your site responsive with CSS3. Once you’re done, you can also test your site just to be sure you meet the requirements for responsiveness.
For more CSS tutorials to customize your site to the hilt, check out some of our other posts: Adding Social Media Icons to WordPress with CSS Sprites, Adding Custom Fonts to WordPress with @font-face and CSS3 and Make Your Images Pop with Super Easy and Sexy CSS Styling.
Tags:
