by Keith Bryant
Recently, we reviewed how you can create your own print stylesheets using some helpful CSS code. Using some similar styling techniques, you can also add responsive design to a WordPress theme or standard HTML and CSS website. Responsive design is a new trend in web development that perhaps seems complex – but it’s actually quite straightforward once you master some basic CSS rules.
What is Responsive Web Design?
With more and more website and blog visitors browsing the web from smartphones and tablets, web designers need to adapt to this by creating websites that are optimized for mobile browsers. The standard way of designing mobile websites has traditionally been to create different versions of your website for tablets and smartphones, meaning that you may create a standard website that is intended for desktop computer viewing, a tablet website that is optimized for devices like the iPad and Android tablets, and a smartphone microsite that is optimized for devices like the iPhone and Nexus smartphones, etc.
With the newer trend of responsive web design, however, a web designer can simply tweak the existing website using just CSS (adding, removing and modifying elements along the way), to create different versions of a website or blog without changing the content. Accordingly, many web designers use responsive design to create different website views for desktops, smartphones and tablets.
Do You Need It?
While implementing responsive web design is not mandatory from a functionality standpoint, it is a great option to add to an existing website or blog for the convenience of your site visitors and members. You’ve probably used a smartphone before to browse a website that featured only a normal, desktop view. In doing so, you may have noticed that browsing through the site wasn’t the easiest – it required a lot of zooming in, scrolling, etc.
The reality is that mobile web browsing is exploding. With more and more users coming to your site from mobile devices, it’s important to consider accomodating them. With responsive web design, you can use standard CSS rules to create a mobile-targeted version of your website that provides an enhanced user experience for these visitors.
The Basic Code
You can easily get started on creating your responsive design by adding some basic rules to the CSS stylesheet for your WordPress blog or standard HTML website.
First, though, you must add a viewport meta tag to the <head> section of your HTML page or WordPress theme’s header template. This tells mobile browsers to display the page at full size instead of scaling it:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
By telling these smaller devices not to scale the content, that means we have fewer pixels to work with. Our next step is to add the CSS code that controls the display in these small-screen situations.
This is where special @media only screen code comes in, which needs to be added to your CSS stylesheet. Here is an example: