شما در طراحی سایت کمی شگفت زده میشوید

این صفحه شکسته یا یک صفحه فرود ابدی نیست. امروز نشانه ای مهم از زندگی مجله Smashing Magazine است و این صفحه پیش نمایش اولیه ای از آینده است:  هنوز وسواس خوبی برای محتوای با کیفیت است. تعمیرات اساسی کامل، از لحاظ فنی و فنی، یک مجله خوب چاپی جدید و عضویت جدید Smashing جدید، با ویژگی های عالی و لذت بخش برای شما، جامعه دوست داشتنی ما. کنجکاو خوب، کمربند ایمنی خود را بچرخانید و مرور کنید – این کاملا یک سفر است!  امروز ما خوشحال هستیم که بتای باز عمومی مجله Smashing Next، next.smashingmagazine.com را با یک طراحی سایت جدید اعلام می کنیم، اما یکی با چند اشکالات و مسائلی که باید … شما می دانید، ابتدا شکسته شد. (با عرض پوزش در مورد آن!) انتشار بزرگ بنگ برنامه ریزی شده در اواخر امسال (احتمالا اوایل ماه مه تا ژوئن). بعضی از چیزها در حال حاضر ممکن است شکسته شوند و یا فقط ساده و عجیب و غریب باشند – ما هنوز کار کمی انجام می دهیم، پس لطفا به ما اطلاع دهید اگر با هر گونه مساله مواجه شوید (و قطعا!).

 

بازنشستگی Magazine

در طول ۱۸ ماه گذشته، ما با بازسازی کامل این وب سایت کوچک و با تکنولوژی روزانه با Dan Mall، Sara Soueidan، Marko Dugonjić، Ilya Pukhalski، Matt Biilman، Ricardo Gimenes، Sara Drasner، Andrew Clarke و تیم Netlify مشغول به کار بوده ایم. چه چیزی متفاوت است؟ خوب، همه چیز. طراحی سایت سایت دیگر در وردپرس اجرا نخواهد شد؛ در واقع، آن را در پایان تمام پایان ندارد. ما در حال رفتن به JAMstack: مقالات به طور مستقیم به Netlify CDNs منتشر شده، با یک فروشگاه سفارشی بر اساس بدون بازپرداخت بی نظیر تجارت الکترونیک GoCommerce و هیئت مدیره شغل است که همه فقط HTML استاتیک است؛ ویرایش محتوا با منبع باز تازه Netlify، CMS مبتنی بر GIT، جستجو در زمان واقعی توسط Algolia، پشتیبانی کامل از HTTP / 2 و کل وب سایت به عنوان یک برنامه وب پیشرفته با کارمند سرویس در پس زمینه. چگونه کار می کند؟ کاملا ساده است، در واقع. محتوا در فایل های Markdown ذخیره می شود. HTML قبل از پختن با استفاده از ژنراتور سایت ایستا Hugo، همراه با یک خط لوله مدرن دارایی ساخته شده با Gulp و webpack، که همه بر اساس بویلر Plate Victor Hugo ساخته شده است. ما آن را با تعداد انگشت شماری از API های فانتزی، از جمله آنهایی که توسط نوار خط برای پرداخت، Algolia برای جستجو، ابرقهرمان برای تصاویر پاسخگو، و API های منبع باز Netlify GoCommerce (API بدون سرقت تجارت الکترونیکی)، GoTrue برای احراز هویت، و GoTell برای بیش از ۱۵۰،۰۰۰ نظر ما. هر بار تغییر محتوا، همه چیز به Netlify’s CDN گره نزدیک شما نزدیک است. ما بهترین کار را برای اطمینان از دسترسی به محتوا و به تدریج افزایش می دهیم، با کارایی در ذهن داشته باشیم. اگر جاوا اسکریپت در دسترس نیست و یا اگر شبکه آهسته باشد، ما محتوا را از طریق فسادهای استاتیک (به عنوان مثال، با پیوند مستقیم به جستجوی Google) و همچنین یک کارمند خدماتی که مداوم CSS، جاوا اسکریپت ها، SVG ها، فونت ها و دارایی های دیگر در حافظه پنهان آن. اجزای پویا در جاوااسکریپت همه مبتنی بر Preact هستند و بیشتر صفحاتی که در وبسایت مشاهده می کنید، به طور کامل قبل از ارائه، پیش ساخته شده و مستقر شده اند، آماده برای استفاده از CDN در نزدیکی شما.

 

چرا چنین تغییر بزرگی؟

این سوال خوبی است که باید بپرسید. چند دلیل وجود دارد. در گذشته ما از وردپرس به عنوان یک سیستم مدیریت محتوا استفاده می کردیم، هیئت مدیره ما در روبی در حال اجرا بود و در یک لحظه Shopify از Magento برای فروشگاه آنلاین ما تغییر کرد. نه تنها نگهداری از چهار سیستم عامل جداگانه بسیار پیچیده بود، بلکه طراحی یک تجربه سازگار و فوق العاده که ما آن را پیش بینی کردیم، به دلیل محدودیت های فنی یا الزامات اعمال شده توسط این سیستم ها، تقریبا غیر ممکن بود. در واقع، توسعه برای هر پلتفرم به طور جداگانه بسیار گران و آهسته بود و به طرق مختلف، ایجاد یک تجربه ی منسجم در جایی که کاربر به معنای واقعی کلمه “جریان” را از یک منطقه به دیگری قابل ملاحظه دشوار بود. در نتیجه، به دلیل اینکه بعضی از مناطق از منظر تجاری مهم تر بودند، آنها در حال رشد و رشد سریع بودند، در حالی که دیگران در تاریکی فرو ریختند. این به تجربه ناسازگار، ناقص و بی رحمانه، کاملا مزاحم و ناامید منجر شد. و حتی زمانی که ما متعهد به انجام تغییرات بزرگی برای متحد کردن تجربه شده ایم، از زمان استفاده از سیستم عامل های مختلف، پشته ها و در برخی موارد حتی طرح های مختلف، یک وظیفه بزرگ و چالش برانگیز بود. عملکرد دیگر دلیل دیگری بود. با یک CDN مناسب، پشتیبانی کامل از HTTP / 2 و کارکنان سرویس در سال گذشته، ما موفق به ضرب و شتم نتایج عملکردی که تا به حال داشته اید. با این حال، حتی با تنظیم nginx فانتزی، عملکرد ما می توانیم با یک صفحه از پیش ساخته شده با جاوا اسکریپت بهبود یافته بود چیزی کمتر از نفس گیر است. در این مرحله ما کاملا جایی نیست که میخواهیم داشته باشیم و ما منتظر بهینه سازی تحویل HTTP / 2 هستیم و برخی از پیشرفتهای جزئی و مهم را اضافه میکنیم و نتایج را اندازهگیری میکنیم. اما آزمون اولیه نشان داد که زمان شروع رندر حدود ۵۰۰-۶۰۰ میلی ثانیه است و Time To Interactive به طور پیوسته کمتر از ۱ ثانیه است. ما نمیتوانیم به همان سطح عملکرد با پشته وردپرس و LAMP دست یابیم. برای اولین بار در ۱۰ سال، ما توانستیم یک تجربه فوق العاده را از ابتدا تعریف کنیم و آن را از ابتدا تا انتهای پیاده سازی کنیم. این یک وحی بزرگ نیست: هنگامی که به طراحی تعامل می آید، درخواست تمام سوالات درست کافی نیست؛ همچنین مهم است که چگونه و چه زمانی از این سوالات خواسته می شود. با طراحی مجدد، ما آزادی را برای کشف راه های کمی غیرمعمول درخواست این سوالات داشتیم. اگر از نزدیک نگاه کنید، برخی از این تصمیمات (غیر معمول) را در همه جا بر روی سایت پیدا خواهید کرد.

 

تعمیرات اساسی بصری: همه چیز درباره گربه ها است

همانطور که ممکن است متوجه شده باشید، بصری ما برخی از تغییرات عمده را نیز معرفی کرده ایم. در طراحی قبلی ما همیشه تلاش کردیم تا نقاط خوب برای نمایش محصولات ما – کتاب ها و کتاب های الکترونیکی و هیئت مدیره کار و کنفرانس ها را پیدا کنیم؛ هدف اصلی طراحی مجدد تغییر آن بود. ما به دنبال یک راه برای به دست آوردن محصولات خود را به خط مقدم، اما بدون آنها را مانند ظاهری، خسته کننده، تبلیغات ارزان احساس؛ آنها مجبور بودند که به زبان عمومی و طرح کلی ما در حال توسعه برسند. حقیقت این است که شما احتمالا با استفاده از یک بلوک تبلیغاتی (در واقع، بیش از ۶۰٪ از خوانندگان ما انجام)، پس اگر اکثر کاربران آگهی را نمی بینند، نقطه شروع آنها را در نظر بگیرید؟ به جای تبلیغ تبلیغ بر روی لبه، تصمیم گرفته ایم که تبلیغات را تقریبا به طور کامل از بین ببریم، با تمرکز بر محصولاتی که دوست داشتیم، تمرکز کنیم.

 

به عنوان بخشی از راه اندازی مجدد، ما زمان خود را برای مطالعه و یادآوری امضا و شخصیت خود در زمان خود قرار دادیم و در هر جزء هر صفحه برجسته آن را برجسته کردیم. آیا هنوز چیزی را متوجه شدید که در طراحی جدید درخشان است؟ بله، درست است گربه است ما ۵۶ گربه مختلف (بله، گربه ها) را که در سراسر وب در مکان های مختلف نمایش داده می شود طراحی کرده ایم و اگر وقت خود را برای یافتن همه آنها انتخاب کنید، احتمالا سزاوار یک بلیط رایگان برای یکی از کنفرانس های ما خواهید بود. ما همچنین بیشتر به سمت امضا تعریف شده توسط لوگوی ما پایبندیم: اکثر عناصر در صفحه در زاویه راست قرار می گیرند. ما همچنین با استفاده از انتقال و انیمیشن (کار در حال انجام است!) برای حفظ تعاملات صاف و روشن، که ما انجام ندادیم. در حال حاضر طراحی مجدد فقط بخشی از داستان است. ما نیز چیزی جدیدی برای آشپزی داریم: عضویت Smashing، با وبینارها، کارگاه ها و تخفیف های عظیم و Smashing Magazine Print، مجله جدید ما، فیزیکی و چاپی – و ما می خواستیم آنها را تبدیل به یک بخشی جدایی ناپذیر از سایت کنیم. پس از سال ها تصفیه ایده ها، در حال حاضر آن را در نهایت اتفاق می افتد. با این حال، آنها شایستگی یک مقاله مستقل – درست مثل یک نمای کلی از روند طراحی سایت و آنچه ما در ۱۸ ماه گذشته آموخته ایم.

 

برای بخش بعدی سفر ما؟

بنابراین، اینجا برویم لطفا احساس رایگان به فهرست – و آماده برای کشف انواع گربه ها … آه، همه چیز. همانطور که همیشه با بتا باز است، تعداد زیادی از اشکالات وجود دارد که می توان آنها را شکست داد، و ما در آن هستیم. با این حال، لطفا مسائل و اشکالات را در GitHub گزارش دهید.

0 دیدگاه برای “شما در طراحی سایت کمی شگفت زده میشوید”

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

*