Kukui Cup Responsive UI Week 2

We are currently into the second week of working on the project for the Kukui Cup and a lot of things have happened. Let's see, where to start off. Well, first of all, I switched groups. I am now part of the Makahiki-rui group that consists of three members plus myself. The group seems to have a much better communication and everyone is giving their best to contribute. Because of the change, it took me some time to figure out the group's code structure. After reading through code, it was actually quite simple, however I wasn't really sold on the use of a fluid grid.

Secondly, after having our previous site reviewed, the responsiveness worked, however, the page was aesthetically unappealing. Because of this, lately, we have been talking about possible designs for the page as well as possible color schemes to implement. At the same time, we have also looked into possible frameworks. We chose to try the skeleton framework as it was the easiest to read. However, actually implementing it into the current site was difficult. In the end, adding ID properties to already existing css files proved to be the most efficient for now.

As of now, we are considering using a color scheme similar to that of the movie and game, Tron. A dark background with an electric color scheme. The desktop layout will be similar to the currently existing one, the tablet layout will be similar to a video game where buttons will be at the bottom and a built in "screen" will be fixed in the center of the page and will show information. The mobile aspect will be similar to the current facebook mobile application. A simple large print interface with a menu tab that pops out offering the user options to go to other pages. It is still a working progress and learning how to do some of these things will be another future challenge for the group.

Because we are in the process of figuring out a layout, the responsiveness of the page is limited to just familiarizing ourselves and getting comfortable with CSS3 and HTML5. Once we have an agreement on a new site layout and have a working nonresponsive site up and running, making the page responsive should be easy. In theory anyway.

Attempt at Responsive Web Design

This week, our group made an attempt at redesigning an already existing webpage into a responsive one. For this experience, we chose to redesign the "news" section of the site as it was already shown to be in two columns. Our goal was to simply make the second column move under the first column once the page was resized. Then after tons of research, we decided to use the Skeleton framework as the source was the most organized and was easy for us to read.

Once we understood the examples provided, we began experimenting. Miraculously, after inserting a new <div> tag around the "2nd column", and calling the appropriate class from the skeleton.css file, it magically appropriately moved under the "1st column" after the screen was minimized. This is because the css files recognizes the screen size and allows the change to happen. This got us thinking about how to start making the other items on the page responsive, but since a lot of it are jqueries, it is quite difficult and requires slightly more research.

The Future of Website Design

Smartphones and tablet PCs are exponentially growing in numbers in the computing market. These days, people can literally carry a computer in their pocket or in their bag. However, to compensate for convenience, the size of the screens being used must be sacrificed to often times just slightly larger than a credit card. So how do we adjust for this? Mutlitouch compatibility introduced pinch to zoom and that made it slightly easier. It allowed users to zoom in to what would be tiny text then scroll around the page to read the material. This worked for a while (and is still in use in a lot of website) but can be frustrating to those who use smartphones and/or tablets to read regularly. So this is where HTML5, CSS3, and responsive web design come into play.

HTML5 is the next generation of HTML (Hypertext Markup Language) that allows developers to incorporate media objects such as video and sound without the use of a flash player. CSS3 is the next generation of CSS (Cascading Style Sheet) that allows the customization of objects through CSS, something that was also done through the use flash at most times. So basically these two things are replacing flash. And why replace flash? From what I understand, because flash is technically a third party application, it continues draining battery on the mobile device much faster than if the page were to simply render the HTML and CSS codes and nobody likes carrying around a dead mobile device. The combination of HTML5 and CSS3 allow web developers to create responsive websites that are easily read on any device rather it be on a 24" desktop monitor or a 4" smartphone screen. Below are some links to the various topics mentioned. Some give very distinct examples, some offer API information, and others are simply a more detailed explanation of the topic.


Links to helpful HTML5 pages
http://www.w3schools.com/html5/default.asp
http://www.switched.com/2010/05/11/what-is-html5-and-why-should-you-care/
http://msdn.microsoft.com/en-us/ie/aa740476
http://www.inmotionhosting.com/infographics/html5-cheat-sheet/
http://www.apple.com/html5/

Links to helpful CSS3 pages
http://www.w3schools.com/css3/default.asp
http://webdesign.about.com/od/css3/a/differences-css2-css3.htm
http://coding.smashingmagazine.com/2009/07/13/css-3-cheat-sheet-pdf/
http://css3generator.com/

Links to helpful responsive web design pages
http://ux.fusionapps.com/2011/12/23/what-is-responsive-web-design/
http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
http://msdn.microsoft.com/en-us/magazine/hh653584.aspx