Responsive design - my process

I was talking at my meetup in Impact hub in Belgrade on April 2016 about responsive web design from the moment I get the project from the client through the whole process with a focus on the designing in the browser to responsive frameworks (Bootstrap, Responsee) and testing.

Transcript

1. RESPONSIVE DESIGN - My process - www.marijazaric.com
2. Biography Creating websites (USA, Europe) Creating Bootstrap themes – BootstrapBay Technical reviewer for Packt Publishing: a. Responsive Media in HTML5 b. Mastering Responsive Web Design c. Responsive Web Design Patterns
3. What is responsive design? “Web design is responsive design. Responsive web design is web design, done right.” ANDY CLARKE
4. Ø CSS GRID Ø RESPONSIVE IMAGES Ø MEDIA QUERIES
5. My process Ø Listen Ø Research Ø Concept Ø Designing in the browser Ø Evolve cssmania smashingmagazine designmodo
6. Design will be accurate 99%. Design should be in the browser. You can easily show changes without having to alter the entire page.
7. Advantages o You will be faster. o Cuts development time o Your clients will have a better understanding of the designs.
8. Think how to solve the PROBLEM AND CREATE one solution.
9. Responsive frameworks It is important to adjust any framework with the defined layouts and functionalities.
10. Which responsive frameworks I use? Bootstrap startbootstrap.com w3layouts.com Easy for learning. The community is large. Responsee myresponsee.com Very lightweight with minimum of code.
11. MOBILE FIRST approach Mobile is exploding.
12. TESTING 1600px, 1280px, 1024px, 768px, 480px, 375px, 360px, 320px
13. ONLINE EMULATORS OR DEVICES ONLINE EMULATORS You can test on a vast range of devices quickly. responsive.victorcoulon.fr REAL DEVICES You will find all bugs.
14. Process conclusion DESIGN IS HOW IT WORKS.
15. PERSISTENCE DEDICATION ENTHUSIASM creative.simplicity
17. Questions?