Unleash Your Potential - Namagunga Girls Coding Club
Get responsive in 30 minutes (WordCamp Sofia)
1. Get Responsive in 30 minutes.
Nikolay Ninarski (Ninio)
Shtrak! Ltd. (Штрак!.. да, ш&т).
initLab
html5, wp, drupal, mobile
2. Me?
• Developer
• WordPress fan
• I like Drupal also
• I and 2 friends founded a catering company
that is doing WP and Drupal.
• Long story.
• Labber at initLab (hackerspaces FTW)
8. Separate mobile version
• Detect the browser on server side
• Redirect and serve simpler design
+ Less load on the device
+ Tailor-made website
‒ More work
9. Responsive design
• Make CSS with media queries to show/hide stuff
(*media query = a point from which the design will
change.. Usually at specific width)
• Use js if needed to make more complex changes
+ Quick (in simple cases)
− Slower load/performance (desktop inheritance)
10. Responsive approaches
• Mobile first – if we do it from scratch.
– Start from the mobile version and enhance
iteratively up to the desktop
• Break/fix approach – In cases you have an
existing non-responsive website.
– Make the screen smaller and check when the
design will break. Fix. Continue.
12. Break/fix approach
Tools:
• Chrome Web Dev Tools
• Make something smaller
• Make something bigger
• Make something fluid
• Hide something
• Convert something (possibly with js)
Find your First break point – make the screen smaller and see when the horizontal line appears. Hovering over the html element shows the width of our breakpoint
Find your First break point – make the screen smaller and see when the horizontal line appears. Hovering over the html element shows the width of our breakpoint
Find your First break point – make the screen smaller and see when the horizontal line appears. Hovering over the html element shows the width of our breakpoint
Find your First break point – make the screen smaller and see when the horizontal line appears. Hovering over the html element shows the width of our breakpoint
Find your First break point – make the screen smaller and see when the horizontal line appears. Hovering over the html element shows the width of our breakpoint
Find your First break point – make the screen smaller and see when the horizontal line appears. Hovering over the html element shows the width of our breakpoint
Find your First break point – make the screen smaller and see when the horizontal line appears. Hovering over the html element shows the width of our breakpoint
Find your First break point – make the screen smaller and see when the horizontal line appears. Hovering over the html element shows the width of our breakpoint
Find your First break point – make the screen smaller and see when the horizontal line appears. Hovering over the html element shows the width of our breakpoint