There are number of ways to go about this.  Some of the more common (and sometimes complex) ways of doing this is to:

1. Sniff out the user agent string and then based on the results, redirect the user to alternate pages.  The downside to this is that of course new devices and browsers are coming out almost daily.  So unless you plan on keeping that user agent string detection piece up to date, this can quickly become obsolete.
2. CSS Media Queries to specify and detect screen size and type and then provide the same page with CSS rules applied only towards the elements on the page that you want to display for that device.  This is a great approach and it allows you to use the html markup you have already created, but as of today lacks full support from some mobile browsers.
3. Detect screen size.  And this is the method I went with.  It does rely on JavaScript being enabled on the mobile browser, but that is going to yield a fairly high % of compliance.  In short, this method detects the browser size, and if less than a value you specify in the JavaScript, redirects the user to http://williamson.ws/mobile.  The downside here is that you are creating additional pages for mobile devices (more time & effort) but the method is minimal, long lasting, standards compliant, and simple to implement.

To implement:

Items of note about this site:

1. PayPal integration for extensive catalog
2. Outstanding custom fonts
3. Lightbox integration
4. Background image and site contents expand & contract to both window height & width

To see Deborah’s New Work live and in person she has an exhibit going on now through February 8th 2011 with an Opening Reception, Friday January 14th, 6-9pm.

Hours: Tues – Sat 10-6 & Sun 11-5

Gregg – http://richterwebdesign.com

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 #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

2 weeks ago, I had a very important meeting at my day job where a number of us gathered in a room, ate large quanities of pizza and watched the 1983 smash hit, WarGames.  By the end of the movie, I came away with 3 key pieces of knowledge:

1. Ally Sheedy looked pretty damn cute in 1983
2. The Seattle skyline in 1983 was just a touch different
3. I should… no I must build a website to pay homage to this movie, and to give me an opportunity to work on my ActionScript skills & boost my SEO (or so that’s how I justified it)

That night I purchased the domain, http://www.globalthermonuclearwar.net to which my wife asked, how many domains do we own now?  A lot… we own a lot.

Once I put together a baseline for what I wanted on the site, I found an outstanding tutorial on how to build a Tic-Tac-Toe game using ActionScript.  Perfect!

15-20ish hours later, I built it and here it is.  Simple, all Flash, as true to the movie as I could get it with the time I allotted myself, and to avoid potential cease & desist letters, ad-free.

A few points about the site:

1. All the code validates strict (which can be a pain in the arse for Flash sites)
2. All iDevice users (of which I am one) are auto-redirected here via this handy little JavaScript
3. The sitemap.xml is registered with Bing, Google, & Yahoo so you can easily find it again in the future if you happen to forget the URL, or your bookmarks get blown away, or someone changes your home pages to something else.
4. It’s not perfect, but it’s fun.

Lastly, if you lived under a rock in 1983 or go deaf anytime there is a conversation about 1980′s pop-culture, and are therefore unaware of this movie, or if you somehow forgot it’s awesomeness, check out the YouTube trailer below.

Gregg – http://richterwebdesign.com

Of course I realize that I geek out on this stuff way more than most.  But, between RWD & my day job as an IT Applications Manager, I spend an enormous amount of time in various browsers.  As more and more enterprise & personal applications are added to the web, our time spent there will obviously continue to increase.  Browser functionality and the User Experience will continue to evolve and there are likely features that don’t yet exist today that 5 years from now we won’t fathom living without… think tabbed browsers.  The browser makers (Mozilla, Opera, MSoft, Apple & Google) are in an all out war & like everything else, the competition brings big change & benefits to you and me.

Of course, being a Web Designer in Seattle, I would like nothing more than to see the hometown team from Redmond put together an adequate browser… but that’s not happening anytime soon.

Gregg – http://richterwebdesign.com

So, once we launched the site, it quickly became apparent that we needed to find a better solution for displaying images and we quickly landed on a Flickr integration.  Now, if you Google ‘Flickr Integration’ you will find countless ways to do this.  Most however require the ability to modify PHP (or other server side scripting) and that simply is a skill-set that I am not comfortable with yet (it’s on my list).  So my requirement was a Flickr integration that was front-end based and required no more than the modification of HTML, CSS, JavaScript, or ActionScript (Flash).

So, here is a run-down of a few that I liked and was able to quickly implement in a test environment for Matt…

4. Roy Tanck’s Widget.  What I like about this is the nice mouse control & the uniqueness of it.  Hover to the right and the widget spins right… hover to the left and it spins left.  The speed of the spin responds to your mouse as well.  I also like how you can set background color or transparency, and also change the size of the widget.  What I don’t like about it is it seems to be fairly limiting in the number of pictures you can display and in order for some to see a full size (or decent size) view of the picture, you must click the picture which rediects the user to Flickr.  What the client didn’t like about it… well, he best described this one as “The Whirling Dervish”.  Fair enough… so we moved on to #3.

3. Flickrshow.  I am cheating a little by putting this one in the list.  I didn’t actually put together a working example of this one for Matt, but it looks very promising, all though, not yet released.  I like the feature set, the simplicity of the controls, the ability to display an entire photostream or a set.  Since it’s not yet released I will be following this one closely and I am following the developers tweets to try and stay up to date on this one.

2. Flickr Slideshow Generator.  What I liked… the ability to display an entire photostream or a set, no whirling dervish, the ability to resize the gadget, I love how you get detailed info on the pic when you click it once and then click it twice to redirect to Flickr.  What I dislike… the controls are a bit wonky with the top and bottom hover states, the gadget had an odd transparency on it when I put it on Matt’s site even though I had no transparency set.

1. The winner (for now) – Pictobrowser. What I liked… mostly everything.  Controls and layout are very nice.  Ability to change size, color background, & a number of other parameters that can be adjusted.  What I don’t like… you can’t show an entire Photostream.  You must use a set or a group tag, which is a feature most of the others offer.  I did reach out to the developer in the hopes that feature might be added in a future release… we’ll see.

I came out of this exercise with two distinct affirmations.  1. I need to work on my PHP skills.  2. I should spend a little time and build my own Flash based Flickr integration with the controls, features and presentation I want.

Check out the final product on Matt’s media page http://www.mattcordier.com/media (note, a YouTube piece is coming soon to this page).

Gregg – http://richterwebdesign.com

I am excited today to officially launch Matt’s newest website, www.mattcordier.com.  Matt and I worked many many hours over the past few months on this site and dare I say we are both quite pleased with the final result.  Over the coming weeks I will undoubtedly write blog posts about various particular techy functions on the site, but for now, for today, let’s just let the website do the talking.

It’s worth noting that while the website is ready for your eyes and ears, come back often as Matt and I still have plans and work ahead of us to add more audio, video, & other content… not to mention Matt’s blog posts on his site too.

http://mattcordier.com -or-  http://thechicagodrummer.com

Thanks Matt, It has been great working with you.

Gregg – http://richterwebdesign.com

For any non-web developers that may be reading this, we (web dev’s) dedicate hours to the pursuit of building websites so that they look the same across IE, Chrome, Firefox, Safari, Opera, etc (lynx anyone?).  Take that to another level and understand that different versions of these browsers also render pages different.  A user viewing a web page in IE8 will likely have a vastly different experience in IE6… oh don’t get me started on IE6 and this of course doesn’t even cover the complete page redesigns for the various mobile devices out there.

However, until that magical day comes, there are some cool (free) tools, available at the ready.

1st up, Adobe’s Browser Lab: https://browserlab.adobe.com.  Now, I just started using this one and here is what I like so far about it:

1. Load Time. Once I enter the site and browser of my choice, the load time for the website is only a couple seconds.
2. Zoom. The ability to magnify up to 400% and get a great look at the pixels in a page on the browser of your choice.
3. Rulers. Get pixel measurements in the browser.
4. Side by side view. View 2 different browsers next to one another.
5. OS. View a browser in Mac’s OS X or Windows XP.
6. Delay. You can set the number of seconds to wait before taking the screen shot.  So you can wait for any Flash animation or scripting that is manipulating the page on load to complete.
7. Onion Skin. This allows you to take 2 browsers and lay them on top of one another so you can get a true representation of how the pages render differently.

OK, and if I had to find something to complain about:

1. OS. Need to expand the choices please.
2. Browser selection. Would like to see Opera included.
3. 1 Up View. Why does this left-align when onion skin doesn’t?  Maybe I’m missing a setting somewhere.

Another option out there is the Browser Shots org: http://browsershots.org/.  What I like:

1. Browser selection. It’s big.
2. Specifications. You can set screen size, turn JS off/on, and other great options.
3. Side by side view (kind of). Once you receive your results.  They all populate in handy little side by side icons that you can go between to your hearts content.

Complaints:

1. Browser selection. Umm, why isn’t IE6 an option when 4, 5, 7 and 8 are?
2. Speed. It’s slow.  And if you start to use this site frequently, or load the same site multiple times, you seem to get throttled.
3. View. It’s 3 clicks to view something in full size and no side by side, or onion skin comparison.

Now of course, before you deploy a new website you’ll need to actually test the functionality in all major browsers prior to launching, and neither of these tools will help you do that.  Personally, I do it the old fashioned way (only way I think), loading the website across multiple OS’s and multiple browsers and testing the website end t0 end.  But during the design and develop process, these 2 browser tools are a great resource.

Happy browsing

Gregg – http://richterwebdesign.com

When I am going through the design / development process, I often create some development directories for clients to view the progress on their new website and more or less watch it in construction.  With that said, this also opens up the potential to let a client see a site under construction that may not necessarily be optimized yet for all browsers, screen resolutions, OS’s, etc.  While my hosting service does give me decent insight as to these details when someone visits one of my sites, it’s nice to know up front what a client is using.

So, finding a tactful and easy way to direct your client to this website and have them email you the results with the handy built in email function could prove to be invaluable through the mock-up and build process.  If a client has their monitor set to 800×600 and they are running IE6… I wanna know as soon as possible!

Here’s the link http://supportdetails.com/ and here is a screen shot of the tool in action…

Gregg – http://richterwebdesign.com