Week 4 Outside of Class

This weekend I read Chapter 4 (56-98) of the Mobile Web Designer's Idea Book. Here are my notes:
Responsive Elements
Navigation:

• nav changes from a list of plain text elements on the desktop to a stacked list of buttons on the mobile
• the desktop version works great for those using a mouse and is just what you would expect
• in contrast, the mobile version relies on the user touching it with their finger
• in this situation, a much larger visual target is perfect for the job
• another key problem you might face with navigation is space
• there is a little widget often referred to as a "navicon" (short for navigation icon) that hides the navigation until it is needed

Logos:

• the logo is one of the most important elements we can consider modifying as screen size changes

Calls to Action:

• a call to action is the primary goal of your website
• these call-to-action elements are the buttons that take people toward that goal

Promo Space:

• an incredibly common part of many home pages is a prominent promo space
• in this critical space, designers often communicate the core purpose of the website
• typically we find a large to-the-point sales pitch that sums up the service
• this is often matched with a smaller but more in-depth description of the product or service
• then we usually find a screenshot or image of the product
• finally, we usually end with a call to action, compelling the user to take some critical step
• the end result is a powerful marketing space that attempts to quickly connect with visitors and spur them on to becoming customers
• don't be afraid to take radical steps toward condensing your site for smaller devices

Sliders:

• when it comes to popular web widgets, none seems to have attained the popularity that the standard image slider has
• there is a huge range of pre-built options to choose from and it is so easy to pack lots of content into one
• one of the most important lessons of the responsive slider is that the structure can (and probably should) change as the screen size changes

Forms:

• forms are one of the more complex HTML elements to style and are often the sources of much  frustration
• fortunately, one of the best ways to deal with forms is to simply change their layout, not necessarily their styles
• another approach that limits the pain of customizing forms for each layout is to focus on the stuff surrounding the form
• in order to limit the pain, we can also plan a design that easily shrinks

Content:

• with responsive design, it seems that a lot of attention is given to the structure of the site, while the content itself is often left to fend for itself
• in this area, one of the most interesting trends is the introduction of multi-column content

Images:

• of all the things we pack into sites, text and images are the most fundamental and unavoidable of elements
• as it turns out, there are really two core approaches to adapting images
• the first is to simply size the images up and down
• the images on these sites remain the same and simply shrink or grow to fit the needs of the layout
• the second option we have is to create images that contain fringe content that can be safely cropped off
• the third option is to replace images to fit each layout
• in this case, the code of the site could display one image for desktop users, a different one for tablets and a third one for phone-based users

Maps:

• implementing maps is super easy on the web; you just grab a bit of code and plug it into your site
• two things remain relatively challenging: customizing maps visually and adapting them to fit various screen sizes

Footers:

• of all the elements presented here, the footer is perhaps among the easiest to address
• in some cases a footer can be so simple that it need not change at all
• the footer contains three columns of content that conveniently stack on top of each other
• some elements of a footer can be hidden as the screen size decreases
• one of these lists takes a purely vertical approach, while the other simply wraps to multiple lines

I also did one more sketch for the home page using the feedback we got.

For this sketch I added the schedule of events to the home page.

Here are Nicole's new sketches:

This is her new home page sketch.

This is her new sub page sketch.

Here are Megan's new sketches:

This is her new sub page sketch.

This is her new home page sketch.

I also created a postcard for the website.

This was the first one that I started with. However, Megan said that she wasn't a big fan of the tree so I took it out.

This was what I ended up with.

I also did a second one because I wasn't sure if we were supposed to have the name of the event on the postcard or not so I did this one too.

Here is Nicole's postcard:

She said that she wanted to do animal balloons for a prize that the children would get for coming to the festival.

Here are Megan's postcards:

She also thought up a couple ideas for the logo.