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

Pages Resizing

Nowadays, accessing the Internet or even any computer apps is not restricted to only laptops or desktop. Technology has improved to the point where mobile phones (e.g. iPhone) are increasing exponentially. Everywhere you go you will see almost everyone holds their iPhone etc to access the Internet or something on their gadget. It is convenient in a way where you can access important information on the go, but the problem arise when the content of the webpage has to be loaded onto a certain screen size (depending on the gadget) or even the type of gadget. Good thing there’s responsive web pages.

Through my research I found out that responsive web design responds to an action made by the user based on the browser’s screen size. Basically, as you enlarge or reduce the size of the browser window with your cursor or you hands (if using a mobile phone) the content of that web page will resize to fit perfectly depending on the size of the browser or screen of the mobile phone.

As the contents get resized the graphics will also get affected. This is where HTML5 (Hyper Text Markup Language) and CSS3 (Cascading Style Sheets) come into the assistance along with responsive web design. Normally the graphics on the webpage are incorporated with the use of Flash. However, as the web pages get resized then it might be a problem having to worry about resizing the graphics with a separate application (since Flash have to be installed separately). With HTML5 programmers are able to incorporate media such as audio and video and CSS3 allows programmers to include array of styles (e.g. boxes) without the use of Flash. This greatly reduces the trouble of having to manage graphics with a separate application. To read more please refer to the following sites I have found about HTML5, CSS3, and responsive web design.

HTML5 Links

http://radar.oreilly.com/2011/07/what-is-html5.html

http://net.tutsplus.com/tutorials/html-css-techniques/25-html5-features-tips-and-techniques-you-must-know/

http://msdn.microsoft.com/en-us/magazine/hh475813.aspx

http://www.pcworld.com/businesscenter/article/243130/adobe_flash_vs_html5.html

http://coding.smashingmagazine.com/2009/07/16/html5-and-the-future-of-the-web/

CSS3

http://www.webteks.com/tech_beat_archive/march_newsletter/faq_from_you

http://www.howinteractivedesign.com/technology/rendering-responsive-web-designs-using-adapt-js

http://www.sitepoint.com/detect-css3-property-browser-support/

http://www.1stwebdesigner.com/css/how-to-use-css3-orientation-media-queries/

Responsive Web Design

http://www.webdesignshock.com/responsive-design-problems/

http://www.business2community.com/online-marketing/responsive-web-design-vs-separate-mobile-site-%E2%80%93-which-is-right-for-you-0104949

http://blog.openviewpartners.com/responsive-web-design-best-business-mobile-approach/

http://www.quora.com/Why-are-some-responsive-web-designers-using-px-and-not-em