real estate issues by will luers please open chrome and the ios simulator layout for mobile app...
TRANSCRIPT
![Page 1: Real Estate Issues by Will Luers please open chrome and the iOS simulator Layout for Mobile App Design](https://reader030.vdocuments.net/reader030/viewer/2022032703/56649f4e5503460f94c6ed70/html5/thumbnails/1.jpg)
Real Estate Issues
by Will Luers
please open chrome and the iOS simulator
Layout for Mobile App Design
![Page 2: Real Estate Issues by Will Luers please open chrome and the iOS simulator Layout for Mobile App Design](https://reader030.vdocuments.net/reader030/viewer/2022032703/56649f4e5503460f94c6ed70/html5/thumbnails/2.jpg)
is the mobile device a new form
or a mashup and remediation of
established forms
![Page 3: Real Estate Issues by Will Luers please open chrome and the iOS simulator Layout for Mobile App Design](https://reader030.vdocuments.net/reader030/viewer/2022032703/56649f4e5503460f94c6ed70/html5/thumbnails/3.jpg)
constraint of the frame = form
![Page 4: Real Estate Issues by Will Luers please open chrome and the iOS simulator Layout for Mobile App Design](https://reader030.vdocuments.net/reader030/viewer/2022032703/56649f4e5503460f94c6ed70/html5/thumbnails/4.jpg)
a remediation of movies and
book
the viewport = the rectangular viewing region
![Page 5: Real Estate Issues by Will Luers please open chrome and the iOS simulator Layout for Mobile App Design](https://reader030.vdocuments.net/reader030/viewer/2022032703/56649f4e5503460f94c6ed70/html5/thumbnails/5.jpg)
movies books
landscape portrait
![Page 6: Real Estate Issues by Will Luers please open chrome and the iOS simulator Layout for Mobile App Design](https://reader030.vdocuments.net/reader030/viewer/2022032703/56649f4e5503460f94c6ed70/html5/thumbnails/6.jpg)
http://resizemybrowser.com/
constraints of mobile layout:screen resolution & screen
orientation
portrait landscape desktop/laptop
1536 × 2048 / 2048 × 1536 (iPad with Retina display) ?
![Page 7: Real Estate Issues by Will Luers please open chrome and the iOS simulator Layout for Mobile App Design](https://reader030.vdocuments.net/reader030/viewer/2022032703/56649f4e5503460f94c6ed70/html5/thumbnails/7.jpg)
responsive designthe website scales to different device widthsand orientations
http://hicksdesign.co.uk/journal
- ems and % (flexible layout)- different stylesheets - media queries
How?
![Page 8: Real Estate Issues by Will Luers please open chrome and the iOS simulator Layout for Mobile App Design](https://reader030.vdocuments.net/reader030/viewer/2022032703/56649f4e5503460f94c6ed70/html5/thumbnails/8.jpg)
the big layout questions for mobile
app design...- portrait or landscape?- scroll or swipe?- single or multiple columns?- white (empty) space?
![Page 9: Real Estate Issues by Will Luers please open chrome and the iOS simulator Layout for Mobile App Design](https://reader030.vdocuments.net/reader030/viewer/2022032703/56649f4e5503460f94c6ed70/html5/thumbnails/9.jpg)
landscape = multiple
portrait = singular
but...
![Page 10: Real Estate Issues by Will Luers please open chrome and the iOS simulator Layout for Mobile App Design](https://reader030.vdocuments.net/reader030/viewer/2022032703/56649f4e5503460f94c6ed70/html5/thumbnails/10.jpg)
the vertical canvas can introduce multi-dimensional time
![Page 11: Real Estate Issues by Will Luers please open chrome and the iOS simulator Layout for Mobile App Design](https://reader030.vdocuments.net/reader030/viewer/2022032703/56649f4e5503460f94c6ed70/html5/thumbnails/11.jpg)
the horizontal canvas can
introduce empty space
![Page 12: Real Estate Issues by Will Luers please open chrome and the iOS simulator Layout for Mobile App Design](https://reader030.vdocuments.net/reader030/viewer/2022032703/56649f4e5503460f94c6ed70/html5/thumbnails/12.jpg)
most mobile phone apps favor portrait mode and one idea in
depth
![Page 13: Real Estate Issues by Will Luers please open chrome and the iOS simulator Layout for Mobile App Design](https://reader030.vdocuments.net/reader030/viewer/2022032703/56649f4e5503460f94c6ed70/html5/thumbnails/13.jpg)
vertical layout = one idea in depth
![Page 14: Real Estate Issues by Will Luers please open chrome and the iOS simulator Layout for Mobile App Design](https://reader030.vdocuments.net/reader030/viewer/2022032703/56649f4e5503460f94c6ed70/html5/thumbnails/14.jpg)
dual-orientation on the ipad
![Page 15: Real Estate Issues by Will Luers please open chrome and the iOS simulator Layout for Mobile App Design](https://reader030.vdocuments.net/reader030/viewer/2022032703/56649f4e5503460f94c6ed70/html5/thumbnails/15.jpg)
card model:
scroll model:
![Page 16: Real Estate Issues by Will Luers please open chrome and the iOS simulator Layout for Mobile App Design](https://reader030.vdocuments.net/reader030/viewer/2022032703/56649f4e5503460f94c6ed70/html5/thumbnails/16.jpg)
http://www.informationarchitects.jp/en/ipad-scroll-or-card/
scrolling vs. swiping on touch screen
![Page 17: Real Estate Issues by Will Luers please open chrome and the iOS simulator Layout for Mobile App Design](https://reader030.vdocuments.net/reader030/viewer/2022032703/56649f4e5503460f94c6ed70/html5/thumbnails/17.jpg)
the scroll model works for... - multi-dimensional flow - alternation of text and image- short-form storytelling - scalable content - dynamic content
http://lostworldsfairs.com/atlantis/
http://www.nikebetterworld.com/
![Page 18: Real Estate Issues by Will Luers please open chrome and the iOS simulator Layout for Mobile App Design](https://reader030.vdocuments.net/reader030/viewer/2022032703/56649f4e5503460f94c6ed70/html5/thumbnails/18.jpg)
The card model works for... - linear and one-dimensional flow- simultaneity (image and text)- moving image (games and movies)- long-form storytelling- device control (native apps)- structural and fixed content
![Page 19: Real Estate Issues by Will Luers please open chrome and the iOS simulator Layout for Mobile App Design](https://reader030.vdocuments.net/reader030/viewer/2022032703/56649f4e5503460f94c6ed70/html5/thumbnails/19.jpg)
integration of swipe + scrollhttp://m.discoverthetarkine.com.au/#homepage http://automobiles.honda.com/mobile/
![Page 20: Real Estate Issues by Will Luers please open chrome and the iOS simulator Layout for Mobile App Design](https://reader030.vdocuments.net/reader030/viewer/2022032703/56649f4e5503460f94c6ed70/html5/thumbnails/20.jpg)
The "infinite canvas" is a challenge to think big; a series of design strategies based on treating the screen as a window rather than a page.
-Scott McCloud
the possibilities of the “infinite canvas”
http://scottmccloud.com/4-inventions/canvas/
![Page 21: Real Estate Issues by Will Luers please open chrome and the iOS simulator Layout for Mobile App Design](https://reader030.vdocuments.net/reader030/viewer/2022032703/56649f4e5503460f94c6ed70/html5/thumbnails/21.jpg)
Chris Ware’s New Yorker insert
![Page 22: Real Estate Issues by Will Luers please open chrome and the iOS simulator Layout for Mobile App Design](https://reader030.vdocuments.net/reader030/viewer/2022032703/56649f4e5503460f94c6ed70/html5/thumbnails/22.jpg)
“touching stories” (ipad app)
http://itunes.apple.com/us/app/touching-stories/id376922506?mt=8&ign-mpt=uo%3D4