Responsive Website Design

When I have developed a website, for some time now I have checked it in Safari, Google Chrome, Opera, Firefox, Internet Explorer and on a smart phone.  This is to make sure it looks the way I intended in the “major” browsers and also when out and about.

With regards to smaller screens and mobile devices, I toyed with a mobile WordPress theme or two but they always looked a bit 90’s display wise (at least the ones I checked out), so I’ll be making my own there.

Another graphic designer made some inquiries as to my responsive web design skills as they wanted to subcontract some work.  As my skills regarding this were pretty much non existent, I decided to add them skill to my bag of tricks.  Given I cite my “corporate” website when spruking my design skills, I decided to have a bash at making this site a a responsive one.

After some struggling to get divs to not overlap each other (yay for absolute & relative positioning tags), the site wound up doing what I wanted.  On a small screen, the nav bars take up a grand chunk of screen space, but the site is meant to be viewed on a desktop – making it responsive was to learn how to do it.

In a followup to this, I made another website (the Gippsland 3 Day Tour) responsive.  This proved to be a bit trickier and I rewrote my site’s template and CSS files from scratch.  The things to fix here were:

  • -strava plugin needed to resize
  • -the main banner was a spry one and would not resize and position correctly
  • -the upper links would be rendered illegible by the banner artwork at small screen size
  • -a bunch of tables needed to be rejigged so they did not extend outside the bounds of their divs

For the most part, I got this site looking ok at a small screen size.  For this site, it should work on a mobile device as competitor may be viewing it while traveling to or at a race and potentially not at home over the long weekend.

To fix the upper navigation and banner overlap, I used a relative tag for the banner navigation so the banner image (in a separate div) would not overlap at smaller screen sizes.  I also gave the links a contrasty background.

The main navigation I fixed by ditching the spry menu and redesigning it using a “navbox” div for each menu item.  It is not an elegant solution and looks a bit clunky on my phone in a portrait orientation with squishy text, but at landscape it is acceptable.  I’ll need to revisit the code here if I want the text to dynamically reposition within each div as currently the padding is set up at specified pixels rather than em’s or percentages.  I’m thinking of hiding the nav divs at lower screen sizes and showing an alternate menu bar.  Next year when I skin the site to match whatever colours I choose for the event program, I’ll look into that.  Knowing me, I’ll probably do that sooner as hate to leave things unfinished.

After checking the site on all of the browsers mentioned above, I noted the footer worked, perhaps not fantastically, but adequately.  Previously I had a table there to position a logo to the left and have two lines of text to the right “wrap to the right” of the logo.  This was changed to an lhs image div with text wrapping, but due to the size of the logo, the second lie of text sometimes moves under the logo. To fix that up, I adjusted the text size in the footer.

The banner looked as I wanted it to in all but Internet Explorer, where a border was shown as the whole banner is a hot link to the index.html file. To take care of that I added an inline tag to remove the image border.

Check out the responsive Gippsland 3 Day Tour site here.

My next little project will be to reconfigure my cycling club’s WordPress website to be responsive.  I looked into that a while back but any coding changes stuffed the site.  The way things are set up, I cannot use my main style sheet and a media specific style sheet, so I’ll need to code everything within the main sheet making all the divs responsive.  I’ve also used quite a few tables on the site, so will have to recode those pages which will potentially be a PITA.  Good thing it is a labour of love! I am also thinking of freshening the site up as it is looking a bit crusty.