As part of my fundraising effort for the Tour de Cure, I registered the domain “ridewithdavid.com”. I wanted an easy to remember domain that I could use as a portal to the fundraising page that the ADA provided.

So I created a basic web page that would redirect the visitor to my fundraising page after a few seconds pause.

I designed the page with some graphical elements and got it to a point that I thought it looked good.

The problem was, while the page looked fine on a normal desktop or tablet browser, it looked horrible on a mobile phone browser.

Here’s a screen shot of the page that is displayed on a desktop or tablet browser … notice the two graphical elements on the sides?

Those two graphical elements caused the page to look horrible when viewed on a mobile phone browser.

Here’s a screen shot of how it rendered on my iPhone browser…

After a bit of research I determined what I needed to do …  I needed to create a Responsive Web page. To do this I needed to figure out a way to cause the two side graphical elements to not display when displayed on a mobile phone browser.

There are a number of different ways to accomplish this … since the page was actually written in PHP, I could detect the browser type using the User Agent and simply not display the graphics if the user agent indicated the browser was a phone.  This approach was a bit tricky, as all the examples of detecting a mobile phone browser has a huge number of conditions they had to check, which indicated to me that the user agent information for mobile was in flux.

Another approach was to use CSS to control the elements. After a bit more research I found that I could use a “Media Selector” and screen width properties to establish styles based on the browser type.

After a fair bit of fiddling around, I got the mobile phone page to display quite nicely.

Here are the modifications I made to the page …

In the HTML headers, I added the viewport attribute telling the browser to scale the page to the device width.

<meta name = "viewport" content = "width = device-width">

In the CSS I added a new class, no-mobile-image, that would only be activated if the maximum width of the display was less than 640 pixels.  In this class I set the display attribute for the html element to none so it wouldn’t display.

@media (max-width: 640px) {
  .no-mobile-image {
    display: none;
  }
}

And, on the images, I added the no-mobile-image class.

<div class="img-border no-mobile-image" id="left-img">
  <img src="images/champion.jpg" width="160" height="134"/>
</div>
<div class="img-border no-mobile-image" id="right-img">
  <img src="images/redrider.jpg" width="200" height="114"/>
</div>

Here’s how the page looks with the modifications…

Now before you start going on about how easy & basic this is … keep in mind that I’m NOT a web designer.  This stuff is still new to me.

I’m pretty proud of what I was able to produce.