Web Development best practices

33
Tunisian WebDev 2016 Tunisian WebDev 2016 Web development best practices What do we keep missing? 1

Transcript of Web Development best practices

Page 1: Web Development best practices

Tunisian WebDev 2016Tunisian WebDev 2016

Web development

best practices

What do we keep missing?

1

Page 2: Web Development best practices

Tunisian WebDev 2016Tunisian WebDev 2016

I am Fadwa Gmiden, but call me Daddou.

And I’m a maniac .

Ohayou

2

Page 3: Web Development best practices

Tunisian WebDev 2016

#WebDevelopment

{

3

Page 4: Web Development best practices

Tunisian WebDev 20164

Page 5: Web Development best practices

Tunisian WebDev 2016

.Rules:nth-child(1)

{

Organization: Without it you’ll be lost, maybe worst...

5

}

Page 6: Web Development best practices

Tunisian WebDev 2016

Workspace

6

Page 7: Web Development best practices

Tunisian WebDev 2016

Code...

7

Page 8: Web Development best practices

Tunisian WebDev 2016

The 10 Commandments of Code

DRY: Don’t repeat yourself

Write short Methods

Naming

One Class (Method), one Responsibility

Keep code organized

Test, test, test

Refractor

Comment the right number

Document your work

Code Reviews

8

Page 9: Web Development best practices

Tunisian WebDev 2016

Those commands are your LIFE insurance

Always code as if the person who end-up maintaining your code is a violent psychopath who knows where you live…

Someone in the internet called JOSE

9

Page 10: Web Development best practices

Tunisian WebDev 201610

Page 11: Web Development best practices

Tunisian WebDev 2016

.Rules:nth-child(2)

{

Communication: You cannot not communicate. Every behaviour is kind of communication

[...], it is not possible not to communicate.

Paul Watzlawick, First Axiom of communication

}

11

Page 12: Web Development best practices

Tunisian WebDev 2016

Communication Jobs

Communicate with your client...

Communicate with “users”...

Communicate with technologies...12

Page 13: Web Development best practices

Tunisian WebDev 2016

5 W’s

� What Problem we’re solving?

� Why Does it solve the problem?

� Who Is the audience?

� Where Can we improve?

� How Can we build it?

13

Page 14: Web Development best practices

Tunisian WebDev 201614

Page 15: Web Development best practices

Tunisian WebDev 2016

.Rules:nth-child(3)

{

Technology choiceWeb apps are living things. It’s not as easy as handing the work to the

client and be done with it. This mindset is unrealistic and counterproductive.

15

}

Page 16: Web Development best practices

Tunisian WebDev 2016

Raw, Platform, or Framework

16

Budget

needs

audience quantity

Frequencyproblem

evolution

Page 17: Web Development best practices

Tunisian WebDev 201617

Page 18: Web Development best practices

Tunisian WebDev 2016

.Rules:nth-child(4)

{

Design ConceptGood Design is problem solving… Jeffrey Veen

18

}

Page 19: Web Development best practices

Tunisian WebDev 2016

Design Components

UX

UI

Graphic Design

19

Page 20: Web Development best practices

Tunisian WebDev 2016

20

Paper & Pencil, Sketchy sketch

Sketching ideas

Wireframes lo-fi

Prototype hi-fi

Mockup hi-fi

Page 21: Web Development best practices

Tunisian WebDev 201621

Less is more,

and simple means

one single core idea

Page 22: Web Development best practices

Tunisian WebDev 2016

SEOhuh!?

22

Page 23: Web Development best practices

Tunisian WebDev 2016

Things to keep in mind

� Phone, phone, phone…

� Typography

� Grids

� Accessibility

� Colors

� Content

� …23

Page 24: Web Development best practices

Tunisian WebDev 2016

Do

Less is more

Visual for the eyes, but don’t forget the rest...

Think of details

24

Don’t

Be subjective...

Concentrate in research and forget the actual work…

Use Comic-sans Font at any cost

Page 25: Web Development best practices

Tunisian WebDev 201625

Page 26: Web Development best practices

Tunisian WebDev 201626

Page 27: Web Development best practices

Tunisian WebDev 2016

.Rules:nth-child(5)

{

Authentic Design

27

}

Page 28: Web Development best practices

Tunisian WebDev 2016

COPYCAT DESIGN

No!

No!!

Don’t even think a blink about it!

28

Page 29: Web Development best practices

Tunisian WebDev 2016

} /*End*/

29

Page 31: Web Development best practices

Tunisian WebDev 2016

Ressources

52 weeks of UX

Refactoring

Icons & graphics from Slides Carnival

http://uxdesignweekly.com/

All the sites/blogs mentioned before...

31

Page 32: Web Development best practices

Tunisian WebDev 2016

In the end...

Don’t forget about and

32

Page 33: Web Development best practices

Tunisian WebDev 2016

Thanks

Any questions are welcome.

Email: [email protected]

LinkedIn: https://tn.linkedin.com/in/fadwagmiden

33