تذكر الأيام الخوالي؟ أنت تعرف أي أيام أتحدث عنه. منذ زمن ليس ببعيد عندما استخدمنا تصميم مواقع الويب لعرض ثابت. وبالنظر إلى الوراء الآن ، يبدو أنهم مثل هذا الوقت الأبسط. وقت أكثر سعادة الوقت الذي استطعت فيه قراءة كل خط متوفر للاستخدام عبر الإنترنت دون تفكير آخر. والحقيقة هي أن تصميم الويب السريع الاستجابة غيرت كل شيء. كان العالم مسطحًا ، والآن أصبح مستديرًا ، وكنت أعمى وأرى الآن أن الويب كان بكسل والآن أصبحت نسبته المئوية.
مع تقديم نظام RWD ، من الأهمية بمكان أن نعمل كمصممين على تطوير سير العمل لدينا لتتناسب بشكل أفضل مع متطلبات الشبكة الجديدة. أعرب الكثيرون منا عن إحباطنا من الطريقة التي لا يكون بها نهج بكسل الثابت الخاص بـ Photoshop مناسبًا لتصميم التخطيطات السائلة اللازمة لموقع ويب سريع الاستجابة ولكن لم يتم تقديم بدائل مفيدة. إن عالم تصميم الويب يتوق إلى الحصول على برنامج مصمم خصيصًا يتم تصميمه من الألف إلى الياء باستخدام نظام تحديد المواقع العالمي (RWD). تعتبر منتجات مثل Adobe Reflow بداية رائعة ، حيث تظهر أن Adobe تعمل على الأقل على حل ، ولكن بعد قضاء بضع ساعات معها في عطلة نهاية الأسبوع ، أستطيع أن أرى أنه لا يزال أمامها طريق طويل قبل أن تصبح إضافة مفيدة لسير العمل الخاص بي. ومع وجودنا في حالة من عدم اليقين بين برنامج ما قبل التاريخ والوعد بما سيأتي غداً ، فإننا مضطرون إلى إنشاء تدفقات عمل بديلة لاستيعاب عيوب "برنامج التصميم" الحالي من خلال تقديم أدوات وإجراءات أخرى تساعد في سد الفجوة بين البكسل الثابت واستجابة السوائل.
ما يلي هو بأي حال من الأحوال قائمة بالكيفية التي ينبغي أن يتم بها التعامل مع مشاريع RWD ، ولكن كيف قمت بتعديل سير العمل الخاص بي ليتناسب مع المشهد الجديد.
لقد وقفت على الحدود بين الفوتوشوب / Fireworks / Illustrator بين كل من قاتلوا من أجل التفوق وشهدوا الناس الأبرياء يتم القبض عليهم في تبادل لإطلاق النار من بكسل. يميل المصممون إلى أن يكونوا مفضلين لهم ويفضلون الموت بموت مؤلم بطيء من الاعتراف بأن برنامجًا آخر لديه ميزة قد يريدونها بالفعل. وجهة نظري هي أنه يجب عليك تصميم أي برنامج يتيح لك العمل بأكثر الطرق فعالية واستكشاف أفكارك بسرعة ، سواء أكان Photoshop أو Powerpoint أو Paint.
إنها غير ملائمة تقريبًا والتي تختارها حيث يجب أن تكون نقطة بداية للتجربة بسرعة مع التخطيطات المختلفة. شخصيا ، أنا أفضل الألعاب النارية لأنها تدق أكثر من مربعات ما أريد في البرنامج. أحاول عدم التعلق بشدة بالتفاصيل في هذه المرحلة وحاول بالفعل فقط اتخاذ بعض القرارات الأولية حول التخطيط والهيكل مثل الكثير من إطارات wireframes الفاخرة.
كل ما يجب أن يقال عن استخدام لوريم إيبسوم (Lorem Ipsum) في الموقع تم تسجيله ، لذا يرجى أن تثق بي من هذا ، وحيثما أمكن استخدم المحتوى الحقيقي للتصميم منه. حيثما لا يكون ذلك ممكنا ، استخدم محتوى العام الماضي ، واكتب المحتوى الخاص بك أو استخدم كلمات "شمعة في مهب الريح" ولكن لا تستخدم أبجد ipsum. إذا كنت لا تستخدم محتوى حقيقي ، فسيصعب رؤيته عند نقاط الاستراحة التي تحتاج بعض العناصر إلى ضبطها.
هذا هو فقط العرض الذي أرغب في البدء به حيث أنه قريب من تجربة سطح مكتب صغيرة ، والتي من السهل بعد ذلك توسيعها للحصول على شاشات أكبر وخفض في تجارب الأجهزة اللوحية / الجوالة. بعض الناس يفضلون البدء على نطاق أوسع بينما يفضل الآخرون تصميم الهاتف المحمول أولاً ، ولكنه يأتي فقط إلى ما يناسبك.
يدور RWD حول حاويات السوائل التي تنمو وتتقلص لملء المساحة المتاحة للمتصفح ، لذلك سيضمن التصميم بالنسب المئوية بدلاً من البكسل أن تصميماتك تتدفق بما يتناسب مع المستعرض وتتطلب نقاط توقف أقل من التصميم المكافئ القائم على البيكسل.
أميل إلى أن يكون In-Design مفتوحًا في الخلفية حتى أتمكن بسهولة وبسرعة من معرفة حجم النسبة المئوية لعنصر يستند إلى وحدات بكسل. يعتبر InDesign رائعا في التعامل مع هذا النوع من الحسابات ويمكنك بسهولة معرفة الحجم الذي سيحصل عليه العنصر 428px x 333px بنسبة 46٪ من عرضه الأصلي ، مع الاحتفاظ بنسبه أو ربما اكتشاف 27٪ من عرض المستعرض 889px بالثواني. لا يزال يتم منحك النتائج بالبكسل حتى يمكنك الرجوع إلى البرنامج الذي تقوم بتصميمه وإنشاء تلك الحاوية بالبكسل ، مع العلم أنه سيكون نسبة إلى النسبة المئوية لمساحة العمل التي قمت بتعريفها.
إذا كنت تظن أنني أتحدث عن استخدام محتوى حقيقي في تصميماتك ، فيجب أن تسمعني تصميم أنماط الطباعة في Photoshop (أو ما يعادلها). ستبدو الطباعة مختلفة إلى حد كبير في المتصفح مما تبدو عليه في حزم Adobe المعتادة التي ستعني المزيد من العمل من أجل تعديل التصميم بمجرد أن يتم إنشاؤه.
احفظ نفسك الصداع واستخدم تطبيقات مثل typecast.com لتجربة وإنشاء أنماط الخط الخاصة بك. عندما تصبح سعيدًا بتخطيط ونمط الطباعة الخاص بك ، يمكنك تصدير مساحة العمل بأكملها على هيئة PNG شفافة لوضعها ضمن نماذج التصميم الخاصة بك. لن تحتاج إلى تثبيت أي من الخطوط التي اخترتها على النظام الخاص بك لأنه سيكون مجرد صورة ولكنك لن تكون قادراً على تحريرها دون الرجوع إلى typecast.
الآن ، يجب أن يكون لديك تصميم واسع بعرض 1000 بكسل (أو أي عرض اخترته في البداية) مكتمل بعروض الحاويات التي تحمل المحتوى المتنوع الخاص بك إلى نسب مئوية. سأبدأ الآن في إنشاء شبكة مخصصة تقلد عرض الحاوية التي أستخدمها داخل تصميمي. إذا كان لديّ شريط جانبي بعرض 30٪ ومنطقة محتوى تمثل 55٪ من المتصفح الخاص بي مع 5٪ من المساحة على جانبي الشاشة ، فإن شبكتي قد تبدو مثل 5٪ و 30٪ و 5٪ و 55٪ و 5٪.
يمكنك استخدام تطبيقات مثل Gridset لإنشاء شبكتك المخصّصة ولكن مرةً أخرى ، أفضل استخدام InDesign لأنك تستطيع تجميع العناصر وجعلها تتناسب مع بعضها البعض.
الآن أقوم بتوصيل الشبكة الخاصة بي التي قمت بإنشائها باستخدام InDesign ولصقها في مستند بعرض 1600 بكسل (أو الحد الأقصى للعرض الذي تريده لموقعك). ثم أبدأ في تغيير حجم الشبكة الخاصة بي بشكل أوسع وأضيق بزيادات 100 بكسل على طول الطريق إلى 300 بكسل على نطاق واسع. في كل زيادة ، أتحقق من عرض كل حاوية محتوى وتأكد من أنها لا تزال كبيرة بما يكفي لإيواء محتواها. عندما أحصل على عرض أعتقد أنه يجعل الحاوية صغيرة جدًا ، ما عليك سوى تعديل الشبكة لتناسبها. إذا كان عرض الشريط الجانبي الذي كنت قد أنشأته بنسبة 30٪ من عرض المستعرض ضيقًا جدًا عند عرضه بدقة 800 بكسل ، فيمكنني إضافة 10٪ إضافيًا إليه ، مما يجعله الآن 40٪ من عرض المتصفح الخاص بي وكونه واسعًا بما يكفي لإيواء المحتوى المقصود .
الشيء الأساسي الذي يجب تذكره هو أنه إذا قمت بتوسيع نطاق الحاوية ، فستحتاج إلى جعل حاوية أخرى أضيق بنفس المقدار للحفاظ على العرض الكامل بنسبة 100٪. هذه هي الطريقة الأفضل التي وجدتها لتعريف نقاط الفاصل (النقطة التي سيتغير بها التخطيط) عند إضافة نقطة توقف أخرى عند فواصل المحتوى وليس عرض جهاز جديد. يمكن أن يستغرق هذا الإجراء وقتًا طويلاً ، حيث سينتهي بك الأمر إلى 14 معاينة مختلفة لشبكتك مع نموها من 300 بكسل إلى 1600 بكسل ، ولكنها أفضل طريقة تمكنت من التحقق من كيف سيبدو التصميم الخاص بك في عروض شاشة مختلفة قبل عرضها تطوير.
خيار آخر هو استخدام أداة مثل أدوبي ريفلو تسمح لك أيضًا بإضافة محتوى إلى حاويات ثم سحب مساحة العمل الخاصة بك ومشاهدة مقياس العناصر. يمكنك أيضًا تحديد نقاط فاصل الخاص بك عن طريق تغيير حجم مساحة العمل الخاصة بك حتى يتم فواصل المحتوى وإضافة استعلام وسائط. لا يزال Reflow في الإصدار التجريبي العام ويمكن تنزيله من هنا .
بعد أن قمت بتقليص التصميمات الخاصة بك بزيادات لكل 100 بكسل ، يمكنك تحديد عدد قليل من العروض التي يقوم المحتوى بتقطيعها وتصحيحها بإضافة نقطة توقف. يمكنك الآن الرجوع إلى البرنامج الذي قمت بإنشاء التصميمات الأصلية به وتغيير تخطيط التصميم الخاص بك في العروض التي قمت بتحديدها كنقاط فواصل. وهذا يعني أنه ينتهي بك الأمر تصميم تخطيطين مختلفين أو 3 أو 4 (اعتمادًا على مدى تعقيد الشبكة وعدد نقاط التوقف التي تحتاج إليها) والتي ستغطي كل الطريق من 300 بكسل إلى 1600 بكسل.
إذا كنت قد اتبعت هذه العملية ، فيجب أن يكون لديك الآن مجموعة من التخطيطات التي تتطابق مع نقاط فواصلك ، وهو مستند يوضح كيف تتكون الشبكة الخاصة بك من نسب مئوية من عرض المستعرض وكيفية انهياره للشاشات الصغيرة بالإضافة إلى كافة أنماط الطباعة التي تم إنشاؤها واختبارها بالفعل في المتصفح. يجب أن تكون هذه نقطة قوية جدًا حتى يبدأ المطور في بناء تصميماتك بدقة وبدون الحاجة إلى التعامل مع محتوى يكسر عرضًا معينًا في وقت لاحق.
قد تبدو هذه العملية طويلة للغاية ، ولكن بدون أداة محددة تم تصميمها بشكل كامل لـ RWD ، فإن هذه هي الطريقة المثلى التي وجدتها لاختبار تخطيط الاستجابة سريعًا بسهولة باستخدام برامج غير مستجيبة وتوصيل أفكاري بشكل واضح إلى مطور. هذه ليست الطريقة الوحيدة والوحيده لمقاربة مشروع RWD ، ولكن هذا أفضل ما وجدته.
ما الذي تغير تصميم الاستجابة حول سير عملك؟ ما هي النصائح التي ستشاركها؟ اسمحوا لنا أن نعرف في التعليقات.