Responsive, Adaptive and Fluid Design
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Responsive, Adaptive and Fluid Design

  • 342 views
Uploaded on

Planning to create a Responsive Design strategy? The following information will give you all the necessary information to start. ...

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.

More in: Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
342
On Slideshare
341
From Embeds
1
Number of Embeds
1

Actions

Shares
Downloads
3
Comments
0
Likes
0

Embeds 1

http://www.slideee.com 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Powerpoint Templates Page 1 Powerpoint Templates Understanding Responsive, Adaptive and Fluid Design By ICO Web Solutions
  • 2. 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.
  • 3. 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.
  • 4. Powerpoint Templates Page 4 Adaptive Design vs Responsive Design:
  • 5. 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.
  • 6. 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.
  • 7. 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.
  • 8. 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.
  • 9. 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
  • 10. 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