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!

Advertisement

Responsive Web Design – Day 1

After many years of focusing on the programming aspect of web side development – ColdFusion, SQL & jQuery – I decided it was time to get back into the game of better web site design.  After all, HTML is apparently up to version 5 and CSS 3 is now pretty much the standard.

This renewed interest is in thanks to a large part in my attending RIACon 2012 a few weeks ago.  There was a lot of focus on building sites for mobile devices and I was introduced to the wonderful world of responsive design.  Those of you who are not familiar with the term – as I was not – fear not!  It is a concept I was familiar with already – sites that update their design and layout when the size of the browser changes.  I could give you lots more background, but just do a Google search of jump to Wikipedia for more information.  One of the issues I face is one of my largest clients still uses IE7 in-house.  Anyone who has worked with jQuery UI knows how much fun IE7 can be.

I’ve been looking at some of the frameworks for a week or so, and finally settled on one yesterday.  I downloaded it and created a small test site on my computer.  I also browsed different sites that use responsive design and found some to use as starting guides.  After an hour or two I realized I was out of my element – no pun intended.  For years I’ve just been copying styles and making modifications to do what I desired, but I never really understood how the CSS worked when it came to layout.  I would just make change after change after change, hoping I could reach my preferred outcome.

So yesterday I decided that I’ve had enough of that.  I figured it was time to actually learn the advanced concepts of CSS so making something the work the way I wanted it to was just a matter of making a change, not hours of trial and error.

Because I’m old, I decided to go out and buy some actual, paper books.  I just learn better that way.

I will be posting regular updates on this journey for those of you interesting in seeing an old dog learn a new trick.  Maybe you’ll learn something along the way as well!