Hands on with Responsive Web Design

After reading 12 Sites to Responsive UI (along with many other references), my team and I decided to take a stab at getting our hands on creating a responsively designed web site. Taking a working page and attempting to modify it with responsive design, we collaborated for many hours and worked individually to hack out whatever we could with hopes of making it all work nicely. As is the case with most things (especially web pages), we ran into several problems and setbacks along the way.

One of the first issues was figuring out how everything worked; the HTML file was about a thousand lines long, with references to CSS and JavaScript files, making it quite an effort to sort through everything and understand what was going on. Many of the styles that were being applied came from CSS files that were not available in the page's directory, but instead were on the server that the site was being hosted on. Thus we realized that we needed to copy those style sheets and save local copies of them so that they can be edited. Finally, with everything that we needed, we could get started with editing. One of the main changes we did was to change the size of many of the components to percentages instead of hard-coded pixel widths, which allowed for fluid resizing according to the browser's width. Feeling a bout of success when this worked, we thought that we were on the right track, and to a certain point, we were. Continuing in this fashion, we made tweaks little by little to get it working, to say the least. Now, I know what you're thinking-- you're thinking, "hey, wait a minute-- changing element sizes from pixels to percentages isn't really responsive web design, that's just resizing things! Responsive web design means shifting things around and changing the layout! You didn't even mention media queries!" And you are absolutely right about all of that. Fortunately for us, the page that we were working on did shift things around when the browser was resized, but still, I don't think we could really call it responsive web design.

Eventually what I realized was that we should have kept most of the page-- that is, the HTML file along with the CSS files-- the way they were, and instead made just one style sheet that could be used to override styles when the browser was resized (using media queries to detect this, of course). This is probably the intent of using media queries, and would have made things a lot simpler, neater, and more consistent, rather than editing the HTML and at least two other style sheets. I created a style sheet just for media queries (following the format of this example page's CSS file, and sure enough, it worked, and made things a whole lot simpler. Now I really felt some success with working out responsive design, and as my team and I discussed and agreed, this is probably the route we should go in order to crank out the final design. Using media queries is quite simple once you get the hang of it, as it is essentially a conditional statement that allows you to apply certain styles under certain conditions.

One of the biggest challenges in undertaking this crash-course experimentation was the tediousness of checking to see if everything was working how it should be. Whenever I work with web design, I always use Mozilla Firefox and one of its extensions called Firebug, which is an incredible tool that lets you look at the page's HTML, tells you what styles are applied to it, and even lets you temporarily change the styles so that you can sample what the page would look like, before you actually edit the files themselves. However, with responsive web pages, you have to be constantly resizing the browser and checking to see how wide the browser is, so that you can apply the correct value in the media queries. I found a neat tool that tells you the dimensions of your browser, but it only works in Google Chrome so far, and so I could not integrate it with Firefox and Firebug, which made it a hassle to switch back and forth and also blindly guess values for the media queries. From what I've learned and experienced, with web design, it's all about the tools. If you have tools such as Firebug that allow you to efficiently and quickly test values out, it will save you a ton of time with styling the page because you won't have to guess or keep fiddling with it.

Overall, everything has been going well so far, if I do say so myself. We as a team have made some major accomplishments in discovering how things work, and what we can do to make it work. And at this point, it's all about making discoveries: learning what works, what's better, what not to do, and so on. I believe that we are ready to graduate from practice, and take on the task of tackling the real project. Bring it on!