Bootstrap Organized

            After several weeks of experimenting with layout, background color and so forth we finally move on to experimenting with a responsive structure for Kukui Cup website. Before I viewed the tutorials and read through what Twitter Bootstrap is I thought it was something from Twitter.

            Initially, when I went through the tutorial of the first version of Twitter Bootstrap I was amazed at how it has a nicely planned out grid structure. As I understand things can be in rows and with the use of the class of span it can create columns to have everything organized. Now with the version 2 we can go onto the Customize and Download page (http://twitter.github.com/bootstrap/download.html) we can customize what will be included in the bootstrap.css file.

            I tried playing around with the home.html by taking out some parts and try to test out how to incorporate bootstrap.css into the website to make it responsive. Although, not too successful, but I at least saw how the content reorganized in certain size of a browser (e.g. tablet size browser window).

            For now more experiment must be done to understand how the styles work, and how to organize everything so when browser window gets to any size it will work like the examples provided from download. Overall this is a good start of having a decision on what responsive style to use so everybody can be focus and have improvements in upcoming weeks.

Makeover 3

            As of last week I worked on moving the contents around to different position and put in a new background color (Refer to last week’s blog for more information paste link here). Unfortunately last week’s design was a little mush up so this week I took one page (news.html) and tried to take things apart to create a partial design (view picture below).

            The picture above shows that my idea is to take away the icons in the nav bar and move it to the side to be replaced by a vertical menu and the other contents would be almost as it is in the original design with only color changes.

            Through the week I had a confusion of what was to be done, which brought me to borrow another member’s theme and edit what the project supervisor asked to edit to make it look better. Basically, I checked out the project and copy over Sean Chung’s theme and edited it so that content box on home.html with the large icons would be curved and took away that horizontal black line. Later on I found out that we can still work on our own design by using original files and to put in new colors.

            Overall, it was a week of a little more progress of understanding more about HTML and CSS and glad the confusion of what needs to be done is over. For this upcoming week will experiment on finding color schemes/backgrounds that would make the site to have the potential to make it look appealing before moving on to moving things around to make a complete new site.

Makeover 2

            For this week on my Kukui Cup website project I took apart one of the webpages and try to reconstruct it into the possible design I want. Also, pick a background that involves less mixture of colors. Basically, I went from colorful to a simple background approach.

            Last week I was thinking more of a nature background color and trying to move some contents to some places. Refer to last week’s blog for more information: Makeover. This week while reconstructing I took away that nature background color and went with simple white background with a greenish background for content boxes. As for the text color I went with a darkish green color to bring out the background of the content boxes.

            I was successful in getting the bar with links (we call it nav-links) to be on the side and act as a side menu. This time I was able to keep it within the container but out of the header (the part in the website that contains the Home button, user and floor info etc). As for the other contents I wasn’t too successful with moving it to the positions I want.

            Overall, my problem is still with how to get the contents to move to a certain position on a page. Whenever I move it I have trouble figuring out which kind of tag or code to type into CSS to actually place it nicely at a certain spot. That is why this time I was able to have a simple background and move some content, but the others wasn’t successful so things does seem mush up together. I hope that soon I will figure out a way to get everything place nicely and apply it to every page. 

Makeover

            After a few weeks of just going in circles without much progress on the redesign of Kukui Cup or even applying responsiveness to the website, I finally took a step to understand the code of where or what piece of code makes up the image etc on the Kukui Cup website.

            Initially I took apart the Home button and the nav-links section (a bunch of links that needs to some other pages) and played around without the images. I was successful in getting it to display just text and still retain its original position.

            Then later on it transition into experimenting with understanding where the other content boxes are located in the html file by their div tags. Also, going through the css file to see how the shape that contains the content (e.g. news feed) are created.

            For the redesign of the site I was successful in removing the images from the nav-links and recreated it into a left side kind of menu. I also picked lighter green background and kind of beige color for the content boxes. Here’s the piece of code that I’ve modified to display the nav-links in a left side vertical menu.

Then I experimented with trying to move the other contents into places to make it evenly spaced out to look like organized columns. However, I was unsuccessful in getting the other contents to switch spots to other places within the container. Although, trying to rearrange the content boxes wasn’t successful, but I will continue to experiment and research ways to place the content boxes in certain spots and learn more CSS and HTML coding.

Color Scheme

            For this week I have been told that for website design we shouldn’t make use of dark backgrounds. Also, the problem of selecting a good background color or even just what picture to use as a background is harder than what I initially think. With this discussed I realized that in web designing besides having features that meets the memorability, learnability etc requirements from HCI (Human Computer Interaction), background is also another important aspect in web design. If the website has a complementing background along with other content then it can appeal to the user and attract more users.

            With that in mind I got introduced to this website call method.ac which has couple other pages that helps people play around with things that affects how appealing a website is; such as font spacing. One of the pages was related to color, color.method.ac, which is like a game that allows user to find the perfect color for hue, complimentary and so forth. Therefore, I played around with the colors and I find it really hard to find a good combination of colors. However, I found out that sometimes some combination that we think wouldn’t work turns out to actually be a good choice, as indicated by the site. Here’s one of the times that I got a good selection of color when I was playing around with the colors.

            In the picture above the outer circle is a darker shade of green and the inner circle is a lighter shade of green. Initially I never thought these two similar colors, only difference is in the shade, would actually be a good selection. I always thought that a good color selection involving two different colors would be a good selection because one color would bring out the color of the other.

             Overall, this week was a good chance for me to play around with colors and set my mind to decide carefully of what I can use for the background of the Kukui Cup website. For upcoming weeks I would like to test out how to implement code to create a new design and test how it should look like in mobile or tablet design.

Image Scaling and Framework

            For these past few weeks I have been working on getting the web page for the Kukui Cup news section to be responsive. Basically, trying to get the content on the website to be organized based on the browser window size.

            The challenge for these past few weeks was trying to get the images that represented menu selection along with the header (black background behind the pictures) to move into position as the browser window gets smaller or bigger. Here’s an example of the menu selection

            To get things started I went back to the basics to learn how to resize image with a CSS file so I can understand where to edit in the actual code. I happen to come across this website http://haslayout.net/css-tuts/CSS-Proportional-Image-Scale which taught me that resizing the image is related to the pixels.

            Besides learning the basics I also had to use a framework so that everything would be organized as the browser resizes. I have come across this framework call Skeleton http://www.getskeleton.com/. I find this framework to work quite well with the existing code. Only problem right now is to understand how to get things to a certain column or size and so forth with this framework.

            For now I will continue to play around and see what ways to have the images move along with the header while the browser window resizes. Also, experiment with the code to see if can put things in more columns so it will organized evenly.

Page Resizing 2

            Previously I was doing some research on HTML5 (Hyper Text Markup Language) and CSS3 (Cascading Style Sheets) to learn how I can implement code to transform web pages for the Kukui Cup project websites into a responsive web design web page(s). First is first, what is this project call Kukui Cup? Basically, it is an advanced energy challenge that aims to get people to practice positive changes in their energy behaviors.

            During this week of viewing the news.html file with my group I found out that incorporating responsive web design is a harder than what I expected. The hard part is mainly because of the html code included bunch of images and different sections (e.g. to display news and other results).

            Initially, I was testing with this responsive grid system call Responz http://dfsc.me/css/responz/. Unfortunately nothing happen because in there were differences in the class names that the news.html had that refers to the css file. Example the css file from Responz had no class name call container so the Responz css file didn’t work at all when I transfer over to the folder containing the news.html file. With the help of my team members I tested with another responsive system call Skeleton http://www.getskeleton.com/. Fortunately Skeleton provided a css file that has the class name call container and it happens to work find with certain parts of the news.html.

            From what I understand the <div> tags would put certain codes into a kind of collection for certain parts of the website. Basically, in those <div> tags I can give a class name from the css file so it will respond to the action (e.g. get smaller base on the specified amount of pixels) from the css file. Also, I notice that there were quite some images, which makes it harder to have it respond and organize when I change the size of the screen (browser).

           Overall, the most challenging part in this project was trying to get everything to be spaced out evenly when the browser was re-sized. It was still a great experience even though my team had difficulty finding the right parts to the images so we can figure out how to re-size it