طراحی نسخه ریسپانسیو سایت با استفاده از HTML و CSS
با توجه به افزایش میزان استفاده کاربران از تلفن همراه و موبایل برای وبگردی، طراحی سایت به صورت ریسپانسیو و سازگار با موبایل ضرورت پیدا کرده است و در صورتی که وب سایت شما در ابزارهای موبایلی نمایش مناسبی نداشته باشد رنک بسیاری از دست خواهد داد.
زمانی که قالب معمولی سایت خود را طراحی نمودید هم اکنون زمان آن می باشد که قالب سایت سازگار با رزولوشن های مختلف طراحی نمایید. برای انجام این کار کافی است ابتدا کد زیر را بین دو تگ head خود اضافه نماییم:
این کد به مرورگر دستور می دهد که صفحه را به اندازه پیسکل واقعی نمایش دهد. به عنوان مثال در صورتی که عرض سایت شما 1024 باشد سایت در کلیه مرورگرها و رزولوشن ها در همین سایز نمایش داده می شود که باعث اسکرول افقی خوردن سایت در تبلت و موبایل می شود.
سپس کافی است سه فایل CSS برای رزولوشن های مختلف طراحی نمایید و در صفحه HTML خود لینک نمایید:
<link rel="stylesheet" media="only screen and (min-width: 0px) and (max-width: 327px)" href="mobile.css">
<link rel="stylesheet" media="only screen and (min-width:328px) and (max-width: 768px)" href="templates/template/tablet.css">
فایل CSS اول برای رزولوشن های بالاتر از 1024 که برای رزولوشن کامپیوتر و لب تاپ می باشد.
فایل CSS دوم برای نسخه موبایل وب سایت که سایز رزولوشن های 327 به پایین می باشد.
فایل CSS سوم برای رزولوشن های صفحه مابین 1024 و 327 پیکسل می باشد، که برای مرورگرهای و ابزارهای میان سایز نظیر تبلت طراحی می گردند.
برای طراحی سایت مختص به هر عرض کافی است عرض مرورگر خود را در محدوده سایز مورد نظر قرار دهید و کدهای CSS خود را به فایل مورد نظر اضافه نمایید.
* دقت نمایید هر کدی که در برای هر سایزی در فایل CSS مورد نظر درج می نمایید برای سایر سایزها مورد استفاده قرار نمی گیرد.
ساخت نسخه موبایل وب سایت توسط با روش های دیگری نیز امکان پذیر می باشد، اما در این مقاله به ساده ترین روش پرداخته ایم. برای مشاوره در زمینه طراحی ریسپانسیو سایت با دارکوب تماس حاصل فرمایید.
معمولا مشکل برای نمایش سایت بین عرض 327 و 1024 می باشد که می توانید آن محدوده را نیز به چند فایل مختلف CSS اختصاص دهید به عنوان مثال از 327 تا 500، از 500 تا 700، از 700 تا 900 و از 900 تا 1024.
با استفاده از کتابخانه bootstrap می توانید پیاده سازی نسخه موبایلی سایت را بسیار راحتر انجام دهید زیرا خود این کتابخانه تغییر سایزهای المان های موجود در صفحه را به صورت خودکار انجام می دهد.
با توجه به میزان استفاده از موبایل و تبلت و رشد آن در سال های اخیر ایجاد نسخه موبایلی وب سایت بسیار با اهمیت می باشد، به طوری که گوگل نیز از مدیران سایت می خواهد نسخه موبایلی سایت را طراحی نمایند.
وردپرس و iOS 7
طبق گزارش های جدید 47 درصد از کاربرانی که در اینترنت از موبایل برای مرور وب استفاده می نمایند از Apple's iOS برای این کار استفاده می نمایند. وردپرس زمانی که برنامه های موبایل خود را بروز نمود کاملا سازگار با ابزارهای iOS شد و با iOS7 شرکت Apple سازگاری کامل دارد. انجام به روز رسانی های جدید موبایل به مدیران سایت این امکان را داده که به راحتی سایت خود را برای مرورگرهای موبایل طراحی نمایند که این امکانات جانبی شامل:
- سیستم ورود بهینه سازی شده و پیغام ها
- ظاهر تب بیس آسان
- سیستم نظرات و پیغام های بهینه سازی شده
- سیستم های نظر دهی داخلی
- سیستم نمایش مطالب بهینه سازی شده
- امکان لینک دهی از توئیتر
- و سایر رفع عیب ها
هم اکنون که وردپرس برنامه های خود را سازگار با iOS 7 ساخته، شما نیز می بایست مواردی را انجام دهید تا زمانی که کاربر از مرورگرهای موبایل مخصوصا iPhones و iPads برای مرور سایت استفاده می نماید صفحات به درستی به کاربر نمایش داده شود. امروزه برای آنکه از سایر رقبای خود عقب نمایید بهتر است سایت خود را برای مرورگرهای موبایل و ابعاد مختلف صفحات بهینه سازی نمایید. روش های مختفی برای ایجاد نسخه موبایل سایت وجود دارد که در زیر آمده.
ساخت سایت موبایل
یکی از راه های اینکه راه اندازی سایت موبایل ایجاد نسخه جدیدی از سایت می باشد که طراحی اولیه آن بر پایه موبایل می باشد. سایت هایی با پسوند .mobi سایت نمونه ای از این سایت ها می باشد. زمانی که سرور مرورگر موبایل را تشخیص می دهد سایت موبایلی را به جای نسخه کامل سایت نمایش می دهد. سایت های موبایل در حقیقت سایتی جداگانه هستند، که نگهداری و پشتیبانی خود را نیاز دارند. استفاده از ساب دامنه نمونه ای از این نوع می باشد.
استفاده از پلاگین
وردپرس به دلیل پلاگین ها و امکانات جانبی بسیار آن تا این حد محبوب شده است. اضافه کردن امکانات جدید به پایه اصلی وردپرس بسیار ساده است و همه می توانند پلاگین ها را به راحتی نصب نمایند. برای نسخه موبایل سایت نیز پلاگین ها بسیاری وجود دارد. WPTouch یکی از پلاگین ها می باشد. این پلاگین به کاربر این امکان را می دهد که بخش های مورد نظر خود را برای سایزهای مختلف مرورگر حذف و اضافه نماید. سایت هایی از پلاگین ها برای نسخه موبایل خود استفاده می نمایند در iOS7 به خوبی نمایش داده نمی شوند. در صورتی که از این پلاگین ها استفاده می نمایید سایت خود را به صورت کامل در موبایل بررسی نمایید.
یک برنامه برای آن
تبدیل سایت وردپرس به برنامه با استفاده از پلاگین ها ممکن است. و به کاربراین امکان را می دهد در هر زمانی به سایت شما دسترسی داشته باشد. بارگذاری برنامه سایت به فروشگاه برنامه به بازدید کنندگان بیشتر آن کمک می نماید. برنامه برای سیستمی که برای آن طراحی گردیده پیاده سازی شده پس حتما برنامه مخصوص iOS7 را ایجاد نمایید.
طراحی سایت ریسپانسیو
یکی دیگر از روش های راه اندازی نسخه موبایل طراحی سایت ریسپانسیو می باشد. و به این صورت انجام می گردد که صفحه بر روی گرید هایی بسته می شود که به تغییر سایز صفحه آیتم های موجود در صفحه برای سایز مورد نظر جا به جا می گردند.
مزایایی سایت وردپرس ریسپانسیو:
- کافی است یک سایت راه اندازی نموده و پشتیبانی نمایید
- این روشی است که گوگل پیشنهاد می نماید نسخه موبایلی سایت را طراحی نمایید
- قالب های ریسپانسیو وردپرس بسیاری وجود دارند که با استفاده از آنها می توانید سایت خود را راه اندازی نمایید
همیشه طراحی نسخه iOS7 را جزو برنامه های خود قرار دهید زیرا بسیاری از کاربران از آن برای مرور وب استفاده می نمایندو شما با انجام این کار کاربران بسیاری بدست خواهید آورد.
قالب های رایگان جوملا سازگار با موبایل (ریسپانسیو)
جوملا سیستم مدیریت محتوای رایگانی می باشد که به کاربران امکان طراحی سایت را به صورت رایگان می دهد که توسط میلیون ها کاربر مورد استفاده قرار گرفته است.
جوملا به شما امکان ساخت وب سایت مختلف از ساده تا پیشرفته را در محیطی ساده می دهد.
جوملا به دلیل آسانی و سادگی استفاده از آن تا این حد محبوب شده, برای نصب اسکریپت کافی است دانش پایه MySQL, سرور آپاچی, phpMyAdmin, لینوکس, و سایر موارد را داشته باشید.
فقط کافی است اطلاعات شخصی و نام سایت را وارد نمایید, و سپس پس از گذراندن چند مرحله ساده جوملا بر روی سرور شما نصب می گردد.
که به این نوع نرم افزار CMS می گویند. سیستم های مدیریت محتوا و یا همان cms ها به توسعه دندگان وب امکان ایجاد وب سایت را بسیار آسان تر می دهند. یکی از محبوب ترین سیستم های مدیریت محتوا جوملا می باشد.
در زمانی که نیاز به طراحی وب سایت دارید جوملا یکی از بهترین گزینه ها برای شما می باشد.
در این مقاله برای شما 50 مورد از بهترین قالب های رایگان جوملا که سازگار با نمایشگر موبایل هستند آورده ام.
در صورتی که قصد دارید از هر یک از این قالب ها استفاده نمایید مجوز استفاده هر یک از این قالب ها را مطالعه نمایید زیرا این مجوزها در حال تغییر هستند.
Design Control – قالب رایگان جوملا
Design Control یک قالب بسیار ساده می باشد که برای وب سایت های مختلف مورد استفاده قرار می گیرد, و بهتر از همه آنکه رایگان می باشد!
رد سایر قالب های رایگان شما مشکل کیفیت قالب را دارید ولی با Design Control این مشکل وجود نخواهد داشت
این قالب با تمام ویژگی های Shape5 Vertex Framework پیاده سازی شده!
ST Orddie J3 قالب رایگان جوملا
SportDigga قالب رایگان جوملا
SportDigga قالب جوملا سازگار با موبایل مخصوص نسخه های جوملای 3x و 2.5 می باشد. طراحی آن به صورت وسط چین می باشد که دارای پس زمینه کلی می باشد. منو قابلیت تغییر مکان در مکان های مختلف را دارد.
Ju Otan قالب رایگان جوملا
اسلایدر هدر با افکت های جدید و گوگل آنالیتیک با قابلیت های به روز.
DD Email Marketing قالب رایگان جوملا
اشکال های آن در جوملا 3.2 رفع گردیده.
Expose قالب رایگان ریسپانسیو جوملا
این قالب با جوملا 3.2 سازگاری کامل دارد
MX JooFree 11 قالب سازگار با موبایل جوملا
ابزارهای شبکه های اجتماعی آن از کنترل پانل قابل مدیریت است
At Global قالب ریسپانسیو رایگان جوملا
این قالب با جوملا 2.5 سازگاری کامل دارد.
این قالب دارای ابزارهای بسیاری جهت تغییر رنگ قالب، فونت ها و سایر موارد موجود در صفحه می باشد.
Color 3 قالب رایگان سازگار با موبایل جوملا
این قالب بر پایه Zhong Framework می باشد, Color 3 قابلیت های بسیاری را در کنار هم گرد آورده.
TX Zenith قالب رایگان جوملا
Zenith قالب رایگان سازگار با جوملا 2.5 و 3 می باشد که قابلیت های جالبی دارد. Bootstrapped آن و پشتیبانی ازK2 به آن امکان ایجاد بلاگ و یا سایت تجاری را داده. Zenith دارای 4 استایل پیش فرض می باشد.
JT Bbusiness قالب رایگان جوملا
این یک قالب برای شرکت های تجاری می باشد که به صورت رایگان ارائه شده و سازگار با نسخه های جوملا 2.5 و 3 می باشد.
این قالب دارای ابزارهای قدرتمندی می باشد:
اسلایدشو و آیکون های شبکه های اجتماعی
سازگاری با موبایل و تبلت ها
این قالب مکان های بسیاری دارد
انواع مختلف منوهای jquery آبشاری
صفحات مقاله، بلاگ و تماس با ما استایل بندی شده
AS 002041 قالب رایگان جوملا
Autumn3R قالب رایگان جوملا
Vertino Black قالب رایگان جوملا
Pjo Astoria قالب رایگان جوملا
Vimy قالب رایگان جوملا
این قالب دارای قابلیت های بسیاری می باشد
با سیستم های مختلف سازگاری کامل دارد
طراحی بسیار خاص
قابلیت تغییر در طرح
قالب در مرورگرهای موبایل بسیار منعطف عمل می نماید
قالب ها و استایل های مختلفی دارد
پنل مدیریت
قابلیت چند زبانه
ICT Novotela قالب رایگان جوملا
ST Loki J3 قالب رایگان جوملا
AS 002057 قالب رایگان جوملا
Borren Nature قالب رایگان جوملا
Shaper Xeon قالب رایگان جوملا تک صفحه ای
Shaper Xeon قالب تک صفحه ای جوملا می باشد که با موبایل سازگاری کامل دارد.
JSN Gruve قالب رایگان جوملا
Brown قالب رایگان جوملا
PRI Simple قالب رایگان جوملا
PRI Simple قالب سازگار با موبایل مخصوص نسخه های 2.5 و 3 جوملا می باشد که مناسب برای وب سایت های شخصی می باشد. این قالب سایت در انواع مختلف مرورگرهای وب سازگاری کامل دارد.
JSN Metro قالب رایگان جوملا
JSN Metro قالب طراحی شده توسط JoomlaShine می باشد. در صورتی که با ویندوز 8 کار کرده باشید نوع طراحی این قالب را احساس خواهد کردید. این نوع طراحی ها به صورت فلت و مسطح هستند و در آن به چیزی که بیش از همه توجه شده کاربر می باشد.
SimplexLite قالب رایگان جوملا
ICT Conches قالب جوملا رایگان
Ju Otan قالب رایگان جوملا
ST King Free قالب رایگان جوملا
TD Gemenis قالب رایگان جوملا
JSN Yoyo قالب رایگان جوملا
این قالب به صورت قالب های تک صفحه ای طراحی شده و تمام صفحه می باشد.
Winter3R قالب های رایگان جوملا
BT Magazine قالب رایگان جوملا
BT Magazine تنها قالب ریسپانسوی می باشد که از EasyBlog پشتیبانی می نماید. طراحی آن برای پشتیبانی از سایت های روزنامه ای و مجلات و سایت های تکنیکال بسیار مناسب است.
Avatar Nine Flat قالب رایگان جوملا
TX Zenith قالب رایگان جوملا
AS 002050 قالب رایگان جوملا
مشکل نمایش صفحه تماس با ما و گوگل مپ در صفحه تماس با ما رفع گردیده
Business قالب رایگان جوملا
Web Design Builders از شما بابت استفاده از این قالب قدردانی به عمل می آورد. این قالب مدت ها تست شده و مشکلی در آن یافت نشده و از اینکه از آن استفاده می نماید خرسندیم.
AS 002056 قالب رایگان جوملا
این قالب برای سایت های حیوانات خانگی که دارای تنوع رنگی بسیاری می باشد بهینه سازی شده و به صورت کامل سازگار با مرورگرهای موبایل است.
ST Venus قالب رایگان جوملا
ST Venus قالب ریسپانسیو جوملا می باشد. این قلب مناسب سایت های شرکت های تجاری می باشد ولی برای شرکت های که پروفایل کاری دارند نیز مناسب است. این قالب قابلیت های فراوانی دارد.
قالب رایگان جوملا – ICT Conches
قالب رایگان جوملا – JSN Sky
این قالب مناسب هتل ها و موسسات توریستی می باشد
Prismatic Free قالب رایگان جوملا سازگار موبایل
این قالب سازگار با موبایل طراحی شده و دارای اسلایدر تصاویر پس زمینه می باشد.
Ol Logez قالب رسپانسیو جوملا
Portal قالب رایگان جوملا
jf Vihrea قالب جوملای رایگان
The JF Vihrea دارای قابلیت های بسیاری در بخش کاربری و مدیریت می باشد. یکی از مهترین قابلیت های این سایت سازگاری آن با موبایل می باشد.
JF Texturia قالب رایگان جوملا
JaxStorm Black قالب رایگان جوملا
JaxStorm-Black قالب بسیار آسان جوملا می باشد که به راحتی می توانید آن را سفارشی سازی نمایید. این قالب برای موسسات و شرکت های تجاری بسیار عالی است.
LightBreeze قالب رایگان جوملا
LightBreeze قالب بسیار ساده جوملا می باشد. این قالب برای وب سایت های سازمان ها و موسسات بسیار مناسب می باشد.
ST Green قالب رایگان جوملا
Cirrus Yellow قالب رایگان جوملا
+ سازگاری با مرورگرهای مختلف
+ قابلیت تغییر تعداد ستون ها
+ قایلت منوهای آبشاری
+ دارای 15 مکان قالب
+ W3C HTML5 استاندارد سازی شده
+ PSD شامل فایل
+ 100% رایگان
Avatar Simple قالب رایگان جوملا
ST BirdSign قالب رایگان جوملا
ST Buzz قالب رایگان جوملا
ST Tyneo قالب رایگان جوملا
Memins Blue قالب رایگان جوملا
ST Business قالب رایگان جوملا
JSN Pixel قالب رایگان جوملا
JSN Pixel توسط JoomlaShine پیاده سازی شده. و طراحی مدرنی دارد.
Phoca Tre قالب رایگان جوملا
Freemium قالب رایگان جوملا
JSN Escape قالب رایگان جوملا
AS 002042 قالب رایگان جوملا
این قالب با جوملا 3 سازگاری کامل دارد
قابلیت ستون راست نیز دارد
44 مکان مختلف در این قالب وجود دارد
این قالب دارای تنظیمات بسیاری است
JSN Decor قالب رایگان جوملا
Magma قالب رایگان جوملا
a4joomla Countryside3r قالب رایگان جوملا
JoomLike 3.0 قالب جوملا رایگان
Simple4 قالب رایگان جوملا
AS 002022 قالب رایگان جوملا
ST Buzz قالب رایگان جوملا
Landscape3r قالب رایگان جوملا
JSN Ares قالب رایگان جوملا
JSN Ares قالب بسیار مناسبی برای سایت های شخصی و برنامه ها می باشد. این قالب برای پشتیبانی از موارد مختلف بهینه سازی شده.
Clubys Grey قالب جوملا رایگان
Ashton 3 قالب جوملا رایگان
Avatar Tahoma قالب رایگان جوملا
Avatar Tahoma قالب سازگار با موبایل می باشد که دارای قابلیت های فراوانی است.
JT School قالب رایگان جوملا
Triplex3R قالب جوملا رایگان
Converset Lite قالب جوملا رایگان
DD Angel Church قالب رایگان جوملا
Liberty قالب جوملا رایگان
Clubys Blue 2 قالب رایگان جوملا
Portal Free قالب جوملا
Darksunset3R قالب رایگان جوملا
AS 002052 قالب رایگان جوملا
MX JooFree 11 قالب جوملا
Retrostar Black قالب رایگان جوملا
Ah-68 Flexi 3 قالب رایگان جوملا
Apicloud قالب رایگان جوملا
Palace3r قالب جوملا رایگان
Mayolito قالب جوملا رایگان
TD Gemenis قالب رایگان جوملا
FX Business قالب رایگان جوملا
Expose4 قالب رایگان جوملا
Menims Black قالب رایگان جوملا
DD-Medicine RX قالب رایگان جوملا
Magic Landscape قالب رایگان جوملا
Cirrus Orange قالب رایگان جوملا
Meembo Blue قالب رایگان جوملا
Meembo-Blue مناسب برای شرکت های تجاری می باشد. این قالب برای سایت های سازمان ها نیز مناسب است و کاربرد دارد.
ZT Xenia قالب رایگان جوملا
این قالب دارای قابلیت راست به چپ می باشد.
ZT Hong قالب رایگان جوملا
این قالب همه کاره می باشد که می توانید از آن در طراحی سایت های ورزشی استفاده نمایید.
JV Snow قالب رایگان جوملا
Movie قالب رایگان جوملا
این قالب مناسب سایت های ویدئو می باشد
PixelDot – قالب رایگان جوملا
ConstructionCo – قالب ساختمانی قرمز رایگان جوملا
ConstructionCo مناسب سایت های شرکت های ساختمانی و همچنین سایر شرکت هایی که در زمینه ساخت و ساز هستند مناسب است.
تبدیل هر وب سایت به سایت موبایل توسط phpMobilizer
phpMobilizer به صاحبان وب سایت قابلیت اضافه نمودن پشتیبانی سایت از موبایل را میدهد.
phpMobilizer چیست؟
به صورت اتوماتیک هر وب سایتی را به وب سایت موبایل تبدیل می نماید. phpMobilizer به مانند سایر مبدلهای سایت به نسخه موبایلی کار می کند به جز آنکه این برنامه بر روی سرور شما
اجرا می شود.
هدف این پروژه جهانی ساختن آن می باشد. فقط کافی است این برنامه را بر روی یک ساب دامنه از سرور خود بارگذاری نمایید و سپس کد مربوط به انتقال مرورگرهای موبایل را به سایت موبایلی در برنامه اصلی قرار دهید.
قابلیت ها
- به آسانی نصب می شود، فقط کافی است فایل ها را بر روی ساب دامنه از سایت خود بارگذاری نمایید
- هر وب سایتی را به نسخه موبایل تبدیل می نماید.
- تصاویر را برای نمایش در نسخه موبایل تغییر سایز می دهد. فقط سایز آنها را تغییر نمی دهد، بلکه حجم آن ها را برای نمایش در موبایل کاهش می دهد
- انتقال خودکار به نسخه موبایل سایت. البته می بایست کد به سایت اصلی اضافه گردد
نیازمندی ها
- PHP 5
- Apache (.htaccess/mod_rewrite capable)
برای دانلود به آدرس زیر مراجعه نمایید: