في عام 2011، تجاوزت مبيعات الهواتف الذكيّة الحواسب الشخصيّة، الأمر الذي دفع الكثير من مواقع الويب إلى تصميم واجهاتٍ للمستخدمين القادمين من الجوّال، و على الرغم من ذلك، فإنّ عدداً لا بأس به من المواقع الجديدة يتم تصميمه لأجهزة الحواسب أولاً ثمّ لأجهزة الجوّال ثانياً. كنت قد قدّمت -قبل فترةٍ- عرضاً نقلتُ و تبنّيت فيه وجهة نظرٍ ترى بتصميم مواقع الويب للجوّال أولاً و الحواسب ثانياً، و حاولت دعم وجهة النظر هذه بعددٍ من الاحصائات وَ الممارسات التي يتفّق عليها الكثير. يسرّني اطّلاعك على رأيي من خلال هذا العرض التقديميّ.

1. الجوّال أوال *.
* مُستلهم من http://www.youtube.com/watch?v=NjE_Or4VIlU و غيره.
حسام الزغيبي

2. رأ ي *.
* بعضه مستن د على أرقامٍ و أذواق.
أرضيّة مشتركة

3. خارطة الطريق.
تاريخ الويب، الويب من الجوّال،
الجوّال أولًا، مُقترح، نقاش

4. تصفّح الإنترنت خارج العمل من خلال
الجوّال أطول مدّاة من تصفّحه من
الحاسوب؟
استطلاع رأي

5. تاريخ الويب.

6. ولدة الإنترنت؛ لكن دون مواقع ويب*.
* http://www.avg.com/history-of-internet
1969

7. وصول أوّل موقع ويب*.
* http://webfoundation.org/about/vision/history-of-the-web/
1989

8. دخول الإنترنت إلى السعوديّة*.
* http://internet.sa/ar/category/statistics_study/
1994

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

10. إطلاق *iPhone 1 .
* https://www.apple.com/pr/library/2007/01/09Apple-Reinvents-the-Phone-with-iPhone.html
2007

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

12. « تسمية Mashable سنة « السنة بـ »
.*» التصميم التجاوبي
* http://mashable.com/2012/12/11/responsive-web-design/
2013

13. الويب من الجوّال.

14. 80% من المحتوى * مفقود.
* محتوى اللوحة.
1024 × 768

15. موقع الخطوط الجويّة العربيّة السعودية – نسخة حاسوب.
http://www.saudiairlines.com/portal/saudiairlines/Welcome

16. موقع الخطوط الجويّة العربيّة السعودية – نسخة جوّال.
http://m1.saudiairlines.com/Web/m/mainMenu.jsp?lang=1&officeid=null

17. أيّهما بُني أوّال؟
استطلاع رأي

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

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

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

21. موقع الخطوط الجويّة العربيّة السعودية – نسخة حاسوب.
60+ رابطاً مضمّن ا

22. موقع Flickr – نسخة حاسوب.
https://www.flickr.com/explore/

23. الأحداث مُرتبطة بالمحتوى.
عوضاً عن الأزرار

24. موقع Flickr – نسخة حاسوب.
https://www.flickr.com/photos/send_your_spam/15551179886/in/explore-2014-10-19

25. التصميم و الحجم مهمّ .
التعامل مع الأجهزة المختلفة

26. موقع hover – نسخة حاسوب.
https://www.hover.com/

27. الأداء مهمّ أيضا ا.
مغادرة المستخدم صفحة الويب

28. • أمازون: تأخير 100 مل ثانية يتسبب في خسارة 1 % . *
• ياهو: تأخير 500 مل ثانية يتسبب في انخفاض حركة مرور
الويب بنسبة 20 *.%
* http://blog.gigaspaces.com/amazon-found-every-100ms-of-latency-cost-them-1-in-sales/
* http://glinden.blogspot.com/2006/11/marissa-mayer-at-web-20.html

29. السياق.
أين نستخدم جوّالاتنا؟

30. •84 % في المنزل*.
•74 % عند الانتظار في الطوابير*.
•64 % في العمل*.
* http://www.lukew.com/ff/entry.asp

31. الناس ل يمكثون طويالا .

32. دراسة على 650,000 رابط*
•25 % من المستندات استعرضت لأقل من 4 ثوا ن .
•52 % من الزيارات استغرقت أقل من 10 ثوا ن .
• الوقت الأعلى للاستعراض كان بين 2 إلى 3 ثوا ن .
*دراسة مقاربة http://www.nngroup.com/articles/how-long-do-users-stay-on-web-pages/

33. اللمس و الأحداث ذات العلاقة.

34. * http://www.adimedia.net/blog/

35. .» عند مرور المؤشر « إلغاء حدث
لكونه حدثاً محتملًا

36. مُقترح لإعادة التصميم.
تصميم عصري

37. نقاش.

38. شكراا لكم*
* حسام الزغيبي @hossamzee