advertisement

Responsive, Adaptive and Fluid Design

67 %
33 %
advertisement
Information about Responsive, Adaptive and Fluid Design
Design

Published on March 11, 2014

Author: riamorgan

Source: slideshare.net

Description

Planning to create a Responsive Design strategy? The following information will give you all the necessary information to start.
This presentation will throw light on terms such as responsive design, fluid design, adaptive design, mobile first and content first. This presentation will also lay the foundation and give you a better understanding of how responsive design can save you time, money and frustration while giving you a website that clearly and effectively communicates with your clients.
advertisement

Powerpoint Templates Page 1 Powerpoint Templates Understanding Responsive, Adaptive and Fluid Design By ICO Web Solutions

Powerpoint Templates Page 2 Planning to create a Responsive Design strategy? The information in the following pages will give you all the necessary information to start. This presentation will throw light on terms such as Responsive Design, Fluid Design, Adaptive Design, Mobile first and Content first. This presentation will also lay the foundation and give you a better understanding of how responsive design can save you time, money and frustration while giving you a website that clearly and effectively communicates with your clients.

Powerpoint Templates Page 3 Fluid Design: Fluid Design was in use long before Responsive Design. The web, by nature, is fluid There was an eminence debate in the web community to compare which between fixed or fluid designs is more beneficial. Fixed width offered designers greater amounts of control, but fluid design was more flexible to the needs of the user’s experience. Even before the onslaught of smart phones and tablets, believers of fluid design alleged all users would have a different experience of the web, depending on variables such as monitor size and browser window size. HTML, without applied CSS, will flow to be 100% of the width of the page’s body. As a browser window shrinks, text adjusts. Fluid Design embraced this fluidity before Responsive Design was even a possibility. HTML text on the web is fluid by nature. Fluid Design (and Responsive Design) embrace this fluidity.

Powerpoint Templates Page 4 Adaptive Design vs Responsive Design:

Powerpoint Templates Page 5 Responsive Design: • Rather than setting breakpoints at common screen sizes (like adaptive design), Responsive design makes decisions based on the needs of the content. • Web designers will often grow and shrink their browser windows to analyze type, margins, padding, line-height, and other layout considerations. • When a line of text or an image is uncomfortably squished or has too much space, a breakpoint will be added via a CSS media query. • The text, image or layout will change size based on the needs of the content. • Responsive design also uses flexible images so that images scale depending on the width of the browser window or device. • There is actually a lot more to talk about in the world of responsive images as working groups are currently working out specifications for how to best handle image sizes, but that is for another blog post.

Powerpoint Templates Page 6 Fluid Grid + Flexible Images = Responsive Design: • Responsive Design is defined as having a fluid grid, flexible images and CSS media queries. Responsive Design has become the current industry standard for how a website should be built. • While not always the best or most practical solution, a responsive site is often the best solution to ensure you reach your customers, no matter their device. • Responsive Design requires a new mindset for how to design for a web that constantly changes size and dimensions.

Powerpoint Templates Page 7 Responsive Web Design: Content First: • Content First is often part of a responsive design strategy. Design can no longer afford to be decoration. • It needs to be information that quickly loads and gets users to reap the benefits of your business. • If your navigation menu or company message is not clear, concise, and fast- loading on a smart phone; you may be losing clients, trust, credibility and money. • Having a content first strategy, respects your clients/users time and attention. • Content first helps you focus your messaging, navigation patterns, branding and site structure. • It is all about directly communicating with your customers. Design decisions around typography, color and imagery are all meant to serve the needs of the content.

Powerpoint Templates Page 8 Responsive Web Design: Mobile First: • Mobile First is about designing for the smallest sized device first. • From a development perspective, mobile first means all of the initial CSS styling that gets coded will be targeting small screen devices first. • Mobile First requires a dedication to precise language, clear information architecture and a desire to have a lean highly usable website. • This isn’t to say the site has to be minimal. • As larger screen breakpoints are added, there is more room for larger images and varying layout possibilities. But even at these greater screen sizes, mobile first concepts can still help guide design decisions.

Powerpoint Templates Page 9 We would be happy to design for you @ ICO Web Solutions inquiry@icowebsolutions.com www.icowebsolutions.com +91-844-738-0262, +1-408-705-2608

Powerpoint Templates Page 9 We would be happy to design for you @ ICO Web Solutions inquiry@icowebsolutions.com www.icowebsolutions.com +91-844-738-0262, +1-408-705-2608

Add a comment

Related presentations

My Music Magazine Pitch

My Music Magazine Pitch

October 30, 2014

music mag pitch

Questionaire charts

Questionaire charts

November 4, 2014

bk

Final research

Final research

November 5, 2014

final research

Cersaie 2014

Cersaie 2014

October 30, 2014

allestimento in cartone per il Cersaie 2014 alberi in cartone scultura in cartone

Quarta turma do workshop de Infografia, ministrado por Beatriz Blanco e Marcos Sin...

Related pages

Responsive, Fluid, Adaptive - Welche Unterschiede gibt es ...

Responsive design is the methodology behind making a website respond to whatever platform you are viewing it on regardless ... Responsive, Fluid, Adaptive ...
Read more

Adaptive Website vs. Responsive Website | kulturbanause® blog

... Responsive Design = Fluid Grid + Flexible Images + Media Queries. ... Schön aufbereitete Infos über responsive und adaptive Designs.
Read more

What is Responsive, Adaptive and Fluid Design? Defining ...

This article will define terms such as responsive design, fluid design, adaptive design, ... HyperArts Web Design & Development. 201 4th Street, Suite 404
Read more

Fixed, Fluid, Adaptive, and Responsive | Build a ...

fixed, fluid, adaptive, and responsive, 0:35. but these words aren't interchangeable. ... to control the design and its content as it scales up or down
Read more

What is the difference between responsive vs. adaptive web ...

Ryan Boudreaux clears up some of the confusion about what is meant by responsive vs. adaptive web design. ... and fluid grids that use percentages to ...
Read more

Liquidapsive (Liqui-dap-sive)

Adaptive Liquid Responsive Static ... (also called "Fluid") is characterized by scaling the width of parts of the design relative to the window.
Read more

What is the difference between fluid, responsive, and ...

What is the difference between fluid, responsive, ... Fluid Design: Fluid website layout ... Responsive design and adaptive design, ...
Read more

What's the Difference Between Fluid, Adaptive, and ...

... fluid design, adaptive design, and responsive design. Since they can be a bit tricky to wrap your head around, let's go over the pros and cons of ...
Read more

The Difference Between Responsive and Adaptive Design ...

Responsive design can be fluid or ... The core difference between responsive design and adaptive design is that adaptive design sends only the by a ...
Read more

Inspiration: Fluid & Responsive Design - Design Trends and ...

Responsive design all started with this article by Ethan Marcotte. Some people see it as a trend. But it is more than just a trend. It is a new design ...
Read more