محتوا
- طراحی برای ناشناخته ها
- یک رویکرد عملی برای طراحی
- در حال تبدیل شدن به چیدمان طرح
- به تدریج کدگذاری کنید
- غواصی در نشانه گذاری
به نظر می رسد همه در مورد طراحی وب پاسخگو این روزها صحبت می کنند و دلیل خوبی هم دارد. با افزایش تعداد دستگاههای مجهز به وب - هرکدام با قابلیت ها و ویژگی های متفاوت - ساخت وب سایت هایی با عرض ثابت دیگر منطقی نیست.
حقیقت این است که هرگز نبوده است. با این حال تاکنون بهترین تجربه در نظر گرفته شده است که تجربیاتی را ایجاد می کند که چندین فرضیه را ایجاد می کند ، اعم از وضوح صفحه ، پهنای باند یا روش ورودی. اگر تا به حال وب سایتی به ابعاد 960px طراحی کرده اید ، فقط برای مشاهده آن در صفحه کوچک صفحه دوست یکی از دوستان (و بله ، من اینجا را از روی تجربه دردناک می نویسم) ، می فهمید که چرا این یک رویکرد هوشمندانه نبوده است. اکنون ، با تلفن های هوشمند و رایانه های لوحی که به مخلوط انداخته شده اند ، مشخص است که روش های سنتی ما دیگر برای اهداف مناسب نیستند.
خوشبختانه ، ظهور درخواستهای رسانه CSS و تصدیق روزافزون اینکه وب در نوع خود یک رسانه است ، به این معنی است که ما شروع به پذیرفتن ماهیت واقعی پلت فرم می کنیم ، قبول این که جهانی بودن آن یک نقطه قوت است ، نه یک نقطه ضعف.
طی پنج روز آینده ، من شما را از طریق تکنیکی که این واقعیت را تشخیص می دهد راهنمایی می کنم: طراحی وب پاسخگو. این برنامه توسط Ethan Marcotte توسعه یافته است و طرح های سیال ، تصاویر انعطاف پذیر و پرس و جوهای رسانه ای را برای کمک به ما در ساخت سایتهایی که به راحتی با هر محیطی روبرو می شوند ، ترکیب می کند.
من این روش را با نشان دادن نحوه ساخت یک گالری رسانه ساده به شما نشان می دهم. در نمونه های من ، من یک وب سایت کوچک برای مستند کردن سفر جاده ای اخیر خود که به سراسر ایالات متحده رفته ام ، ایجاد می کنم ، اما در صورت تمایل کد و طرح را متناسب با نیازهای خود سفارشی کنید.
طراحی برای ناشناخته ها
بیشتر این آموزش حول جنبه توسعه طراحی پاسخگو متمرکز است. اما قبل از اینکه در هر کدی جستجو کنیم ، بیایید لحظه ای فکر کنیم که چگونه می توان وب سایتی را طراحی کرد که می تواند دارای طرح های بی نهایت باشد.
اکنون خوش شانس هستم که می توانم رابط های طراحی کنم و کد frontend را توسعه دهید که آنها را واقعی می کند. البته این یک مهارت منحصر به فرد نیست - اگر برای خودتان کار می کنید احتمالاً همان هستید. اما قطعاً درک اینکه چگونه محتوا می تواند هنگام ساختن طرح های سیال سازگار و دوباره جوش بخورد ، سودمند است.
من همچنین به عنوان بخشی از یک تیم بزرگتر کار می کنم که نقش من در آن تخصص بیشتری دارد. در چنین فضایی ، طراح تصویری می تواند فقط در ترجمه فریم های سیم به کامپیوترهای جذاب و جذاب (خارج از سیستم ، کاملاً پیکسلی) متمرکز شود. و غیرمعمول نیست که توسعه دهندگان به طور جداگانه قرار بگیرند ، و این طرح ها را به نشانه گذاری ناب و کارآمد و CSS ترجمه می کنند.
با این وجود ، هنگامی که شروع به ارزیابی چگونگی انطباق طرح ها با محیط های مختلف می کنیم ، چنین گردش های تفکیکی و خطی به سرعت خراب می شوند. به اندازه هر ابزار یا فناوری جدید ، باید روشهای همکاری و چابکی بیشتری را نیز در نظر بگیریم. بسیاری از پیچیده ترین مشکلاتی که هنگام طراحی وب سایت های پاسخگو پیش می آید ، می توانند به سادگی از طریق مکالمه ، آزمایش و تکرار حل شوند.
یک رویکرد عملی برای طراحی
این بدان معنا نیست که مجال تفکر طراحان درباره چگونگی کارکرد یک طرح در خارج از محدوده هر دستگاه خاص وجود ندارد.
در Clearleft ، ما طراحی بصری را از منظر دسک تاپ آغاز می کنیم. ما با تعریف یک زبان طراحی گسترده و زیبایی بصری شروع می کنیم ، که اغلب اکتشافات اولیه را بر اساس یک محتوا انجام می دهیم. به عنوان مثال ، اگر ما در حال طراحی سایت غذایی هستیم ، با یک صفحه دستور العمل شروع خواهیم کرد. برای یک سایت خبری ، یک صفحه داستان.
این نه تنها یک صفحه مهم در سایت است ، بلکه احتمالاً شامل محتوای ساختار یافته کافی برای ایجاد یک پالت تایپوگرافی است. ما همچنین به چگونگی سازگاری چیدمان فکر خواهیم کرد - حتی اگر در این مرحله در ذهن ما باشد.
یک روش مفید برای آزمایش استرس در طراحی ، تهیه چنین صفحه ای و تطبیق دادن آن برای صفحه باریک (عرض wide 320 پیکسل) است. به احتمال زیاد خواهید فهمید که برخی از جنبه های طراحی باید بازنگری شود تا در این عرض کار کنند. در اینجا چند نمونه آورده شده است:
- تایپوگرافی: عنوان های بزرگ می توانند در طرح های گسترده تر به خوبی کار کنند ، اما در صفحه های کوچکتر می توانند فضای عمودی زیادی را اشغال کنند و بنابراین نیاز به پیمایش اضافی دارند. همانطور که طول خط تغییر می کند ، شما باید ارتفاع خط و سایر روش های تایپوگرافی را نیز در نظر بگیرید.
- پیوندها: طراحی شما در دستگاههای صفحه لمسی چگونه کار خواهد کرد؟ در حالی که هنوز راهی آسان برای شناسایی این موارد نداریم (به این معنی که باید از همه جنبه های طراحی خود را در نظر بگیریم) ، طراحی برای یک صفحه باریک تر می تواند به ما فرصتی برای تفکر در مورد مناطق هدف برای پیوندها و سایر عناصر تعاملی بدهد. . دستورالعمل های iOS توصیه می کنند که این حداقل 44 پیکسل / امتیاز مربع باشد ، که هدف گذاری خوبی است.
- جهت یابی: این احتمالاً ناخوشایندترین م componentلفه هر طراحی پاسخگو خواهد بود ، خصوصاً اگر سایت شما دارای بخشهای زیادی و دارای سلسله مراتب عمیق باشد. برد فراست خلاصه ای از برخی از رویکردهای مختلف ناوبری را که در حال حاضر در نظر گرفته شده ، نوشت.
- محتوای اضافی: آیا برخی از مطالب مورد نیاز نیست؟ آیا مطالب دیگر فقط باید در سناریوهای خاصی نشان داده شوند؟ من طرفدار پنهان کردن محتوا بر اساس دستگاه مورد استفاده کاربر نیستم ، اما تکنیک هایی مانند بارگذاری مشروط (که در اواخر این هفته بررسی خواهیم کرد) می توانند به ما کمک کنند صفحات کوچکتر را سرویس کنیم که فقط در صورت لزوم محتوای مکمل را بارگیری می کنند.
طراحی دو طرح متضاد این ایده را تقویت می کند که یک طرح سازگار است ، در حالی که از همان ابتدا خریدهای بالقوه را اتو می کنید. اگرچه به نظر می رسد دو برابر شدن کار ، به خاطر داشته باشید که ما هر صفحه را با دقت کامل پیکسل طراحی نمی کنیم. در عوض ، ما بر ساخت یک زبان طراحی مقیاس پذیر تمرکز کرده ایم - یکی که با شروع اجرای آن در کد تکامل می یابد و دیگری که مبتنی بر ماژول ها و م componentsلفه های منفرد است.
در حال تبدیل شدن به چیدمان طرح
جای تعجب نیست که برای صنعتی که از نظر تاریخی مانند وب با چاپ رفتار می کرد ، طرح هایی با عرض ثابت در بسیاری از محصولات قابل تحویل ما تولید شده است. با شروع طراحی برای یک رسانه سازگار ، رویکردهای جدیدی در نظر گرفته شده است که به ما امکان می دهد ضمن تأیید ماهیت سیال محیط ، مشکلات را حل کنیم و ایده ها را بیان کنیم. در اینجا چند مورد از موارد مورد علاقه من وجود دارد:
- نمودارهای توصیف صفحه: در حالی که فریم های سیم اغلب می توانند به معنی طرح بندی باشند (و بنابراین نوع خاصی از دستگاه را فرض می كنند) ، نمودارهای توضیحات صفحه این فرض را حذف می كنند و در عوض اجزای منفرد را كه از نظر اولویت در سند مرتب شده اند ، توصیف می كنند.
- کاشی های سبک: هنگام برقراری ارتباط ایده های طراحی با مشتری ، می توانیم خود را در حال ارائه "نقاشی از وب سایت ها" بدانیم. اگر مراقب نباشیم ، مشتری به درستی می خواهد مفاهیمی را مشاهده کند که نشان می دهد چگونه طراحی در دستگاه های دیگر نیز دیده می شود. این می تواند ما را مجبور به یک وضعیت ناپایدار در تولید چندین صفحه برای چندین دستگاه کند. سامانتا وارن در مورد این مشکل فکر کرده است و کاشی های سبک را ارائه داده است. اینها جایی بین یک تابلوی خلق و خوی قرار می گیرند (اما کمتر مبهم هستند) و کامپایل های کاملاً تحقق یافته (اما دقیق کمتری دارند) و به ما در برقراری ارتباط تایپوگرافی ، سبک های دکمه ای و روش های درمان سرما کمک می کنند. آنها همچنین سطح بالاتری از بحث را با مشتریان ما تشویق می کنند.
- بازی طراحی بسیج: این تمرین می تواند در کارگاه های طراحی مشترک بسیار خوب کار کند. در این تمرین ، همه عناصری را که ممکن است در یک صفحه خاص ظاهر شوند ، در یادداشت های Post-it یادداشت می کنند. سپس اینها از نظر اهمیت به دیوار می چسبند ، مثل اینکه به صورت خطی روی تلفن همراه ظاهر می شوند. بحث حاصل ممکن است نتایج شگفت انگیزی را ایجاد کند. به عنوان مثال ، ممکن است متوجه شوید که ناوبری مهمترین م onلفه صفحه نیست. این می تواند از طریق طراحی دنبال شود ، جایی که یک پیوند جست و خیز در بالای صفحه به ناوبری در پایین صفحه پیوند می دهد.
البته هنوز محلی برای ابزارهایی که قبلاً از آنها استفاده می کنیم وجود دارد ، اما هنگام طراحی وب سایت به صورت گسترده ، باید توجه داشته باشیم که طرح بندی دیگر شناخته شده نیست.
به تدریج کدگذاری کنید
خوشبختانه ، نیازی به نگرانی در مورد طراحی بصری در مثالی نداریم که کار سختی برای ما انجام شده است! درعوض ، می توانیم روی کدگذاری طراحی خود در یک وب سایت کاملاً پاسخگو متمرکز شویم.
یک چیز دیگر قبل از شروع کار یادآوری یک اصل بنیان گذار از رسانه ای که ما با آن کار می کنیم مهم است: جهانی بودن. این بدان معناست که نه تنها برای دستگاههای دارای وب امروزی ساخته شده بلکه سازگاری با دستگاههای دیروز و فردا را نیز تضمین می کنید. جان آلسوپ توضیح داد که چرا این اصل در پست 6 میلیارد بعدی مهم است:
"این شش میلیارد نفر دیگر کودکان در مناطق روستایی هند ، آفریقا ، چین هستند که دسترسی به برق و شبکه ها ممکن است به صورت متناوب باشد. این شخصی در سوماترا با جعبه وینتل یک دهه است. این افراد هستند که صدها زبان مختلف صحبت می کنند ، با ده ها زبان مختلف سیستم های نوشتاری: این افراد اولین کسانی هستند که در خانواده خود قادر به خواندن و نوشتن هستند. این 20 درصد افراد در سراسر جهان هستند که نمی توانند بخوانند و بنویسند.’
ما می توانیم درک خود از وب را با نگاهی به مدهای مختلف (که خواستن کلمه بهتری هستند) در بین حرفه های ما جلب کرده اند ، ردیابی کنیم: استانداردهای وب ، قابلیت دسترسی ، جاوا اسکریپت بدون مانع ... همه انواع مختلفی در یک موضوع هستند: پیشرفت تدریجی. همین امر در مورد طراحی وب پاسخگو صادق است. برای ساختن براستی وب سایت ریسپانسیو ساخت سایتی است که نه تنها با گذشته سازگار باشد بلکه با آینده نیز سازگار است.
غواصی در نشانه گذاری
خوب ، به اندازه کافی از مقدمه ، وقت آن است که یک ویرایشگر متن را باز کنید.طراح ما طرحی رومیزی را در اختیار ما قرار داده است و لطف داشته است که نمونه هایی از چگونگی نمایش این مسئله را در یک نمای باریک نیز ارائه دهد.
شاید کدگذاری اینها به صورت جداگانه وسوسه انگیز باشد ، اما من قصد دارم روش دیگری را پیشنهاد کنم. با قرار دادن اجزای جداگانه - یا الگوها - که طراحی را در یک صفحه واحد تشکیل می دهند ، می توان نمونه کارهایی از الگوها ایجاد کرد. این به ما امکان می دهد تا اجزای خارج از محدوده هر طرح صفحه را توسعه دهیم ، و به ما چیزی می دهد که بعداً برای هر آزمایش رگرسیون به آن مراجعه کنیم. بیایید نشانه گذاری اولیه را در چند دستگاه مختلف مشاهده کنیم:
نمونه کارها الگوی مشخص شده ما را مشاهده کنید
خوب ، من لعنت می شوم - ما قبلاً یک وب سایت پاسخگو داریم! محتوای ما با محدودیت های هر دستگاه تطبیق می یابد ، چه در یک iPad جدید زیبا یا یک تلفن دارای ویژگی دور انداخته شده. حتی در یک مرورگر فقط متنی مانند سیاه گوش کار می کند.
با تشکر از اصول اساسی جهانی ، وب است پاسخگو به طور پیش فرض. این عالی است ، اما همچنین به این معنی است که هر کاری که از این به بعد با کد انجام می دهیم ممکن است این سازگاری بومی را به خطر بیندازد.
فردا: ما با دقت گام برمی داریم و شروع به استفاده از اولین جنبه طراحی پاسخگو می کنیم: تایپوگرافی و شبکه های سیال.
