راهنمای حرفه ای برای طراحی وب پاسخگو

محتوا

• تصاویر پاسخگو
• کارایی
• بارگذاری مشروط و تنبل
• تایپوگرافی پاسخگو
• نمایش داده شد رسانه در JavaScript
• پیشرفت تدریجی
• چیدمان
• طرح شبکه CSS
• سرانجام

طراحی وب پاسخگو بسیار ساده به نظر می رسد. شبکه های انعطاف پذیر را برای چیدمان انتخاب کنید ، از رسانه های انعطاف پذیر (تصاویر ، ویدئو ، فریم ها) استفاده کنید و پرس و جوهای رسانه را برای به روزرسانی این اندازه گیری ها برای ترتیب بهتر محتوا در هر دیدگاه استفاده کنید. در عمل ما یاد گرفته ایم که واقعاً به همین راحتی نیست. مسائل کوچکی که در طی هر پروژه به وجود می آیند باعث می شوند که سرمان خراشیده شود و حتی گاهی اوقات سنگرهای ناخن روی میزهای ما حک شود.

از زمان شروع به ارزیابی خبرنامه هفتگی Design Responsive ، اینقدر خوش شانس بوده ام که با بسیاری از اعضای جامعه وب صحبت کرده و تجربیات آنها را بشنوم. من می خواستم بدانم که جامعه واقعاً چه می خواهد یاد بگیرد ، بنابراین یک نظرسنجی را برای خوانندگان پخش کردم. در اینجا نتایج برتر وجود دارد:

1. تصاویر پاسخگو
2. بهبود عملکرد
3. تایپوگرافی پاسخگو
4. نمایش داده شد رسانه در JavaScript
5. پیشرفت تدریجی
6. چیدمان

با در نظر داشتن این موضوعات ، من یک سری پادکست اجرا کردم که از برخی از رهبران صنعت ما نظراتشان را می پرسم. در پاسخ آنها ، یک نکته اتفاق آرا بود: قبل از اینکه نگران تکنیک های پیشرفته و مهیج باشید نگران نباشید ، درست کار کنید. با برگرداندن مطالب به مبانی اولیه ، ما می توانیم برای همه یک رابط قدرتمند بسازیم ، طبق ویژگی هایی که دستگاه یا زمینه کاربر اجازه می دهد ، لایه بندی کنیم.

"پس ... این تکنیک های پیشرفته چطور؟" من فکر می کنم استفان هی بهترین نتیجه را در هنگام جمع بندی بیان کرد: "روش نهایی RWD شروع کار با استفاده نکردن از تکنیک های پیشرفته RWD است. با محتوای ساختار یافته شروع کنید و راه خود را بالا ببرید. فقط زمانی که طرح شکسته شود و محتوا آن را الزام کند ، یک نقطه انفصال اضافه کنید و همین. "

در این مقاله ، من با اصول شروع می کنم و لایه هایی از پیچیدگی را اضافه می کنم ، همانطور که شرایط اجازه می دهد ، تا بتوانم آن فنون پیشرفته را ایجاد کنم. بیا شروع کنیم.

تصاویر پاسخگو

رسانه مایع هنگامی که برای اولین بار توسط ایتان مارکوت تعریف شد ، قسمت اصلی RWD بود. عرض: 100٪ ، حداکثر عرض: 100؛ امروز نیز کار می کند ، اما چشم انداز واکنش پذیر بسیار پیچیده تر شده است. با افزایش تعداد اندازه صفحه نمایش ، تراکم پیکسل و دستگاه هایی که از آنها پشتیبانی می کنند ، ما خواهان کنترل بیشتری هستیم.

سه نگرانی اصلی توسط گروه پاسخگوی تصاویر جامعه (RICG) تعریف شده است:

1. اندازه کیلوبایت تصویری که از طریق سیم ارسال می کنیم
2. اندازه فیزیکی تصویری که برای دستگاه های DPI بالا ارسال می کنیم
3. برش تصویر به شکل جهت هنری برای اندازه خاص نمای نمایش

Yoav Weiss ، با کمک Indiegogo ، بیشتر کارهای مربوط به پیاده سازی Blink - Google's fork of WebKit را انجام داده است و تا زمان خواندن این مقاله در Chrome و Firefox ارسال می شود. Safari 8 srcset ارسال می شود ، با این وجود ویژگی اندازه فقط در ساخت شبانه است و تصویر> هنوز اجرا نشده است.

با ورود هر چیز جدیدی به روند توسعه وب ، شروع کار دشوار است. بیایید مثال را مرحله به مرحله اجرا کنیم.

img! - اعلام کردن تصویر برگشتی برای همه مرورگرهای پشتیبانی کننده عکس -> src = "horse-350.webp"! - همه اندازه های تصویر را در srcset اعلام کنید. عرض تصویر را با استفاده از توصیف کننده w وارد کنید تا مرورگر از عرض هر تصویر مطلع شود .--> srcset = "horse-350.webp 350w ، horse-500.webp 500w ، horse-1024.webp 1024w ، horse.webp 2000w "! - اندازه ها به مرورگر از طرح سایت ما اطلاع می دهند. در اینجا ما می گوییم برای هر ویو ویو که 64 سانتیمتر و بزرگتر باشد ، از تصویری استفاده کنید که 70٪ از نمای نمایش را اشغال کند -> sizes = "(min-width: 64em) 70vw،! - اگر ویوپورت اینگونه نباشد بزرگ است ، پس برای هر ویو ویو که 37.5 سانتیمتر و بزرگتر است ، از تصویری استفاده کنید که 95٪ از ویوپورت را اشغال کند -> (min-width: 37.5em) 95vw،! - و اگر ویوپورت کوچکتر از آن باشد ، استفاده کنید تصویری که 100٪ از دیدگاه را اشغال می کند -> 100vw "- - همیشه متن alt داشته باشید. -> alt =" یک اسب "/>

از نظر عملکرد ، مهم نیست که شما از ویژگی min-عرض یا max-عرض در ویژگی اندازه استفاده کنید - اما ترتیب منبع مهم است. مرورگر همیشه از اولین اندازه مطابقت استفاده می کند.

همچنین ، به یاد داشته باشید که ما در حال رمزگذاری صفت اندازه ها هستیم تا به طور مستقیم در برابر طراحی ما تعریف شود. این ممکن است باعث حرکت مسائل به جلو شود. به عنوان مثال ، اگر سایت خود را دوباره طراحی کنید ، باید تمام img> یا picture> ها را مرور کرده و اندازه ها را دوباره تعریف کنید. اگر از CMS استفاده می کنید ، به عنوان بخشی از روند ساخت ، می توانید بر این مشکل غلبه کنید.

وردپرس از قبل افزونه ای برای کمک به شما دارد. این srcset را بر روی انواع استاندارد تصویر WP تعریف می کند و به شما امکان می دهد اندازه ها را در یک مکان مرکزی اعلام کنید. هنگامی که صفحه از پایگاه داده تولید می شود ، هرگونه ذکر شده در img> را جابجا می کند و علامت گذاری تصویر را جایگزین می کند.

پایه ای

• به این فکر کنید که آیا واقعاً نیاز به درج تصویر دارید. آیا محتوای اصلی تصویر است یا تزئینی است؟ یک تصویر کمتر به معنی زمان بارگیری سریعتر است
• با استفاده از ImageOptim ، تصاویر مورد نیاز خود را بهینه کنید
• عنوان های منقضی شده برای تصاویر خود را در سرور یا فایل .htaccess خود تنظیم کنید (جزئیات را در بخش "عملکرد" ​​مشاهده کنید)
• PictureFill پشتیبانی از پلی پر کردن برای تصاویر را فراهم می کند

پیشرفته

• Lazy با استفاده از پلاگین Lazy Load jQuery تصاویر خود را بارگیری کنید
• برای شناسایی ویژگی ها از HTMLImageElement.Sizes و HTMLPictureElement استفاده کنید.
• پلاگین PictureFill WP پیشرفته ، که در Github یافت می شود ، به شما امکان می دهد مقادیر عرض و اندازه تصویر را به صورت دلخواه تعیین کنید

کارایی

برای دستیابی به سریعترین عملکرد قابل درک در صفحات خود ، ما به تمام HTML و CSS مورد نیاز برای ارائه قسمت بالای صفحه خود در اولین پاسخ از سرور نیاز داریم. این عدد جادویی 14 کیلوبایت است و براساس حداکثر اندازه پنجره شلوغی در اولین زمان رفت و برگشت (RTT) است.

پاتریک هامان ، پیشگام فنی در گاردین ، ​​و تیم او موفق شده اند با استفاده از ترکیبی از تکنیک های جلو و عقب ، مانع 1000 میلی متر را بشکنند. روش نگهبان این است که اطمینان حاصل شود محتوای مورد نیاز - مقاله - در اسرع وقت و در حد عدد 14 کیلوبایت به کاربر تحویل داده می شود.

بیایید روند را بررسی کنیم:

1. کلیک کاربر بر روی پیوند Google به یک خبر
2. یک درخواست مسدود کردن برای مقاله به پایگاه داده ارسال می شود. هیچ داستان یا نظر مرتبطی درخواست نمی شود
3. HTML حاوی CSS بحرانی است
4. در سر>
5. فرآیند "Cut the خردل" انجام شده و هر عنصر شرطی بر اساس ویژگی های دستگاه کاربر بارگیری می شود
6. هر محتوایی که مربوط به خود مقاله باشد یا از آن پشتیبانی کند (تصاویر مقاله مرتبط ، نظرات مقاله و غیره) در جای خود قرار می گیرد

بهینه سازی مسیر رندر حیاتی مانند این به معنای طول> 222 خط است. با این حال ، محتوای حیاتی که کاربر مشاهده کرد ، در هنگام بارگیری ، همچنان در محموله اولیه 14 کیلو باری قرار دارد. این فرآیند است که به شکستن مانع ارائه 1000 میلی متر کمک می کند.

بارگذاری مشروط و تنبل

بارگذاری مشروط ، تجربه کاربر را بر اساس ویژگی دستگاه او بهبود می بخشد. ابزاری مانند Modernizr به شما امکان می دهد این ویژگی ها را آزمایش کنید ، اما توجه داشته باشید که فقط به این دلیل که مرورگر می گوید پشتیبانی می کند ، این همیشه به معنای پشتیبانی کامل نیست.

یک تکنیک این است که بارگیری چیزی را متوقف کنید تا زمانی که کاربر قصد استفاده از آن ویژگی را نشان دهد. این می تواند مشروط در نظر گرفته شود. می توانید بارگیری در آیکون های اجتماعی را تا زمانی که کاربر روی آن نمیرود یا آنها را لمس نکند ، متوقف کنید ، یا می توانید از بارگذاری یک iframe Google Map در پنجره های نمای کوچکتر که احتمالاً کاربر پیوند به یک برنامه خاص نقشه برداری را ترجیح می دهد ، جلوگیری کنید. رویکرد دیگر "برش خردل" است - برای جزئیات بیشتر در این مورد به جعبه بالا مراجعه کنید.

بارگذاری تنبل به عنوان چیزی تعریف می شود که شما همیشه قصد بارگذاری آن در صفحه را دارید - تصاویری که بخشی از مقاله ، نظرات یا سایر مقاله های مرتبط هستند - اما برای شروع مصرف محتوا نیازی به حضور در آن نیست.

پایه ای

• gzipping را برای پرونده ها فعال کنید و عنوان های منقضی شده را برای تمام محتوای ثابت تنظیم کنید (netm.ag/ Expire-260)
• از افزونه Lazy Load jQuery استفاده کنید. با نزدیک شدن به ویورپورت یا بعد از مدت زمان مشخص ، تصاویر بارگیری می شود

پیشرفته

• سریع یا CloudFlare را تنظیم کنید. شبکه های تحویل محتوا (CDN) محتوای ثابت شما را سریعتر از سرور خود به کاربران تحویل می دهند و دارای چند طبقه رایگان هستند
• SPDY را برای مرورگرهای دارای قابلیت http2 فعال کنید تا از ویژگیهای http2 مانند درخواستهای موازی http بهره مند شوید
• تعداد اجتماعی امکان بارگذاری مشروط آیکون های اجتماعی شما را فراهم می کند
• با استفاده از Static Maps API می توانید نقشه های Google Interactive را برای تصاویر خاموش کنید. به مثال برد فراست در netm.ag/static-260 نگاهی بیندازید
• Ajax Include Pattern قطعه های محتوا را از یک ویژگی داده قبل ، داده پس از آن یا جایگزین داده بارگیری می کند

تایپوگرافی پاسخگو

تایپوگرافی یعنی هضم آسان مطالب شما. تایپوگرافی پاسخگو برای اطمینان از خوانایی در طیف گسترده ای از دستگاه ها و ویوپورت ، این مورد را گسترش می دهد. جوردن مور اذعان می کند که نوع آن چیزی است که او مایل نیست از آن تکان بخورد. در صورت نیاز یک یا دو تصویر رها کنید ، اما مطمئن شوید که از نوع عالی برخوردار هستید.

استفان هی پیشنهاد می کند اندازه قلم HTML را روی 100 درصد تنظیم کنید (بخوانید: فقط آن را همانطور که هست بگذارید) زیرا هر مرورگر یا سازنده دستگاه پیش فرض قابل خواندن قابل قبولی را برای یک رزولوشن یا دستگاه خاص ایجاد می کند. برای اکثر مرورگرهای دسک تاپ این 16px است.

از طرف دیگر ، مور از واحد REM و اندازه قلم HTML برای تعیین حداقل اندازه قلم برای برخی از عناصر محتوایی استفاده می کند. به عنوان مثال ، اگر می خواهید خط مقالات مقاله همیشه 14 پیکسل باشد ، سپس آن را به عنوان اندازه اصلی قلم بر روی عنصر HTML قرار دهید و .byline {font-size: 1rem؛} را تنظیم کنید. همانطور که بدن را اندازه می گیرید: font-size: متناسب با نمای نمایش ، بر سبک .by-line تأثیر نخواهید گذاشت.

طول خط خواندن خوب نیز مهم است - برای 45 تا 65 نویسه هدف بگیرید. یک نشانک وجود دارد که می توانید برای بررسی محتوای خود استفاده کنید. اگر با طراحی خود از چندین زبان پشتیبانی می کنید ، ممکن است طول خط نیز متفاوت باشد. مور پیشنهاد می کند که از مقاله: lang (de) {max-width: 30em} استفاده کنید تا مسائل موجود در آن را پوشش ندهد.

برای حفظ ریتم عمودی ، حاشیه پایین را در برابر بلوک های محتوا ، ul> ، ol> ، blockquote> ، table> ، blockquote> و غیره تنظیم کنید ، همان اندازه طول خط. اگر ریتم با معرفی تصاویر قطع شود ، می توانید با افزودن Baseline.js یا BaselineAlign.js آن را برطرف کنید.

پایه ای

• قلم خود را بر روی 100 درصد بدن قرار دهید
• در واحدهای نسبی کار کنید
• حاشیه های خود را روی ارتفاع خط خود تنظیم کنید تا ریتم عمودی در طراحی شما حفظ شود

پیشرفته

• با Enhance.js یا بارگذاری قلم به تعویق افتاده ، عملکرد بارگیری قلم را بهبود ببخشید
• برای عناوین معنایی از Sassincludes استفاده کنید.
• غالباً باید از سبک h5 در یک ابزارک نوار کناری استفاده کنیم که به علامت گذاری h2 نیاز دارد. برای کنترل اندازه استفاده کنید و با کد زیر معنایی باقی بمانید از Bearded’s Typographic Mixins استفاده کنید:

.sidebar h2 {include عنوان-5}

نمایش داده شد رسانه در JavaScript

از زمانی که ما توانسته ایم از طریق پرس و جوهای رسانه ای ، چیدمان بین تعداد مختلف ویوپورت را کنترل کنیم ، به دنبال راهی برای پیوند دادن آن به اجرای JavaScript نیز بوده ایم. چند روش برای روشن کردن جاوا اسکریپت در برخی از عرض ها ، ارتفاع ها و جهت های دید خاص وجود دارد و برخی از افراد باهوش چندین پلاگین JS بومی آسان برای استفاده مانند Enquire.js و Simple State Manager نوشته اند. حتی می توانید این کار را خودتان با استفاده از matchMedia بسازید. با این حال ، این مسئله وجود دارد که شما باید درخواستهای رسانه خود را در CSS و JavaScript خود تکرار کنید.

Aaron Gustafson یک ترفند دقیق دارد که به این معنی است که شما مجبور نیستید درخواستهای رسانه خود را در CSS و JS خود مدیریت و مطابقت دهید. این ایده در اصل از جرمی کیت سرچشمه گرفته است و در این مثال گوستافسون آن را به مرحله اجرا رسانده است.

با استفاده از getActiveMQ (netm.ag/media-260) div # getActiveMQ-watcher را در انتهای عنصر بدن تزریق کرده و پنهان کنید. سپس در CSS # getActiveMQ-watcher {font-family: break-0؛} را برای اولین جستجوی رسانه تنظیم کنید ، font-family: break-1؛ به دوم ، font-family: break-2؛ به سوم و غیره

اسکریپت با استفاده از watchResize () (netm.ag/resize-260) بررسی می کند که آیا اندازه نمای نمایش تغییر کرده است یا خیر ، و سپس فونت-خانواده فعال را بازخوانی می کند. اکنون می توانید از این ویژگی برای قلاب کردن پیشرفت های JS مانند افزودن یک رابط جدول دار به یک dl> درصورت امکان مشاهده ، تغییر رفتار یک جعبه سبک یا به روزرسانی طرح جدول داده استفاده کنید. getActiveMQ Codepen را در netm.ag/active-260 بررسی کنید.

پایه ای

• جاوا اسکریپت را برای Viewport های مختلف فراموش کنید. عملکردهای وب سایت و محتوا را به گونه ای در اختیار کاربران قرار دهید که بتوانند از طریق همه بازدیدها به آن دسترسی پیدا کنند. ما هرگز نیازی به جاوا اسکریپت نداریم

پیشرفته

• روش Gustafson را با استفاده از Breakup به عنوان یک لیست از پیش تعیین شده از سوالات رسانه و ایجاد خودکار ایجاد لیست خانواده های قلم برای getActiveMQ-watcher گسترش دهید.

پیشرفت تدریجی

یک تصور غلط رایج در مورد پیشرفت تدریجی این است که مردم فکر می کنند ، "اوه ، من نمی توانم از این ویژگی جدید استفاده کنم" ، اما واقعاً برعکس است. پیشرفت پیشرفته به این معنی است که می توانید یک ویژگی را ارائه دهید ، اگر فقط در یک مرورگر پشتیبانی شود یا حتی بدون آن ، و با گذشت زمان با ورود نسخه های جدید ، افراد تجربه بهتری پیدا می کنند.

اگر به عملکرد اصلی هر وب سایت نگاهی بیندازید ، می توانید آن را به صورت HTML ارائه دهید و از طرف سرور بخواهید تمام پردازش ها را انجام دهد. پرداخت ها ، فرم ها ، پسندیدن ها ، اشتراک گذاری ، ایمیل ها ، داشبورد - همه اینها قابل انجام است. پس از ساختن وظیفه اساسی ، می توانیم فناوری های عالی را روی آن لایه بندی کنیم ، زیرا ما یک شبکه ایمنی برای گرفتن آنهایی که از بین می روند ، داریم. بیشتر رویکردهای پیشرفته ای که در اینجا درباره آنها صحبت کردیم مبتنی بر پیشرفت تدریجی است.

چیدمان

گفتن طرح منعطف ساده است ، اما رویکردهای مختلفی دارد. با استفاده از انتخابگر: nth-child () طرح های ساده شبکه را با نشانه گذاری کمتر ایجاد کنید.

/ * اولین عرض تلفن همراه را برای شبکه اعلام کنید * / .grid-1-4 {float: left؛ عرض: 100٪ } / * وقتی که ویپورت حداقل 37.5em باشد ، شبکه را روی 50٪ در هر عنصر * /media تنظیم کنید (عرض عرض: 37.5em) {.grid-1-4 {عرض: 50٪ } / * بعد از اولین عنصر شناور را هر دو ثانیه پاک کنید. این 3 ، 5 ، 7 ، 9 در شبکه را هدف قرار می دهد. * / .grid-1-4: nth-of-type (2n + 1) {clear: left؛ }}media (حداقل عرض: 64em) {.grid-1-4 {عرض: 25٪؛ } / * پاک کردن قبلی * / .grid-1-4: nth-of-type (2n + 1) {clear: none؛ } / * شناور را بعد از اولین عنصر ، هر 4 عنصر را پاک کنید. این 5 ، 9 در شبکه را هدف قرار می دهد. * / .grid-1-4: nth-of-type (4n + 1) {clear: left؛ }}

با استفاده از موقعیت و شناور برای چیدمان خود خداحافظی کنید. در حالی که آنها تا به امروز به ما کمک خوبی کرده اند ، استفاده از آنها برای طرح بندی هک ضروری بوده است. ما در حال حاضر دو بچه جدید در این بلوک داریم که به ما در رفع مشکلات موجود در چیدمان ما کمک می کند - Flexbox و Grids.

Flexbox برای ماژول های جداگانه عالی است ، و می تواند طرح محتوای هر یک از ماژول ها را کنترل کند. طرح هایی وجود دارد که ما سعی در ارائه آنها داریم که با استفاده از Flexbox به راحتی می توان به آنها دست یافت و این در مورد سایت های پاسخگو نیز صدق بیشتری دارد. برای اطلاعات بیشتر در این باره ، به راهنمای CSS Tricks در مورد Flexbox یا Flexbox Polyfill مراجعه کنید.

طرح شبکه CSS

شبکه بیشتر برای طرح سطح کلان است. ماژول طرح بندی Grid به شما یک روش عالی برای توصیف طرح بندی خود در CSS می دهد. در حالی که در حال حاضر هنوز در مرحله پیش نویس است ، من این مقاله را در مورد طرح شبکه CSS توسط راشل اندرو توصیه می کنم.

سرانجام

اینها فقط چند نکته برای گسترش عملکرد پاسخگو شماست. هنگام نزدیک شدن به هر کار پاسخگو جدید ، یک قدم به عقب برگردید و اطمینان حاصل کنید که اصول اولیه را درست می گیرید. با محتوا ، HTML و تجربیات بهبود یافته لایه خود شروع کنید و محدودیتی برای اینکه می توانید طرح های خود را ببرید وجود ندارد.

این مقاله در اصل در شماره 260 از مجله نت.