مرجع آموزش طراحی سایت

ساخت سایت عکس العمل گرا (Responsive Web Design) در صورتی‌که نگاهی به تاریخچه طراحی وب بیندازیم، مشخص و معلوم میشود که ساخت وب سایت هنگامی استارت شد که تلفن همراه و تبلت و تلویزیون هوشمندی وجود نداشت. اینترنت دیزاین برای دسکتاپ‌هایی با اندازه‌های مشخص و معین اجرا میشد و آحاد. البته خب طراحی سایت در مشهد کلیه‌ی ما میدانیم که امروز یوزرها صرفا با کامپیوتر به وب وصل نمیشوند. دستگاه‌های مختلفی (تلویزیون‌ها، لپ‌تاپ‌ها، تبلت‌ها و گوشی‌ها) با بعد ها متفاوت این قابلیت را به یوزرها می‌دهند تا به وب متصل شوند. پس طراح و گسترش‌دهنده‌ی وب سایت باید به این نکته‌ی خیلی مهم توجه نماید که سایتی که می‌سازد بایستی در دستگاه‌های گوناگون با صفحه‌‌اکران‌هایی در بعد ها و رزولوشن‌های مختلف اکران داده گردد. اینترنت دیزاینر چطور می تواند سایتی پیاده سازی نماید که در هر صفحه نمایشی (بسیار بلندمرتبه تا بسیار خرد) صحیح و بی نقص اکران داده خواهد شد؟ یعنی سایز عکس‌ها و نوشته‌ها با سایز برگه‌ی اکران متناسب شود و چیزی در ورقه به‌هم نریزد؟ یک چاره این است که چندین ورژن از یک تارنما برای دستگاه‌های متفاوت پیاده سازی گردد. یعنی از جمله یک ورژن برای دسکتاپ و یک ورژن برای تلفن همراه با URL گوناگون. ناگفته پیداست که این‌راه‌حل پرهزینه و خیر‌چندان کاربردی است. اما چاره‌های دیگری نیز پیشنهاد گردیده است که هرکدام درعمل اشتباهات دیگری را تولید می‌نمایند و نقص‌ را نیز کاملا حل نمی‌‌نمایند. در سال ۲۰۱۰ بود که Ethan Marcotte ایده‌ای تازه را به دنیای اینترنت طراحی صفحه معرفی کرد: Responsive Design. وی ایده‌ی ساخت سایت ریسپانسیو را از مفهومی شبیه در معماری (Responsive Architecture) گرفته بود. ریسپانسیو‌بودن اینترنت صفحه آرایی یا این که واکشن گرا کردن سایت بدون نقص‌ترین و شایسته ترین راه حل است. اصول و تکنیک های اصلی در عکس العمل گرایی تارنما (Website Responsiveness) پر‌نور شد که خواسته از عکس العمل گرایی وب سایت این میباشد که سایت (ساختار و مجموع المان‌های بصری آن) به محیطی (دستگاهی) که قرار است در آن اکران داده خواهد شد و خصوصیت‌های خاص آن اطراف برخورد علامت دهد و خودش را با آن تطبیق دهد. اصل مهم در پیاده سازی ریسپانسیو انعطاف‌پذیری (Flexibility) است. درواقع‌، گام اولیه در دیزاین ریسپانسیو انعطاف‌پذیری میباشد. طراح و گسترش‌دهنده‌ی اینترنت باید این‌طور پندار نماید که تا‌جایی‌که امکانش می باشد می بایست تمامی‌چیز انعطاف‌پذیر پیاده سازی گردد. اصل دوم این است که طراح و پیشرفت‌دهنده می بایست به دنبال شایسته ترین طرز‌ها و تکنیک‌هایی باشد که به پیاده سازی برخورد گرا یاری می‌نماید. نکته اینجاست که از سال ۲۰۱۰ تا امروز پیشرفت‌های متعددی در اینترنت طراحی صفحه و تکنیک‌های ما یحتاج برای ریسپانسیو‌بودن تارنما پیش آمده است. این صحت دارد که دسته تکنیک‌های مهم در پیاده سازی واکنش گرا ۳ تکنیک میباشد، البته هر طراح و توسعه و گسترش‌دهنده‌ای براساس پروژه‌ای که دارد می تواند و ممکن هست از تکنیک‌های دیگر هم به کار گیری نماید. برای اینکه اینترنت صفحه آرایی واکشن گرا باشد در پیاده سازی و بسط‌ی سایت بایستی دست‌کم ۳ تکنیک پایین رعایت گردیده باشد: ریسپانسیو اینترنت دیزاین ۱. Fluid Grids در هر برگه از وب سایت المان‌های مختلفی ازجمله عکس‌ها و متن ها بایستی کنار هم قرار بگیرند. روش‌ی قرارگرفتن این المان‌ها کنار هم بسیار اساسی است زیرا می بایست به‌سیرتکامل‌ای باشد که محتوای متنی ورقه خوانایی و وضوح لازم را داشته باشد. سیستم Grid مجمو‌عه‌ای از ردیف‌ها و ستون‌ها (که باطن آنان containers برای قراردادن المان‌های متعدد تمجید می‌شود) میباشد که ساختار اساسی دکوراسیون قسمت‌های متفاوت وبسایت را برای طراح مشخص و معلوم می‌نماید. در ساخت وب سایت سیستم‌های مختلفی برای گریدبندی صفحه ها وجود دارااست. اما از هر سیستمی که طراح سایت برای گریدبندی استعمال نماید،‌ با اندازه‌ها سروکار دارد. پرسش اصلی این است که اندازه‌ی فونت متون و دیگر عبارات در ورقه و همینطور جمله ها در Gridبندی صفحه چطور تهیه خواهد شد تا آنها در هر دستگاهی صحیح و بدیهی اکران داده شوند؟ در طراحی سایت برای مشخص‌کردن اندازه‌ها می‌شود از واحدهای مختلفی (pixel, percentage or ems) یاری گرفت. در پیاده سازی برخورد گرا نباید در گریدبندی از اندازه‌ی اثبات به کار گرفت. به‌مکان اندازه‌ی اثبات باید از نسبت‌ها و تبدیل‌کردن نسبت‌ها به درصد یاری گرفت. یعنی اولیه می بایست ببینیم المانی که می‌خواهیم اندازه‌ی آن را مشخص کنیم چه نسبتی با container‌ای که داخلش قرار می‌گیرد دارد. بعد از آن آن نسبت را به درصد تبدیل می کنیم و به آن المان می دهیم. ۲. Fluid Images هر عکسی که در وبسایت قرار داده می‌شود اندازه‌ای داراست. اینترنت دیزاینر با‌اعتنا‌به کارداران متعدد به عکس‌ها اندازه می دهد. در پیاده سازی ریسپانسیو طوری بایستی به عکس‌ها اندازه اعطا کرد که اندازه‌ی آن‌ها در اسکرین‌های متعدد خرد یا این که بلندمرتبه گردد. برای عکس العمل گرایی عکس‌های سایت می‌گردد از تکنیک‌های مختلفی به کار گرفت. مشهور‌ترین و شل و ول‌ترین تکنیک سود‌تصاحب کردن‌از یک کد ساده‌ی CSS برای هر عکس میباشد.۳. Media Query مهم‌ترین تکنیک در ساخت وب سایت برخورد گرا Media Queries در CSS میباشد. این قابلیت در CSS2 معرفی شد و در CSS3 کامل‌خیس شد. طراح با امداد‌به دست آوردن از تگ media@ در CSS قادر است خصوصیت‌های دستگاه‌های متفاوت (رسانه‌ها) را آزمایش نماید و براساس فیض‌ی آزمایش مقداری را برای المانی تمجید نماید. پهنا و طول و همینطور Viewport (مقداری از ورقه‌ی اینترنت که استفاده کننده می‌بیند) در هر دستگاه مشخص میباشد. مثلا در شیت‌اکران تلویزیون،‌ کامپیوتر یا این که لپ‌تاپ حداقل Viewport عددی مشخص میباشد، یعنی ۸۰۰ پیکسل. اینترنت دیزاینر میتواند طوری کد CSS را بنویسید که آغاز پهنا و طول دستگاه یا این که رزولوشن آن تفحص شود و در حالتی که دست‌کم ۸۰۰ پیکسل بود، آن‌وقت المانی مقداری مشخص و معلوم پیدا نماید (قطعه‌کد تحت).

ساخت سایت عکس العمل گرا (Responsive Web Design) در صورتی‌که نگاهی به تاریخچه طراحی وب بیندازیم، مشخص و معلوم میشود که ساخت وب سایت هنگامی استارت شد که تلفن همراه و تبلت و تلویزیون هوشمندی وجود نداشت. اینترنت دیزاین برای دسکتاپ‌هایی با اندازه‌های مشخص و معین اجرا میشد و آحاد. البته خب طراحی سایت در مشهد کلیه‌ی ما میدانیم که امروز یوزرها صرفا با کامپیوتر به وب وصل نمیشوند. دستگاه‌های مختلفی (تلویزیون‌ها، لپ‌تاپ‌ها، تبلت‌ها و گوشی‌ها) با بعد ها متفاوت این قابلیت را به یوزرها می‌دهند تا به وب متصل شوند. پس طراح و گسترش‌دهنده‌ی وب سایت باید به این نکته‌ی خیلی مهم توجه نماید که سایتی که می‌سازد بایستی در دستگاه‌های گوناگون با صفحه‌‌اکران‌هایی در بعد ها و رزولوشن‌های مختلف اکران داده گردد. اینترنت دیزاینر چطور می تواند سایتی پیاده سازی نماید که در هر صفحه نمایشی (بسیار بلندمرتبه تا بسیار خرد) صحیح و بی نقص اکران داده خواهد شد؟ یعنی سایز عکس‌ها و نوشته‌ها با سایز برگه‌ی اکران متناسب شود و چیزی در ورقه به‌هم نریزد؟ یک چاره این است که چندین ورژن از یک تارنما برای دستگاه‌های متفاوت پیاده سازی گردد. یعنی از جمله یک ورژن برای دسکتاپ و یک ورژن برای تلفن همراه با URL گوناگون. ناگفته پیداست که این‌راه‌حل پرهزینه و خیر‌چندان کاربردی است. اما چاره‌های دیگری نیز پیشنهاد گردیده است که هرکدام درعمل اشتباهات دیگری را تولید می‌نمایند و نقص‌ را نیز کاملا حل نمی‌‌نمایند. در سال ۲۰۱۰ بود که Ethan Marcotte ایده‌ای تازه را به دنیای اینترنت طراحی صفحه معرفی کرد: Responsive Design. وی ایده‌ی ساخت سایت ریسپانسیو را از مفهومی شبیه در معماری (Responsive Architecture) گرفته بود. ریسپانسیو‌بودن اینترنت صفحه آرایی یا این که واکشن گرا کردن سایت بدون نقص‌ترین و شایسته ترین راه حل است. اصول و تکنیک های اصلی در عکس العمل گرایی تارنما (Website Responsiveness) پر‌نور شد که خواسته از عکس العمل گرایی وب سایت این میباشد که سایت (ساختار و مجموع المان‌های بصری آن) به محیطی (دستگاهی) که قرار است در آن اکران داده خواهد شد و خصوصیت‌های خاص آن اطراف برخورد علامت دهد و خودش را با آن تطبیق دهد. اصل مهم در پیاده سازی ریسپانسیو انعطاف‌پذیری (Flexibility) است. درواقع‌، گام اولیه در دیزاین ریسپانسیو انعطاف‌پذیری میباشد. طراح و گسترش‌دهنده‌ی اینترنت باید این‌طور پندار نماید که تا‌جایی‌که امکانش می باشد می بایست تمامی‌چیز انعطاف‌پذیر پیاده سازی گردد. اصل دوم این است که طراح و پیشرفت‌دهنده می بایست به دنبال شایسته ترین طرز‌ها و تکنیک‌هایی باشد که به پیاده سازی برخورد گرا یاری می‌نماید. نکته اینجاست که از سال ۲۰۱۰ تا امروز پیشرفت‌های متعددی در اینترنت طراحی صفحه و تکنیک‌های ما یحتاج برای ریسپانسیو‌بودن تارنما پیش آمده است. این صحت دارد که دسته تکنیک‌های مهم در پیاده سازی واکنش گرا ۳ تکنیک میباشد، البته هر طراح و توسعه و گسترش‌دهنده‌ای براساس پروژه‌ای که دارد می تواند و ممکن هست از تکنیک‌های دیگر هم به کار گیری نماید. برای اینکه اینترنت صفحه آرایی واکشن گرا باشد در پیاده سازی و بسط‌ی سایت بایستی دست‌کم ۳ تکنیک پایین رعایت گردیده باشد: ریسپانسیو اینترنت دیزاین ۱. Fluid Grids در هر برگه از وب سایت المان‌های مختلفی ازجمله عکس‌ها و متن ها بایستی کنار هم قرار بگیرند. روش‌ی قرارگرفتن این المان‌ها کنار هم بسیار اساسی است زیرا می بایست به‌سیرتکامل‌ای باشد که محتوای متنی ورقه خوانایی و وضوح لازم را داشته باشد. سیستم Grid مجمو‌عه‌ای از ردیف‌ها و ستون‌ها (که باطن آنان containers برای قراردادن المان‌های متعدد تمجید می‌شود) میباشد که ساختار اساسی دکوراسیون قسمت‌های متفاوت وبسایت را برای طراح مشخص و معلوم می‌نماید. در ساخت وب سایت سیستم‌های مختلفی برای گریدبندی صفحه ها وجود دارااست. اما از هر سیستمی که طراح سایت برای گریدبندی استعمال نماید،‌ با اندازه‌ها سروکار دارد. پرسش اصلی این است که اندازه‌ی فونت متون و دیگر عبارات در ورقه و همینطور جمله ها در Gridبندی صفحه چطور تهیه خواهد شد تا آنها در هر دستگاهی صحیح و بدیهی اکران داده شوند؟ در طراحی سایت برای مشخص‌کردن اندازه‌ها می‌شود از واحدهای مختلفی (pixel, percentage or ems) یاری گرفت. در پیاده سازی برخورد گرا نباید در گریدبندی از اندازه‌ی اثبات به کار گرفت. به‌مکان اندازه‌ی اثبات باید از نسبت‌ها و تبدیل‌کردن نسبت‌ها به درصد یاری گرفت. یعنی اولیه می بایست ببینیم المانی که می‌خواهیم اندازه‌ی آن را مشخص کنیم چه نسبتی با container‌ای که داخلش قرار می‌گیرد دارد. بعد از آن آن نسبت را به درصد تبدیل می کنیم و به آن المان می دهیم. ۲. Fluid Images هر عکسی که در وبسایت قرار داده می‌شود اندازه‌ای داراست. اینترنت دیزاینر با‌اعتنا‌به کارداران متعدد به عکس‌ها اندازه می دهد. در پیاده سازی ریسپانسیو طوری بایستی به عکس‌ها اندازه اعطا کرد که اندازه‌ی آن‌ها در اسکرین‌های متعدد خرد یا این که بلندمرتبه گردد. برای عکس العمل گرایی عکس‌های سایت می‌گردد از تکنیک‌های مختلفی به کار گرفت. مشهور‌ترین و شل و ول‌ترین تکنیک سود‌تصاحب کردن‌از یک کد ساده‌ی CSS برای هر عکس میباشد.۳. Media Query مهم‌ترین تکنیک در ساخت وب سایت برخورد گرا Media Queries در CSS میباشد. این قابلیت در CSS2 معرفی شد و در CSS3 کامل‌خیس شد. طراح با امداد‌به دست آوردن از تگ media@ در CSS قادر است خصوصیت‌های دستگاه‌های متفاوت (رسانه‌ها) را آزمایش نماید و براساس فیض‌ی آزمایش مقداری را برای المانی تمجید نماید. پهنا و طول و همینطور Viewport (مقداری از ورقه‌ی اینترنت که استفاده کننده می‌بیند) در هر دستگاه مشخص میباشد. مثلا در شیت‌اکران تلویزیون،‌ کامپیوتر یا این که لپ‌تاپ حداقل Viewport عددی مشخص میباشد، یعنی ۸۰۰ پیکسل. اینترنت دیزاینر میتواند طوری کد CSS را بنویسید که آغاز پهنا و طول دستگاه یا این که رزولوشن آن تفحص شود و در حالتی که دست‌کم ۸۰۰ پیکسل بود، آن‌وقت المانی مقداری مشخص و معلوم پیدا نماید (قطعه‌کد تحت).