And So It Ends...

As we continue removing more and more unneeded divs, my goal for this week was to "complete" the profile page and continue to another if given the chance.

After my theme being rejected, I decided to use more realistic clouds for a background and change the colors of the widgets to green to give the page a more "natural, yet playful" feel. I'm not sure how this will roll with the group, but my friends say it looks okay. Once this was done, I learned that Twitter Boostrap contains a class that modifies table tags and makes them nicely responsive. However, it adds a weird hover action that might not work with mobile devices since you can't exactly "hover" with a mobile device. Here is my "final" result in both full and mobile size:

I had some extra time so I decided to move on to the help page. I was curious on making videos responsive so I decided to tackle that challenge. It after searching for a few tutorials, I found some code that I decided to use (and gave credit to) in my .less file. It works very nicely and the YouTube video actually responds to the change in the size of the screen. Also, I found out that YouTube has an opt-in trial to turn all YouTube flash videos to html5 videos by opting in here. Once opt in, all YouTube videos. Like the profile page, I removed other unnecessary div tags, which was fairly simple since I already knew what to look for. Here is my "final" result in both full and mobile size:

I will continue working through the weekend. My goals for the weekend will be to get it looking nice in a tablet size and fix the badge images in the profile page to make them respond nicely as well.

So Many Divs @__@

No one really likes to clean, especially when it comes to cleaning up code that seems like a child came him and started mashing on the space bar and the return key. However, when it's done, modifications and changes can be done much quicker. The goal for this week was to remove as many unnecessary <div> tags from the html as possible. This would reduce the amount of lines in the file as well as make the file look cleaner. Another part of this task required removing necessary "id" properties in the <div> tags that had to be there. In the beginning, I thought this would be a relatively simple task, however it was full of headaches just like every other task is.

For this task, I chose to clean up the Profile page from the Kukui Cup Website. Removing the extra tags proved to be pretty simple. However, this meant that indentation would be off. After removing as many extra <div> tags that I could find, I had to go back and fix the indentation of the lines of code that remained. This took a few hours and by the end, my head was spinning.

I had some extra time on my hands, so I continued to rework the page because the way the information was being displayed in the widget boxes was ugly. The widgets contained data pulled from a back end, so I had to create my own information for the sake of making the page look as it would with some information. Currently, at the full version, the information is displayed nicely, even though it covers multiple lines. However, when it gets to the mobile size, it looks a bit funny. This is mostly because the widths I am using for the table columns are fixed (I know  I'm not supposed to, but I needed some kind of idea of how long "100%" would be when determining the size of the table). I plan to fix the tables in the next couple of days to insure that they respond nicely, but for now, I'm more worried about the overall source code so that these changes can be made quicker.

Back to Responsiveness

Sorry for being MIA for a week. It was spring break and we were given a nice short vacation, but now it's back to work. This week was used to begin working on more of the Kukui Cup pages and making them responsive, and making them use our LESS file instead of the old and clunky screen.css.

For this task, I am currently working on the Profile page. Using the Twitter Bootstrap framework, I was able to get the page to be responsive, however, in my opinion, it does not look visually appealing yet. I set my page up similar to those of the tutorials we watched about Twitter Bootstrap using a 2-column layout and putting each widget into rows. It works, however the huge gap between the "My Badges" widget and the "My Achievements" widget throws the page slightly out of proportion. Also, I personally don't like how the widgets touch the edge of the page. Even though we're losing pixels, I personally feel that adding a small (maybe 10px) padding to each side would make the page look much better. The only problem might be the loss of pixels when viewing on a mobile device. Our group will meet soon to determine the fate of that padding, but for now, the most important thing is making the page respond nicely.

Another thing I've been working on, is trying to find a nice editor for LESS files. So far, no luck. I did manage to find one that is built on Eclipse's XText plugin, but it doesn' work. Even after fighting with it for an hour or so, no luck. If any other suggestions are out there, I would greatly appreciate it.

Not a lot of drastic changes have been made this week. I had a huge project due for another class so a large amount of time was spent considering a different layout. It still seems a little too plain in my opinion, but that is a topic for another time.

Doing More with LESS

This week was dedicated to working with LESS and working with making the Kukui Cup page responsive using the Twitter Bootstrap framework. After some reading and tutorial videos I felt like I was ready to take a stab at implementing them both into the Kukui Cup page. However, it wasn't with its own challenges.

Working with Twitter Bootstrap was actually not too bad. It was similar to using the Skeleton structure we tried using a few weeks ago, but a little more straight forward with the class names and exactly what they did. It came with a nice class that allowed divs to be put into rows as well as a 12-column system that allows divs to put into 12 even columns or other versions of it (ie. 3 columns of width 4, 2 columns of width 6, etc.). It seemed easy, until actually inserting the div tags around already existing divs. With a page already having a few dozen div tags, it was quite simple to find the opening div I wanted to surround, but finding the corresponding closing div was a task that took some time. Now that a few of the simpler pages are done (ie. news and profile) its time work on the others like 'activity' that contain fixed with width objects.

As for LESS, as expected it was WORLDS simpler than having to re-enter the same css code or having a semantically bad css file that is hard to read. LESS allowed me to save things like color and paths to pictures in variables to reuse them later in other lines of the code. This saved a lot of time since I wouldn't have to go back and search through what color I used or look up what color that hex or RGBA code was. There are still some problems however. When I try loading the page in Google Chrome, the less.js file throws an error and I am not sure how to fix it. I will be looking into it more over the next few days so that the file will work well in all browsers (or well, maybe not Internet Explorer).

Time to Bootstrap in!

After weeks of redesigning, we're finally moving on to the next step of redesigning the Kukui Cup website. We are now in the step of using Bootstrap, a simple HTML5, CSS3, and JavaScript structure from Twitter to make the site responsive. After watch watching a bunch of excellent tutorials (found here), Bootstrap seems so much easier to use than the previous frameworks that we have tested.

So far, all I have done is set up a local file structure to prepare to incorporate the new Kukui Cup website with Bootstrap. I am quite excited to begin work using Bootstrap as it seems WORLDS easier than a lot of other frameworks.

In addition to Bootstrap, I have started looking into "less" and good gravy is this going to make my life SO much easier. Sometimes, less is more and in this case it is more and will save me (and the rest of the group) a lot of headache in refactoring CSS files. Less allows us to declare "variables" and save things like colors to them. This will save us from hours of headaches in figuring what color is what and the overall semantics of the CSS file. Finally, some programming-ish features in website design.   

Narrowing Down the Palettes

This week, with the help of my coworker, I searched user-made color palettes on a site called Colour Lovers. It is a site where users create and share their own color palettes and where others (such as myself) can use them. For my updated theme for the Kukui cup site, I chose to work with the "w o r d l e s s . " theme that matches white, green, black, and beige together nicely. Through the process, I developed what I think is a nice layout, however, I am currently having problems designing a background that would match the layout. I found out quickly that using a preexisting image would be difficult as these colors are very light and pastel and would not work very nicely with the bright colors of a still shot image.

Because the Kukui Cup is about energy conservation, I want my theme to have a very "natural" feeling using greens and browns to enhance the experience. This is easier said than done. I've been spending hours looking up similar layouts to no prevail and even just going at it at designing my own. I've come up with a couple ideas that seem to work okay, but do not really match in my opinion. I feel like something is always missing. Below are some of the backgrounds I have been messing with; all designed from scratch or a preexisting image by me. The ones that look kind of weird affect the color of the container so to give it a "softer" look.

A Crash Course in Graphic Design

We're still currently working on creating a new "look and feel" aspect to the current Kukui Cup website and frankly, its been quite rough. For this entire week, I've been basically tackling various things head-on. For the Kukui Cup, I've been working on finding a color pallet that would work for the page, as well as designing a background that would be able to be nicely responsive, as well as match the overall theme of the page. Honestly, props to those who do this professionally because they must have a really good eye for color, images, and sizing of things. I was only able to create one theme this week because of all the craziness going on with my other classes. 

Although, I've been taking short notes on color pallets based on things I see elsewhere like stores, other websites, mobile, apps, etc. for colors that would seem to have a "natural" feel. The only problem now is actually implementing them into the website and making it aesthetically pleasing. This coming weekend is a long weekend, which means I'll have an extra day to work on a couple other color schemes. The hardest part seems to be finding a nice background that would match the widget-like layout of the pages.