مرجع طراحی سایت حرفه ای

ساخت سایت برخورد گرا (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 را بنویسید که آغاز پهنا و طول دستگاه یا این که رزولوشن آن نظارت گردد و چنانچه دستکم ۸۰۰ پیکسل بود، آن‌وقت المانی کمی مشخص و معلوم پیدا نماید (قطعه‌کد پایین).