Breakthroughs and Hardships in the Early Stages of Responsive Web Design

After presenting to our boss our product so far (that we were proud of-- me being quite impressed and satisfied myself), we realized (with the help of some constructive criticism) that we need to focus on getting a solid design framework concept down first, rather than just shoot around in the dark and hope that we hit something. So we put down the IDEs for a bit and decided to discuss design possibilities and choices for the time being. Since the website that we are designing for deals with energy conservation but in a highly interactive way, it was strongly recommended that we attempt to achieve a "game" sort of look to it-- that is, an interface that is very inviting and user-friendly.

One fellow group member had a neat idea of pursuing a "Tron" sort of theme, utilizing colors such as electric blue, neon orange, and red. Oh and black, of course. Lots and lots of black. This sounded like a good idea, and a pretty reasonable one too, since the site deals with electricity-- albeit the conservation of it. Everyone seemed to love the idea as well, thinking that it would be simple enough yet nice looking. However, for me who always questions the consensus, I had to think in my head whether or not this was actually an effective design theme or not, because it is quite a stretch from the "game" scheme that was originally suggested. "Would it be friendly for all users, or just for guys?" "Does/can it come across as having that 'game' sort of feel?" These are just some of the questions I have about using this theme, although if it can be achieved, then I have no problems with it. We decided to just bring this idea (along with others) to the table, and see what sort of feedback we get from others.

As for other design ideas, we agreed that having a floating navigation bar (such as the one utilized in this site) would be not only aesthetically pleasing but also functionally effective, although we came up with the idea of having it stick to the bottom of the screen instead of the top. We also came up with a whole bunch of other concepts, such as having navigation buttons that float on the bottom-right and bottom-left side of the screen in tablet size (and possibly mobile size) for those users who prefer to hold their iPads in their hands while using it (giving their thumbs a workout), and we also had the idea of borrowing the layout of Facebook, which has an intriguing design that nearly everyone can recognize and use.

In the past few days, my team and I met and discussed all these ideas (and more) to quite some extent, and it seems like we're making a lot of progress, but I must say that I cannot help but think that perhaps we're not thinking about things in the right way. Design and layout needs to cater to the users-- what they would enjoy and be able to navigate easily-- not what we the developers think is cool or easy to understand. Of course we're going to be able to think that it looks great and understand how it works just fine (after staring at it for months and months), but will the users be just as satisfied when they take their first glance at it and walk through the pages? We never really know for sure. But that is something that definitely needs to be kept in mind throughout the course of this website's construction, so that we can be proud of what we have built, and at the same time the users will be happily utilizing what the site has to offer.

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!

12 Sites to Responsive UI Design

It is a new year, and time once again to tackle on a new project. This time, I will be taking on a larger, more long-term project regarding Responsive User Interface Design of a webpage. Now, what is Responsive User Interface Design (or Responsive Web Design), you ask? According to this article, it is "the concept of developing a website design in a manner, that helps the layout to get changed according to the user’s computer screen resolution." Why, you ask? Well, if you think about it, just a few years ago, the only thing that webpages were being viewed on were computer screens, and although screens came in various sizes, even the smallest ones were at least 11 or 12 inches in length (this is before netbooks became popular). But within the past decade, portability has become a major desirability in consumer electronics, and the smartphones and netbooks were born as answers to this distress call. In even more recent history, just two years ago in 2010, the first iPad was launched, bringing another portable electronic product type to the market-- tablets. It's difficult to fathom that the iPad has only been around for two years, given its enormous popularity today, which is shared by countless other tablets out there. Casting a large shadow over its similarly-sized, underpowered, and less portable counterpart the netbook, tablet computers have dominated the market of mid-sized computing devices with its 7- to 10-inch screen size range. Therefore we can say that the three largest markets for computers-- and therefore website viewing-- are desktops/laptops, tablets, and smartphones. Now, these three categories of computers all have extremely different screen sizes, from small (2-4 inches on smartphones) to medium (7-10 inches on tablets) to large (12-27+ inches on desktops/laptops). Viewing the same webpage on different screen sizes is bound to be difficult if they are laid out the same way across all of them. Users would have to do a lot of scrolling and zooming on smartphones and so forth in order to navigate around the page-- and this is what people do have to do on most webpages, because the pages aren't designed with Responsive Web Design. Oh, what a pain!

But that is why my team and I will be exploring and implementing Responsive User Interfaces for our webpages, and hopefully you will begin to do so too! Just look at the examples shown in the article linked to above, and visit those sites and play around with the width of your browser to watch the magic of Responsive Web Design as the layout automatically shifts around nicely. Try them on your tablet or smartphone, if you've got one, and compare it to all the sites that aren't using Responsive Web Design. You'll wish that all sites would use it!

To get started with Responsive Web Design, there are two things that you will need to incorporate with your web site: HTML5 and CSS3. HTML is the language from which the core of all webpage structures are built upon, and HTML5 is the latest version. The following four links are those that I found the most useful in learning about and using HTML5.

The first is an indispensable reference for website building-- the W3Schools site for HTML5. This site has everything from detailed descriptions, tutorials, examples, and even sandboxes for trying out the various components.

http://www.w3schools.com/html5/default.asp

This next link provides a concise and visual explanation to what HTML5 is, and what it's all about. It is very useful as a reference as well as a starting point for beginners of HTML5.

http://www.focus.com/images/view/11905/

Next comes an intro to some of the new features of HTML5, and is a good starting point to learning what things are possible with HTML5. It also has some examples and provides links to other sites, which can be used to learn more about the topic.

http://www.whatcreative.co.uk/blog/tutorials/html5-for-beginners-use-it-now-its-easy/

Finally, a very handy resource with any programming language is a cheat sheet, and HTML5 is no exception. This cheat sheet is one that I find to be concise and sufficient. Paired with the W3Schools resource, using HTML5 is easy, as well as efficient.

http://www.webgranth.com/wp-content/uploads/2011/07/HTML5-Visual-Cheat-Sheet1.pdf

The other essential component for building websites is styling, and the standard way of doing that is with Cascading Style Sheets, or CSS. As with HTML, standards and features of CSS have changed over the years, and the latest standard for CSS is CSS3.

As with HTML5, my main reference of choice for CSS3 is the W3Schools site, providing useful explanations, examples, and opportunities to test-drive features.

http://www.w3schools.com/css3/default.asp

To get started with learning about and using CSS3, the following site provides a couple of simple examples to walk you through some basic features of CSS3. A good place to get a feel for CSS3.

http://www.webmonkey.com/2010/02/get_started_with_css_3/

The next site provides 10 techniques using CSS3. Some of these techniques are a bit advanced, but if you are looking to spruce up your website and really make it look professional, you will probably need to use these features.

http://www.netmagazine.com/features/top-10-css3-techniques

Finally-- as you can probably guess-- is a cheat sheet for CSS3. Now, there are a lot of CSS3 cheat sheets out there, but most of them are lengthy, hard to understand, and basically, I would not be able to use them. However, this cheat sheet is an interesting one (it's actually a "Click Chart") as it provides visual examples (along with the code for it), clear descriptions, and includes only the features of CSS3 that you are likely to (or want to) use.

http://www.impressivewebs.com/css3-click-chart/

With HTML5 and CSS3 covered, the only thing left to learn about is-- well, the Responsive Web Design, of course. The following web sites offer introductions, examples, and tutorials to get you on your way to creating Responsive User Interfaces for your web site.

The first site provides a "beginner's guide" to learning about Responsive Web Design, giving a rather in-depth look inside. The article is lengthy, but gives a very good overview of the subject.

http://thinkvitamin.com/design/beginners-guide-to-responsive-web-design/

The next two sites go hand-in-hand, the former describing three essential components for Responsive Design, and the latter going in detail on one of these components, Media Queries, which is a CSS3 feature. This is what allows the page to figure out what size the browser is, therefore allowing the layout to be set and scaled accordingly.

http://webdesignerwall.com/tutorials/responsive-design-in-3-steps

http://webdesignerwall.com/tutorials/css3-media-queries

The last link is to another article detailing in great depth the concept of Responsive Web Design, how it works, and gives tips on how to design a Responsive site. It also provides MANY example sites and explains the features that make them work nicely. Lengthy, but a very good read.

http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/

These twelve web sites are sure to give you an overview of not only Responsive Web Design, but also HTML5 and CSS3, which are essential core elements for creating a Responsively Designed web page. Read through these articles and use these references, and you'll be cranking out awesome webpages in no time!