What is this?

---

THINK RESPONSIVE is made with AngularJS and Django

This tool has been built for testing your responsive websites.
Just enter your website's URL and test your site in different devices or you can add `url` GET parameter with testing website. Example. You can choose from default devices or you can enter specific device size. Easy peasy.

What responsive design is?

---

Responsive web design is a web design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones) wiki

Why?

---

Day by day, the number of devices, platforms, and browsers that need to work with your site grows. Responsive web design represents a fundamental shift in how we’ll build websites for the decade to come.

Jeffrey Veen

How?

---

We use bootstrap . Bootstrap is great front-end framework and via responsive CSS you can easy build responsive website. For faster mobile-friendly development use bootstrap utility classes for showing or hiding content by device. Of cource don't forget turn on responsive CSS

Turn on Bootstrap responsive CSS

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="STATIC_URL/css/bootstrap-responsive.css" rel="stylesheet" >

Bootstrap utilities classes

Class	767px and below	979px to 768px
.visible-phone	Visible	Hidden	Hidden
.visible-tablet	Hidden	Visible	Hidden
.visible-desktop	Hidden	Hidden	Visible
.hidden-phone	Hidden	Visible	Visible
.hidden-tablet	Visible	Hidden	Visible
.hidden-desktop	Visible	Visible	Hidden

Media Queries?

---

Media queries are way to deliver different styles to different devices.

Media query example

/* Large desktop */
@media (min-width: 1200px) { ... }
 
/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }
 
/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }
 
/* Landscape phones and down */
@media (max-width: 480px) { ... }
            

Questions? Suggestions?

---

Contact us: kwargs.sk[at]gmail.com