لماذا تصميم الويب لأجهزة الجوّال أولاً؟

1. .‫ًا‬‫د‬‫عم‬ ً‫ة‬‫فارغ‬ ‫ُركت‬‫ت‬ ‫الشريحة‬ ‫هذه‬

2. .‫قيكس‬ ‫رياض‬
.٢٠١٥ ‫أغسطس‬ ‫شهر‬ ‫لقاء‬

3. .*ً‫ال‬‫أو‬ ‫ّال‬‫و‬‫اجل‬
.‫ّال‬‫و‬‫اجل‬ ‫ألجهزة‬ ‫ِيب‬‫و‬‫ال‬ ‫صفحات‬ ‫تصميم‬
.‫غيره‬ ‫و‬ http://www.youtube.com/watch?v=NjE_Or4VIlU ‫من‬ ‫مستلهم‬ *

4. .‫الزغيبي‬ ‫ُسام‬‫ح‬
@hossamzee

5. .‫ُشتركة‬‫م‬ ‫ّة‬‫ي‬‫أرض‬
.ٍ‫ق‬‫أذوا‬ ‫و‬ ٍ‫م‬‫أرقا‬ ‫على‬ ُ‫د‬‫يستن‬ ُ‫ه‬‫بعض‬ ‫ﱞ‬‫ي‬‫رأ‬

6. .ّ‫ي‬‫رأ‬ ‫استطالع‬
?‫احلاسوب‬ ‫بواسطة‬ ‫ّه‬‫ح‬‫تصف‬ ‫من‬ ً‫ة‬ّ‫د‬‫م‬ ‫أطول‬ ‫ّال‬‫و‬‫اجل‬ ‫بواسطة‬ ‫اإلنترنت‬ ‫ّح‬‫ف‬‫تص‬

7. .‫ِيب‬‫و‬‫ال‬ ‫تاريخ‬

8. .١٩٦٩
.*‫ِيب‬‫و‬ ‫مواقع‬ َ‫ن‬‫دو‬ ‫لكن‬ ;‫اإلنترنت‬ ‫والدة‬
http://www.avg.com/history-of-internet *

9. .١٩٨٩
.*‫ويب‬ ‫صفحة‬ ‫ّل‬‫و‬‫أ‬ ‫وصول‬
*http://webfoundation.org/about/vision/history-of-the-web/
*http://info.cern.ch/hypertext/WWW/TheProject.html

10. .١٩٩٤
.*‫ّة‬‫ي‬‫السعود‬ ‫ّة‬‫ي‬‫العرب‬ ‫اململكة‬ ‫إلى‬ ‫اإلنترنت‬ ‫دخول‬
http://internet.sa/ar/category/statistics_study/ *

11. .٢٠٠٤
.*‫اجلهاز‬ ‫مع‬ ‫الصفحة‬ ‫تخطيط‬ ‫ُم‬‫ؤ‬‫توا‬ ‫تقنية‬ ‫اقتراح‬
http://www.themaninblue.com/writing/perspective/2004/09/21/ ‫ّة‬‫ق‬‫الد‬ ‫على‬ ‫ُعتمد‬‫مل‬‫ا‬ ‫التخطيط‬ ,‫آدم‬ ‫كاميرون‬ *

12. .٢٠٠٧
.*iPhone 1 ‫إطالق‬
https://www.apple.com/pr/library/2007/01/09Apple-Reinvents-the-Phone-with-iPhone.html *

13. .٢٠١١
.*‫احلواسيب‬ ‫ّة‬‫ي‬‫الذك‬ ‫الهواتف‬ ‫مبيعات‬ ‫ُز‬‫و‬‫جتا‬
http://www.digitaltrends.com/mobile/smartphone-sales-exceed-those-of-pcs-for-first-time-apple-smashes-record/ *

14. .٢٠١٢
.*Youtube ‫مشاهدة‬ ‫ف‬ ‫األعلى‬ ‫ّة‬‫ي‬‫السعود‬
http://www.arabiangazette.com/revealed-saudi-arabia-social-media-statistics-2012/ *

15. .٢٠١٣
.*”ّ‫ي‬‫التجاوب‬ ‫التصميم‬ ‫سنة‬“ ‫بـ‬ ‫السنة‬”Mashable“ ‫تسمية‬
http://mashable.com/2012/12/11/responsive-web-design/ *

16. .‫ّال‬‫و‬‫اجل‬ ‫من‬ ‫ِيب‬‫و‬‫ال‬

17. .٧٦٨×١٠٢٤
.*‫مفقود‬ ‫ّوحة‬‫ل‬‫ال‬ ‫محتوى‬ ‫من‬ %٨٠
.٤٨٠×٣٢٠ ‫مع‬ ً‫ة‬‫*مقارن‬

18. .‫حاسوب‬ ‫نسخة‬ ,‫ّة‬‫ي‬‫السعود‬ ‫ّة‬‫ي‬‫العرب‬ ‫ّة‬‫ي‬‫اجلو‬ ‫اخلطوط‬
http://www.saudiairlines.com/portal/site/saudia/template.WELCOME

19. .‫ّال‬‫و‬‫ج‬ ‫نسخة‬ ,‫ّة‬‫ي‬‫السعود‬ ‫ّة‬‫ي‬‫العرب‬ ‫ّة‬‫ي‬‫اجلو‬ ‫اخلطوط‬
http://m1.saudiairlines.com/Web/m/mainMenu.jsp

20. .‫رأي‬ ‫استطالع‬
?ً‫ال‬‫أو‬ ‫ُني‬‫ب‬ ‫برأيك‬ ‫ّهما‬‫ي‬‫أ‬

21. .‫ّال‬‫و‬‫باجل‬ ً‫ء‬‫انتها‬ ‫و‬ ‫احلاسوب‬ ‫من‬ ً‫ء‬‫بد‬
.‫األولى‬ ‫النظر‬ ‫وجهة‬

22. .‫باحلاسوب‬ ً‫ء‬‫انتها‬ ‫و‬ ‫ّال‬‫و‬‫اجل‬ ‫من‬ ً‫ء‬‫بد‬
.‫الثانية‬ ‫النظر‬ ‫وجهة‬

23. .‫التركيز‬
.‫املستخدم‬ ّ‫م‬‫ُه‬‫ي‬ ‫ما‬ ‫معرفة‬

24. .‫حاسوب‬ ‫نسخة‬ ,‫ّأة‬‫ب‬‫مخ‬ ‫نسخة‬ ,Flickr
.‫ًا‬‫ر‬‫خيا‬ ٦٠ ‫من‬ ‫أكثر‬

25. .‫ّال‬‫و‬‫ج‬ ‫نسخة‬ ,‫ّأة‬‫ب‬‫ُخ‬‫م‬ ‫نسخة‬ ,Flickr
.٨ ‫إلى‬ ‫اخليارات‬ ‫تقليل‬ ّ‫ت‬

26. .‫األزرار‬ ‫استخدام‬ ‫من‬ ً‫ال‬‫بد‬
.‫باحملتوى‬ ‫ُرتبطة‬‫م‬ ‫األحداث‬

27. .‫حاسوب‬ ‫نسخة‬ ,‫صورة‬ ‫استعراض‬ ,Flickr
https://www.flickr.com/photos/kent-macdonald/18915825691/in/photostream/

28. .‫ّال‬‫و‬‫ج‬ ‫نسخة‬ ,‫بحث‬ ,Flickr
https://mobile.twitter.com/

29. .‫ُختلفة‬‫م‬‫الـ‬ ‫األجهزة‬ ‫مع‬ ‫التعامل‬
.*ّ‫م‬‫ُه‬‫م‬ ‫احلجم‬ ‫و‬ ‫التصميم‬
.Reference design ‫مرجعي‬ ‫تصميم‬ *

30. .‫حاسوب‬ ‫نسخة‬ ,Hover
https://www.hover.com/

31. . ‫التأخير‬
.‫ًا‬‫ض‬‫أي‬ ّ‫م‬‫ُه‬‫م‬ ‫األداء‬

32. •.*%١ ‫بنسبة‬ ‫املبيعات‬ ‫ف‬ ‫خسارة‬ ‫ف‬ ‫يتسبب‬ ‫ثانية‬ ّ‫ل‬‫م‬ ١٠٠ ‫تأخير‬ :‫أمازون‬
•.*%٩-٥ ‫بنسبة‬ ‫الويب‬ ‫مرور‬ ‫حركة‬ ‫انخفاض‬ ‫ف‬ ‫يتسبب‬ ‫ثانية‬ ّ‫ل‬‫م‬ ٤٠٠ ‫تأخير‬ :‫ياهو‬
•.*%٢٠ ‫بنسبة‬ ‫البحث‬ ‫عمليات‬ ‫ّل‬‫ل‬‫يق‬ ‫ثانية‬ ّ‫ل‬‫م‬ ٥٠٠ ‫تأخير‬ :‫قوقل‬
http://www.slideshare.net/stubbornella/designing-fast-websites-presentation *

33. .‫ّياق‬‫س‬‫ال‬
?‫ّاالتنا‬‫و‬‫ج‬ ُ‫م‬‫نستخد‬ ‫أين‬

34. •.*‫املنزل‬ ‫ف‬ %٩٩
•.*‫العام‬ ‫النقل‬ ‫أو‬ ‫ّارة‬‫ي‬‫الس‬ ‫ف‬ %٨٢
•.*‫العمل‬ ‫ف‬ %٦٩
•.*‫الطوابير‬ ‫ف‬ ‫اإلنتظار‬ ‫عند‬ %٥٣
•.*‫التمارين‬ ‫ُارسة‬‫مم‬ ‫عند‬ %١٧
http://www.pewinternet.org/2015/04/01/chapter-three-a-week-in-the-life-analysis-of-smartphone-users/ *

35. .ً‫ال‬‫طوي‬ َ‫ن‬‫ميكثو‬ ‫ال‬ ‫ّاس‬‫ن‬‫ال‬
TL;DR

36. •.ٍ‫ن‬‫ثوا‬ ٤ ‫من‬ ‫ألقل‬ ‫استعرضت‬ ‫املستندات‬ ّ‫ل‬‫ك‬ ‫من‬ %٢٥
•.ٍ‫ن‬‫ثوا‬ ١٠ ‫من‬ ‫أقل‬ ‫استغرقت‬ ‫الزيارات‬ ‫من‬ %٥٢
•.ٍ‫ن‬‫ثوا‬ ٣ ‫إلى‬ ٢ ‫بي‬ ‫االستعراض‬ ‫وقت‬ ‫كان‬ ‫ّروة‬‫ذ‬‫ال‬ ‫وقت‬
http://www.nngroup.com/articles/how-long-do-users-stay-on-web-pages/ ‫مشابهة‬ ‫دراسة‬ ‫هذه‬ َ‫و‬ ‫اختباره‬ ّ‫ت‬ ‫رابط‬ ٦٥٠,٠٠٠ *

37. .‫العالقة‬ ‫ذات‬ ‫األحداث‬ ‫و‬ ‫ّمس‬‫ل‬‫ال‬

38. .‫اللمس‬ ‫أحداث‬ ‫من‬ ‫بسيطة‬ ‫حملة‬
http://designmodo.com/wp-content/uploads/2012/11/slide-16-touch-gestures.png

39. .ً‫ال‬‫ُحتم‬‫م‬ ‫ًا‬‫ث‬‫حد‬ ‫ِه‬‫ن‬‫لكو‬
.”‫املؤشر‬ ‫مرور‬ ‫عند‬“ ‫حدث‬ ‫إلغاء‬

40. .‫تدعمه‬ ‫ّحات‬‫ف‬‫املتص‬ ّ‫ن‬‫أل‬
.HTML5 ‫من‬ ‫االستفادة‬

41. .‫الوقت‬ ‫و‬ ‫التاريخ‬ ‫حقل‬
https://developer.apple.com/library/ios/documentation/UserExperience/
Conceptual/TransitionGuide/Art/date_picker_7_2x.png

42. .‫التوجيه‬ ‫و‬ ‫املوقع‬
https://www.google.com.sa/maps/@24.6383884,46.7113651,15z

43. .”‫ّال‬‫و‬‫للج‬ ٌ‫ق‬‫صدي‬“ َ‫و‬ Google
.*‫البحث‬ ‫نتائج‬ ‫ترتيب‬ ‫ف‬ ‫ّر‬‫ث‬‫يؤ‬
http://googlewebmastercentral.blogspot.com/2015/04/rolling-out-mobile-friendly-update.html *
https://www.google.com/webmasters/tools/mobile-friendly/ *

44. .‫ّال‬‫و‬‫ج‬ ‫نسخة‬ ,‫البحث‬ ‫نتائج‬ ,Google
https://www.google.com.sa/search?q=random

45. !‫ّب‬‫ر‬‫ج‬
.ً‫ال‬‫أو‬ ‫ّال‬‫و‬‫اجل‬ ‫من‬ ‫ليكون‬ ‫ما‬ ٍ‫ع‬‫موق‬ ‫تصميم‬ ‫أعد‬

46. .‫ِقاش‬‫ن‬

47. .‫ُم‬‫ك‬‫ل‬ ‫ًا‬‫ر‬‫شك‬