Tunisian WebDev 2016Tunisian WebDev 2016

Web development

best practices

What do we keep missing?

1

Tunisian WebDev 2016Tunisian WebDev 2016

I am Fadwa Gmiden, but call me Daddou.

And I’m a maniac .

Ohayou

2

Tunisian WebDev 2016

#WebDevelopment

{

3

Tunisian WebDev 20164

Tunisian WebDev 2016

.Rules:nth-child(1)

{

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

5

}

Tunisian WebDev 2016

Workspace

6

Tunisian WebDev 2016

Code...

7

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

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

Tunisian WebDev 201610

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

Tunisian WebDev 2016

Communication Jobs

Communicate with your client...

Communicate with “users”...

Communicate with technologies...12

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

Tunisian WebDev 201614

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

}

Tunisian WebDev 2016

Raw, Platform, or Framework

16

Budget

needs

audience quantity

Frequencyproblem

evolution

Tunisian WebDev 201617

Tunisian WebDev 2016

.Rules:nth-child(4)

{

Design ConceptGood Design is problem solving… Jeffrey Veen

18

}

Tunisian WebDev 2016

Design Components

UX

UI

Graphic Design

19

Tunisian WebDev 2016

20

Paper & Pencil, Sketchy sketch

Sketching ideas

Wireframes lo-fi

Prototype hi-fi

Mockup hi-fi

Tunisian WebDev 201621

Less is more,

and simple means

one single core idea

Tunisian WebDev 2016

SEOhuh!?

22

Tunisian WebDev 2016

Things to keep in mind

� Phone, phone, phone…

� Typography

� Grids

� Accessibility

� Colors

� Content

� …23

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

Tunisian WebDev 201625

Tunisian WebDev 201626

Tunisian WebDev 2016

.Rules:nth-child(5)

{

Authentic Design

27

}

Tunisian WebDev 2016

COPYCAT DESIGN

No!

No!!

Don’t even think a blink about it!

28

Tunisian WebDev 2016

} /*End*/

29

Tunisian WebDev 2016

*{Be Updated;}

30

Tunisian WebDev 2016

Ressources

52 weeks of UX

Refactoring

Icons & graphics from Slides Carnival

http://uxdesignweekly.com/

All the sites/blogs mentioned before...

31

Tunisian WebDev 2016

In the end...

Don’t forget about and

32

Tunisian WebDev 2016

Thanks

Any questions are welcome.

Email: fadwa.gmiden@gmail.com

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

33