Week 3 Outside of Class

This week outside of class, Kira, Alannah, and I all created wireframes for our website along with moodboards and postcard ideation. Kira has all of our combined work posted on her blog.
This is what I came up with for ideation (the wireframes on Kira's blog were a combination of all of our ideas and went through a short revision as we collaborated our work).

We also had readings assigned for this week. Here are my notes:

Readings on Mobile Web:

Pgs. 2-23

Pgs. 24-34, 48-51

2-23

fixed layout: the width simply says 800px which means that it doesn't ever adapt as the screen size changes.

fluid layout: the only difference in this source code from the fixed width layout is that the "width" is changed to "max-width: 800px" which implies that when the screen size allows, the wrapper should be 800px, but no bigger. As the screen size changes, the wrapper should adjust accordingly. 

media queries image replacement: This code says that as the screen adjusts, when it reaches 480px or smaller, the image at the top of the screen with be replaced with a smaller image. 

media queries image replacement: In this code, there are 2 screen divs that each have a different image as the screen size changes. It took me a while to understand the difference between the 2 image replacement sites, but I think that in the last one, the larger image size never changed, it just changed as soon as the wrapper became smaller than 480 px. In this one, however, the larger image adjusted as the screen size got smaller until it finally changed to the second image.

Media Queries - Wrapper Background Color adjustment: There are 3 different wrappers for 3 different screen sizes. The background color changes as the screen gets smaller. 

Mobile Web Designers Idea book 2-23

Mobile Specific-You can cater the content , site structure, and entire mission of the site to fit the usage of the site. Ex. HOW interactive conference, mobile version is used AT the event while the desktop version is used to sell and promote the event. 

Responsive- Site is based on a fluid design, a series of fixed width layouts or some combination of both. 

Fluid- design doesn't just scale to fit the space, it adapts along the way. 

24-34

Frameworks are a prepackaged set of code that gives our work a boost by dealing with the most common needs. 

Jquery is a collection of functions written in Javascript so a designer doesn't have to rebuild basic elements every time

Bootstrap is a CSS framework for building responsive sites. 

48-51

Foundation has resources that allow you to very rapidly develop website prototypes.

Fluid Images- Set width to 100 percent and it will scale with the container that it is in. 

http://alistapart.com/article/fluidgrids