تصميم مواقع الويب في المتصفح (اللحظات!) [مغلق]
https://stackoverflow.com/questions/432849
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russianسؤال
أنا مهتم بآراء الناس حول الإيجابيات والسلبيات، أو "الرفض الصريح" لتصميم مواقع الويب في المتصفح، والابتعاد عن Photoshop وFireworks وما إلى ذلك.
لقد كنت أصمم إعادة تشغيل لموقع الويب الخاص بي، وأقوم بتجربته في المتصفح، ولا أنظر إلى الوراء.
على سبيل المثال (أستخدم شبكة بحجم 960 بكسل تحتوي على 12 عمودًا):
<div id="news_section" class="floatleft columntwo spanfourcolumns">
…content
</div>
<div id="recent_work" class="floatleft columnfour spansevencolumns">
…content
</div>
لم يعد التصميم ممتعًا مرة أخرى فحسب، بل أصبح استخدام الشبكات والإيقاع العمودي وحتى النسبة الذهبية أكثر سهولة من أي وقت مضى.ناهيك عن أنه يلغي تمامًا الفجوة بين التصميم والترميز الثابت.
ماذا تعتقد؟
المحلول
هل تقول إنك تصنع إطارات سلكية للصفحات في المتصفح (بواسطة HTML/CSS) أولاً ثم تطبيق تصميم؟ هذا ما أفعله (و 37Signals يتبع هذا الفكر جدا).
في رأيي ، من الجيد للمطورين إنشاء إطارات سلكية ثابتة دون لمس فوتوشوب لأن الموقع قابل للاستخدام على الفور ولا يضيع الوقت على جعل الأمور تبدو صحيحة تمامًا.
كما أنه لا يميل إلى أن يكون هناك الكثير من سلسلة التصميم مع المبرمجين - أحب أن أترك ذلك للأشخاص الذين يعرفون كل أمر PS تحت الشمس :)
أنا أيضا استخدام شبكات يوي CSS Framework لإنشاء تخطيطات بسرعة.
نصائح أخرى
حسنًا ، إن القيام بالعمل باستخدام المتصفح ليس أسوأ شيء في العالم ، ولكن هناك اثنين من "Hell No's":
1) لاتفعل صمم تطبيقك باستخدام IE. استخدام الكروم أو Firefox. يمكن أن يخدعك سلوك IE غير المتوافق في التفكير في أن CSS الخاص بك صالح عندما لا يكون الأمر كذلك. حالة الاستخدام الأساسية الخاصة بك لـ IE هي اختبار موقعك في IE.
2) لا تسمي فصولك عن كيفية ظهورها ، كما فعلت في مثالك.
لا!!
إذا تعلم iDesign Steve التصميم مباشرة في المتصفح،
- سوف يعاني الابتكار:لا يهتم ستيف بالقيود المفروضة على CSS/HTML/whatnot.إنه حر في اكتشاف الموقع الأكثر إثارة للإعجاب الذي لم تره البشرية بعد.إنه من واجب المبرمج العادي جو أن يوسع حدود CSS/HTML/وما إلى ذلك لحشر التصميم المعتمد في الوقت المناسب، ورؤيته ممزقًا إلى أجزاء صغيرة بواسطة متصفح غبي، والذي يصادف أنه يتمتع بحجم جيد من حصة السوق، قبل الموعد النهائي مباشرة.واجه الأمر، كتابة CSS تبدو وكأنها كتابة كود التجميع.إن إنجاز حتى أبسط الأشياء (تخطيط سلس متعدد الأعمدة لأي شخص؟) أمر صعب للغاية ويجعلك منتشيًا لفترة من الوقت.
- سوف يتضاءل عامل البرودة لدى ستيف:لا يوجد مطور واحد أعرفه يستخدم أداة WYSIWYG لإنشاء HTML/CSS أو يعتبر ذلك مقبولاً.عندما يكون كل ما تحتاجه هو محرر نصوص، فلن تبدو رائعًا.عندما يلقي العميل نظرة على شاشة ستيف، ويرى مجموعة من النصوص بدلاً من عدة نوافذ، ومائة رمز صغير مضحك، ونصف مسودة ملونة منتهية، فقد يعتقد أيضًا أن "حفيدي البالغ من العمر 7 سنوات يمكنه كتابة الأشياء أيضًا. ..".
- لا يزال لدى جو قيود أكثر من تلك التي لدى ستيف:يجب أن يكون الموقع سهل الوصول إليه، ويجب أن يكون التصميم سلسًا بما يكفي لاستيعاب جميع أنواع المخرجات، واللعب بشكل جيد مع جافا سكريبت...إذا تمت إعادة كتابة CSS/HTML على أي حال، فلا داعي للنضال.
كن زميلًا جيدًا في الفريق وقم بتشغيل Photoshop الآن.يحتاج جو إلى وظيفته لدفع فواتيره.
حسنًا ، بالنسبة لشخص لديه مستواي من عدم كفاءة التصميم ، فهو رسم بيضاء واحد ثم مباشرة إلى HTML و CSS.
لا تزال مواقع الويب الخاصة بي تبدو فظيعة ...
خلال المواقع القليلة الماضية التي قمت بها ، اتخذت كلتا النهجين. في كل مرة ، اتخذت الصفحة المصممة مباشرة في HTML/CSS العمل أقل بكثير ، لكنها كانت موقع ويب أقل جاذبية. إذا كنت تهتم بصنع صفحة جذابة ، فابدأ في Photoshop ، وإلا فسوف تأخذ اختصارات في كثير من الأحيان في CSS. يمكن إنشاء فكرة بشكل أسرع وأكثر مرونة في Photoshop مما سيؤدي إلى تجربة أفكارك وستتوصل إلى موقع أفضل بصريًا.
أنا لا أؤدي أبدًا تصميم مواقع الويب في Photoshop ؛ أذهب مباشرة من الرسومات المادية إلى HTML و CSS. أجد الأمر أسرع ولا ينتهي بك الأمر إلى التخلص من شيء كنت تعمل عليه لساعات (ملف Photoshop).
لقد اخترت البقاء مع الإطارات السلكية والتصميم من الورق في المتصفح. بالطبع ، هذا ما ينجح لي ، وقد جعلني مصممًا أكثر إبداعًا.
على الرغم من أنني أرغب في استخدام مكتبات CSS الخاصة بي من أجل ذلك ، إلا أن إلقاء نظرة على مخطط جوجل, ، وتحقق هذه المقالة بواسطة مصمم الويب ، مارك بولتون.
قطعا لا!
- تقوم بإعادة خطأ "الجداول لكل شيء" ، فقط باستخدام الفصول بدلاً من الجداول.
- أنت تمزج العرض التقديمي (أين أضع هذا) بالمحتوى. فصولك لا تخبر ما هذا ، فإنهم يقولون مكان وضعه.
- التصميم الخاص بك هو حجم ثابت. لن يتدفق مع تحجيم Windows ، لذلك سيحتاج إما إلى تمرير أفقي أو مساحة بيضاء كبيرة على اليمين.
لكنني لا أفهم لماذا يذكر أي شخص فوتوشوب. إنها الأداة الأخيرة تقريبًا لتصميم الويب ، وربما يكون Illustrator هو الأداة الوحيدة الأقل ملاءمة لهذا.
لقد وجدت أنه على الرغم من أن رسمًا بدنيًا يمكن أن يبدأك على المسار الصحيح للتصميم ، إلا أنه يمكنك جعل تخطيطات أفضل بكثير في Adobe Illustrator (وهو أسهل بكثير في نقل العناصر حولها من Photoshop). بمجرد اكتمال التصميم الخاص بك ، استخدم Photoshop لتقطيعه.
رأي واحد يجب مراعاته هو من تصممه. إذا كنت تقوم بتصميم موقع لعميل ، فقد يكون من المفيد القيام بتصاعد سريع سريع في Photoshop حتى يعرفوا التخطيط ويمكنهم تسجيل الخروج على التصميم الخاص بك. بمجرد أن يتفق العميل على التصميم ، يمكنك إنشاء إطار سلك يناسب العناصر من وهمية الخاص بك ، ثم يمكنك لصق العناصر التي تتطلب صورًا فعلية مباشرة من الناهض.
عند اتباع هذه الطريقة ، يتعين عليك التفكير في جميع عناصر التصميم المتاحة التي يمكنك استخدامها لتنفيذ وهمية وتأكد من أن تضعها معًا في طبيعة مصممة جيدًا ودليئة ، وليس مجرد شيء من شأنه أن ينجز المهمة.
يساعد Compass ، وخاصة المخطط/الدلالي ، كثيرًا عند التصميم في المتصفح. أود أيضًا الحفاظ على التخطيط والأنماط على ملفات مختلفة ، لذلك يمكنني بسهولة التخلص من الأنماط التي لا أحبها أثناء الحفاظ على الإطار السلكي في مكان واحد. أوصي أيضًا باستخدام pallettes الملونة والتأليف على مقياس الخط ، كلاهما مفيد وأسهل في تحقيق استخدام متغيرات SASS.
