Responsive Design
What is Responsive design?
Let’s just get right into it believe it or not, that you’re reading
about responsive design! To...
Three key technical features are the
heart of responsive Web design:

● Media queries and media query listeners
● A flexib...
I was inspired to make these responsive web design
sketch sheets to help think through layouts for various
devices. Though...
Small + Medium + Large

One site for every screen.
Today I gathered some fresh examples of responsive sites to reinforce t...
Here are some
screenshots of what the
Think Vitamin design
looks like at various
screen resolutions:
1024x768 (iPad - Landscape)
Responsive
websites
respond to their
environment
12 Helpful Tools for Responsive Web Design
There are a lot of tools out there, and it can be difficult to sort through the...
When To Use It ?
Things to Consider

●
●
●
●
●

Time & Money
Browser Support
Performance
Content
Website vs. Web App
Progressive enhancement based on browser, device or feature detection

Responsive websites are those crafted to use W3C CS...
A responsive approach to web design has recently become a
standard in the global design community. The main feature
of the...
Responsive Web Design
Responsive Web Design
Upcoming SlideShare
Loading in …5
×

Responsive Web Design

970 views
902 views

Published on

Responsive web design, a technique that allows web designers to create flexible web page layouts that change depending on the screen size of the site visitor, allows us to optimize user experiences for the increasingly variable ways people are accessing the Web.

Published in: Education, Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
970
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Responsive Web Design

  1. 1. Responsive Design
  2. 2. What is Responsive design? Let’s just get right into it believe it or not, that you’re reading about responsive design! To see it in action, open “ http://www.weareunicorn.com/ ” on a desktop browser and slowly make the browser thinner and wider. You should see the layout magically adjust itself to more comfortably fit the new width of the browser, even if you make the page as skinny as the resolution of a mobile phone. Responsive web design, a technique that allows web designers to create flexible web page layouts that change depending on the screen size of the site visitor, allows us to optimize user experiences for the increasingly variable ways people are accessing the Web.
  3. 3. Three key technical features are the heart of responsive Web design: ● Media queries and media query listeners ● A flexible grid-based layout that uses relative sizing ● Flexible images and media, through dynamic resizing or CSS
  4. 4. I was inspired to make these responsive web design sketch sheets to help think through layouts for various devices. Thought I’d share. Responsive websites respond to their environment
  5. 5. Small + Medium + Large One site for every screen. Today I gathered some fresh examples of responsive sites to reinforce the importance of adapting your layout to every screen. Probably you will recognize a few websites from past lists, but they are so good that they deserve to be back here.The response of each of the websites showcased here and I decided to show you the iPhone version of them. Check out the examples I gathered and let us know your thoughts on the subject. http://weareunicorn.com/ http://www.findinglifesfocus.com/ http://budgetingbasics.org/
  6. 6. Here are some screenshots of what the Think Vitamin design looks like at various screen resolutions:
  7. 7. 1024x768 (iPad - Landscape)
  8. 8. Responsive websites respond to their environment
  9. 9. 12 Helpful Tools for Responsive Web Design There are a lot of tools out there, and it can be difficult to sort through them all. So for this post, we gathered some of the ones we find the most useful. ● ● ● ● ● ● ● ● ● ● ● ● Responsive Web Design Sketch Sheets Adobe Edge Inspect Foundation RWD Calculator Responsive Layouts, Responsively Wireframed Adaptive Images Bootstrap Retina Images SimpleGrid The 1140px CSS Grid resizeMyBrowser The Responsinator
  10. 10. When To Use It ? Things to Consider ● ● ● ● ● Time & Money Browser Support Performance Content Website vs. Web App
  11. 11. Progressive enhancement based on browser, device or feature detection Responsive websites are those crafted to use W3C CSS3 media queries with fluid grids and commonly also fluid images, to adapt the layout to the viewing environment.Where a web site must support basic mobile devices that lack JavaScript, browser detection ,and mobile device detection are two ways of deducing if certain HTML and CSS features are supported (as a basis for progressive enhancement)however, these methods are not completely reliable unless used in conjunction with a device capabilities database.
  12. 12. A responsive approach to web design has recently become a standard in the global design community. The main feature of the web is its fluidity, and it demands the same solutions in website designs. That is the reason for extreme popularity of responsive designs that appear here and there at a rate of knots. If you want to create really efficient responsive website, you should learn more about this technology. To see the way responsive design picked up steam and follow the main steps of its development, it would be wise to find some trustworthy sources.

×