responsive web design vs. adaptive web design 2013 by ilan dray

PRESENTS

What? Why? Who? When?How? Where?

Responsive Web Design

RWD vs.AWD

Responsive websites respond to their environment

What is Responsive Design?RWD vs.AWD

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

ON OUR REAL AUDIENCE PERSONAS HELP US FOCUS

http://about.me/veen

http://about.me/veen

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

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

ON OUR REAL AUDIENCE PERSONAS HELP US FOCUS IPAD NATIVE DESIGNEBAY APP


IPAD NATIVE APP DESIGNYNET HD APP


IPHONE NATIVE APP DESIGNNATIONAL GEOGRAPHIC

NATIVE DESIGNADATE APP

NATIVE IPAD DESIGNWINNER APP

NATIVE IPHONE DESIGNPRO.CO.IL

CHOREGRAPHYCONTENT

RWD vs.AWD

béjart

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

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

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

THE WASHINGTON EXAMINER

TILE 1

TILE 2

TILE 3

CLASSIC EXAMPLESWHO IS DOING IT?

RWD vs.AWD

www.bostonglobe.com

www.greygoose.com

clearairchallenge.com

barackobama.com


RESPONSIVE WEB DESIGNBEHAVIOREAL


RESPONSIVE LAYOUTBEHAVIOREAL

mediaqueri.es

Things to ConsiderWHEN TO USE IT?

RWD vs.AWD

• 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

http://clearleft.com/is/jeremy-keith

Tips & TricksHOW TO USE IT?

RWD vs.AWD

Bootstrap goldilocksapproach.com

Foundation Skeleton

• 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

THE CITY OF DAVID RWD

THANKYOU.

RWD vs.AWD