Responsive Web Design – Day 2: Oh Snap!

On day two of my responsive web design Odyssey, I was able to make some progress!  I had previously downloaded the Skeleton CSS framework because it was small and compatible with IE7.  I started by stripping out all the styles and began with just the media query size differentiators.  I kept the standard body styles, such as 0 margins, borders and padding.

Skeleton, like most response frameworks, works with a grid system with a set number of columns.  This is still to advanced for me, so I focused on just getting the header to display the way I wanted it to, which I was not able to accomplish using Skeleton as is.

The RiteTech web site header is a solid black strip flush against the top of the browser.  To the left is our logo and to the right is our phone number.  Since there is a bit of black space on 960 screens, I figured the format would also work well for screens 768 and higher (iPad held portrait) and up.

The code for this was pretty straight-forward:
<div>
        <div>
            <div><img src=”/img/logo.gif” /></div>
            <div>
                <p>Tel. (703) 561-0607 * FAX (703) 561-0608</p>
                <p>New Sales/Consulting:  Dial x. 101</p>
            </div>
        </div>
    </div>

.container { position: relative; width: 960px; margin: 0 auto; padding: 0;}
.header {background: #000; height:83px;}
.header .logo {background: #000; float:left; height:83px;}
.header .tagline {background: #000; float:right; text-align:center; padding-right:10px; padding-top:10px;}
.taglineMain {font-size:1.3em; color:#FC0;}
.taglineSub {font-size:1.2em; color:#fff;}

The container is 960 pixels wide with no margins or padding.  The header background is black and 83px (the height of my logo) high.  I probably have some redundant styles in there, but this is a work in progress.  The tagline floats to the right, and I added some padding to the top and right so it isn’t flush against the browser.

To reduce the size for 768 and higher browsers, all I had to do was change the width of the container:

  @media only screen and (min-width: 768px) and (max-width: 959px) {
        .container {width: 768px;}        
    }

The final size I played with was 480 and up, which would require the logo and tagline to be stacked.  I also decided to add a border between the two blocks so properly delineate the logo.

This is where I had to start playing with the styles a bit more:

@media only screen and (max-width: 767px) {
        .container {width: 460px;}
        .header {display:inline;}
        .header .logo {float:none;}
        .header .tagline {float:none; height:auto; border-top: 1px solid #C57227; padding-right:0px; padding-top:0px;}   
    }

The container size has been reduced, naturally.  I also removed the float for the logo and tagline blocks.  While that made them stack, the text beneath was running up into my tagline block.  To get rid of that, I had to make the header display as inline.  Still trying to gain a better understanding of that, but it did work.

I also made some other display changes to the tagline, like adding an orange top border and removing the padding from the top and right, since they are no longer needed.

As I continue with this project, I will be posting full page files and more code examples of my website.

I’m very excited!

Advertisements

Posted on August 31, 2012, in Responsive HTML, WebTricks. Bookmark the permalink. Leave a comment.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: