Slide 1

Slide 1 text

RESPONSIVE DESIGN - My process - www.marijazaric.com

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

What is responsive design? “Web design is responsive design. Responsive web design is web design, done right.” ANDY CLARKE

Slide 4

Slide 4 text

Ø CSS GRID Ø RESPONSIVE IMAGES Ø MEDIA QUERIES

Slide 5

Slide 5 text

My process Ø Listen Ø Research Ø Concept Ø Designing in the browser Ø Evolve cssmania smashingmagazine designmodo

Slide 6

Slide 6 text

Design will be accurate 99%. Design should be in the browser. You can easily show changes without having to alter the entire page.

Slide 7

Slide 7 text

Advantages o You will be faster. o Cuts development time o Your clients will have a better understanding of the designs.

Slide 8

Slide 8 text

Think how to solve the PROBLEM AND CREATE one solution.

Slide 9

Slide 9 text

Responsive frameworks It is important to adjust any framework with the defined layouts and functionalities.

Slide 10

Slide 10 text

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.

Slide 11

Slide 11 text

MOBILE FIRST approach Mobile is exploding.

Slide 12

Slide 12 text

TESTING 1600px, 1280px, 1024px, 768px, 480px, 375px, 360px, 320px

Slide 13

Slide 13 text

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.

Slide 14

Slide 14 text

Process conclusion DESIGN IS HOW IT WORKS.

Slide 15

Slide 15 text

PERSISTENCE DEDICATION ENTHUSIASM creative.simplicity

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

Questions?