User experience design

Websites worden op veel verschillende apparaten bekeken, zoals smartphones, tablets, laptops en desktops. Als professionele webdesigner hou je daar rekening mee.

Omwille van verschillende schermresoluties en verhoudingen afhankelijk van het apparaat moet de lay-out zo gecodeerd zijn, dat de web-bezoeker intuïtief en gebruiksvriendelijkheid navigeert.

Mobile gaat een steeds groter deel van de koek uitmaken, daarom is het een belangrijk onderdeel van het ontwerp geworden.

Different browsers and so many devices

Device

Phone

OS

Size “

Size Cm

Width px

Height px

PPI

smartphone

Alcatel One Touch Idol Ultra

Android

4.7

11.9

720

1280

316

smartphone

Alcatel One Touch Ultra 995

Android

4.3

10.9

480

800

217

smartphone

BlackBerry Q10

BlackBerry

3.1

7.9

720

720

330

smartphone

BlackBerry Z10

BlackBerry

4.2

10.7

768

1280

356

smartphone

Droid

Android

3.7

9.4

480

854

265

smartphone

Droid 3 & 4

Android

4.0

10.0

540

960

280

smartphone

Droid Razr

Android

4.3

11.0

540

960

256

smartphone

Droid Razr Maxx

Android

4.3

11.0

540

960

256

smartphone

Galaxy Nexus

Android

4.6

11.8

720

1280

316

smartphone

Galaxy Note

Android

5.3

13.5

800

1280

285

smartphone

Galaxy Note II

Android

5.5

14.1

720

1280

267

smartphone

Galaxy S

Android

4.0

10.0

480

800

233

smartphone

Galaxy S Plus

Android

4.0

10.0

480

800

233

smartphone

Galaxy SII

Android

4.3

10.8

480

800

219

smartphone

Galaxy SIII

Android

4.8

12.0

720

1280

306

smartphone

Galaxy SIV

Android

5.0

12.7

1080

1920

441

smartphone

Google Nexus 4 by LG

Android

4.7

12.0

768

1280

320

smartphone

HTC Desire

Android

3.7

9.4

480

800

252

smartphone

HTC Desire HD

Android

4.3

11.0

480

800

217

smartphone

HTC Evo

Android

4.3

11.0

480

800

217

smartphone

HTC One

Android

4.7

12.0

1080

1920

468

smartphone

iPhone (Original - 3GS)

iOS

3.5

8.9

320

480

163

smartphone

iPhone 4 (4, 4S)

iOS

3.5

8.9

640

960

326

smartphone

iPhone 5

iOS

4.0

10.0

640

1136

326

smartphone

Nokia Lumia (710, 800)

Windows

3.7

9.4

480

800

252

smartphone

Nokia Lumia 1020

Windows

4.5

11.0

768

1280

332

smartphone

Nokia Lumia 520

Windows

4.0

10.0

480

800

233

smartphone

Nokia Lumia 620

Windows

3.8

9.7

480

800

246

smartphone

Nokia Lumia 720

Windows

4.3

10.9

480

800

217

smartphone

Nokia Lumia 900

Windows

4.3

11.0

480

800

217

smartphone

Nokia Lumia 920

Windows

4.5

11.0

768

1280

332

smartphone

Nokia Lumia 925

Windows

4.5

11.0

768

1280

332

smartphone

Samsung Nexus S

Android

4.0

10.0

480

800

235

smartphone

Sony Xperia Z

Android

5.0

12.7

1080

1920

441

tablet

Acer Picasso

Android

11.6

29.0

768

1280

190

tablet

Ainol Novo 10 Hero

Android

10.0

25.0

1280

800

151

tablet

Ainol Novo 7 Crystal

Android

7.0

18.0

1024

600

169

tablet

Ainol Novo 9 Spark

Android

9.7

25.0

2048

1536

264

tablet

Amazon Kindle Fire 1st Gen

Android

7.0

18.0

600

1024

169

tablet

Amazon Kindle Fire HD 7"

Android

7.0

18.0

800

1280

216

tablet

Amazon Kindle Fire HD 8.9"

Android

8.9

23.0

1200

1920

254

tablet

Apple iPad 1 & 2

iOS

9.7

25.0

768

1024

132

tablet

Apple IPad 3 & 4

iOS

9.7

25.0

1536

2048

264

tablet

Apple iPad Mini

iOS

7.9

20.0

768

1024

163

tablet

Asus Transformer

Android

10.1

26.0

1200

1920

224

tablet

BlackBerry PlayBook

BlackBerry

7.0

18.0

1024

600

169

tablet

Galaxy Note 10.1

Android

10.1

26.0

800

1280

149

tablet

Google Nexus 10 by Samsung

Android

10.1

26.0

2560

1600

300

tablet

Google Nexus 7 by Asus

Android

7.0

18.0

800

1280

216

tablet

Microsoft Surface

Windows

10.1

26.0

1366

768

148

tablet

Microsoft Surface Pro

Windows

10.1

26.0

1920

1080

208

tablet

Motorola Xoom

Android

10.1

26.0

1280

800

149

tablet

Nook Tablet

Android

7.0

18.0

600

800

167

tablet

Samsung Galaxy Tab

Android

7.0

18.0

600

1024

171

tablet

Samsung Galaxy Tab 10.1

Android

10.1

25.7

800

1280

149

tablet

Samsung Galaxy Tab 2

Android

7.7

20.0

600

1024

170

tablet

Samsung Galaxy Tab 2 10.1

Android

10.1

26.0

800

1280

149

tablet

Toshiba AT100

Android

10.1

25.7

1280

800

149

Monitors

Acer Chromebook

11.6

29.0

1366

768

135

Monitors

Acer Picasso

Android

11.6

29.0

768

768

Monitors

Apple 30" Cinema Display

30.0

76.0

2560

1600

100

Monitors

Apple Thunderbolt Display

27.0

69.0

2560

1440

109

Monitors

ASUS K55N-DS81 15.6 in

15.6

40.0

1366

768

100

Monitors

Chromebook Pixel

12.9

33.0

2560

1700

239

Monitors

DELL Inspiron 14 series 36"

14.1

36.0

1600

900

130

Monitors

Dell S2340M 23" Monitor

23.0

58.0

1920

1080

96

Monitors

Dell U2713HM 27" Monitor

27.0

69.0

2560

1440

109

Monitors

Dell UltraSharp U2412M 24" Monitor

24.0

61.0

1920

1200

94

Monitors

Dell UltraSharp U2711 27" Monitor

27.0

69.0

2560

1440

109

Monitors

Dell UltraSharp U3011 30" Monitor

30.0

76.0

2560

1600

100

Monitors

iMac 21.5-inch (Late 2009 - Late 2012)

21.5

55.0

1920

1080

102

Monitors

iMac 27-inch (Late 2009 - Late 2012)

27.0

69.0

2560

1440

109

Monitors

LENOVO THINKPAD X230

12.5

32.0

1366

768

125

Monitors

MacBook Air 11-inch (Late 2010 - Mid 2012)

11.6

29.0

1366

768

135

Monitors

MacBook Air 13-inch (Late 2010 - Mid 2012)

13.3

34.0

1440

900

128

Monitors

MacBook Pro 13-inch (Mid 2009 - Mid 2012)

13.3

34.0

1280

800

113

Monitors

MacBook Pro 13-inch (Retina display)

13.3

34.0

2560

1600

227

Monitors

MacBook Pro 15-inch (Early 2006 - Mid 2012)

15.4

39.0

1440

900

110

Monitors

MacBook Pro 15-inch (Hi-Res screen)

15.4

39.0

1680

1050

128

Monitors

MacBook Pro 15-inch (Retina display)

15.4

39.0

2880

1800

220

Monitors

MacBook Pro 17-inch (Mid/Late 2007 - Late 2011)

17.3

44.0

1920

1200

131

Monitors

Samsung Chromebook

11.6

29.0

1366

768

135