Responsive Web Design with CSS3 & Bootstrap

1. responsive
web design
with css3 &
bootstrap

2. about me

3. _ Alen Vuletić (@AlenVuletic)
_ Junior Web Developer @ Slicejack
_ Web dizajn @ Škola za dizajn, grafiku i održivu
gradnju
_ Informacijske tehnologije @ Sveučilišni odjel
za stručne studije, Split
_ HTML / CSS / JS

4. what is rwd?

5. ”Responsive design is not about designing for
mobile. But it’s not about designing for the desktop,
either. Rather, it’s about adopting a more flexible,
device-agnostic approach”
Ethan Marcotte
Examples

6. why is it so
important?

7. Number of smartphones sold to end users
worldwide
Resource: http://statista.com

8. 91% of all U.S. people
keep their mobile device
within easy reach 24/7

9. 61% of mobile visitors when visit a
website that is not mobile friendly
just switch to a competitor’s
website.

10. how it works
and what
tools do we
use?

11. 1. viewport
2. media queries
3. grid
4. frameworks

12. 1. viewport
<meta name=”viewport” content=”width=device-
width, initial-scale=1”>

15. 2. media queries
@media (max-width: 320px) {
body {
background-color: lightblue;
}
}
Example

16. 3. grid
For Designers: Guides for column widths and
gutters that help keep designs consistent and
aligned.
For Developers: A collection of prebuilt CSS
rules that allow you to apply grid-like layouts
to HTML.
Designers example Developers example

17. 4. frameworks
Framework is defined as a package made up of a
structure of files and folders of standardized
code (HTML, CSS, JS documents etc.) which
can be used to support the development of
websites, as a basis to start building a site.
Example

18. live demo

20. presentation will be
published on
slicejack.com/blog

21. questions?

22. thank you!

23. Alen Vuletić
Junior Developer @ Slicejack.com
25th Mobile Monday Split