Devin Drennen Advanced Design 2: Week 3 Outside of Class

This weekend I read pages 2 - 23, 24 - 34, and 48 - 51 in the Mobile Web Designer's Idea Book. Here are my notes:
Defining Mobile:

Lump mobile devices into two main categories: smartphones and tablets

Tablets fall into two main subsets (based on screen size): 7 inches and 10 inches

Approaches:

The goal is to cater to mobile users
Three primary ways to accomplish this: mobile-specific, responsive design, and fluid design

Mobile Specific:

With this approach, site owners maintain separate versions of a website

One is intended for the standard desktop user and another for mobile users (typically phone based)

This technique makes building and testing each site a bit easier
One huge benefit of this approach is that you can cater the content, site structure and entire mission of the site to fit the usage of the site

Responsive:

Early on, responsive design was thought of as fully fluid layouts that flex to fit the available space
In contrast, adaptive layouts were those that use multiple fixed-width designs in order to optimize the interface for various device sizes
Nowadays responsive pretty much means both

Fluid:

Fluid sites are a subset of responsive design
Designing a fluid site is a rather difficult task

Frameworks:

In the world of mobile design and development, one of the most powerful changes has been the development of a variety of frameworks
A framework is nothing more than a prepackaged set of code that gives our work a boost by dealing with the most common needs
Two fundamental types of frameworks:

Development frameworks (they provide HTML, CSS, and JavaScript code that addresses how the website or application will look and function)
CSS Frameworks (typically focused on how a site will lay out and adapt)

jQuery Mobile:

This framework is built on top of jQuery and the jQuery UI
It is relatively easy to skin (that is, to apply a custom design to the interface) and is backed by the same folks as the core jQuery library
The most common problem designers have with a framework like this is that all the sites built on it tend to look the same

Bootstrap:

Bootstrap (formally known as Twitter Bootstrap) is a CSS framework for building responsive websites
Its core is a 12-column grid system for building sites, and one of the primary options you will likely want to include is a responsive extension that adapts the 12 columns to fit a wide range of screen sizes
Bootstrap allows you to take total control of your design and is more about providing a structural framework than anything else
One simple detail that is important to consider when designing a responsive site is the number of columns to create

By simply using an even number of items, the designer has more options

Foundation:

Foundation is a site-building framework built by Zurb, a design company that specializes in building incredible websites
Foundation has many of the basic elements you would expect - like a grid system and responsive design features built right in - it does have one nice twist

It includes a number of resources that enable you to very rapidly prototype website

I also viewed the code on the five different websites that were given to us and made notes on what was different in each code.

Fixed Layout:

In the fixed layout, the width was set to 800 px, where the fluid one was set to a max width of 800 px.

Fluid Layout:

In the fluid layout, instead of just having it set at a width of 800 px, it is set for a max-width of 800 px.

This was also included in the code. This was not present in the fixed layout.

Responsive Design - Media Queries - Image Replacement (background image):

This one also included a max width of 800 px.

This was also included - same as the fluid.

These two were new and unique to this option.

Responsive Design - Media Queries - Image Replacement (no display):

The max width was also part of this option.

So was this.

This was a tad different from the last image replacement one. There is less info under .screen and a .screen2 was added.

In this code, under .screen there is only "display" instead of "height," "width," and "background image." There was also a .screen2 added.

Responsive Design - Media Queries - Wrapper Background Color Adjustment:

These two were once again part of the code.

Instead of having "height," "width," and "max width," there is now only "height" and "max width."Also .screen2 has disappeared.

This was also completely different. This was all added to change the colors of the background as the screen is resized.

I also read the online articles. Here are my notes:

http://unstoppablerobotninja.com/entry/fluid-images:

by setting your images at a max width of 100% it should cause your pictures to size up and down smoothly
there is new code that is used to swap out images for a transparent GIF and applies the AlphaImageLoader to the pictures so they will resize proportionally

http://www.lukew.com/ff/entry/asp?1514:

mostly fluid is the most popular pattern

includes a multi-column layout that introduces larger margins on big screens, relies on fluid grids and images to scale from large screens down to small screen sizes, and stacks columns vertically in its narrowest incarnations

another popular pattern is the column drop

starts with a multi-column layout and ends up with a single column layout
unlike the mostly fluid pattern, the overall size of elements in this layout tend to stay consistent

Layout Shifter

this pattern does the most to adapt across different screen sizes
different layouts are used on large, medium, and small screens
less popular because it requires more work

Tiny Tweaks

for those websites blessed with such simplicity, multi-device adaptation can just be a few tiny tweaks to font sizes and image layout

Off Canvas

takes advantage of space off the screen to keep content or navigation hidden until either a larger screen size allows it to be visible or a user takes action to expose it

I also created my mood board for the website.