notes week2 stream links

7/30/2019 Notes Week2 Stream Links

1/6

The 18 minute "Connecting" documentary is an exploration of the future of Interaction Design and User Experience

from some of the industry's thought leaders. As the role of software is catapulting forward, Interaction Design is

seen to be not only increasing in importance dramatically, but also expected to play a leading role in shaping the

coming "Internet of things."

0 mobile phones in late 80s to over 5 bion earlier 'this' year

an interactive design is only complete when someone is using it

extension of yourself, natural & easy.

annoying beeps and asking annoying things of us, we want it to disappear into the background

what are the consequences of these products? disruptive? needs to be natural - natural gestures and conservation.

remove the artifial, i.e iphone removed buttons. create tactile feed back. We dont need digital to fake something

real, or just look like print. It is a seperate thing. But we want to make it abount the content, not the screen, the

product.

http://eagereyes.org/blog/2010/the-difference-between-infographics-and-visualization

The Difference Between Infographics andVisualization 2010

Visualization is general, infographics are specific. Visualization is context-free, infographics are context-sensitive.

Visualization is (largely) automatic, infographics are hand-crafted. Neither are objective, and both require hand-

tuning and understanding to get right.

What is the key difference between a visualization and a data-based infographic? The visualization is created by a

program that can be applied to many datasets, the infographic is hand-crafted for a particular dataset.

Visualization, on the other hand, is general. Parallel coordinates or pie charts do not care about what data theyshow. That means that they may be used for data that they are not suitable for, but the program itself typically

wont be able to tell you that. The power of visualization is that you can quickly apply such an existing technique to

new data to get an idea what its about. But the onus of picking the right visualization technique and parameters is

on the user.
http://eagereyes.org/techniques/parallel-coordinateshttp://eagereyes.org/techniques/pie-chartshttp://eagereyes.org/techniques/pie-chartshttp://eagereyes.org/techniques/parallel-coordinates


2/6

http://alistapart.com/article/responsive-web-design

Responsive Web Design

byEthan MarcotteMay 25, 2010

Mobile browsing is expected to outpace desktop-based access within three to five years.

Were designing for mice and keyboards, for T9 keypads, for handheld game controllers, for touch interfaces. In

short, were faced with a greater number of devices, input modes, and browsers than ever before.

This is our way forward. Rather than tailoring disconnected designs to each of an ever-increasing number of web

devices, we can treat them as facets of the same experience. We can design for an optimal viewing experience, but

embed standards-based technologies into our designs to make them not only more flexible, but more adaptive to

the media that renders them. In short, we need to practice responsive web design. But how?

Thankfully, the W3C createdmedia queriesas part of the CSS3 specification, improving upon the promise

of media types. A media query allows us to target not only certain device classes, but to actually inspect

the physical characteristics of the device rendering our work. For example, following the recent rise of

mobile WebKit, media queries became a popular client-side technique for delivering a tailored style sheet

to the iPhone, Android phones, and their ilk. To do so, we could incorporate a query into a linked style

sheets media attribute:

The query contains two components:

1. a media type (screen), and2. the actual query enclosed within parentheses, containing a particular media feature (max-device-

width) to inspect, followed by the target value (480px).

In plain English, were asking the device if its horizontal resolution ( max-device-width) is equal to or less

than 480px. If the test passesin other words, if were viewing our work on a small -screen device like the

iPhonethen the device will load shetland.css. Otherwise, the link is ignored altogether.

you can test multiple property values in a single query by chaining them together with the and keyword:

Furthermore, were not limited to incorporating media queries in ourlinks. We can include them in our

CSS either as part of a @media rule:

@media screen and (max-device-width: 480px) {

.column {

float: none;

}

}

Or as part of an @import directive:

@import url("shetland.css") screen and (max-device-width: 480px);
http://alistapart.com/author/emarcottehttp://alistapart.com/author/emarcottehttp://alistapart.com/author/emarcottehttp://www.mediapost.com/publications/?fa=Articles.showArticle&art_aid=120590http://www.morganstanley.com/institutional/techresearch/mobile_internet_report122009.htmlhttp://www.w3.org/TR/css3-mediaqueries/http://www.w3.org/TR/css3-mediaqueries/http://www.w3.org/TR/css3-mediaqueries/http://www.morganstanley.com/institutional/techresearch/mobile_internet_report122009.htmlhttp://www.mediapost.com/publications/?fa=Articles.showArticle&art_aid=120590http://alistapart.com/author/emarcotte


3/6

But in each case, the effect is the same: If the device passes the test put forth by our media query, the

relevant CSS is applied to our markup. Media queries are, in short,conditional commentsfor the rest of us.

Rather than targeting a specific version of a specific browser, we can surgically correct issues in our layout

as it scales beyond its initial, ideal resolution.

But a responsive design isnt limited to layout changes. Media queries allow us to practice some incredibly

precise fine-tuning as our pages reshape themselves: we can increase the target area on links for smaller

screens, better complying withFitts Lawon touch devices; selectively show or hide elements that

might enhance a pages navigation; we can even practiceresponsive typesettingto gradually alter the

size and leading of our text, optimizing the reading experience for the display providing it.

Example

.figure {

float: left;

margin: 0 3.317535545023696682% 1.5em 0; /*

21px / 633px */

width: 31.121642969984202211%; /*

197px / 633px */}li#f-mycroft,

li#f-winter {

margin-right: 0;

}

Ive omitted a number of typographic properties to focus on the layout:

Each .figure element is sized at roughly one third of the containing

column, with the right-hand margin zeroed out for the two pictures at the

end of each row (li#f-mycroft, li#f-winter). And this works

fairly well, until the viewport is either noticeably smaller or wider than our

original design. With media queries, we can apply resolution-specificspotfixes, adapting our design to better respond to changes in the display.

First of all, lets linearize our page once the viewport falls below a certain

resolution thresholdsay, 600px. So at the bottom of our style sheet, lets

create a new @media block, like so:

@media screen and (max-width: 600px) {

.mast,

.intro,

.main,

.footer {

float: none;

width: auto;

}

}

If you viewour updated pagein a modern desktop browser and reduce the

size of your window below 600px, the media query will disable the floats

on the designs major elements, stacking each block atop each other in the

document flow. So our miniaturized design is shaping up nicely, but the

images still dont scale down that intelligently. If we introduce anothermedia query, we can alter their layout accordingly:

@media screen and (max-width: 400px) {

.figure,

li#f-mycroft {

margin-right: 3.317535545023696682%; /*

21px / 633px */

width: 48.341232227488151658%; /*

306px / 633px */

} li#f-watson,

li#f-moriarty {

margin-right: 0;

}

}

Our figures can responsively change their layoutto better suit smaller

displays.

Dont mind the unsightly percentages; were simply recalculating the

widths of thefluid gridto account for the newly linearized layout. In short,

weremoving from a three-column layout to a two-column layout when the

viewports width falls below 400px, making the images more prominent.

We can actually take the same approach for widescreen displays, too. For

larger resolutions, we could adopt a six-across treatment for our images,placing themall in the same row:

@media screen and (min-width: 1300px) {
http://msdn.microsoft.com/en-us/library/ms537512%28VS.85%29.aspxhttp://msdn.microsoft.com/en-us/library/ms537512%28VS.85%29.aspxhttp://msdn.microsoft.com/en-us/library/ms537512%28VS.85%29.aspxhttp://en.wikipedia.org/wiki/Fitts%27_lawhttp://en.wikipedia.org/wiki/Fitts%27_lawhttp://en.wikipedia.org/wiki/Fitts%27_lawhttp://d.alistapart.com/responsive-web-design/ex/ex-article.htmlhttp://d.alistapart.com/responsive-web-design/ex/ex-article.htmlhttp://d.alistapart.com/responsive-web-design/ex/ex-article.htmlhttp://d.alistapart.com/responsive-web-design/ex/ex-site-linearize.htmlhttp://d.alistapart.com/responsive-web-design/ex/ex-site-linearize.htmlhttp://d.alistapart.com/responsive-web-design/ex/ex-site-linearize.htmlhttp://d.alistapart.com/responsive-web-design/ex/ex-site-mini.htmlhttp://d.alistapart.com/responsive-web-design/ex/ex-site-mini.htmlhttp://d.alistapart.com/responsive-web-design/ex/ex-site-mini.htmlhttp://d.alistapart.com/responsive-web-design/ex/ex-site-mini.htmlhttp://www.alistapart.com/articles/fluidgrids/http://www.alistapart.com/articles/fluidgrids/http://www.alistapart.com/articles/fluidgrids/http://d.alistapart.com/responsive-web-design/ex/ex-site-mini.htmlhttp://d.alistapart.com/responsive-web-design/ex/ex-site-mini.htmlhttp://d.alistapart.com/responsive-web-design/ex/ex-site-mini.htmlhttp://d.alistapart.com/responsive-web-design/ex/ex-site-larger.htmlhttp://d.alistapart.com/responsive-web-design/ex/ex-site-larger.htmlhttp://d.alistapart.com/responsive-web-design/ex/ex-site-larger.htmlhttp://d.alistapart.com/responsive-web-design/ex/ex-site-mini.htmlhttp://d.alistapart.com/responsive-web-design/ex/ex-site-larger.htmlhttp://d.alistapart.com/responsive-web-design/ex/ex-site-mini.htmlhttp://www.alistapart.com/articles/fluidgrids/http://d.alistapart.com/responsive-web-design/ex/ex-site-mini.htmlhttp://d.alistapart.com/responsive-web-design/ex/ex-site-mini.htmlhttp://d.alistapart.com/responsive-web-design/ex/ex-site-linearize.htmlhttp://d.alistapart.com/responsive-web-design/ex/ex-article.htmlhttp://en.wikipedia.org/wiki/Fitts%27_lawhttp://msdn.microsoft.com/en-us/library/ms537512%28VS.85%29.aspx


4/6

.figure,

li#f-mycroft {

margin-right: 3.317535545023696682%; /*

21px / 633px */

width: 13.902053712480252764%; /*

88px / 633px */

}

}

Now our images are working beautifullyat both ends of the resolution

spectrum, optimizing their layout to changes in window widths and device

resolution alike.

By specifying a widermin-width in a new media query, we can shift our

images intoa single row layout.

But this is only the beginning. Working from the media queries weveembedded in our CSS, we can alter much more than the placement of a few

images: we canintroduce new, alternate layoutstuned to each resolution

range, perhaps making the navigation more prominent in a widescreenview, or repositioning it above the logo on smaller displays.

By designing responsively, we can not only linearize our content on smallerdevices, but also optimize its presentation across a range of displays.

The way forward

Fluid grids, flexible images, and media queries are the three technical ingredients for

responsive web design, but it also requires a different way of thinking. Rather than

quarantining our content into disparate, device-specific experiences, we can use media

queries to progressively enhance our work within different viewing contexts.

http://www.abookapart.com/products/responsive-web-design

Responsive Web Design

by Ethan Marcotte
http://d.alistapart.com/responsive-web-design/ex/ex-site-larger.htmlhttp://d.alistapart.com/responsive-web-design/ex/ex-site-larger.htmlhttp://d.alistapart.com/responsive-web-design/ex/ex-site-larger.htmlhttp://d.alistapart.com/responsive-web-design/ex/ex-site-larger.htmlhttp://d.alistapart.com/responsive-web-design/ex/ex-site-larger.htmlhttp://d.alistapart.com/responsive-web-design/ex/ex-site-larger.htmlhttp://d.alistapart.com/responsive-web-design/ex/ex-site-larger.htmlhttp://d.alistapart.com/responsive-web-design/ex/ex-site-FINAL.htmlhttp://d.alistapart.com/responsive-web-design/ex/ex-site-FINAL.htmlhttp://d.alistapart.com/responsive-web-design/ex/ex-site-FINAL.htmlhttp://d.alistapart.com/responsive-web-design/ex/ex-site-larger.htmlhttp://d.alistapart.com/responsive-web-design/ex/ex-site-larger.htmlhttp://d.alistapart.com/responsive-web-design/ex/ex-site-larger.htmlhttp://d.alistapart.com/responsive-web-design/ex/ex-site-FINAL.htmlhttp://d.alistapart.com/responsive-web-design/ex/ex-site-FINAL.htmlhttp://d.alistapart.com/responsive-web-design/ex/ex-site-FINAL.htmlhttp://d.alistapart.com/responsive-web-design/ex/ex-site-larger.htmlhttp://d.alistapart.com/responsive-web-design/ex/ex-site-FINAL.htmlhttp://d.alistapart.com/responsive-web-design/ex/ex-site-FINAL.htmlhttp://d.alistapart.com/responsive-web-design/ex/ex-site-larger.htmlhttp://d.alistapart.com/responsive-web-design/ex/ex-site-larger.htmlhttp://d.alistapart.com/responsive-web-design/ex/ex-site-larger.html


5/6

From mobile browsers to netbooks and tablets, users are visiting your sites from an increasing array

of devices and browsers. Are your designs ready? Learn how to think beyond the desktop and craft

beautiful designs that anticipate and respond to your users needs. Ethan Marcotte will explore CSS

techniques and design principles, including fluid grids, flexible images, and media queries,

demonstrating how you can deliver a quality experience to your users no matter how large (or small)

their display.

http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/

Responsive Web Design: What It Is and How To Use It

As the user switches from their laptop to iPad, the website should automatically switch to

accommodate for resolution, image size and scripting abilities. In other words, the website should

have the technology to automatically respondto the users preferences. This would eliminate the

need for a different design and development phase for each new gadget on the market.

Morten Hjerde and a few of his colleagues identified statistics on about 400 devices sold between

2005 and 2008. Below are some of the most common:

Since then evenmore devices have come out. Its obvious that we cant keep creating custom

solutions for each one. So, how do we deal with the situation?

Part of the Solution: Flexible Everything

The entire design is a lovely mix offluid grids,fluid imagesand smart mark-up where

needed. Creating fluid grids is fairly common practice, and there are a number of techniques

for creating fluid images:

Hiding and Revealing Portions of Images http://zomigi.com/blog/hiding-and-revealing-portions-of-images/ Creating Sliding Composite Images http://zomigi.com/blog/creating-sliding-composite-images/v Foreground Images That Scale With the Layout
http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/http://sender11.typepad.com/sender11/2008/04/mobile-screen-s.htmlhttp://www.quirksmode.org/mobile/mobilemarket.htmlhttp://www.quirksmode.org/mobile/mobilemarket.htmlhttp://www.quirksmode.org/mobile/mobilemarket.htmlhttp://www.alistapart.com/articles/fluidgrids/http://www.alistapart.com/articles/fluidgrids/http://www.alistapart.com/articles/fluidgrids/http://unstoppablerobotninja.com/entry/fluid-imageshttp://unstoppablerobotninja.com/entry/fluid-imageshttp://unstoppablerobotninja.com/entry/fluid-imageshttp://zomigi.com/blog/hiding-and-revealing-portions-of-images/http://zomigi.com/blog/hiding-and-revealing-portions-of-images/http://zomigi.com/blog/creating-sliding-composite-images/http://zomigi.com/blog/creating-sliding-composite-images/http://zomigi.com/blog/foreground-images-that-scale-with-the-layout/http://zomigi.com/blog/foreground-images-that-scale-with-the-layout/http://zomigi.com/blog/foreground-images-that-scale-with-the-layout/http://zomigi.com/blog/creating-sliding-composite-images/http://zomigi.com/blog/hiding-and-revealing-portions-of-images/http://unstoppablerobotninja.com/entry/fluid-imageshttp://www.alistapart.com/articles/fluidgrids/http://www.quirksmode.org/mobile/mobilemarket.htmlhttp://sender11.typepad.com/sender11/2008/04/mobile-screen-s.htmlhttp://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/


6/6

http://zomigi.com/blog/foreground-images-that-scale-with-the-layout/http://www.flexiblewebbook.com/bonus.htmlhttp://www.flexiblewebbook.com/bonus

.html

making a logo smaller example

notes week2 stream links

Documents