یک پایه محکم
پایه و اساس مستحکم نیاز پایه برای ساختن PWAهای عالی است. برای پیاده سازی این پایه، باید محدودیت های وب را با استفاده از چند اصل طراحی و کدنویسی کنید:
- از موبایل به عنوان محدودیت تمرکز استفاده کنید. اطمینان حاصل کنید که هر نمای طراحی شما فقط بر روی محتوا و تعاملات اساسی تمرکز دارد.
- بر محتوا و عملکرد اصلی در فرآیند طراحی تاکید کنید.
- در صورت نیاز به تدریج افزایش دهید. با ساختن محتوای اصلی و عملکرد یک جزء با ساده ترین و گسترده ترین ابزارها شروع کنید. آن را در دسترس قرار دهید. سپس، ویژگی‌های پیشرفته‌ای را که می‌خواهید استفاده کنید آزمایش کنید و مؤلفه خود را با آنها ارتقا دهید.
- یک تجربه کاربری سریع و خوب با تمرکز بر معیارهای عملکرد وب کاربر محور ارائه دهید، معیارهای واقعی کاربر را دریافت کنید و عملکرد را برای همه کاربران خود، بدون توجه به اتصال شبکه، نوع ورودی، CPU یا قدرت GPU آنها، ارائه دهید.
با پیروی از این اصول و تقویت الگوهای مدرن و ویژگی‌های وب، می‌توانید تجربیات عالی و سریع با طرح‌های واقعاً ذاتی ایجاد کنید. طرح‌هایی که به جای پیکسل‌ها از محدودیت‌ها پشتیبانی می‌کنند و به هر کاربر اجازه می‌دهند به محتوا و عملکرد اصلی شما به روشی که برای زمینه خاص مرور آنها مناسب است دسترسی داشته باشد.
طراحی وب سایت واکنش گرا
از زمان مقاله A List Apart 2010 Ethan Marcotte، طراحی وب پاسخگو ، طراحان و توسعه دهندگان تشویق شده اند تا تجربیاتی را ایجاد کنند که انعطاف پذیر باشد و رابط های کاربری را در طیفی از اندازه های صفحه نمایش و دستگاه ها کار کند.
با این حال، جایی در طول مسیر، به اندازه های موبایل، تبلت و دسکتاپ کوتاه شد، با عرض بسیار تحت تأثیر اندازه صفحه نمایش iOS. با CSS مدرن و تمرکز مجدد بر هدف اصلی طراحی واکنشگرا، می‌توانیم squish را دوباره در سایت‌های squishy قرار دهیم.
طراحی وب ریسپانسیو سه عنصر فنی را معرفی می کند:
- شبکه های سیال
- رسانه های انعطاف پذیر
- داستان های رسانه
ایتن نتیجه می گیرد که این الزامات فنی کافی نیستند. راه پیش رو نیز نیازمند طرز تفکر متفاوتی است.
افسانه کاربران موبایل
در روزهای اولیه طراحی ریسپانسیو، فرضیاتی به نام آسان‌تر کردن طراحی سایت‌ها مطرح می‌شد. به عنوان مثال، تجارب کوچک برای گوشی‌ها بودند و عرض آنها 320 پیکسل بود، تجربیات متوسط برای تبلت‌ها، و عرض آنها 1024 پیکسل بود، و هر چیزی بزرگ‌تر از آن برای رایانه‌های رومیزی بود. نمایشگرهای کوچک دارای قابلیت لمسی بودند، نمایشگرهای بزرگ این قابلیت را نداشتند. کاربران تلفن عجله داشتند و حواسشان پرت شد و بنابراین به یک تجربه "سبک" نیاز داشتند.
هیچ کدام از اینها درست نیست. آنها افسانه های تلفن همراه هستند که با این فرض تداوم یافته اند که نیازهای کاربر اساساً بر اساس اندازه صفحه نمایش یا نوع دستگاه متفاوت است. این قابل بررسی نیست.
به عنوان مثال، یک شبکه اجتماعی PWA را در نظر بگیرید که امروز می توانید آن را روی موبایل و دسکتاپ نصب کنید. در دسکتاپ، بسیاری از کاربران می‌توانند در حین کار، یک پنجره باریک با فید در یک طرف صفحه نگه دارند، و فرض اینکه آنها به دلیل عرض موجود در دستگاه تلفن همراه هستند، اشتباه است.
دنیای PWA که خارج از برگه مرورگر است، حتی چالش‌های جدیدی را به دنیای طراحی واکنشگرا اضافه می‌کند، مانند حالت مینی و کار با دستگاه‌های تاشو.
حالت مینی
با نصب PWA روی یک دستگاه دسکتاپ، یک پنجره می تواند بسیار کوچک شود. کوچکتر از پنجره مرورگر، کوچکتر از دریچه دید موبایل. این چیز جدیدی در وب است: ما می‌توانیم از یک حالت مینی پشتیبانی کنیم، پنجره‌ای که می‌تواند به اندازه 200x100 پیکسل CSS باشد.
این روزها هنگام ایجاد یک PWA، به لطف طراحی وب واکنشگرا، مانند دکمه های کنترلی روی پخش کننده موسیقی، اطلاعات داشبورد یا اقدامات سریع، ایده خوبی است که به این فکر کنید که چه چیزی را در حالت مینی ارائه دهید.
در دسکتاپ، یک PWA را می توان در یک پنجره کوچکتر از کوچکترین پنجره ای که تا به حال برای مرورگر طراحی کرده اید، رندر کرد. این یک نقطه شکست جدید برای طراحی وب پاسخگو شما اضافه می کند: حالت مینی.
تاشو و هیبریدی
دستگاه های تاشو و هیبریدی نیز این روزها رایج هستند:
- گوشی های تاشوی کوچک.
- دستگاه های تاشو که می توانند به عنوان تلفن یا تبلت استفاده شوند.
- لپ تاپ هایی که می توانند به تبلت تبدیل شوند.
- تبلت هایی که می توانند به عنوان لپ تاپ با صفحه کلید و ترک پد عمل کنند.
- سپس گوشی ها را می توان با هاب به دسکتاپ تبدیل کرد.
در حالی که چالش برای هر وب سایت وجود دارد، با یک برنامه وب پیشرو کنترل و مسئولیت پنجره هنگام نصب برنامه را بر عهده دارید. بنابراین، طراحی شما باید واکنش نشان دهد و بهترین تجربه را در هر زمینه ای ارائه دهد.
اول همه چیز
اما از کجا باید شروع کرد؟ اول موبایل، اول محتوا، اول آفلاین؟ هنگام طراحی برای انعطاف پذیری وب، کدام است؟ خب، پاسخ این است که بله، اول همه چیز . از زمانی که لوک وربلوسکی برای اولین بار در سال 2009 آن را ابداع کرد، اصطلاح اولین موبایل به روش های مختلفی تفسیر شده است: از شبیه سازی الگوهای UI و UX خاص پلت فرم در وب تا ساخت برنامه های تلفن همراه قبل از ساخت برنامه های وب تا استفاده از پرس و جوهای رسانه با عرض حداقل و فراخوانی آن. یک روز. با این حال، هدف اصلی آن این است: تلفن همراه شما را مجبور به تمرکز می کند . همانطور که لوک گفت:
دستگاه‌های تلفن همراه به تیم‌های توسعه نرم‌افزار نیاز دارند تا فقط بر مهم‌ترین داده‌ها و اقدامات یک برنامه کاربردی تمرکز کنند. به سادگی در یک صفحه نمایش 320 در 480 پیکسل جایی برای عناصر اضافی و غیر ضروری وجود ندارد. باید اولویت بندی کنید. بنابراین، وقتی یک تیم Mobile First را طراحی می‌کند، نتیجه یک تجربه متمرکز بر وظایف کلیدی است که کاربران می‌خواهند بدون انحراف‌ها و خرابی‌های رابطی که وب‌سایت‌های دسکتاپ امروزی را پر می‌کنند، انجام دهند. این یک تجربه کاربری خوب و برای تجارت خوب است.
لوک وروبلوسکی
هر نما از وب سایت خود را فقط بر روی وظایف اساسی که یک کاربر می خواهد در آنجا انجام دهد متمرکز کنید، و چیزهای بیشتری را به این ایده اضافه نکنید فقط به این دلیل که دارای صفحه نمایش بیشتری هستند.
اصل دوم در طراحی وب ریسپانسیو اشاره شده است: " گرادیان تجربیات مختلف". یک تجربه واحد، یکسان و پیکسلی کامل برای هر کاربر نباید هدف کار شما باشد. همه چیز غیر ممکن است
به جای اینکه به تجربیات وب خود به عنوان یک چیز ثابت فکر کنید، آن را به عنوان مجموعه ای از توصیه هایی در نظر بگیرید که دستگاه کاربر برای ایجاد بهترین تجربه برای شرایط فعلی خود از آنها استفاده می کند. برای انجام این کار، باید از بهبود پیشرونده استقبال کرد.
افزایش پیشرونده
بهبود پیشرونده الگویی است که به ما امکان می‌دهد کدی بنویسیم که در همه جا اجرا شود، از HTML، CSS و جاوا اسکریپت استاندارد شروع می‌شود، و لایه‌هایی از قابلیت‌ها را به آن اضافه می‌کنیم، زمانی که API در دسترس نیست، با بازگشت‌های مناسب.
چگونه تقویت می کنید؟ تشخیص ویژگی الگویی است که در آن شما آزمایشی را برای پشتیبانی انجام می دهید و بر اساس نتایج آن آزمایش واکنش نشان می دهید. چندین ابزار و شیوه های پلتفرم وب داخلی برای انجام این کار وجود دارد.
با استفاده از @supports ، پشتیبانی مرورگر از یک ویژگی CSS را بررسی کنید و قوانین را بر اساس نتیجه اعمال کنید. این برای هر دو ویژگی و مقادیر CSS اعمال می شود. اگر یک ویژگی پشتیبانی شود و یک مقدار پشتیبانی نشود، مانند یک ویژگی پشتیبانی نشده از بین می رود. کد جاوا اسکریپت می تواند از طریق CSSSupportsRule به آن دسترسی داشته باشد
بیشتر ویژگی‌های جدید پلتفرم وب به اشیاء موجود متصل می‌شوند، بنابراین «ویژگی» در تشخیص سبک شی در جاوا اسکریپت به خوبی کار می‌کند، مانند سایر جستجوهای مشابه، مانند بررسی ویژگی‌ها یا روش‌های روی عناصر.
برای ارسال جاوا اسکریپت مدرن، می‌توانید از الگوی ماژول/نومول برای ارائه ویژگی‌های قوی‌تر با بار کوچکتر به مرورگرهای مدرن‌تر و تجربه بازگشتی به مرورگرهای قدیمی‌تر استفاده کنید. این امتیاز تضمین یک خط پایه جدید از ویژگی‌های جاوا اسکریپت است، مانند وعده‌ها، کلاس‌ها، عملکردهای پیکان، و const and let برای مرورگرهایی که از ماژول‌های ES پشتیبانی می‌کنند.
حتی می توانید چندین اشکال تشخیص ویژگی را برای ایجاد خط پایه پیشرفته خود ترکیب کنید. این کار که توسط تیم خبری بی‌بی‌سی ابداع شده است، Cutting the Mustard نامیده می‌شود و به شما امکان می‌دهد یک تجربه اصلی را برای همه ارسال کنید و تنها پس از رسیدن به یک نوار مشخص شده با ویژگی خاص، شروع به تقویت تجربه کنید.
از تشخیص دستگاه خودداری کنید
شما باید به جای ایجاد فرضیات پشتیبانی بر اساس رشته User-Agent، مستقیماً برای پشتیبانی از ویژگی آزمایش کنید.
رشته های عامل کاربر هرگز واقعا قابل اعتماد نبوده اند. آنها برای "حدس زدن درست" به داشتن دانش تقریباً کامل از هر مرورگر، سیستم عامل و ترکیب دستگاه موجود متکی هستند. حتی در این صورت نیز آنها مستعد جعل کاربر هستند، برای مثال، تغییر مسیرهای سایت دسکتاپ در مرورگرهای تلفن همراه اغلب به سادگی جعل رشته کاربر-عامل دسکتاپ است.
علاوه بر این، مرورگرها در حال کار بر روی مسدود کردن رشته‌های User-Agent خود هستند و رشته‌های عامل کاربر برای تشخیص ویژگی به‌طور خاص به عنوان دلیلی برای منسوخ‌شدن نامیده می‌شوند، که باعث می‌شود آنها حتی از قبل برای شناسایی کاربر و دستگاه غیرقابل اعتمادتر باشند.
اول محتوا
یکی دیگر از اصول طراحی برای وب این است: ابتدا با محتوای خود شروع کنید. به عنوان مثال، یک تیک تیک بلادرنگ سهام با نموداری از قیمت سهام، در هسته خود، جدولی از سهام با قیمت آنها در مدت زمانی است، شاید با پیوندی برای تازه کردن سایت.
سپس می‌توان آن را با جاوا اسکریپت و واکشی درخواست‌ها برای به‌روزرسانی مقادیر جدول در یک تایمر یا با سوکت‌ها برای ارائه به‌روزرسانی‌های مبتنی بر فشار در زمان واقعی تقویت کرد. می‌توان آن را دوباره برای نمودار کردن نتایج، شاید با CSS، شاید با SVG، شاید با Canvas تقویت کرد. اما هسته اصلی با محتوا شروع می شود.
طراحی ذاتی
- موبایل به عنوان یک محدودیت تمرکز برای تجربه کاربر.
- تاکید بر محتوا و عملکرد اصلی در فرآیند طراحی.
- به تدریج با عملکردهای پیشرفته در صورت وجود بهبود می یابد.
این اصول با هم ترکیب می شوند و چیز جدیدی به ما می دهند: طراحی ذاتی . جن سیمونز در سخنرانی خود درباره طراحی طرح‌بندی‌های درونی ، در مورد استفاده از ابزارهای مدرن CSS، مانند Grid، Flexbox، طرح‌بندی جریان، و حالت‌های نوشتاری برای طراحی و ساخت رابط‌های کاربری صحبت می‌کند. او با این ابزار می گوید:
شما واقعاً می توانید چیدمان را ذاتی به محتوایی که ما داریم و طرحی که می خواهیم انجام دهیم باشد.
جن سیمونز
این CSS جدید به طراحان اجازه می‌دهد تا کنترلی روی طرح‌بندی دوباره به دست آورند، اما این کار را به‌گونه‌ای انجام دهند که با آخرین اصول طراحی وب هماهنگ باشد. به‌جای ایجاد فرم‌های ثابت بر اساس اندازه‌های ثابت صفحه، قوانین مبتنی بر محتوا را تعریف می‌کنید که براساس آن چیدمان با ضربه زدن به ویژگی‌های ذاتی آن محتوا، مانند کوچک یا بزرگ بودن، اندازه متن، و فضای موجود، اتفاق می‌افتد. همه به یکباره آنها به شما این امکان را می دهند که بدون نیاز به کنترل محل قرارگیری هر پیکسل، طراحی خود را در تعامل با محتوای شما درک کنید.
طرح‌بندی‌های درونی، گفتگو را در مورد کنترل در وب به صورت دایره کامل می‌آورند و به آن تعریف می‌دهند. کنترل در وب مربوط به دیکته کردن دستگاه ها یا اندازه صفحه یا رنگ ها یا فونت ها یا چیدمان ها یا قابلیت ها برای هر بازدید کننده از سایت شما نیست. کنترل در وب در مورد نوشتن قوانینی است که مرورگر برای جمع آوری تجربه شما از آن استفاده می کند و آن را به طور منحصر به فرد برای هر کاربر در برنامه وب پیشرو شما ایجاد می کند.
عملکرد وب
آخرین اما نه کم اهمیت ترین پایه برای PWA ما، عملکرد وب است. داشتن یک تجربه عالی برای کاربران الزامی است. این به هر شکل ممکن منجر به تبدیل بیشتر خواهد شد.
عملکرد وب شامل چندین مرحله است:
- معیارهای کلیدی کاربر محور موجود را درک کنید.
- برای هر معیار اهداف تعیین کنید.
- PWA ما را اندازه گیری کنید.
- با استفاده از تکنیک ها و بهترین شیوه ها به صورت ایستا در کد یا سرور خود، معیارهای خود را بهبود ببخشید.
- دوباره اندازه گیری کن
- بهبود تجربه برای هر کاربر، زنده، بر اساس زمینه کاربر.
امروزه معیارهای عملکرد وب سرعت نمایش محتوای شما بر روی صفحه را اندازه گیری می کنند، همچنین میزان تعامل وب سایت شما و درک کاربران از این تجربه را نیز اندازه گیری می کنند.
وب حیاتی
در طول دهه گذشته، ما با معیارهای مختلفی برای سنجش موفقیت در عملکرد وب سروکار داشته‌ایم. امروزه مجموعه‌ای از معیارهای پیشنهادی تحت پروژه Web Vitals گروه‌بندی می‌شوند. Web Vitals معیارها را در سه حوزه کلیدی که بر عملکرد و ادراک وب تأثیر می‌گذارند متمرکز می‌کند:
- بارگذاری
- در ارتباط بودن
- ثبات بصری
با Core Web Vitals، می توانید در یک نگاه ببینید که PWA شما در عملکرد وب و تجربه کاربری چقدر خوب یا بد است.
پایه های PWA
مهم است که PWA شما پایه ای محکم در طراحی واکنش گرا، موبایل و همه چیز در ابتدا، طراحی ذاتی و عملکرد وب داشته باشد به عنوان پایه ای برای یک تجربه عالی برای همه کاربران شما.