اطلاعات جامع از طراحی سایت

شاید کلمه و واژه ساخت وب سایت ریسپانسیو (Responsive web design) را شنیده باشید و به طبع طراحی سایت در مشهد می‌خواهید بدانید معنای آن چیست؟ به عبارت دیگر ریسپانسیو بودن یک تارنما یا این که به عبارتی "واکنشگرا بودن" یعنی چه؟
همانگونه که میدانید استانداردهای ساخت وب سایت های اینترنتی هر یک سری سال یکبار آپ تو دیت میگردند و تکنیک ها و طریق های جدیدی ارائه می گردند که هر یک به نوعی به دنیای طراحی وب سایت امداد شایانی می نمایند. سایت های اینترنتی از اوایل دهه 1990 که پیاده سازی و برای به کار گیری جهانی در چنگ عموم قرار گرفتند، در صدر فقط برای چشم شدن از روش کامپیوتر بودند.
چرا ساخت وب سایت ریسپانسیو پدید آمد؟
یعنی شما هنگام عمل با کامپیوتر و وقتی که از روش مودم (Modem) ، به کانال وب وصل می شدید، از روش قابل انعطاف افزارهای "مرورگر" (web browser) می توانستید به سایت های اینترنتی و تجهیزات آن‌ها دسترسی داشته باشید. در آن فرصت دسترسی به کانال وب صرفا از روش کامپیوتر قابلیت و امکان پذیر بود. البته به گذر زمان مجال و عرضه گوشی های جدیدتر و توسعه یافته خیس و همینطور ورود دشوار افزارها و دستگاه های جدیدی مانند "تبلت" (Tablet) به بازارها، به ندرت بخش اعظمی از عموم از آن‌ها به کار گیری و خوشبختانه این ابزارها به گذر زمان تکنولوژی های بکار رفته در آن ها قویتر و عالی شد تا جایی که شما از روش آن ها می توانستید سوای نیاز به به کارگیری از کامپیوتر و لپ تاپ، به وب و وبسایت ها، دسترسی داشته باشید.
ولی مشکلی درین بین وجود داشت، آن مساوی کادر سایت ها بود. بطور سنتی، تکنیک ها و طریق های ساخت سایت از دهه 1990 تنها برای اکران آن‌ها بر روی ورقه مانیتور کامپیوترها بود. اما به گذر زمان مجال که قابلیت دیدن اینترنت سایتها از روش تبلت و گوشی هم آماده شد، حالت عوض شد و با اعتنا به اینکه ارتفاع و پهنا کاغذ اکران این وسایل از خصوصیات ارتفاع و پهنا مانیتور لپ تاپ و کامپیوتر بسیار کمتر میباشد، برای اینکه بتوان یک وبسایت را براحتی در آنان رویت کرد می بایست ساخت سایت برای این دستگاه ها هم شکل بگیرد.

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

برای اینکه بدانید تارنما شما ریسپانسیو میباشد یا این که به معنای دیگر در هر اندازه ورقه اکران به صحت نمایش داده میشود میتوانید نوشته‌ی‌علمی آزمایش ریسپانسیو بودن وبسایت را پژوهش کنید.در ضمن قابل ذکر میباشد ریسپانسیو بودن وب سایت با گوشی دوست بودن تارنما - Mobile Friendly - مختلف میباشد

بهتر تا اینجا فهمیدیم که شرایط ریسپانسیو چیست اما بد وجود ندارد در قضیه تاریخچه آن هم بدانید:

تاریخچه طراحی وب ریسپانسیو:
گفته می‌شود اول اینترنت سایتی که به طور ریسپانسیو پیاده سازی گردیده و بر روی اینترنت رفت، وبسایت کمپانی خودروسازی آئودی آلمان بود Audi.com که در اواخر سال 2001 ، بوسیله کمپانی Razorfish پیاده سازی و مهیا شد. در آن مجال پیاده سازی این تارنما به نحوی اعمال شد تا در هرکدام از وضعیت های اکران به وسیله مرورگرهای دارای اسم و رسم و پر استفاده آن فرصت مانند وب اکسپلورر و یا این که نت اسکیپ، متناسب با آن از روی Server ، موقعیت پیاده سازی گردیده به اکران نهاده خواهد شد.

طی دهه سالهای 2000 میلادی به گذر زمان استانداردها و اصطلاحات رایج ریسپانسیو مانند "flexible" ، "liquid" ، "fluid" ، "elastic" به‌تدریج گزینه به کار گیری قرار گرفتند و از طرف دیگر با ورود تکنیک های Media query در استاندارد CSS3 در سالهای 2008 و 2009 او‌لین گامهای دورازشوخی برای ریسپانسیو شدن سایت ها در سرتاسر دنیا برداشته شد.
آن گاه برای اولیه توشه عبارت "طراحی وب سایت رسپانسیو" (responsive web design) بوسیله "Ethan Marcotte" در نوشته‌ی علمی ای در سال 2010 ، بکار دریافت شد. در نوشته‌علمی فوق از این اصطلاح جهت اکران بعضا از المان های اصلی تارنما استعمال شد.برای مثال مرتبط با ظواهر اینترنت (Layout) در‌این‌صورت مشتمل بر media query ها و عکس های انعطاف پذیر در سایزهای متفاوت اکران (flexible images) و اکران گریدها بصورت وسیع (fluid grid). او درسال 2011 کتابی پایین همین تیتر نوشت که بسیار جهانی شد و گزینه اعتنا کارشناسان و طراحان اینترنت قرار گرفت.
به‌تدریج پیاده سازی ریسپانسیو آنقدر توسعه و گسترش پیدا کرد که در سال 2013 ، از طرف تارنما دارای شهرت "Mashable " همین سال تحت عنوان "سال طراحی وب ریسپانسیو" (the Year of Responsive Web Design) کنیه گرفت.

ریسپانسیو کردن وبسایت با استعمال از بوت استرپ و مدیا کوئری
امروزه اکثری از تارنما های اهل ایران هم بصورت ریسپانسیو پیاده سازی میشوند و شما میتوانید حتی بر روی تبلت و یا این که اشکال تلفن همراه ها، از این سایت ها بازدید نمایید.
از طرف دیگر در سال 2011 یک فریمورک (framework) به اسم "بوت استرپ" (Bootstrap ) به وسیله Twitterعرضه شد که بصورت مجانی می قدرت آنرا دانلود و جهت ریسپانسیو کردن تارنما، بهره مند شد. در سالهای اخیر ورژن های فارسی گردیده "بوت استرپ" هم ارائه گردیده که موجب تسهیل فعالیت طراحان اینترنت دراین باره شد‌ه‌است.

امروزه بخش اعظمی از طراحان اینترنت در کشور‌ایران و کشورهای دیگر عالم، جهت طراحی وب سایت (front-end development) از بوت استرپ و مدیا کوئری (Media Query) استعمال می نمایند.

ولی این دو با یکدیگر فرق دارا‌هستند و مثلا برای استعمال از "بوت استرپ" یک طراح اینترنت می بایست پوشه آنرا دانلود و در فایل (فولدر) های اینترنت سایتش نهاده و به طبع می بایست در فولدر Html به آن پیوند دهد تا هنگام اجرای پوشه های آن تارنما، بوت استرپ هم ایفا خواهد شد اما برای مدیاکوئری اینگونه کاری موردنیاز وجود ندارد. همینطور هنگام تایپ کردن کدهای Html می بایست صفحه ها اینترنت را اصطلاحا Grid بندی کرد البته برای به کارگیری از مدیا کوئری، در پوشه های CSS ، وضعیت ها و اندازه های مدیا صفحه های (یعنی اینکه به تناسب خصوصیات صفحه ها اکران گجت ها و دستگاه ها هر قسمت چه طور اکران داده خواهد شد) تعریف و تمجید می‌شوند.
با به کار گیری از این نحوه ها وقتی که در یک وب سایت یک عکس والا و تماما پهن در بالای آن نهاده گردیده، این عکس مطلقا در فریم تبلت و یا این که گوشی جا نمی‌شود و در شرایطی که هم نیمه و یا این که ناقص نشانه داده خواهد شد، صورت Layout آخری تارنما بر روی آن دستگاه زشت چشم شود. به همین عامل می قدرت با استعمال از بوت استرپ و یا این که مدیاکوئری طوری کدنویسی کنیم که عکس فوق در هرکدام از موقعیت های این گجت ها، متناسب با پهنا شیت اکران آن، خرد خیس به آرم داده گردیده و یا این که به هیچ وجه حذف خواهد شد.

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

شاید کلمه و واژه ساخت وب سایت ریسپانسیو (Responsive web design) را شنیده باشید و به طبع طراحی سایت در مشهد می‌خواهید بدانید معنای آن چیست؟ به عبارت دیگر ریسپانسیو بودن یک تارنما یا این که به عبارتی "واکنشگرا بودن" یعنی چه؟
همانگونه که میدانید استانداردهای ساخت وب سایت های اینترنتی هر یک سری سال یکبار آپ تو دیت میگردند و تکنیک ها و طریق های جدیدی ارائه می گردند که هر یک به نوعی به دنیای طراحی وب سایت امداد شایانی می نمایند. سایت های اینترنتی از اوایل دهه 1990 که پیاده سازی و برای به کار گیری جهانی در چنگ عموم قرار گرفتند، در صدر فقط برای چشم شدن از روش کامپیوتر بودند.
چرا ساخت وب سایت ریسپانسیو پدید آمد؟
یعنی شما هنگام عمل با کامپیوتر و وقتی که از روش مودم (Modem) ، به کانال وب وصل می شدید، از روش قابل انعطاف افزارهای "مرورگر" (web browser) می توانستید به سایت های اینترنتی و تجهیزات آن‌ها دسترسی داشته باشید. در آن فرصت دسترسی به کانال وب صرفا از روش کامپیوتر قابلیت و امکان پذیر بود. البته به گذر زمان مجال و عرضه گوشی های جدیدتر و توسعه یافته خیس و همینطور ورود دشوار افزارها و دستگاه های جدیدی مانند "تبلت" (Tablet) به بازارها، به ندرت بخش اعظمی از عموم از آن‌ها به کار گیری و خوشبختانه این ابزارها به گذر زمان تکنولوژی های بکار رفته در آن ها قویتر و عالی شد تا جایی که شما از روش آن ها می توانستید سوای نیاز به به کارگیری از کامپیوتر و لپ تاپ، به وب و وبسایت ها، دسترسی داشته باشید.
ولی مشکلی درین بین وجود داشت، آن مساوی کادر سایت ها بود. بطور سنتی، تکنیک ها و طریق های ساخت سایت از دهه 1990 تنها برای اکران آن‌ها بر روی ورقه مانیتور کامپیوترها بود. اما به گذر زمان مجال که قابلیت دیدن اینترنت سایتها از روش تبلت و گوشی هم آماده شد، حالت عوض شد و با اعتنا به اینکه ارتفاع و پهنا کاغذ اکران این وسایل از خصوصیات ارتفاع و پهنا مانیتور لپ تاپ و کامپیوتر بسیار کمتر میباشد، برای اینکه بتوان یک وبسایت را براحتی در آنان رویت کرد می بایست ساخت سایت برای این دستگاه ها هم شکل بگیرد.

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

برای اینکه بدانید تارنما شما ریسپانسیو میباشد یا این که به معنای دیگر در هر اندازه ورقه اکران به صحت نمایش داده میشود میتوانید نوشته‌ی‌علمی آزمایش ریسپانسیو بودن وبسایت را پژوهش کنید.در ضمن قابل ذکر میباشد ریسپانسیو بودن وب سایت با گوشی دوست بودن تارنما - Mobile Friendly - مختلف میباشد

بهتر تا اینجا فهمیدیم که شرایط ریسپانسیو چیست اما بد وجود ندارد در قضیه تاریخچه آن هم بدانید:

تاریخچه طراحی وب ریسپانسیو:
گفته می‌شود اول اینترنت سایتی که به طور ریسپانسیو پیاده سازی گردیده و بر روی اینترنت رفت، وبسایت کمپانی خودروسازی آئودی آلمان بود Audi.com که در اواخر سال 2001 ، بوسیله کمپانی Razorfish پیاده سازی و مهیا شد. در آن مجال پیاده سازی این تارنما به نحوی اعمال شد تا در هرکدام از وضعیت های اکران به وسیله مرورگرهای دارای اسم و رسم و پر استفاده آن فرصت مانند وب اکسپلورر و یا این که نت اسکیپ، متناسب با آن از روی Server ، موقعیت پیاده سازی گردیده به اکران نهاده خواهد شد.

طی دهه سالهای 2000 میلادی به گذر زمان استانداردها و اصطلاحات رایج ریسپانسیو مانند "flexible" ، "liquid" ، "fluid" ، "elastic" به‌تدریج گزینه به کار گیری قرار گرفتند و از طرف دیگر با ورود تکنیک های Media query در استاندارد CSS3 در سالهای 2008 و 2009 او‌لین گامهای دورازشوخی برای ریسپانسیو شدن سایت ها در سرتاسر دنیا برداشته شد.
آن گاه برای اولیه توشه عبارت "طراحی وب سایت رسپانسیو" (responsive web design) بوسیله "Ethan Marcotte" در نوشته‌ی علمی ای در سال 2010 ، بکار دریافت شد. در نوشته‌علمی فوق از این اصطلاح جهت اکران بعضا از المان های اصلی تارنما استعمال شد.برای مثال مرتبط با ظواهر اینترنت (Layout) در‌این‌صورت مشتمل بر media query ها و عکس های انعطاف پذیر در سایزهای متفاوت اکران (flexible images) و اکران گریدها بصورت وسیع (fluid grid). او درسال 2011 کتابی پایین همین تیتر نوشت که بسیار جهانی شد و گزینه اعتنا کارشناسان و طراحان اینترنت قرار گرفت.
به‌تدریج پیاده سازی ریسپانسیو آنقدر توسعه و گسترش پیدا کرد که در سال 2013 ، از طرف تارنما دارای شهرت "Mashable " همین سال تحت عنوان "سال طراحی وب ریسپانسیو" (the Year of Responsive Web Design) کنیه گرفت.

ریسپانسیو کردن وبسایت با استعمال از بوت استرپ و مدیا کوئری
امروزه اکثری از تارنما های اهل ایران هم بصورت ریسپانسیو پیاده سازی میشوند و شما میتوانید حتی بر روی تبلت و یا این که اشکال تلفن همراه ها، از این سایت ها بازدید نمایید.
از طرف دیگر در سال 2011 یک فریمورک (framework) به اسم "بوت استرپ" (Bootstrap ) به وسیله Twitterعرضه شد که بصورت مجانی می قدرت آنرا دانلود و جهت ریسپانسیو کردن تارنما، بهره مند شد. در سالهای اخیر ورژن های فارسی گردیده "بوت استرپ" هم ارائه گردیده که موجب تسهیل فعالیت طراحان اینترنت دراین باره شد‌ه‌است.

امروزه بخش اعظمی از طراحان اینترنت در کشور‌ایران و کشورهای دیگر عالم، جهت طراحی وب سایت (front-end development) از بوت استرپ و مدیا کوئری (Media Query) استعمال می نمایند.

ولی این دو با یکدیگر فرق دارا‌هستند و مثلا برای استعمال از "بوت استرپ" یک طراح اینترنت می بایست پوشه آنرا دانلود و در فایل (فولدر) های اینترنت سایتش نهاده و به طبع می بایست در فولدر Html به آن پیوند دهد تا هنگام اجرای پوشه های آن تارنما، بوت استرپ هم ایفا خواهد شد اما برای مدیاکوئری اینگونه کاری موردنیاز وجود ندارد. همینطور هنگام تایپ کردن کدهای Html می بایست صفحه ها اینترنت را اصطلاحا Grid بندی کرد البته برای به کارگیری از مدیا کوئری، در پوشه های CSS ، وضعیت ها و اندازه های مدیا صفحه های (یعنی اینکه به تناسب خصوصیات صفحه ها اکران گجت ها و دستگاه ها هر قسمت چه طور اکران داده خواهد شد) تعریف و تمجید می‌شوند.
با به کار گیری از این نحوه ها وقتی که در یک وب سایت یک عکس والا و تماما پهن در بالای آن نهاده گردیده، این عکس مطلقا در فریم تبلت و یا این که گوشی جا نمی‌شود و در شرایطی که هم نیمه و یا این که ناقص نشانه داده خواهد شد، صورت Layout آخری تارنما بر روی آن دستگاه زشت چشم شود. به همین عامل می قدرت با استعمال از بوت استرپ و یا این که مدیاکوئری طوری کدنویسی کنیم که عکس فوق در هرکدام از موقعیت های این گجت ها، متناسب با پهنا شیت اکران آن، خرد خیس به آرم داده گردیده و یا این که به هیچ وجه حذف خواهد شد.

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