Notes Week2 Stream Links
-
Upload
renee-gibbs -
Category
Documents
-
view
215 -
download
0
Transcript of 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 -
7/30/2019 Notes Week2 Stream Links
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 -
7/30/2019 Notes Week2 Stream Links
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 -
7/30/2019 Notes Week2 Stream Links
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 -
7/30/2019 Notes Week2 Stream Links
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/ -
7/30/2019 Notes Week2 Stream Links
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