Responsive design - my process

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.

65cca193bf4f6ad183d1a86c71159206?s=128

Marija Zaric

May 10, 2016
Tweet

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

  16. None
  17. Questions?