Category Archives: CSS

Simple Responsive Web Design

Just completed my first pass at making my site http://greggrichter.com, ‘Responsive’. For those not familiar with the term, it simply means that I am optimizing my site to dynamically change it’s layout depending on the screen size and device type you are accessing it from.  So users who come to my site from a smart phone will see the site optimized for their device.  Where as someone accessing the site from a traditional PC with a screen size of say 1000px wide, will receive a different view of the site.  This is of course a different approach than redirecting users to a mobile specific version of the site like you might see when you go to The Seattle Times. In that method, users that access http://seattletimes.com from an iPhone will be redirected to http://mobile.seattletimes.com for a layout optimized for their device.  Two completely separate pages.  The Responsive method I’m implementing serves up the same page for all device and screen sizes and dynamically adjusts the content and layout as specified. *note, at the time of this blog post, I have not implemented the same responsiveness to this blog.  Let’s call that phase 2.

For this initial pass, I took a very simplified approach. First, I had no desire to completely change the existing fixed width layout and code for my site so I left it as is. Second, I then used media queries to present new layout’s for pixel width breakpoints that I determined through trial and error. For now, I am only targeting traditional smart phone width’s and tablets in portrait mode as the site as-is renders fine in landscape mode. I will at some point need to add in even more breakpoints as the small tablet devices like the Kindle Fire and soon to be released iPad mini, will introduce a new set of users.

If I were to create a site from scratch I would be using fluid grid layouts with images that scale and up and down.  But again, I am retrofitting my existing site and want a simple and effective approach.

My three layouts then are:

greggrichter.com on a standard laptopExisting. Which looks great on anything at least 911px wide.

 

 

 

 

Large tablet portrait. Let’s be honest and call it an iPad. Anything less than 910px wide, but greater than #3, which is…

 

 

 

 

 

greggrichter.com on an iphoneSmart phone. Which I have set at anything less than 595px wide as the break point but actually the content is only about 286px wide.  I just center it.  Soon I’ll put another breakpoint in at 300px and build a mini-tablet layout for the 300 – 595px range.

 

 

 

 

To implement this is extremely simple. For each one of the breakpoints listed above, I added a media query to the end of my style sheet in the following format:

@media screen and (max-width: 910px){}

Within the two {} brackets, I grab my already established elements, id’s, classes, etc and apply new style rules to them. Only screens with a width of less than what I specify will render it.

Order matters here, so do these in order from top to bottom with biggest screen size at the top and smallest at the bottom.

For my smart phone view, I actually removed quite a bit of content like an image slideshow and other items and simply achieved this by using the CSS style ‘display:none’ on elements I didn’t want to be shown. Word of warning, just because you are using ‘display:none’ doesn’t mean you aren’t still downloading the entire page contents to the device… you are. I can get away with this on my site because I kept it extremely light to begin with.

You’ll also need to be sure and add a meta viewport tag to your header as follows:

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″ />

If you want to get in deep with Responsive Web Design, then buy this book.

Also, here is a great article in Wikipedia on RWD, http://en.wikipedia.org/wiki/Responsive_Web_Design.

And here is a link to my sites stylesheet. Scroll to the bottom to see the media query pieces. http://greggrichter.com/css/gsr.css

Lastly, if you want to see RWD in action, load my main page, http://greggrichter.com from a browser on your laptop or desktop and then resize the browser from biggest to smallest, and watch the content change dynamically.

Simple Browser Detection and Redirect with Conditional Comments

There are numerous ways to detect a users browser and then do with them as you wish (redirect, alternate style sheets, etc). Most of this involves JavaScript or server side scripting of some flavor. All of which is fine and good, but I wanted an even simpler way to detect a users browser, without any client or server side scripting. So, I created a simple way to do this using conditional comments. Of course, when I did this, I thought I was a genius for about 2 seconds until I realized that it was so simple, that probably lots of people have done this… so I did a quick Google search and found exactly that. However, no two approaches are exactly the same, and here is my truly unique (because it came straight from me brain) approach.

For my current project (in development), Microsoft IE6 and IE7 will not be supported browsers (big shock I know). So I want my conditional comments to target any IE browser less than version 8 and prevent the user from accessing the site, and offer them alternatives to either, upgrade their browser, or switch to a more modern browser.

Now, before we get started, I must state that I did not spend a ton of time trying to make this aesthetically pleasing. If the site visitor is using IE6 or IE7 to access a website, then they should not be expecting a whole lot… there are no rounded corners, fancy fonts, transparencies, etc.  Just a bare bones message to get the point across.

Step 1 – In the body of the page, right before the closing body tag , I put the following html:

<!--[if lt IE 8]>
<div id="IEredirect">
<div id="IEredirectText">
<p>You are attempting to view this website using an outdated browser.  To view this site, please upgrade your version of Internet Explorer or consider using a more modern browser via the links below.</p>
<br />
<p id="safari">
<a href="http://www.apple.com/safari/">Apple Safari&lt;/a>
</p>
<p id="chrome">
<a href="http://www.google.com/chrome/">Google Chrome</a>
</p>
<p id="firefox">
<a href="http://www.mozilla.com/en-US/">Mozilla Firefox&lt;/a>
</p>
<p id="ie8">
<a href="http://www.google.com/toolbar/ie8/index.html">Microsoft IE8</a>
</p>
</div>
</div>
<[endif]-->

Step 2 – In my linked CSS stylesheet I apply the following styles to the unique ID’s:
/*begin IE redirect*/

#IEredirect {
position: absolute;
width: 100%;
height: 100%;
background-color: #000000;
z-index: 1000;
left:0px;
top:0px;
background: url(../images/bgBlack30p.png) repeat fixed center top;
}

#IEredirectText {
position: relative;
width: 500px;
height: 400px;
margin-left: auto;
margin-right: auto;
text-align: left;
background-color: #ffffff;
margin-top: 100px;
border-bottom: solid 2px #000000;
border-top: solid 2px #000000;
border-left: solid 2px #000000;
border-right: solid 2px #000000;
}

#IEredirectText p, ul {
padding-top: 20px;
margin-right: 20px;
margin-left:20px;
}

#IEredirectText a {
margin-left:60px;
font-size: 20px;
}

#IEredirectText a:hover {
color: blue;
}

#IEredirectText #safari {
height: 50px;
background: url(../images/icon_safari_bw.png) no-repeat left 0px;
}

#IEredirectText #safari:hover {
background: url(../images/icon_safari_color.png) no-repeat left 0px;
}

#IEredirectText #chrome {
height: 50px;
background: url(../images/icon_chrome_bw.png) no-repeat left top;
}

#IEredirectText #chrome:hover {
background: url(../images/icon_chrome_color.png) no-repeat left top;
}

#IEredirectText #firefox {
height: 50px;
background: url(../images/icon_firefox_bw.png) no-repeat left top;
}

#IEredirectText #firefox:hover {
background: url(../images/icon_firefox_color.png) no-repeat left top;
}

#IEredirectText #ie8 {
height: 50px;
background: url(../images/icon_ie_bw.png) no-repeat left top;
}

#IEredirectText #ie8:hover {
background: url(../images/icon_ie_color.png) no-repeat left top;
}

Step 3 – I put the following images in the above referenced “images” directory:

(don’t forget that last little square there)

Now when someone visits the page, they will see the image below with a 30% transparent black overlay background (in IE7) or a white background (ie6).  If they want to upgrade their browser, all they have to do is click one of the icons listed.  On hover, the icon goes from black & white to color.

Gregg – http://richterwebdesign.com