$User->is_logged_in:  bool(false)
$User->user_info:  NULL
$User->check_post:  object(stdClass)#6987 (18) {
  ["is_valid"]=>
  int(1)
  ["global_remaining_posts_to_view"]=>
  int(0)
  ["remaining_posts_to_view"]=>
  int(0)
  ["number_all_post"]=>
  int(0)
  ["number_post_read"]=>
  int(0)
  ["is_from_gifts_balance"]=>
  int(0)
  ["gifts_articles_balance"]=>
  int(0)
  ["all_gifts_articles_balance"]=>
  int(0)
  ["gifts_read_articles"]=>
  int(0)
  ["exceeded_daily_limit"]=>
  int(0)
  ["is_watched_before"]=>
  int(0)
  ["sso_id"]=>
  int(14124)
  ["user_agent"]=>
  string(9) "claudebot"
  ["user_ip"]=>
  string(14) "54.163.221.133"
  ["user_header"]=>
  object(stdClass)#6980 (42) {
    ["SERVER_SOFTWARE"]=>
    string(22) "Apache/2.4.57 (Debian)"
    ["REQUEST_URI"]=>
    string(101) "/%d8%a7%d9%84%d8%aa%d9%83%d9%86%d9%88%d9%84%d9%88%d8%ac%d9%8a%d8%a7/responsive-design-iphone-screens/"
    ["REDIRECT_HTTP_AUTHORIZATION"]=>
    NULL
    ["REDIRECT_STATUS"]=>
    string(3) "200"
    ["HTTP_AUTHORIZATION"]=>
    NULL
    ["HTTP_X_FORWARDED_PROTO"]=>
    string(5) "https"
    ["HTTP_CONNECTION"]=>
    string(7) "upgrade"
    ["HTTP_HOST"]=>
    string(16) "popsciarabia.com"
    ["HTTP_ACCEPT_ENCODING"]=>
    string(8) "gzip, br"
    ["HTTP_CF_RAY"]=>
    string(20) "86b95e9e4b2e59df-IAD"
    ["HTTP_CF_VISITOR"]=>
    string(22) "{\"scheme\":\"https\"}"
    ["HTTP_ACCEPT"]=>
    string(3) "*/*"
    ["HTTP_USER_AGENT"]=>
    string(9) "claudebot"
    ["HTTP_REFERER"]=>
    string(91) "https://popsciarabia.com/responsive-design-iphone-screens/responsive-design-iphone-screens/"
    ["HTTP_CF_CONNECTING_IP"]=>
    string(14) "54.163.221.133"
    ["HTTP_CDN_LOOP"]=>
    string(10) "cloudflare"
    ["HTTP_CF_IPCOUNTRY"]=>
    string(2) "US"
    ["PATH"]=>
    string(60) "/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin"
    ["SERVER_SIGNATURE"]=>
    string(76) "
Apache/2.4.57 (Debian) Server at popsciarabia.com Port 80
" ["SERVER_NAME"]=> string(16) "popsciarabia.com" ["SERVER_ADDR"]=> string(11) "172.18.0.13" ["SERVER_PORT"]=> string(2) "80" ["REMOTE_ADDR"]=> string(14) "54.163.221.133" ["DOCUMENT_ROOT"]=> string(13) "/var/www/html" ["REQUEST_SCHEME"]=> string(4) "http" ["CONTEXT_PREFIX"]=> NULL ["CONTEXT_DOCUMENT_ROOT"]=> string(13) "/var/www/html" ["SERVER_ADMIN"]=> string(19) "webmaster@localhost" ["SCRIPT_FILENAME"]=> string(23) "/var/www/html/index.php" ["REMOTE_PORT"]=> string(5) "45544" ["REDIRECT_URL"]=> string(57) "/التكنولوجيا/responsive-design-iphone-screens/" ["GATEWAY_INTERFACE"]=> string(7) "CGI/1.1" ["SERVER_PROTOCOL"]=> string(8) "HTTP/1.1" ["REQUEST_METHOD"]=> string(3) "GET" ["QUERY_STRING"]=> NULL ["SCRIPT_NAME"]=> string(10) "/index.php" ["PHP_SELF"]=> string(10) "/index.php" ["REQUEST_TIME_FLOAT"]=> float(1711647252.259005) ["REQUEST_TIME"]=> int(1711647252) ["argv"]=> array(0) { } ["argc"]=> int(0) ["HTTPS"]=> string(2) "on" } ["content_user_category"]=> string(4) "paid" ["content_cookies"]=> object(stdClass)#6979 (3) { ["status"]=> int(0) ["sso"]=> object(stdClass)#6978 (2) { ["content_id"]=> int(14124) ["client_id"]=> string(36) "2f44be15-307a-4a5b-aeea-7ee6f634e946" } ["count_read"]=> NULL } ["is_agent_bot"]=> int(1) }
$User->gift_id:  NULL

كيف يتعامل المصممون مع التغير المستمر لشاشات آيفون؟

يحافظ التصميم المستجيب على روعة منظر هاتفك الخلوي.
استمع الى المقالة الآن هذه الخدمة تجريبية
Play Audio Pause Audio

أعلنت آبل مؤخراً في حدثها السنوي عن ثلاثة هواتف جديدة؛ آيفون إكس إس، وآيفون إكس إس ماكس، وآيفون إكس آر، وتتمتع جميعها بشاشات جديدة، بما فيها أكبر شاشة لآيفون حتى الآن، وصحيح أن الشاشات الأكبر تجلب الحماس للمستخدمين الراغبين في رؤية صور وفيديوهات أكبر، ولكنها أيضاً تمثِّل مجالاً جديداً لعمل المصممين، وهو ليس بالعمل السار في بعض الأحيان.

العصور المظلمة لتصميم الهاتف الخلوي

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

ولم تتوقف التغييرات عند هذا الحد؛ يقول تشاد كوري (المدير الابتكاري لسلايد يو إكس؛ وهي شركة تصميم في أوستن): “لم أنظر -بصفتي مصمماً- إلا إلى مسألة العرض؛ حيث كان يمثل بالنسبة لنا مورداً ثميناً، فإذا كنت تصمم شيئاً باللغة الألمانية، يجب أن تسأل بعض الأسئلة الهامة مثل ما إذا كانت هذه الكلمة ستتسع على الشاشة”، ويعني هذا تصميم مقاربة مختلفة مع كل طراز جديد من الهواتف الخلوية؛ سواء تغير هاتف أندرويد بمقدار مليمتر واحد أو هاتف آبل بمقدار بيكسل واحد.

وقد استجاب المطورون في البداية لهذه المسألة ببناء نسخ مختلفة من نفس الموقع الإلكتروني لكل جهاز، وأصبح لكل شركة موقع إلكتروني للحواسيب المكتبية، وواحد أو اثنان آخران للهواتف الخلوية، وربما حتى موقع إضافي للأجهزة اللوحية؛ يقول كوري: “نجحت هذه الطريقة لمدة سنة تقريباً، ولكن الأمور وصلت إلى مرحلة أصبح فيها هذا الأمر عصياً على التنفيذ؛ فقد كثُرت الأجهزة إلى حد كبير”، وكانت كل نسخة من الموقع الإلكتروني تتطلب الكثير من ساعات العمل والمصاريف.

إضافة إلى هذا، فقد تردى وضع التعديلات التصميمية القديمة بشكل سيئ مع الزمن؛ يقول كريس ليلي (من رابطة الشبكة العالمية W3C): “كان الناس يتعاملون مع الهاتف الخلوي -عندما انتشر استخدامه- على أنه أداة صغيرة وغبية، وهو أمر صحيح في ذلك الحين، إلى درجة أن ظهور هذه الأخطاء التصميمية في مواقع الويب كان أمراً متوقعاً”، ولكن مع تحسن الشاشات وتزايد استخدام الأجهزة الخلوية، بدأت الأولويات تتغير بالنسبة لمصممي الويب والتطبيقات، وأصبحوا أمام خيارين؛ إما استثمار المزيد في كل نسخة من أي موقع إلكتروني، أو إيجاد طريقة لتبسيط عملية التصميم.

 

يستمر آيفون في التضخم مع مرور الزمن.
مصدر الصورة: آبل

ولادة التصميم المستجيب

صيغت عبارة “التصميم المستجيب responsive design” لأول مرة في 2010 من قبل إيثان ماركوت، ونتيجة تأثره بالانتقال البنيوي من التصاميم الجامدة إلى المساحات المادية المتغيرة، اقترح ماركوت ما يلي: “بدلاً من وضع تصاميم منفصلة -وبأعداد متزايدة- لكل جهاز يتصفح الويب، يمكننا أن نعاملها على أنها أوجه مختلفة من نفس التجربة، بمعنى أن بإمكاننا أن نصمم تجربة التصفح المثلى، مع اعتماد تقنيات مبنية على معايير محدَّدة في تصاميمنا؛ بحيث لا تصبح أكثر مرونة فقط، بل أكثر قدرة على التكيُّف مع الوسائط التي تعرضها أيضاً”، وقد قرأ العالم بأسره هذه المقالة.

وحدد ماركوت في اقتراحه الأوَّلي “ثلاثة مكونات تقنية” للهيكليات المستجيبة، ويمكن للمطورين استخدام وظيفة استعلام الوسائط -وهي جزء موجود مسبقاً من لغة CSS (لغة بِنية الصفحات التي بُنيت عليها الإنترنت)- في تكديس نفس العناصر بطرق مختلفة حتى تُعرض على كل جهاز بشكل جيد؛ فقد تظهر ثلاثة صور جنباً إلى جنب على حاسوب مكتبي، ولكن يمكن جعلها تظهر آلياً بتراصف عمودي على جهاز خلوي، فإذا كانت هذه الصور مرنة فسيُمكن التحكم في حجمها أو حتى التركيز على جزء منها وفقاً لحجم الجهاز، وستكون مرتبة على شبكة مرنة مع النصوص وغيرها من العناصر، يقول أركوت إن من الممكن لموقع واحد أن يتعامل مع جميع أنواع الأجهزة.

وقد كتب جاي هوفمان في مشروعه “The History Of The Web”: “إن هذه الطريقة قد سمحت بتحديد مجموعة من الأساليب التصميمية للشاشات الصغيرة، وأخرى للشاشات الكبيرة، وقد أصبح بإمكان المطورين -باستخدام استعلام الوسائط- أن يضعوا مجموعة من القواعد للأجهزة التي بعرض أقل من 400 بيكسل مثلاً، ومجموعة قواعد أخرى للأجهزة الأكبر؛ مما يعني إمكانية جمع تصميمين بكود برمجي واحد”.

التصميم لجهازك الحالي

يقول كوري: “من النادر في هذه الأيام أن نجد شخصاً يضع تصميمه المستجيب الخاص به، مهما كانت الهيكلية المستخدمة”، وقد ظهرت بعض الحلول في البداية مثل الهيكلية المتكيِّفة المستجيبة مفتوحة المصدر، والتي تولِّد تصاميم مستجيبة وفقاً لشبكة من 12 عنصراً، غير أنها أصبحت “قديمة للغاية” كما يقول كوري. وحالياً تقدم لغة CSS نفسُها خدمات وميزات مستجيبة كانت تتطلب ساعات من كتابة الأكواد البرمجية الجديدة، ويمكن استخدامها في عدة مواقع.

ويقول كوري إنه حتى في حال وقوع مشكلة ما أثناء العرض فإن “بعض الشركات -مثل آبل- قد وضعت إجراءات احتياطية؛ حتى لا تشعر بالإحراج”، حيث يرفض إنستغرام مثلاً بناء تطبيق مخصَّص لآيباد، مفضِّلاً الاقتصار على منصة للهاتف الخلوي فقط، أما بالنسبة للعنيدين ممَّن يختارون تنصيب تطبيق الهاتف الخلوي على اللوح الذكي بأي حال، فإنه يظهر لهم بحجم شاشة الهاتف الخلوي في منتصف شاشة اللوح الذكي، وتظهر حوله بشكل تلقائي أربعة كتل سوداء لملء ما تبقى من الشاشة.

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

يقول كوري: “يتضمن الكود الأساسي ونظام التشغيل إمكانيةَ أن تعمل الشاشة مع وجود الخط، حتى لو لم تقم بتحديث جهازك”، وفي أحدث نسخة من أندرويد، توضع أيقونات الحالة للبطارية ومستوى التغطية في المساحة المحيطة بالخط من أجل الاستفادة منها، مع ترك مستطيل عادي في الأسفل، غير أن الانتقال إلى هذا العالم المليء بالخطوط لم يكن سلساً؛ فقد تأخَّرت بعض التطبيقات واسعة الانتشار -مثل تطبيق كيندل لقراءة الكتب الإلكترونية من أمازون- لعدة أشهر قبل أن تستفيد بشكل كامل من شاشة آيفون إكس غريبة الشكل.

وقد يكون هدف التصميم المستجيب هو أن يصبح “كل ما يحتاجه أي شخص”، وهو يقترب تدريجياً من هذا الهدف، ولكن ما تزال هناك بعض القيود؛ فقد كانت شركة سلايد يو إكس تضع التصاميم وفق معيار 320 بيكسل كحد أدنى (أي بحجم أول آيفون تقريباً)، وقد انتقلت مؤخراً إلى معيار حد أدنى يبلغ 360 بيكسل بسبب تزايد حجم الهواتف في الأسواق؛ يقول كوري: “لا بأس عندنا من التخلي عن الأجهزة القديمة والصغيرة، فقد اعتمدنا 360 بيكسل كحد أدنى مشترك، وإذا تمكنَّا من العمل مع هذا الحجم، فإنني أعتقد أن بإمكاننا أن نتوافق مع أغلب الأجهزة”.

Content is protected !!