1. RESPONSIVE WEB
DESIGN
by Ana-Mar ia Bi rtea

2. •WHAT ?
• What is responsive design?
•WHY ?
• Why is Responsive Design important for websites?
•HOW ?
• The Practical Concept Of Responsive Web Design
• Responsive Design Frameworks
• Responsive web design tools

3. What is responsive design?
• Responsive web design (RWD) is a web design approach aimed to respond to
the user’s behavior and environment, based on screen size, platform and
orientation.
- automatically adjusted web design;
- don’t require countless custom-made solutions for each
new category of users;
- responsive Web design requires a more abstract way of
thinking

4. Why is Responsive Design important for
websites?
• Customers are increasingly using their mobile devices to visit your website. They are more comfortable with the
technology and demand more website features
• 85% of mobile phones sold in 2011 were web enabled.*
• 25% of web users are mobile only*
• Many of these web-enabled phones render the full website on their small screen. Users zoom in and out to read portions
of the web page. While it's an impressive solution from the manufacturers' point of view, for the customers it can be a
frustrating experience. They have to resize the site to read different sections, and can have a hard time using small
buttons that are intended for interaction with a mouse rather than for a finger on a touchscreen.
Responsive design easily respond to this new challenge in web design, making a new way to
approach the

5. The Concepts Of Responsive Web
Design
• Fluid Images;
• Fluid Grids;
• Media Queries.
• Mobile first
• Showing or Hiding Content

6. Responsive Design Frameworks
• Frameworks allow us to cut out much of the work and save a lot of time. There’s no
need to reinvent the wheel.
• We’re going to focus on frontend frameworks, for a responsive design.
Simple frameworks:
- The 1140 CSS Grid
- Golden Grid System
- Mueller Grid System
- Titan
- Less Framework 4
- 960 Grid System
Complete frameworks:
- Bootstrap
- Foundation 3
- Skeleton
- Kube

7. Responsive web design tools
• http://mattkersley.com/responsive/ test if your site is responsive
• http://sass-lang.com/ Sass's ability to nest media queries makes it a powerful tool for
authoring responsive CSS
• http://rwdcalc.com/ a very simple online tool that can help you to turn pixels into
percentages
…and many others

8. Responsive sites examples:
• http://colly.com/
• http://stuffandnonsense.co.uk/
• http://myrainbownursery.co.uk/
• http://www.starbucks.com/