Responsive Web Design vs. Adaptive Web Design 2013 by ilan Dray
description
Transcript of Responsive Web Design vs. Adaptive Web Design 2013 by ilan Dray
![Page 1: Responsive Web Design vs. Adaptive Web Design 2013 by ilan Dray](https://reader034.fdocuments.us/reader034/viewer/2022051608/53f00f398d7f72a64f8b45e5/html5/thumbnails/1.jpg)
![Page 2: Responsive Web Design vs. Adaptive Web Design 2013 by ilan Dray](https://reader034.fdocuments.us/reader034/viewer/2022051608/53f00f398d7f72a64f8b45e5/html5/thumbnails/2.jpg)
PRESENTS
![Page 3: Responsive Web Design vs. Adaptive Web Design 2013 by ilan Dray](https://reader034.fdocuments.us/reader034/viewer/2022051608/53f00f398d7f72a64f8b45e5/html5/thumbnails/3.jpg)
What? Why? Who? When?How? Where?
Responsive Web Design
RWD vs.AWD
![Page 4: Responsive Web Design vs. Adaptive Web Design 2013 by ilan Dray](https://reader034.fdocuments.us/reader034/viewer/2022051608/53f00f398d7f72a64f8b45e5/html5/thumbnails/4.jpg)
Responsive websites respond to their environment
What is Responsive Design?RWD vs.AWD
![Page 5: Responsive Web Design vs. Adaptive Web Design 2013 by ilan Dray](https://reader034.fdocuments.us/reader034/viewer/2022051608/53f00f398d7f72a64f8b45e5/html5/thumbnails/5.jpg)
Responsive Web design is the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation. The practice consists of a mix of flexible grids and layouts, images and an intelligent use of CSS media queries. As the user switches from their laptop to tablet or whatever devices, 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 respond to the user’s preferences. This would eliminate the need for a different design and development phase for each new gadget on the market.
Mashable called 2013 the Year of Responsive Web Design.
What is Responsive Design?RWD vs.AWD
![Page 6: Responsive Web Design vs. Adaptive Web Design 2013 by ilan Dray](https://reader034.fdocuments.us/reader034/viewer/2022051608/53f00f398d7f72a64f8b45e5/html5/thumbnails/6.jpg)
ON OUR REAL AUDIENCE PERSONAS HELP US FOCUS
![Page 8: Responsive Web Design vs. Adaptive Web Design 2013 by ilan Dray](https://reader034.fdocuments.us/reader034/viewer/2022051608/53f00f398d7f72a64f8b45e5/html5/thumbnails/8.jpg)
![Page 9: Responsive Web Design vs. Adaptive Web Design 2013 by ilan Dray](https://reader034.fdocuments.us/reader034/viewer/2022051608/53f00f398d7f72a64f8b45e5/html5/thumbnails/9.jpg)
Print design has the physical constraint of the canvas. The format is fixed. The situation is different on the web. We can’t know in advance exactly how someone will view our sites. We don’t have a fixed canvas. We need to create websites with the ability to adapt and respond.
Think ResponsiveRWD vs.AWD
![Page 10: Responsive Web Design vs. Adaptive Web Design 2013 by ilan Dray](https://reader034.fdocuments.us/reader034/viewer/2022051608/53f00f398d7f72a64f8b45e5/html5/thumbnails/10.jpg)
Already a standard for anybody who wants to make a strong presence on the net but differentiate between scalable & responsible design. Many huge website (e.g. eBay) are scalable until certain level but not responsive.
They prefer to invest in a native app version of the site for not to compromise content of hierarchy of the site and keep the user in a close environment.
Scalable vs. ResponsiveRWD vs.AWD
![Page 11: Responsive Web Design vs. Adaptive Web Design 2013 by ilan Dray](https://reader034.fdocuments.us/reader034/viewer/2022051608/53f00f398d7f72a64f8b45e5/html5/thumbnails/11.jpg)
ON OUR REAL AUDIENCE PERSONAS HELP US FOCUS IPAD NATIVE DESIGNEBAY APP
![Page 12: Responsive Web Design vs. Adaptive Web Design 2013 by ilan Dray](https://reader034.fdocuments.us/reader034/viewer/2022051608/53f00f398d7f72a64f8b45e5/html5/thumbnails/12.jpg)
ON OUR REAL AUDIENCE PERSONAS HELP US FOCUS
IPAD NATIVE APP DESIGNYNET HD APP
![Page 13: Responsive Web Design vs. Adaptive Web Design 2013 by ilan Dray](https://reader034.fdocuments.us/reader034/viewer/2022051608/53f00f398d7f72a64f8b45e5/html5/thumbnails/13.jpg)
ON OUR REAL AUDIENCE PERSONAS HELP US FOCUS
IPHONE NATIVE APP DESIGNNATIONAL GEOGRAPHIC
![Page 14: Responsive Web Design vs. Adaptive Web Design 2013 by ilan Dray](https://reader034.fdocuments.us/reader034/viewer/2022051608/53f00f398d7f72a64f8b45e5/html5/thumbnails/14.jpg)
NATIVE DESIGNADATE APP
![Page 15: Responsive Web Design vs. Adaptive Web Design 2013 by ilan Dray](https://reader034.fdocuments.us/reader034/viewer/2022051608/53f00f398d7f72a64f8b45e5/html5/thumbnails/15.jpg)
NATIVE IPAD DESIGNWINNER APP
![Page 16: Responsive Web Design vs. Adaptive Web Design 2013 by ilan Dray](https://reader034.fdocuments.us/reader034/viewer/2022051608/53f00f398d7f72a64f8b45e5/html5/thumbnails/16.jpg)
NATIVE IPHONE DESIGNPRO.CO.IL
![Page 17: Responsive Web Design vs. Adaptive Web Design 2013 by ilan Dray](https://reader034.fdocuments.us/reader034/viewer/2022051608/53f00f398d7f72a64f8b45e5/html5/thumbnails/17.jpg)
CHOREGRAPHYCONTENT
RWD vs.AWD
![Page 18: Responsive Web Design vs. Adaptive Web Design 2013 by ilan Dray](https://reader034.fdocuments.us/reader034/viewer/2022051608/53f00f398d7f72a64f8b45e5/html5/thumbnails/18.jpg)
béjart
![Page 19: Responsive Web Design vs. Adaptive Web Design 2013 by ilan Dray](https://reader034.fdocuments.us/reader034/viewer/2022051608/53f00f398d7f72a64f8b45e5/html5/thumbnails/19.jpg)
![Page 20: Responsive Web Design vs. Adaptive Web Design 2013 by ilan Dray](https://reader034.fdocuments.us/reader034/viewer/2022051608/53f00f398d7f72a64f8b45e5/html5/thumbnails/20.jpg)
![Page 21: Responsive Web Design vs. Adaptive Web Design 2013 by ilan Dray](https://reader034.fdocuments.us/reader034/viewer/2022051608/53f00f398d7f72a64f8b45e5/html5/thumbnails/21.jpg)
Content choreography is depending of content priorities and define hierarchy on the screen. The UX architecture, site layout and responsive scheme should be designed on the basis of the content and the desired impact on the visitors with the help of a responsive design analyst / content manager.
HierarchyRWD vs.AWD
![Page 22: Responsive Web Design vs. Adaptive Web Design 2013 by ilan Dray](https://reader034.fdocuments.us/reader034/viewer/2022051608/53f00f398d7f72a64f8b45e5/html5/thumbnails/22.jpg)
Stretch is an advanced implementation of content choreography for advertising. Not just changing position depending on relevance, but also changing ads appearance to display much better in smaller resolutions.
http://bit.ly/108X99f
Stretch & Swap Ad tm RWD vs.AWD
![Page 23: Responsive Web Design vs. Adaptive Web Design 2013 by ilan Dray](https://reader034.fdocuments.us/reader034/viewer/2022051608/53f00f398d7f72a64f8b45e5/html5/thumbnails/23.jpg)
The UX team will need to sketch and work on the smallest screens first defined by the need of the client audience.
The Studio team can work in parallel to define the main design elements style with the help of Style Tiles.
http://styletil.es
UX Sketch & GUI Style TilesRWD vs.AWD
![Page 24: Responsive Web Design vs. Adaptive Web Design 2013 by ilan Dray](https://reader034.fdocuments.us/reader034/viewer/2022051608/53f00f398d7f72a64f8b45e5/html5/thumbnails/24.jpg)
THE WASHINGTON EXAMINER
TILE 1
TILE 2
TILE 3
![Page 25: Responsive Web Design vs. Adaptive Web Design 2013 by ilan Dray](https://reader034.fdocuments.us/reader034/viewer/2022051608/53f00f398d7f72a64f8b45e5/html5/thumbnails/25.jpg)
CLASSIC EXAMPLESWHO IS DOING IT?
RWD vs.AWD
![Page 26: Responsive Web Design vs. Adaptive Web Design 2013 by ilan Dray](https://reader034.fdocuments.us/reader034/viewer/2022051608/53f00f398d7f72a64f8b45e5/html5/thumbnails/26.jpg)
www.bostonglobe.com
www.greygoose.com
![Page 27: Responsive Web Design vs. Adaptive Web Design 2013 by ilan Dray](https://reader034.fdocuments.us/reader034/viewer/2022051608/53f00f398d7f72a64f8b45e5/html5/thumbnails/27.jpg)
clearairchallenge.com
barackobama.com
![Page 28: Responsive Web Design vs. Adaptive Web Design 2013 by ilan Dray](https://reader034.fdocuments.us/reader034/viewer/2022051608/53f00f398d7f72a64f8b45e5/html5/thumbnails/28.jpg)
ON OUR REAL AUDIENCE PERSONAS HELP US FOCUS
RESPONSIVE WEB DESIGNBEHAVIOREAL
![Page 29: Responsive Web Design vs. Adaptive Web Design 2013 by ilan Dray](https://reader034.fdocuments.us/reader034/viewer/2022051608/53f00f398d7f72a64f8b45e5/html5/thumbnails/29.jpg)
ON OUR REAL AUDIENCE PERSONAS HELP US FOCUS
RESPONSIVE LAYOUTBEHAVIOREAL
![Page 30: Responsive Web Design vs. Adaptive Web Design 2013 by ilan Dray](https://reader034.fdocuments.us/reader034/viewer/2022051608/53f00f398d7f72a64f8b45e5/html5/thumbnails/30.jpg)
mediaqueri.es
![Page 31: Responsive Web Design vs. Adaptive Web Design 2013 by ilan Dray](https://reader034.fdocuments.us/reader034/viewer/2022051608/53f00f398d7f72a64f8b45e5/html5/thumbnails/31.jpg)
Things to ConsiderWHEN TO USE IT?
RWD vs.AWD
![Page 32: Responsive Web Design vs. Adaptive Web Design 2013 by ilan Dray](https://reader034.fdocuments.us/reader034/viewer/2022051608/53f00f398d7f72a64f8b45e5/html5/thumbnails/32.jpg)
![Page 33: Responsive Web Design vs. Adaptive Web Design 2013 by ilan Dray](https://reader034.fdocuments.us/reader034/viewer/2022051608/53f00f398d7f72a64f8b45e5/html5/thumbnails/33.jpg)
• Make sure that responsive technical specifications are clear (minimum size, devices and screen resolutions preferences…)
• Check time estimation defined to the project, milestone and budget .
• Confirm the tasks priorities with the project managers.
• RWD affects performance of the site since always calculating live the graphics elements … so get from your technology partner what is the best formats to prepare the files and style guide.
• Ask to get the right content and defined content hierarchy architecture.
• Discuss the UI behavior & graphic motion design with the UX.
• Check the images quality that you received from the client or not.
• Think responsive, be creative but keep it simple.
Time is MoneyRWD vs.AWD
![Page 34: Responsive Web Design vs. Adaptive Web Design 2013 by ilan Dray](https://reader034.fdocuments.us/reader034/viewer/2022051608/53f00f398d7f72a64f8b45e5/html5/thumbnails/34.jpg)
![Page 35: Responsive Web Design vs. Adaptive Web Design 2013 by ilan Dray](https://reader034.fdocuments.us/reader034/viewer/2022051608/53f00f398d7f72a64f8b45e5/html5/thumbnails/35.jpg)
http://clearleft.com/is/jeremy-keith
![Page 36: Responsive Web Design vs. Adaptive Web Design 2013 by ilan Dray](https://reader034.fdocuments.us/reader034/viewer/2022051608/53f00f398d7f72a64f8b45e5/html5/thumbnails/36.jpg)
Tips & TricksHOW TO USE IT?
RWD vs.AWD
![Page 37: Responsive Web Design vs. Adaptive Web Design 2013 by ilan Dray](https://reader034.fdocuments.us/reader034/viewer/2022051608/53f00f398d7f72a64f8b45e5/html5/thumbnails/37.jpg)
![Page 38: Responsive Web Design vs. Adaptive Web Design 2013 by ilan Dray](https://reader034.fdocuments.us/reader034/viewer/2022051608/53f00f398d7f72a64f8b45e5/html5/thumbnails/38.jpg)
Bootstrap goldilocksapproach.com
Foundation Skeleton
![Page 39: Responsive Web Design vs. Adaptive Web Design 2013 by ilan Dray](https://reader034.fdocuments.us/reader034/viewer/2022051608/53f00f398d7f72a64f8b45e5/html5/thumbnails/39.jpg)
• Define your layout using grids for your design (http://960.gs/ )
• Define a pixel grid as default in Photoshop & Snap ALL to this pixel grid .
• Understand well the UX behavior and the flow (HTML Axure Prototype).
• Place first of all sections as grey blocs to define compositions & proportions.
• Create and define some style tiles that you can share with the team.
• Work with Vector objects and define effects inside your objects .
• Use maximum smart objects and also for pictures as high resolution (@2x).
• Use pair font size and precise fixed elements
• Work organized with folders and files with a proper name
Tips for GUI DesignersRWD vs.AWD
![Page 40: Responsive Web Design vs. Adaptive Web Design 2013 by ilan Dray](https://reader034.fdocuments.us/reader034/viewer/2022051608/53f00f398d7f72a64f8b45e5/html5/thumbnails/40.jpg)
THE CITY OF DAVID RWD
![Page 41: Responsive Web Design vs. Adaptive Web Design 2013 by ilan Dray](https://reader034.fdocuments.us/reader034/viewer/2022051608/53f00f398d7f72a64f8b45e5/html5/thumbnails/41.jpg)
![Page 42: Responsive Web Design vs. Adaptive Web Design 2013 by ilan Dray](https://reader034.fdocuments.us/reader034/viewer/2022051608/53f00f398d7f72a64f8b45e5/html5/thumbnails/42.jpg)
![Page 43: Responsive Web Design vs. Adaptive Web Design 2013 by ilan Dray](https://reader034.fdocuments.us/reader034/viewer/2022051608/53f00f398d7f72a64f8b45e5/html5/thumbnails/43.jpg)
![Page 44: Responsive Web Design vs. Adaptive Web Design 2013 by ilan Dray](https://reader034.fdocuments.us/reader034/viewer/2022051608/53f00f398d7f72a64f8b45e5/html5/thumbnails/44.jpg)
THANKYOU.
RWD vs.AWD