Class 05 Notes

Topics

  • Midterm Project Assignment
  • Concept & Strategy
  • Assignment 03 Grid Critiques
  • Flexible Margins + Padding
  • Capabilities
  • Designing Mobile First

Today’s class objectives are to gain a better understanding of:

  • What are the specifications for the midterm project?
  • What do you need to think about when designing for a flexible grid?
  • How do you make margins and padding flexible?
  • What are the capabilities to consider when designing for mobile devices?
  • What is the process for thinking about mobile first?

AIGA / Aquent Survey of Design Salaries 2012

http://designsalaries.aiga.org/

  • Those with 10 to 19 years of experience earn the greatest compensation, though younger designers’ (0–10 years of experience) technology skills may put them on par with older designers (20–30 years of experience)
  • There does not seem to be a noticeable premium paid for the highest levels of education: a 4 percent median salary difference was reported between MFA and BFA graduates
  • Sixty-six percent of freelance respondents work with a staffing agency, and one in four of those working with an agency receive benefits
  • Women are still not earning as much as their male counterparts, despite the fact that more than half of AIGA’s members are female

 Adobe & HTML

Adobe’s overview: http://html.adobe.com/edge/
MacWorld brief story: http://www.macworld.com/article/2010306/adobe-unveils-edge-tools-and-services-for-web-creation.html
TechCrunch: http://techcrunch.com/2012/09/24/adobe-launches-its-edge-tools-services-for-designers-and-developers/createtheweb_edge_tools_pricing/ 

Adobe Edge Animate
Give your designs motion and interactivity with HTML, CSS, and JavaScript.

Adobe Edge Code
Code easier with this editor, optimized for working with HTML, CSS, and JavaScript files.

Adobe Edge Inspect
Preview and inspect your designs across your choice of iOS and Android devices.

Edge Tools & Services also includes the following Adobe Creative Cloud services* to enable you to build engaging websites and applications across devices.

Adobe PhoneGap Build™
Easily build mobile apps in the cloud for all popular platforms.

Adobe Typekit®
A fast, reliable way to use a vast library of high-quality web fonts.

Adobe Web Fonts
The simple, free way to get started with web fonts.

SIgn up for Creative Cloud for free!

https://creative.adobe.com/plans 


Assignment 03: Grid Critiques

  • Tell us your process
  • What were the priorities for mobile?
  • Run into any problems?
  • Feedback?

Designing a Responsive website – Make it Responsive

Note: Some of the information below is different than the Class 04 notes. We will go over in detail what is different and why in tonight’s class

1. Change font size to ems

target ÷ context = result

By default, 16px = 1em

For example: 24px ÷ 16px = 1.5em

2. Change div widths to percentages

960px = 90%

target ÷ context = result

Content div
For example:  660 ÷ 960 = result

Let’s make it better

#content {
width: 68.75%; /* 660 / 960 */
}

#rightcol {
width: 31.25%; /* 300 / 960 */
}

3. Flexible margins and padding

target ÷ context = result

Differences between margins and padding

  • Margin: to separate a block from things outside it.
  • Padding: to move the contents away from the edges of the block.

Rules

1. When setting flexible margins on an element, your context is the width of the element’s container.
2. When setting flexible padding on an element, your context is the width of the element itself element’s container.

This is actually an error in my book, and in my original research: the divisor should be the same for margins and padding—that is, the width of the element’s container. This will be fixed in the book’s next printing, and I believe A Book Apart will be offering corrections to the electronic version. – Ethan Marcotte

#content h1{
font-size: 1.5em; /* 24px; */
padding-left: 6.060606060606%; /* 40 / 660*/
padding-right: 6.060606060606%; /* 40 / 660 */
padding-top: 25px;
}

#content h2 {
font-size: 1.125em; /* 18px; */
padding-left: 6.060606060606%; /* 40 / 660*/
padding-right: 6.060606060606%; /* 40 / 660 */
padding-top: 25px;
font-weight: 200;
}

#content p {
font-size: .75em; /* 12px; */
padding-left: 6.060606060606%; /* 40 / 660*/
padding-right: 6.060606060606%; /* 40 / 660 */
padding-top:15px;
line-height:16px;
}

rightcol h2 {
font-size: 1.125em; /* 18px; */
padding-left: 13.333333333333%; /* 40 / 300 */
padding-top: 25px;
font-weight: 400;
}

#rightcol h3 {
font-size: 1em; /* 11px; */
padding-left: 13.333333333333%; /* 40 / 300 */
padding-top: 25px;
font-weight: 200;
}

#rightcol p {
font-size: .75em; /* 12px; */
padding-left: 13.333333333333%; /* 40 / 300 */
}

This was correctly done

footer p {
font-size: .6875em; /* 16px; */
color:#333;
padding-left: 4.166666666667%; /* 40 / 960 */
}

nav ul li a {
font-size: 1em;
padding: 10px 1.666666666667%; /* 16 / 960 */
background-color: #209a9b;
color: #FFF;
text-decoration: none;
float: left;
border-right: 1px solid #fff;
}

Capabilities

This is what mobile capabilities allow you to do:

Mobile capabilities allow you to reinvent ways to meet people’s needs using exciting new tools that are now at your disposal.

+ Location detection

Location detection is a big deal because it allows mobile web experiences to use your current whereabouts to deliver relevant information.

+ Device orientation/accelerometer

Accelerometers let us know when the device has been pivoted, tilted or rotated so our websites and applications can respond accordingly.

Accelerometers can also tell us the rate at which a device is moving in someone’s hand.

+ Touch

From simple actions like “pull down to refresh” and “swipe for more options,” new interactions are slowly becoming expectations. But touch can go beyond simple interactions and sometimes drive the entire way an application is used.

And additional capabilities may be here soon, including:

  • Direction: from a digital compass
  • Gyroscope: 360 degrees of motion
  • Audio: input from a microphone; output to speaker
  • Video and image: capture and input from a camera
  • Dual cameras: front and back
  • Device connections: through Bluetooth
  • Proximity: device closeness to physical objects
  • Ambient light: light/dark environment awareness
  • NFC: Near Field Communications through RFID readers

Device Testing Lab

64 Digital’s device testing station. Photo © 2012 64Digital.

Designing Mobile First

At this point we’ve talked about reasons for designing and developing web experiences for mobile first. A mobile first approach:

  • Prepares you for the explosive growth and new opportunities emerging on mobile today.
  • Forces you to focus and prioritize your products by embracing the constraints inherent in mobile design.
  • Allows you to deliver innovative experiences by building on new capabilities native to mobile devices.

Leave a Comment