Responsive design with Omega

Microserve's picture
Mar 11th 2013

In this day and age most of us have a mobile device of some description, whether that's an iPad, smart phone, or one of the hundreds of the now alternative tablets that are available on the market. All these products have the ability to browse the internet, which is great, but what is not so great is that many have different screen resolutions. If your website is similar to this example you have to ask yourself the question.

  Would you keep browsing?

   Or like 61% of users, move onto another website that's mobile responsive.

   According to Google 67% of mobile users say that when they visit a mobile-friendly site, they’re more likely to buy a site’s product or service.

   Making your website responsive does not have to be expensive, there are some simple styling changes that can convert your website to a responsive website. And if you're using the Omega theme they are    already built in.

  Using responsive CSS

   Load up your website in Firefox or Chrome followed by Firebug. The Omega theme is very clever and will automatically add a style to the body class during window resize. This is very helpful and gives you the ability to set your CSS styling depends on the size of the window with no extra technical coding.

 

 

When the web page is first loaded firebug displays the body class responsive-layout-normal using CSS this is displayed as

body.responsive-layout-normal

However when the screen is shrunk like the examples above the body class will update.

1 = Used for most mobile resolutions, displayed in CSS would be

body.responsive-layout-mobile

2 = Roughly a tablets resolution, displayed in CSS would be

body.responsive-layout-narrow

3 = Desktop PC resolution, displayed in CSS would be

body.responsive-layout-normal

Styling a responsive menu

Below is an example menu that currently will not show correctly on most most mobile devices.

.responsive-layout-normal

The first thing to do is style the menu block, using firebug you can see that the ID for the menu block is #block-menu-block-1 in CSS this would be like:

body.responsive-layout-normal #block-menu-block-1 {
float: left;
margin-left: 253px;
margin-top: 66px;
padding-bottom: 10px;
width: 287px;
}

body.responsive-layout-normal #block-menu-block-1 li {
float: left;
}

As the window is shrunk the new body class will apply

.responsive-layout-narrow

This new body class is .responsive-layout-narrow, my CSS styling is now

body.responsive-layout-narrow #block-menu-block-1 {
float: left; margin-left: 93px; /*This prevents the menu moving under the logo during the screen resize*/
margin-top: 66px;
padding-bottom: 10px;
width: 287px;

.responsive-layout-mobile

During the next window resize.responsive-layout-mobile there are a few extra features to consider font size and button and text size being a main issue

In my example I have moved the whole menu beneath the logo and changed the font size of the button.

The css looks like this:

body.responsive-layout-mobile #block-menu-block-1 {
clear: both; /*Moves the menu under the logo*/
width: 100%; /*Fills the full width of the window*/
margin-top: 0px; /*Changed to move the menu up closer to the logo*/
padding-bottom: 10px;
}

body.responsive-layout-mobile #block-menu-block-1 li a {
background: #184A67; /*background color of the buttons*/
display: block; /*Makes the whole button a clickable area*/
font-size: 18px;
padding: 12px; }

#logo {
margin: auto; /*centers the logo*/
}

So in full the styling for a responsive menu would be this

/*--------FULL PAGE MENU VERSION--------*/
body.responsive-layout-normal #block-menu-block-1 { ~
float: left;
margin-left: 253px;
margin-top: 66px;
padding-bottom: 10px; width: 287px;
}

body.responsive-layout-normal #block-menu-block-1 li {
float: left;
}

/*--------NARROW MENU VERSION--------*/
body.responsive-layout-narrow #block-menu-block-1 {
float: left;
margin-left: 93px; /*This prevents the menu moving under the logo during the screen resize*/
margin-top: 66px;
padding-bottom: 10px;
width: 287px;
}

/*--------MOBILE MENU VERSION--------*/
body.responsive-layout-mobile #block-menu-block-1 {
clear: both; /*Moves the menu under the logo*/
width: 100%; /*Fills the full width of the window*/
margin-top: 0px; /*Changed to move the menu up closer to the logo*/
padding-bottom: 10px;
}

body.responsive-layout-mobile #block-menu-block-1 li a {
background: #184A67; /*background color of the buttons*/
display: block; /*Makes the whole button a clickable area*/
font-size: 18px;
padding: 12px;
}

body.responsive-layout-mobile #logo {
margin: auto; /*centers the logo*/
}

Give responsive styling a go and see how easy it can be for yourself. 

Mark Pavlitski's picture

You may also like...

High performance in Drupal Part 2: Lightning fast code

Mark Pavlitski, Mar 1st 2013
Welcome to the second part of our series on High Performance Drupal. Here we will cover techniques for speeding up your custom modules. Query...

Add new comment

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.

Related Blogs

Sophie Shanahan-Kluth's picture
Rick Donohoe's picture
Mark Pavlitski's picture