Week 2B

Today in class we completed Micro Project #1. We were to redesign the Over The Rainbow Child Care Center's website. This is what ours looks like.

I worked with Alannah and Alexandra.

Week 2 Outside of Class

Outside of class I read "Build a Basic Responsive Site with CSS." Here are my notes:

• It’s not about making sites for mobile devices, it’s about adapting layouts to viewport sizes
• It’s becoming increasingly important to understand that a website should not be specifically about either the desktop or the mobile device, but about building in such a way that its layout adapts to varying viewport sizes
• One of the main reasons media queries have become more popular is the fact that websites are unusable on devices they weren’t considered for during design and build phases
• Many sites using media queries strip out information, hiding certain aspects of the site that they deem less important
• So the user with a smaller device gets an easier to use website, but with stripped-down content.
• A responsive site doesn’t necessarily have to be targeted at mobile devices; if it’s built correctly it doesn’t have to be targeted to any particular device
• The key element of flexibility in responsive design is a fluid layout width
• When it comes to the CSS, setting a max-width is a good idea in order to stop the site scaling across enormous screens – and this won’t withhold the page from shrinking
• One main issue when switching from fixed widths to fluid is images
• The simple fix for this in your CSS. Just set your image’s width to 100%
• Just be sure your image’s max-width doesn’t exceed the max-width of its container – otherwise it may pop outside

MAIN NAVIGATION SWITCH

• The main reason that you may want to switch the navigation is because the scaling down could become unreadable and hard to click
• FlexBox provides a method of automatically resizing elements within their parent without having to calculate height and width values
• As well as dynamically changing an element’s size, FlexBox can also apply properties to a parent that control where any empty space is distributed

I also decided that I am going to work in a group with Megan and Nicole on the event website.

Week 2A

Today in class we went over a lecture on responsive web design. Then we were introduced to our first project. The rest of class we had time to research websites for events that are poorly designed. These were some of the sites that I found:
http://www.mushroomfestival.org/
http://cecilcountyfair.org/
http://www.bestweddingshowcase.com/
http://www.chincoteague.com/pony_swim_guide.html
http://solancofair.com/

Week 1 Outside of Class

This weekend I purchased the textbook and read Responsive Web Design. These are my notes:

• Jeffrey Zeldman gave us the term "web standards"
• Jesse James Garrett changed the nature of interaction on the web by minting the word "ajax"
• Ethan Marcotte coined the term "responsive web design"

CHAPTER 1 - Our Responsive Web

• Web borrows the print concept of the canvas
• However, web is one step removed from their actual canvas because once people view their page online, it might look different to different people - some have different font choices, different color displays, and the shape and size of their browser
• The constraints that designers use can easily be broken
• A smaller browser causes text to be cut off and the use of a horizontal scroll bar
• Designers have many more devices and resolutions to design for nowadays
• Rather than creating spaces that influence the behavior of people that pass through them, responsive designers are investigating ways for a piece of architecture and its inhabitants to mutually influence and inform each other - "responsive architecture"
• Responsive designers need to let go
• Instead of creating disconnected designs, each tailored to a particular device or browser, they should treat them as facets of the same experience
• This means that they can craft sites that are not only more flexible, but can adapt to the media that renders them
• We need to practice responsive web design - we can embrace the flexibility inherent to the web, without surrendering the control we require as designers
• It takes three ingredients to create a responsive design
• A flexible, grid-based layout
• Flexible images and media
• Media queries, a module from the CSS3 specification

Week 1B

Today in class we went over the syllabus and filled out the student forms. We also briefly talked about the micro projects, day of design, and the day that we are going on to visit design firms. Then we talked  about the high school visit and Kira, Alannah, Mel, Megan, and I volunteered to present at Hempfield High School on Tuesday February 11th and 7:45.