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. 

I'm In Control

Just like last week, we took another half-step back in the redesign of the Kukui Cup page. This, time we worked primarily on redesigning the back-end framework by ideally making it easier to make changes to all the pages at once by setting up "global" CSS files that would affect the all the pages when changed. At the same time, the plan was to also separate the "local" CSS files. This was a lot easier said, than done.

At the start of the week, I was able to more or less separate the "about" page's CSS file and originally thought that was a great idea. However, after continuing working on the others, I just confused my self and ended up starting over (which lead to much more headaches). In the end, it kind of worked out, but I feel like the theme files (which are still currently still the screen CSS file), could be broken down farther into smaller, more manageable files that would eventually lead to a smaller margin of error when making changes to the page. More could have been done, but it is midterm time and lots of stuff are going on at the same time. However, I've committed an equal amount of time to working on making sure this file structure will be as efficient as possible to prevent (or limit) bumps in the road later because of a bad file structure. I also did not have time to start looking into more color palettes (outside of the one used in the mockup from last week), but I do have some ideas in mind that I'm hoping to mess around with within the next couple of days.

Kukui Cup Redsign Challenges

So we've hit a bump on the road to redesigning the Kukui Cup Page. Its basically a "one step forward, two steps back" kind of deal. Last week, we had a crash course in responsive web design and more or less got a working page that nicely responds to the browser size, however the aesthetics of the page were horrendous. The white background and the neutral colored widget boxes made the site look bland and overall, boring. Because of this, production of the actual responsiveness to the page has come to a stop, and an overall redesign of the page aesthetics has begun.

Each of us were responsible to submit our own mockups as to what we felt the Kukui Cup page should look like. For my design, picking out a new color palette was the hardest part. The process of finding contrary colors that had a "natural, earthy" feel to it was quite difficult without running into a puke colored green or a poop colored brown. I personally have only dabbed into webdesign and graphic arts, and along with working with a graphic arts major a few years back, I learned quite a bit about Adobe Photoshop and was able to use that to create my mockup. My inspiration for my design was to keep it organized, making especially the navigation bar seem like it was one in the same with the page, by having it be part of the overall layout and not have it in it's own box floating around in space somewhere. However, with my new concept, comes new challenges. A lot of images are involved including the "tabbed" navigation bar. Making all of those responsive may be a bit of a challenge since we haven't got a working fluid image yet, but it is definitely doable.

Overall, the page came out to nearly what I wanted it, and modifications can always be made. If I can somehow get a hold of my old coworker and talk to him about color schemes that would help a lot since not many (if any) of us know anything about graphic design. If not, research about contrary colors would have to be done and I'm not sure how successful that would be. Here is what the page looked like after the first redesign.

However, after meeting with the group, and learning new constraint, especially how the "Quest" bar worked, changes to the left side bar had to be changed because a lot of text would be displayed when the "Quest" bar is used. After some redesign the page looks like this.