من یک انتخاب تازه از بیست و جالب ترین تم برتر برای وردپرس آماده کرده ام که برای ایجاد سایت های ارائه ، صفحات فرود برای بازی های موبایل و برنامه های کاربردی مناسب هستند.
توسعه جهانی ارتباطات از راه دور ، در دسترس بودن اینترنت تلفن همراه ، بازار کاملاً جدید و بصورت پویا در حال توسعه برای برنامه های موبایل را تشکیل داده است. که در تنها چند سال به یک صنعت عظیم تبدیل شده است. محاسبه اینکه چند سال استارتاپ جالب توجه بر روی دستگاه های تلفن همراه در سال های اخیر ظاهر شده است دشوار است. بازار بزرگ و سودآور است ، بسیاری از شرکت ها ، توسعه دهندگان این موضوع را می فهمند و برای تسخیر آن تلاش می کنند.
توسعه فناوری تلفن همراه ، رشد عملکرد تلفن های هوشمند به بهبود ، افزایش کارایی و کیفیت برنامه های موبایل کمک می کند. تلفن های هوشمند رده بالا تقریبا از نظر کارایی با رایانه های شخصی برابر هستند. و احتمالاً دفترهای دفتر قبلاً نیز دور زده اند. در مقابل این زمینه ، رشد گسترده ترافیک تلفن همراه چندان تعجب آور نیست. هفته گذشته ، به عنوان مثال گوگل "جستجوی زنده" خود را خاموش کرد. با سهم عظیمی از ترافیک تلفن همراه و ویژگیهای جستجوی تلفن همراه ، این امر را تحریک کنید. من فکر می کنم بازار برنامه های کاربردی موبایل بسیار امیدوار کننده است. حداقل در سالهای آینده فقط رشد ، پیشرفت ، پیشرفت ، نفوذ عمیق تر به زندگی روزمره وجود خواهد داشت ، به اصطلاح اینترنت چیزها
مانند هر زمینه دیگر ، هر اپلیکیشن موبایل به صورت یک وب سایت ارائه نیاز به بسته بندی زیبا و زیبا دارد. جایی که می توان قابلیت های آن را نشان داد ، در مورد مزایا ، مزایا و غیره صحبت کنید.
یک تم مدرن یک صفحه ای با طراحی تمیز برای ارائه برنامه های کاربردی موبایل ، سفارشی سازی آن بسیار آسان است ، دارای 12 گزینه نمایش آماده ، فونت های وب ، نمادها ، اختلاف منظر ، جعبه های سبک ، ساخته شده در ویژوال کامپوزر ، لغزنده انقلاب و موارد دیگر.
بارگیری نسخه ی نمایشی
فرود یک صفحه ای با امکانات گسترده سفارشی سازی ، طراح صفحه بصری داخلی ، پشتیبانی از فونت های Google ، تجارت الکترونیکی مبتنی بر WooCommerce ، Slider Revolution و بسیاری موارد دیگر.
بارگیری نسخه ی نمایشی
یک تم پاسخگو عالی برای ارائه برنامه های تلفن همراه ، ساخته شده در Bootstrap با پشتیبانی از Google Fonts و Google Maps.
بارگیری نسخه ی نمایشی
یک تم مدرن چند منظوره با طراحی تمیز ، می تواند در حالت های تک صفحه ای و چند صفحه ای کار کند ، دارای 4 گزینه برای طراحی صفحه اصلی ، پشتیبانی از حالت چند زبانه بر اساس افزونه WPML ، طراح ویژوال کامپوزر ، لیست های پستی Mailchimp و غیره.
بارگیری نسخه ی نمایشی
یک موضوع چند منظوره برای نشان دادن قابلیت های برنامه های کاربردی موبایل بر اساس Bootstrap ، 2 گزینه برای نمایش اصلی ، پشتیبانی از نمایشگرهای با کیفیت بالا ، ساخته شده در ویژوال کامپوزر ، وارد کردن یک کلیک محتوای دمو و تمام مهمات سنتی.
بارگیری نسخه ی نمایشی
الگوی فرود وردپرس با طراحی تمیز و مدرن ، با تمرکز بر نمایش برنامه های موبایل برای سه سیستم عامل اصلی: اندروید ، iOS و ویندوز. کاملاً مستند ، آسان برای پیکربندی.
بارگیری نسخه ی نمایشی
یک صفحه فرود سازگار دیگر برای WordPress on Bootstrap با 24 گزینه طراحی نیز برای ارائه برنامه های تلفن همراه ، استارتاپ ها طراحی شده است. یک طراح صفحه بصری و بیش از 80 عنصر طراحی داخلی ، فرم های تماس ، ادغام لیست پستی Mailchimp و موارد دیگر وجود دارد.
بارگیری نسخه ی نمایشی
یک الگوی فرود فرود جدید بر اساس Warp 7 Framework برای طرفداران سایت های سبک و مدولار. نه تنها برای برنامه های کاربردی تلفن همراه ، بلکه برای مناطق دیگر نیز مناسب است.
بارگیری نسخه ی نمایشی
یک تم مدرن ساده برای نمایش یک برنامه موبایل با دو گزینه برای طراحی صفحه اصلی ، پشتیبانی از نمایشگرهای شبکیه چشم ، سازنده داخلی ویژوال کامپوزر ، لغزنده Slider Revolution ، وارد کردن محتوای تک کلیک ، منوی مگا ، بیش از 600 قلم و موارد دیگر.
بارگیری نسخه ی نمایشی
تم وردپرس یک صفحه ای چند منظوره برای نمایش برنامه های تلفن همراه ، راه اندازی ها ، سایت های شخصی. ساخته شده در بوت استرپ ، ساخته شده در سازنده ویژوال کامپوزر ، لغزنده Revolution ، فرمهای تماس ، کد کوتاه ، نمادها و غیره.
بارگیری نسخه ی نمایشی
قالب فرود برنامه موبایل با 3 گزینه صفحه اصلی ، 20 گزینه طرح بندی ، شخصی سازی ساده ، سازنده صفحه بصری ویژوال کامپوزر ، پشتیبانی از افزونه چند زبانه WPML.
بارگیری نسخه ی نمایشی
یک موضوع وردپرس سازگار با چند منظوره ارزان با 23 گزینه طراحی آماده.
بارگیری نسخه ی نمایشی
یک موضوع مدرن چند منظوره با طراحی پاسخگو حرفه ای برای ارائه برنامه ها و بازی های موبایل. در هیئت مدیره ویژوال کامپوزر ، پشتیبانی از افزونه چند زبانه WPML ، لیست های پستی Mailchimp ، فرم های بازخورد فرم تماس با 7.
بارگیری نسخه ی نمایشی
یک الگوی فرود بهینه چند منظوره برای توسعه دهندگان برنامه های کاربردی تلفن همراه ، محصولات نرم افزاری ، استارتاپ ها ، آژانس های طراحی و خلاقیت. 4 گزینه برای طراحی صفحه اصلی ، شخصی سازی ساده با استفاده از سازنده داخلی WordPress ، یک طراح صفحه بصری با 40 عنصر طراحی + ، Revolution Slider ، کد کوتاه 50+ ، کد های 500+ ، نمادهای 500+ بهینه سازی شده برای نمایشگرهای شبکیه چشم.
بارگیری نسخه ی نمایشی
یکی از سریعترین تم های پاسخگو تک صفحه ای در ThemeForest ، عالی برای راه اندازی ها. 12 گزینه طراحی آماده ، وارد کردن یک کلیک از محتوای نسخه ی نمایشی ، شخصی سازی ساده ، کد تمیز ، سازنده صفحه بصری ویژوال کامپوزر ، Revolution Slider ، پشتیبانی تجارت الکترونیکی WooCommerce و موارد دیگر.
بارگیری نسخه ی نمایشی
توسعه دهنده ادعا می کند که با استفاده از موضوع هلیوم ، صفحات فرود شما به یک سلاح قدرتمند بازاریابی تبدیل می شوند. بحث کردن سخت است - موضوع بسیار مدرن است ، ساخته شده بر اساس Bootstrap ، بهینه سازی شده توسط SEO ، دارای 10 گزینه برای نمایش اصلی ، اسلایدر ، فونت های 1000+ ، داخلی ویژوال کامپوزر با 50+ عنصر طراحی ، پشتیبانی از WooCommerce ، Mailchimp ، Google Map ، Google Fonts ، فرم تماس با 7 ، نمونه کارها و خیلی چیزهای دیگر.
بارگیری نسخه ی نمایشی
موضوع بسیار شیک با 7 طرح بندی صفحه اصلی ، 6 گزینه نمایش صفحه هدر ، 5 گزینه زیرزمین ، ساخته شده در ویژوال کامپوزر با افزودنیهای نهایی ، انقلاب کشویی ، WooCommerce ، یک صفحه ناوبر ، پشتیبانی WPML و وارد کردن یک کلیک محتوای نمایشی.
بارگیری نسخه ی نمایشی
تم پاسخگو مدرن با طراحی مبتنی بر Bootstrap برای سایت های توزیع نرم افزار. 9 گزینه برای صفحه اصلی ، 8 طرح رنگی ، 3 گزینه برای بازخوانی کلاه های وب سایت ، پشتیبانی از توییتر ، یوتیوب ، فونت عالی و غیره.
بارگیری نسخه ی نمایشی
موضوع خلاق یک صفحه ای با طراحی پاسخگو ، 17 گزینه طراحی آماده ، پشتیبانی از نمایشگرهای شبکیه چشم ، ساخته شده ویژوال کامپوزر ، انقلاب کشویی ، پشتیبانی از فونت های Google ، اختلاف منظر و انیمیشن های مختلف.
بارگیری نسخه ی نمایشی
یک الگوی صفحه فرود سازگار با طراحی تمیز و مدرن و قابلیت سفارشی سازی گسترده ، مناسب برای برنامه های تلفن همراه ، محصولات ، استارتاپ ها. ساخته شده در ویژوال کامپوزر ، وارد کردن یک کلیک ، پشتیبانی چند زبانه از WPML ، فرم های تماس با فرم تماس با شماره 7 ، کشویی Revolution Slider و موارد دیگر.
بارگیری نسخه ی نمایشی
الگویی بسیار زیبا که به سایت برنامه موبایل کمک می کند تا ظاهر حرفه ای داشته باشد ، در حالی که آن را خسته کننده نمی کند. شما می توانید از بین سه گزینه برای صفحه اصلی انتخاب کنید ، که هر یک به نظر خوب می رسد. طرح رنگی پروژه آینده آنلاین می تواند همانطور که می خواهید تغییر یابد. علاوه بر این ، قابلیت کشیدن و رها کردن به شما امکان می دهد بدون محتوی کد ، با محتوا کار کنید.
بارگیری نسخه ی نمایشیپرداخت
یک الگوی عالی که به شما امکان می دهد بدون هزینه های هنگفت بودجه برای آن ، پروژه آنلاین مورد نظر خود را بسازید. این گزینه طیف گسترده ای از گزینه ها را برای شخصی سازی نگاه سایت ارائه می دهد. و Elementor-builder به شما امکان می دهد کد و همه چیز مرتبط با آن را فراموش نکنید. به یاد داشته باشید که از منوی مگا استفاده کنید تا کاربران بتوانند در سایت راحت تر حرکت کنند.
بارگیری نسخه ی نمایشیمومکس
Momex یک الگوی مدرن است که مانند سایر راه حل های آماده در این مجموعه ، به شما امکان می دهد تا یک پروژه آنلاین چشمگیر بسازید. این انتخاب گسترده ای از گزینه ها را در اختیار کاربران قرار می دهد که می تواند برای بهبود ظاهر سایت و کارایی آن مورد استفاده قرار گیرد. به عنوان مثال ، در بین چهار طرح وبلاگ ، هر کس می تواند گزینه ای را پیدا کند که قطعاً برای شما جذاب خواهد بود. بسته ای از افزونه های گیلاس ، کسانی را که می خواهند خدمات را به گونه ای ارائه دهند ، فراهم می کند که مخاطب مورد نظر را برای انتخاب آنها ترغیب کند.
بارگیری نسخه ی نمایشی
Consor یک الگوی عالی است که می تواند هر تجارت را به یاد ماندنی ترین روش ارائه دهد. بنابراین ، من می توانم به او توصیه کنم که سایت های برنامه تلفن همراه ایجاد کند. در بسته وی می توانید گزینه های متنوعی برای هدر پیدا کنید که به دستیابی به منحصر به فرد بودن یک پروژه آنلاین نیز کمک می کند. و WordPress Live Customizer کار با رنگ ها و قلم های پروژه آنلاین آینده را بدون تلاش اضافی امکان پذیر می کند.
بارگیری نسخه ی نمایشی
الگویی کاملاً کاربردی و انعطاف پذیر که بدون شک توجه بسیاری را به خود جلب خواهد کرد. این شامل بسیاری از صفحات آماده است که به ارائه خدمات ، ایجاد گالری پروژه ها و انجام کارهای بسیار دیگر کمک می کند. همراه با Elementor-builder ، ایجاد یک سایت به یک لذت واقعی تبدیل می شود. از این گذشته ، به شما امکان می دهد تا محتوای انتخابی را به سادگی در محل مورد نظر در سایت بکشید و رها کنید.
بارگیری نسخه ی نمایشیدر نتیجه
همانطور که می بینید ، انتخاب زیادی وجود دارد. همچنین می توانید موضوعات مربوط به دسته نرم افزار را در TemplateMonster مشاهده کنید. انتخاب آنجا به اندازه ThemeForest گسترده نیست ، اما نکته جالب نیز یافت می شود. بگذارید یادآوری کنم که هنگام انتخاب یک موضوع برتر برای یک سایت ، نباید در موضوع آن به چرخه بروید. نکته اصلی طراحی ، ساختار و هر موضوعی است که می تواند کشیده شود. من با جزئیات بیشتری در مورد عدم پیچیدن در یکی از مقاله های قبلی خود صحبت کردم.
در تلگرام من مشترک شوید و اولین کسی باشید که مطالب جدیدی دریافت می کنید ، از جمله این موارد در سایت موجود نیست.
در دنیای امروز ، داشتن وب سایت شخصی شما نیز از جمله داشتن شماره تلفن یا آدرس ایمیل بسیار مهم است. متأسفانه ، همه نمی توانند یک وب سایت حرفه ای زیبا برای خود درست کنند و حتی گاهی اوقات منحنی نیز نتیجه نمی گیرد. سفارش از برنامه نویسان نیز یک راه حل ایده آل نیست ، زیرا همه نمی توانند آن را بپردازند.
قالب های رایگان وب سایت HTML به شما کمک می کند تا از این وضعیت خارج شوید. قالب سایت HTML مجموعه ای از صفحات استاتیک آماده برای سایت با موضوع خاص است. در صورت داشتن دانش اساسی در نشانه گذاری HTML ، با استفاده از این الگو می توانید تنها در چند ساعت یک سایت ساده ایجاد کنید. در بخش HTML ، اگر چند ساعت بیشتر وقت خود را صرف مطالعه کنید ، این دانش را به دست خواهید آورد و اگر از زمان بخش CSS پشیمان نیستید ، می توانید طراحی قالب های وب سایت HTML را کاملاً کنترل کرده و آنها را کاملاً مطابق با نیاز خود تنظیم کنید.
یکی دیگر از مزیت های انکار ناپذیر قالب سایت این است که در اکثر موارد توسط متخصصان نوشته شده اند. یک قالب وب سایت حرفه ای نه تنها به یک طراحی زیبا و مدرن بلکه به دلیل نوشته شدن کد نیز می باشد. موتورهای جستجو چگونگی نوشتن سایت شما را بررسی می کنند ، آیا کد SEO بهینه شده است یا خیر ، بر این اساس آنها موقعیت شما را در نتایج جستجو پایین می آورند یا افزایش می دهند. بنابراین ، یک سایت خوب نه تنها باید زیبا و مدرن باشد ، بلکه مهم است ، بلکه از نظر کد نیز به درستی نوشته شده است.
قالب های سایت HTML رایگان را بارگیری کنید و پروژه های خود را در اسرع وقت ایجاد کنید.
در این پست در مورد الگوی موبایل وردپرس صحبت خواهیم کرد. این قالب بسیار زیبا ، کاربردی ، با قابلیت استفاده عالی و بطور خاص برای سیستم عامل ها و رایانه های لوحی طراحی شده است.
این قالب دارای یک منوی مناسب است که می تواند به صورت سیاه و سفید پیکربندی شود یا یک رنگ بندی متفاوت برای صفحه نمایش انتخاب کند. این قالب برای موتور وردپرس شامل کلیه صفحات لازم تهیه شده است و در مونتاژ آن کامل است.
در این حالت ، قبل از ما ، معمولی است قالب وبلاگ موبایل. با توجه به پویایی انتقال از دستگاه های رایانه ای ثابت به تجسم های تلفن همراه آنها ، شما باید کمی تلاش کنید تا تأثیر وبلاگ های خود را در اینترنت موبایل افزایش دهید.
از هر نظر جالب است الگوی موبایل موبایل نقطه بیش از یک برنامه در پروژه های آنلاین شما پیدا می کند. طراحی جدید ، چیدمان حرفه ای ، وزن سبک و قابلیت استفاده عالی ، حامیان کمی پیدا خواهد کرد که بلافاصله پس از بارگیری با یک الگوی برای یک سایت موبایل کار کنند.
این یکی از این طرح ها برای یک سایت همراه است که نمی خواهید با آن مخفی شوید ، آن را برای سایت های خود مخفی کنید. با این حال ، این مورد نخواهد بود و با اصل ارسال اطلاعات در سایت مغایرت دارد. بنابراین - آن را.
هنگامی که سایتی برای "خواندن" یا "مشاهده" ساخته شده است ، حداقل طراحی در قالب قالبهای html برای وب سایتها و سایتهای تلفن همراه ضروری است.
چنین طراحی با استفاده از حداقل سبک ها و گرافیک های وب، عمدا محتوا را به معرض نمایش می گذارد. به طور کلی ، چیز دیگری برای جستجو در چنین سایتی وجود ندارد ، به جز مقاله هایی که برای خواندن در نظر گرفته شده است ، البته.
قالب های موبایل زیبا در اینترنت مدرن غیر معمول نیست ، اما تعداد بسیاری از آنها رایگان و آسان برای راه\u200cاندازی هستند؟ امروز بلافاصله توجه شما را جلب می کنیم دو قالب موبایل Galaxy.
این دو ساختار از نظر ساختار یکسان هستند اما در قالب های طراحی متفاوت هستند ، بدون شک هنگام تنظیم نسخه موبایل وب سایت خود و ایجاد سایت هایی برای ترافیک تلفن همراه برای شما مفید خواهند بود.
بازدید کنندگان را به وبلاگ موسیقی خود دعوت کنید نسخه موبایل سایت. بیشتر CMS های مدرن قبلاً چنین فرصتی را ارائه می دهند و مشارکت یا تلاش شما برای سازگاری لازم نخواهد بود.
اما اگر نسخه ای از سایت دارید که بازدید کنندگان در اینترنت با استفاده از آیفون یا آی پد در اینترنت مرور می کنند ، اما به دلیل عدم وجود یک قالب wap زیبا برای وبلاگ ، از طراحی موبایل وبلاگ راحت نیستید ، پس از آن استقبال می کنید.
این الگوی وبلاگ لیست پخش بهترین رایگان است طراحی وبلاگ موسیقی. در پایان بخوانید و "پوست" را انتخاب کنید.
سایت نمونه کارها ، خود را استادانه ایجاد کنید - نه چندان آسان. نسخه موبایل سایت نمونه کارها احتمالاً پیچیده تر است. با این حال ، وقتی وظیفه ایجاد یک وب سایت به وجود می آید ، نسخه موبایل به عنوان ادامه آن کاملاً مدرن خواهد بود.
مورد خوبی را انتخاب کردیم قالب موبایل وب سایت نمونه کارها در رنگ های تیره برای مرورگرها و دستگاه های تلفن همراه ، که به خوبی با طراحی الگوی وب سایت html5 طنین انداز است. اکنون نسخه wap آن را خواهید داشت. در ادامه بخوانید ، ما عکسهایی برای مقایسه wap و نسخه های وب نشان خواهیم داد.
قبل از ما یک صفحه نمایش کوچک است قالب سایت موبایل در html5 - برچسب ها. این یک قالب html5 سبک وزن است و پرونده CSS با وزن تقریبی 5 کیلوبایت دارد و تنها پنج تصویر مورد استفاده در طراحی سایت است.
با سلام ، خوانندگان وبلاگ عزیزم. Galiulin Ruslan متصل شد. امروز ما در مورد نسخه های موبایل سایت هایی صحبت خواهیم کرد که هر سایت یا وبلاگ باید برای پیشرفت در بالای موتورهای جستجو داشته باشد. در این مقاله کدهای سبک و مثال های آماده از طرح بندی صفحه را ارائه می کنم که می توانید در رایانه خود بارگیری کنید.
اگر سایت شما هنوز موبایل نیست ، توصیه می کنم از نکات خود یا با متخصصین تماس بگیرید - http://www.Mobile-version.ru چه کسی طبق استانداردهای موتورهای جستجو همه کارها را انجام می دهد. با همین لینک می توانید سایت خود را برای تحرک بررسی کنید.
در سال 2013 ، گوگل فشار به وب مسترها وارد کرد ( https://webmasters.googleblog.com/2013/06/changes-in-rankings-of-smartphone_11.html) ، متقاعد کردن در مورد نیاز به ایجاد تغییرات سبک سایت ، و از سال 2015 ، تحرک به یکی از جنبه های رتبه بندی تبدیل شده است ( https://webmasters.googleblog.com/2015/04/rolling-out-mobile-friendly-update.html) Yandex نیز خیلی عقب نمانده است ، زیرا الگوریتم ویژه Vladivostok را ایجاد کرده است که مناسب بودن سایت برای مشاهده از تلفن ها را در نظر می گیرد.
موبایل دوستانه امروز فقط دغدغه بازدید کنندگان نیست ، بلکه یک شرط ضروری برای ارتقاء است.
وقتی سایتی از ابتدا ساخته شده است ، رویکرد Mobile First را انجام دهید. اما بیشتر آنها دارای طرح های قدیمی هستند. سوال اصلی که نسخه موبایل سایت در چنین مواقعی ایجاد می کند این است که چگونه می توان بدون ایجاد الگویی از الگوی موجود ، آن را ساخت.
سه رویکرد وجود دارد:
- یک آدرس و طرح جداگانه در زیر دامنه فرم m.site.ru. قرار دارد. تغییر مسیر از طریق سرور هدایت به نماینده کاربر صورت می گیرد.
- طراحی پاسخگو - url و html همانند قالب دسک تاپ باقی می مانند ، اما در رسانه های CSS درخواست هایی برای صفحه های مختلف داده می شود.
- RESS یک طراحی پاسخگو است ، آدرس همان باقی می ماند ، اما سرور بسته به نوع تجهیزات مورد نظر صفحه ، استایل ارسال می کند.
برای دارندگان پروژه های قدیمی بهترین انتخاب استفاده از طرح تطبیقی \u200b\u200bاست. چگونه این کار را خودتان انجام دهید و بدون استفاده از افزونه های ناایمن ، قدم به قدم در نظر خواهیم گرفت.
نسخه موبایل سایت: نحوه انجام درست آن
اقدامات بیشتر به دانش بنیادی کاملی درباره html و css یا توانایی سریع گوگل در امور مبهم نیاز دارد.
اطلاعات برای مبتدیان: در CSS ، کلمات جلوی براکت های فرفری به معنای تکه های خاصی از فایل html هستند که آنها وظیفه نمایش آن را بر عهده دارند. آنها بیشتر با نقطه یا شبکه - # مکان (ویژگی: مقدار؛) نوشته می شوند.
مرحله 1. محدودیت ها را بردارید.
دارندگان مدل های لاستیکی می توانند از این مرحله پرش کنند. بقیه باید سخت کار کنند.
عرض - ما در جستجوی کد برای مناطق بزرگ با نقشه برداری سخت است. اگر پارامتر در پیکسل ها یا نقاط مشخص شده است ، باید مقدار آن را به درصد ، em و سایر واحدهای مستعد محیط تغییر دهید. غالباً ظرف اصلی یا محتوا دارای عرض ثابت است - در بیشتر موارد ، محدودیت ها با جایگزین کردن آن با حداکثر عرض برداشته می شوند.
تصاویر - به جای اندازه های واضح ، ما برای تگ img خواصی را تجویز می کنیم ، که قابلیت سازگاری با تصاویر را خواهد داد. عکس ها متناسب با ظروف والدین تغییر می کنند.
img (
حداکثر عرض: 100٪؛
ارتفاع: خودکار؛
جداول - شما قادر به تنظیم کامل سازگاری نخواهید بود ، اما می توانید با افزودن این کد صفحات با آنها را برای دستگاه های تلفن همراه مناسب تهیه کنید:
میز (
نمایش: بلوک؛
عرض: 100٪؛
Overflow-x: پیمایش.
سرریز-y: پنهان؛
سبک-خانم-سرریز: -ms-autohiding-scrollbar؛
پیمایش وب سایت-سرریز: لمس کنید.
بسته بندی - تنظیم شده توسط خاصیت float. تنظیم این پارامتر باعث می شود بلوک ها بسته به پارامترهای پنجره ، تنظیم شوند و روی عناصر با وضعیت پایدار یا درون ظروف والد حرکت کنند. عناصر div استاندارد به طور پیش فرض هرکدام در یک خط جدید ترجمه می شوند. به عنوان مثال ، با قرار دادن بلوک های تقسیم 1000 px از 200 px در هر ، می توانید چنین تصویری را ببینید.
بلوک ها در بالای یکدیگر ایستادند. اضافه کردن یک بسته بندی باعث شکستن خط می شود ، عناصر را در یک خط در تمام فضای موجود قرار می دهد.
مرحله 2. برنامه ریزی برای سازماندهی مجدد محتوا.
دریابید که جزئیات سایت دسک تاپ در دستگاه های تلفن همراه نمایش داده می شود. برای انجام این کار ، به سؤالات خود پاسخ دهید:
- کدام بلوک ها فقط عملکردهای تزئینی را انجام می دهند؟ - اغلب اینها لغزنده ، تزئینات نوار کناری ، پرسشنامه ، عکس تصادفی هستند.
- بازدید کنندگان چه چیزی را نادیده می گیرند؟ - نقشه های حرارتی از کلیک ها و مسیرها به پاسخگویی به این سوال کمک می کند. ما کمترین عناصر فعال را بی رحمانه پنهان خواهیم کرد.
- چه چیزی باید در نسخه موبایل باقی بماند؟ - معمولاً این یک آگهی ، فرم بازخورد ، اشتراک یا دکمه های رسانه های اجتماعی است.
- به این فکر کنید که چگونه سایت باید روی رایانه های لوحی ، تلفن های هوشمند و تلفن های قدیمی کوچک ظاهر شود - می توانید ظاهر خود را برای هر دستگاه تنظیم کنید.
مرحله 3. راحتی.
پیمایش: صفحه های تلفن خیلی کوچک هستند ، فهرست معمول سایت به ندرت در چنین چارچوبی قرار می گیرد. مرسوم است که منوی ظاهر شده در دکمه را تنظیم کنید.
منطقه محتوا: برای تلفن ها ، به طور معمول ، بسته به فضای موجود ، عرض بلوک اصلی را در CSS را 100٪ قرار می دهند. این بدان معناست که متن ، ماژول ها ، تبلیغات ، محتوای نوار کناری در دستگاه های کوچک در یک ستون نمایش داده می شود.
سنسورها: انگشتان به اندازه ماوس دقیق نیستند ، به اندازه کافی فضای کافی را در اختیار آنها قرار می دهند. فضای اطراف پیوندها و سایر عناصر فعال باید حداقل 28 x 28 پیکسل باشد.
به بازدید کنندگان خود کمک کنید تا فضای فعال را تعیین کنند - تورفتگی ، برجسته سازی ، تغییر رنگ و موارد دیگری که می توانند برای لمس ها تنظیم شوند ، کلاس شتاب شناور را برای لینک ها و دکمه ها بنویسید.
اجرای پرس و جوهای رسانه ای با مثال
اگر تاکنون جداول CSS را برای چاپ ایجاد کرده اید ، در مورد امکان اختصاص سبک های فردی بسته به شرایط ، از قبل ایده ای دارید.
نمایش داده های رسانه ای - عبارات منطقی ، دسترسی به آنها حاوی پاسخ با پارامتر درست یا نادرست است. اگر نتیجه درخواست صحیح باشد ، یعنی عامل کاربر یا اندازه دستگاه با نوع رسانه مشخص شده مطابقت داشته باشد ، سپس قواعد سبک مشخص شده در بلوک رسانه به طور خودکار اعمال می شود.
نمایش داده شد رسانه ها توسط پارامترها:
- عرض و ارتفاع پنجره مرورگر؛
- عرض و ارتفاع دستگاه؛
- جهت گیری - حالت افقی یا عمودی.
- وضوح صفحه
لیست آرگومان فعلی در دسترس است مشخصات رسمی
به مثالها می رسیم. یک الگوی آماده وجود دارد ، اندازه قسمت محتوای آن 1000 پیکسل است ، تمام عناصر داخلی و جزئیات مربوط به این پارامتر تنظیم می شوند.
اگر صفحه کاربر از قسمت محتوای مشخص شده باریک تر باشد ، یک نوار پیمایش ظاهر می شود. عناصر طراحی شناور می توانند به روشی غیرقابل پیش بینی رفتار کنند - به یکدیگر بپردازید ، بیش از حد محو شوید ، بیش از حد باریک شوید.
اول از همه ، اندازه ثابت را حذف می کنیم ، یک نوار ایجاد می کنیم تا در تنظیم دخالت نکند. در الگوی ما ، این یک بسته بندی ناوبری است. در طرح خواننده ، این می تواند یک یا چند عنصر باشد. اگر تعیین مشکل دارید ، ابزارهای مرورگر برنامه نویس را باز کنید - مطابق ارائه مدل بلوک ، عنصری را پیدا کنید که به اندازه صفحه نمایش نباشد.
برای رفع آن ، فریم های ثابت را با نوشتن در سبک های قالب حذف کنید:
فقط صفحهmedia و (حداکثر عرض: 1000px) (
Nav (عرض: 100٪؛)
حال اگر عرض صفحه کاربر کمتر از 1000 px باشد ، عرض منو 100٪ اندازه آن خواهد بود. نسخه اصلی قالب در همان زمان به نظر می رسد مانند گذشته. با تعویض ویژگی ، نوار پیمایش پایین را هنگام فشرده سازی صفحه حذف کرد.
اما بلوکها هنوز شک به نظر می رسند - ما صفحه نمایش آنها را تغییر خواهیم داد و عرض درصد را به اندازه دلخواه افزایش می دهیم.
به همان Mediaver اضافه کنید:
بلوک (عرض: 35٪؛)
چگونه می توان اندازه های بهینه برای بلوک های سایت خود را پیدا کرد؟ به صورت دستی بخوانید یا به عنوان پایه ای از شبکه مشبک تمام شده استفاده کنید. می توانید روی استانداردهای موجود متمرکز شوید: در طرح بندی های دو ستونی با عرض پنجره 980-1050px ، بسته بندی به صورت 95٪ ، محتوا 60٪ و 30٪ در نوار کناری باقی می ماند. فضای باقی مانده برای تشکیل مرزها و حاشیه برای دقت صرف می شود.
با این وجود می توانید از اندازه جعبه برای محتوا استفاده کنید تا هر بار پیکسل ها را محاسبه نکنید بلکه روی ابعاد کلی کار کنید.
ما به وظیفه نمایش روی صفحه نمایش هایی با وضوح پایین تر روی آورده ایم:
media فقط صفحه و (حداکثر عرض: 600px) (
بلوک (
شناور: هیچی؛
عرض: 85٪؛
حاشیه: 1em خودکار؛
اگر صفحه نمایش کمتر از 600 پیکسل باشد ، باید بلوک های ما در یک ستون بایستند - ما جریان را دور خود بر می داریم ، تورهای جدید را تنظیم می کنیم ، مرکز می کنیم و عرض را تغییر می دهیم. بیشتر اوقات ، 100٪ تنظیم شده است ، اما اگر به دلایلی ناخوشایند باشد ، اندازه خود را تعیین می کنیم.
بنابراین می توانید نه تنها ابعاد بلوک های محتوا بلکه صفحه نمایش آنها را تنظیم کنید. به عنوان مثال ، برای ممنوعیت نمایش عناصر بزرگ ، جایگزین کردن آنها با هر نوع راحت.
بگذارید با مثال تغییر رنگها و نمایشگرها امکانات را نشان دهیم.
نسخه برای تلفن های هوشمند منوی اصلی را مخفی می کند ، و رنگ بلوک به رنگ آبی روشن می شود ، در حالی که صفحه نمایش بزرگتر طراحی را بدون این تغییرات نمایش می دهد.
پنهان کردن ناوبری در بیشتر موارد لازم است - آن را با یک دکمه جایگزین می کنید. مناسب تر است که این کار را با استفاده از جاوا اسکریپت انجام دهید ، می توانید از راه حل های آماده استفاده کنید.
ویرایش ها به صورت نقطه انجام می شوند ، محدوده می تواند هم از بالا و هم از پایین محدود شود. این سریع و راحت است - در یک خط می توانید CSS جداگانه را برای دستگاه های مختلف تنظیم کنید بدون اینکه روی ظاهر اصلی سایت تأثیر بگذارد.
شما می توانید قوانین مربوط بهmedia را در هر جایی از یک شیوه نامه موجود اعلام کنید ، یا یک مورد جداگانه برای این اعلامیه ها ایجاد کنید ، و سپس با استفاده از قانون واردات @ آن را به CSS اصلی وارد کنید.
نسخه موبایل سایت: نحوه ساخت و به چه مواردی باید توجه شود
مرورگرهای رسانه توسط همه مرورگرهای مدرن قابل درک هستند ، اما این کار در IE 8 و پایین کار نخواهد کرد. با دسترسی به اینترنت اکسپلورر قدیمی از طریق اظهار نظر مشروط مشکل حل می شود. آنها باید در کد الگو نوشته شوند ، و نه در CSS.
خود اسکریپت در گیتوب موجود است ( https://github.com/scottjehl/Respond) ، پشتیبانی از حداقل و حداکثر ابعاد و پوشش رسانه ای در اینترنت اکسپلوررهای قدیمی.
مشکل دیگر - طراحی پاسخگو شامل استفاده از Html5 است که مجدداً برای مرورگرهای قدیمی مشخص نیست. تحت درمان با هک:
کد در html نوشته شده است ، علاوه بر این ، نمایش بلوکی از عناصر ایجاد شده در CSS تنظیم شده است:
هدر ، ناو ، بخش ، مقاله ، کنار ، پاورقی (نمایش: بلوک ؛)
بلافاصله این سؤال را مطرح خواهیم کرد - چگونه می توان مطمئن شد که برخی از اسکریپت ها فقط با تنظیمات صفحه نمایش مشخص شده نمایش داده می شوند. اگر جی کوئری نصب شده است ، باید یک اسکریپت ساده را به کد الگو اضافه کنید. اعداد به موارد ضروری تغییر می کنند. اینگونه می خواند: اگر عرض پنجره بیش از 980 پیکسل باشد ، اسکریپت مشخص شده در مسیر بر روی صفحه اعمال می شود. شما می توانید چندین مورد را تعیین کنید ، نحو به صورت قیاس از طریق یک قطعه در داخل براکت های فرفری نوشته شده است.
اگر ($ (سند). عرض ()\u003e 980) (
$ .getScript ("مسیر اسکریپت")؛
نکته دیگر این است که چگونه مرورگر موبایل آیفون باید محتوای ارائه شده را کنترل کند ، آیا افزایش آن مجاز است یا خیر. برای انجام این کار ، مقیاس اولیه با سر نوشته شده است:
باقی مانده است که فقط صحت را بررسی کنید - برای این کار می توانید از مرورگر و تلفن خود استفاده کرده یا به خدمات دسترسی پیدا کنید.
اگر سایت به یک سرور محلی هدایت می شود ، می توان درستی را در آن تعیین کرد ami.responsivedesign.is. صاحبان دنور برای ویرایش صحیح با ویرایش فایل سرور httpd.conf باید کدگذاری را به utf-8 تغییر دهند.
این سرویس نحوه عملکرد پروژه در دستگاه های مختلف را نشان می دهد.
علاوه بر این ، قالب مورد آزمایش قرار می گیرد https://developers.google.com/speed/pagespeed/insights/ یا با لباس مخصوص https://www.google.com/webmasters/tools/mobile- دوستانهو همچنین در وب مسترها.
در Yandex ، این به طور مفصل به نظر می رسد ، و گوگل به سادگی گزارش می دهد که مشکلی وجود ندارد.
اگر همه چیز به درستی انجام شود ، هیچ پیمایی یا عناصر اضافی وجود نخواهد داشت. نسخه موبایل آماده است ، و اکنون یاد گرفته اید که چگونه این کار را خودتان انجام دهید. اگر مطالب برای شما مفید بود ، پس از آن در وبلاگ خبرنامه دوست داشته و مشترک شوید. همه بهترین ها
با کلیک بر روی یکی از دکمه های زیر می توانید 2 صفحه نمونه ای را که در این درس به حداقل رسیده اند بارگیری کنید و فقط با صفحات تمام شده کار کنید و کد را کپی کنید.
با احترام ، گالیولین روسلان.
امروزه بیشتر افراد از طریق وسایل موبایل - تبلت ، تلفن به شبکه دسترسی پیدا می کنند و از این نظر ، بهینه سازی سایت نیز به سطح جدیدی می رسد. اگر یک کاربر وارد شود و ببیند که سایت برای دستگاه های تلفن همراه بهینه نشده است: تصویر قابل مشاهده نیست ، دکمه ها به بیرون منتقل شده اند ، قلم ها کوچک و غیرقابل خواندن هستند ، طرح به شکلی طراحی شده است - 99 از 100٪ ، که او بیرون می آید و شروع به جستجوی راحت تر دیگری می کند. علامت بررسی مبنی بر اینکه این منبع بی ربط است ، یعنی با پرس و جو جستجو مطابقت ندارد. بنابراین ، طراحی صفحه باید با دستگاههای مختلف تلفن همراه سازگار باشد. نسخه موبایل یک سایت چیست ، چگونه می توان آن را ساخت و بهترین راه برای استفاده از آن چیست؟ جزئیات بیشتر در این مقاله
بنابراین چهار راه اصلی برای تطبیق سایت با نسخه موبایل وجود دارد.
روش اول - طراحی پاسخگو
الگوهای پاسخگو شامل تغییر تصویر سایت بسته به اندازه صفحه نمایش می شوند. به عنوان یک قاعده ، آنها بر روی استاندارد 1600 ، 1500 ، 1280 ، 1100 ، 1024 و 980 پیکسل تنظیم شده اند. برای اجرای درخواست نمایش داده شد. خود تغییر نمی کند.
مزایای این روش شامل موارد زیر است:
- توسعه مناسب ، از آنجا که این ساختار خود را به تنظیمات صفحه نمایش سازگار است ، و هر بروز رسانی نیاز به توسعه طراحی از ابتدا ندارد ، فقط CSS و HTML را نیشگون بگیرید.
- یک آدرس URL - کاربر نیازی به یادآوری چندین نام ندارد ، نیازی به هدایت مجدد (تغییر مسیر از یک آدرس به آدرس دیگر) نیست ، که می تواند کار مدیر وبلاگ را پیچیده کند ، و آسان تر و مرتب سازی منبع با یک آدرس تنها برای موتور جستجو آسان تر است.
البته الگوهای تطبیقی \u200b\u200bدارای اشکالاتی نیز هستند که به هر حال ، بیشتر از مزایای آن است. با این وجود بسیاری از توسعه دهندگان به این مفهوم پایبند هستند ، به عنوان مثال ، شرکت Google ، که نسخه موبایل آن سایت دارای طراحی تطبیقی \u200b\u200bاست. بنابراین ، مضرات عبارتند از:
- طراحی پاسخگو از همان وظایف روی دستگاه تلفن همراه مانند رایانه شخصی پشتیبانی نمی کند. به عنوان مثال ، اگر این یک نسخه موبایل وب سایت بانک است ، جایی که اطلاعات مربوط به نرخ ارز یا نزدیکترین دستگاههای خودپرداز ممکن است برای کاربر مهم باشد ، چنین طراحی کاملاً کافی است. اما اگر این یک منبع ساختاری پیچیده است که دارای بخش ها و زیرمجموعه های زیادی است ، بازدیدکنندگان بعید است که آن را دوست داشته باشند.
- بارگذاری کند سایت مورد علاقه شما را به سایت متنفر و متنفر تبدیل می کند. این امر به ویژه در مورد منابعی که در انبوه انیمیشن ، فیلم ، پاپ آپ و سایر عناصر فعال وجود دارد صادق است. به دلیل وزن سنگین ، صفحه به راحتی "کند می شود" ، کاربر عصبانی می شود و ترک می شود و موقعیت های جستجو در سایت سقوط می کنند.
- عدم امکان غیرفعال کردن نسخه موبایل یکی دیگر از اشکالات قابل توجه دیگر است. اگر هیچ عنصری توسط چنین چیدمان پنهان شده است ، برخلاف سایتهایی که می توانید آن را غیرفعال کنید و به یک دامنه معمولی تغییر دهید ، نمی توانید برای باز کردن آن کاری انجام دهید.
با این وجود ، چنین نسخه موبایل سایت به سرعت و بدون مهارت و هزینه خاص به شما امکان می دهد تا منابع را با هر اسباب بازی تطبیق دهید. اما مناسب است ، به دلیل مضرات فوق ، برای منابع کوچک و ساده با حداقل اطلاعات و چندرسانه ای ، بدون پیمایش و انیمیشن پیچیده. برای یک سایت پیچیده ، 2 روش دیگر مناسب است.
روش دوم - یک نسخه جداگانه از سایت
این روش بسیار رایج است و غالباً با موفقیت سایت را در دستگاه تلفن همراه برای خواندن آسان می کند. اصل آن ایجاد نسخه جداگانه ای از صفحه است که برای برنامه ترسیم شده است و به عنوان مثال در m.vk.com در یک URL یا زیر دامنه جداگانه قرار دارد. در عین حال ، عملکرد اصلی حفظ می شود ، طراحی سایت فقط متفاوت به نظر می رسد. مزایای استفاده از این روش آشکار است:
- رابط کاربری مناسب؛
- تغییر و ایجاد تغییرات بسیار ساده است ، زیرا نسخه به طور جداگانه از منبع اصلی وجود دارد.
- به دلیل وزن کم ، نسخه جداگانه سایت بسیار سریعتر از یک الگوی سازگار کار می کند.
- در اکثر موارد ، امکان رفتن به نسخه اصلی صفحه با تلفن همراه وجود دارد.
اما در اینجا برخی از معایب وجود دارد:
- چندین آدرس - دسک تاپ و نسخه موبایل سایت. چگونه می توانیم کاربر را به دو گزینه یادآوری کنیم؟ غالباً وب مسترها از دسکتاپ تا نسخه موبایل تجویز می شوند ، اما اگر این صفحه در نسخه موبایل وجود نداشته باشد ، کاربر خطایی دریافت می کند. در اینجا ، مشکلاتی در موتورهای جستجو ایجاد می شود که رتبه بندی منابع یکسان 2 دشوار است و این به طور مستقیم بر ارتقاء تأثیر می گذارد.
- نسخه تلفن همراه یک سایت از یک رایانه ، اگر کاربر به اشتباه وارد آن شود ، مسخره به نظر می رسد ، که این هم می تواند در حضور تأثیر بگذارد.
- این نسخه اغلب به میزان زیادی کاهش می یابد ، دسک تاپ است ، بنابراین کاربر از قابلیت های بسیار محدودی برخوردار خواهد شد. اما در عین حال ، اگر چیزی از دست نرود ، بازدید کننده می تواند به نسخه کامل صفحه مراجعه کند.
به طور کلی ، یک سایت جداگانه موبایل پرداخت می کند و رایج ترین روش برای تطبیق یک منبع با دستگاه های تلفن همراه است. این محبوبیت در بین فروشگاه های بزرگ آنلاین مانند آمازون وجود دارد.
راه سوم - طراحی RESS
موتور جستجوی Google به طور فعال از این جهت از طراحی موبایل پشتیبانی می کند. این دشوارترین ، پرهزینه ترین ، اما مؤثرترین روش برای تطبیق سایت با تلفن یا رایانه لوحی شما است. به آن RESS گفته می شود. این هدف قرار دادن منابع در یک برنامه تلفن همراه است که می توانید برای هر دستگاه جداگانه بارگیری کنید. برای اندروید - با GooglePlay ، و برای Apple - با iTunes.
چنین برنامه هایی سریع ، رایگان ، راحت هستند و می توانند انواع مختلفی از اطلاعات را میزبانی کنند ، در حالی که حافظه تلفن و ترافیک اینترنت مانند بازدید از سایت از طریق یک مرورگر از بین نمی روند. دسترسی به آنها بسیار آسان است ، زیرا پیوند همیشه در صفحه نمایش خواهد بود و نیازی به وارد کردن یک اسم پیچیده در نوار آدرس مرورگر نیست.
البته در اینجا اشکالاتی نیز وجود دارد ، از جمله پیچیدگی در توسعه ، هزینه های بالای کار تعداد زیادی از برنامه نویسان و نیاز به ایجاد چندین گزینه چیدمان. گاهی اوقات یک دستگاه تلفن همراه توسط برنامه به رسمیت شناخته نمی شود. پشتیبانی فنی منظم ، اصلاح نواقص لازم است. با این وجود ، این گزینه به دلیل عملکرد مولد و بدون وقفه آن ، بهترین از سه پیشنهادی است.
ارزان ترین راه برای ساخت سایت موبایل
همه روشهای فوق ، البته نه همیشه یک کار طولانی و پیچیده ، اما هنوز هم با پرداخت هزینه مدیر وب است. اگر نیاز فوری به چنین توسعه ای را مشاهده نکردید ، یک نسخه موبایل و ساده از سایت برای شما مناسب خواهد بود. چگونه آن را ساده ترین کنیم؟
قالب های ویژه (افزونه ها) را برای طراحی پاسخگو بارگیری کنید. به عنوان مثال ، WP Mobile Detector ، WordPress Mobile Pack ، WPSmart Mobile و موارد دیگر. آنها به نمایش صحیح سایت در تلفن کمک می کنند ، در حالی که شما چند نکته را برای تطبیق بهتر صفحه با نسخه موبایل دریافت می کنید.
البته این روش به سختی برای منابع جدی مناسب نیست. در عوض ، این ویژگی رایگان برای کوچکترین و ساده ترین سایت ها ، وبلاگ ها ، خبرخوان ها در نظر گرفته شده است. همچنین فراموش نکنید که موتور جستجوی گوگل مانند Yandex امروزه برای نسخه های موبایل نیازهای جدی دارد ، بنابراین احتمال پایین آمدن موقعیت های آنها با استفاده از این روش وجود دارد.
با این روش ، به احتمال زیاد ، تبلیغات و بنرهای بازشو قطع می شوند ، اما صفحه به سرعت و بدون "تأخیر" بارگیری می شود.
اصول ایجاد نسخه های موبایل
فرقی نمی کند نسخه موبایل سایت به صورت رایگان ایجاد شود یا به کمک کارمندان وب مسترها ، در سیستم RESS ساخته شده یا از الگوی تطبیقی \u200b\u200bاستفاده شود. مهمتر از همه ، برای كارآمد بودن آن ، ملزم به رعایت چندین اصل بسیار مهم است. بنابراین نسخه موبایل سایت چه باید باشد؟ چگونه می توان آن را تولیدی ، کارآمد و تولید کرد؟
همه موارد غیر ضروری را حذف می کنیم
مینیمالیسم همان چیزی است که باید توسعه دهنده نسخه موبایل سایت در پی آن باشد. تصور کنید که درک اطلاعاتی که با رنگ ها ، دکمه ها ، آگهی ها پر شده است ، و اینکه باید در جستجوی مواد مناسب به آنها بی پایان بروید ، چقدر دشوار است. طراحی موبایل باید ساده و تمیز باشد. 2-3 رنگ را برای تقسیم فضا انتخاب کنید (برای مثال ، مارک دار). اگر یکی از آنها سفید باشد بهتر است. فضای صفحه نمایش کوچک را به مناطق واضح و قابل خواندن تقسیم کنید. کلیدهای مجازی باید قابل مشاهده باشند تا کاربر به وضوح بداند کجا را فشار داده و می بیند - در اینجا محصول است ، در اینجا فرم پر کردن داده ها است ، در اینجا اطلاعات مربوط به تحویل و پرداخت است.
تمام گزینه های اضافی که در نسخه دسک تاپ مفید هستند و زندگی را برای کاربر آسان تر می کنند ، تنها پیچیدگی را به همراه خواهند داشت. فقط مهمترین عناصر را رها کنید. انیمیشن ، بنرهای تبلیغاتی ، چندرسانه ای ، به احتمال زیاد ، فقط سایت یا برنامه را کند می کنند و از چیز اصلی منحرف می شوند.
تراز
مسئله تراز هم کمتر حاد نیست ، زیرا اگر این کار را اشتباه انجام دهید ، کاربر فقط پایان کلمات مهم را دریافت می کند. عموماً تراز سمت چپ و عمودی پذیرفته می شود. تصور کنید که چگونه از طریق خبرخوانی در تلفن خود حرکت می کنید. شما این کار را از بالا به پایین انجام می دهید ، اما نه به سمت چپ یا راست.
اتحاد
وقتی امکان زنجیره طولانی انتقال وجود ندارد ، سعی کنید چندین مرحله را در یک مرحله ترکیب کنید. به عنوان مثال ، سایت نیاز به وارد کردن داده ها در چند مرحله دارد - یک نام ، سپس یک آدرس ، جایی که در هر سلول جداگانه یک خانه جداگانه ، خیابان ، آپارتمان و غیره وجود دارد برای اینکه کاربر را مجبور نکند از طریق بسیاری از سلولهای کوچک سعی کند از طریق وی وارد شود ، فقط به او پیشنهاد می کند که فقط 2 را پر کند - نام و آدرس
و جدایی
برعکس ، بعضی اوقات ، باید اطلاعات زیادی را جدا کنید. به عنوان مثال ، در منوی کشویی لیستی از بیش از 80 شهر را دارید که تحویل در آنجا انجام می شود. آنها را بر اساس منطقه قرار دهید تا کاربر مجبور نباشد از این لیست عظیم پیمایش کند. هنگامی که او یک مرکز یا منطقه ای را تحت کنترل درآورد ، لیست دیگری از شهرها کنار می رود.
لیست ها
به هر حال ، در مورد لیست. دو عدد از آنها وجود دارد - به ترتیب حروف الفبا یا ترتیب دیگر و با کارت ویزیت ثابت. انتخاب آنها به آنچه ذکر خواهد شد بستگی دارد.
اگر کاربر دقیقاً آنچه را که به دنبالش می داند ، ثابت باشد راحت است. به عنوان مثال ، شهر ، شماره یا تاریخ. گزینه دوم برای نامهای پیچیده طولانی یا برای مواردی که تغییرات زیادی با همین نام وجود دارد مناسب است و هرکدام یک قدم کاربر را یک قدم به هدف نزدیک می کند. در صورت نیاز به یک بازدید کننده ، گزینه autosubociation اغلب استفاده می شود. به عنوان مثال ، یک سایت بافندگی خرید سوزن بافندگی را ارائه می دهد. کاربر وارد جستجوی جستجو "سوزن های بافندگی فلزی" می شود و در قسمت اعلان "سوزن بافندگی 5 میلی متر" ، "سوزن بافندگی 4.5 میلی متر" و غیره را مشاهده می کند.
تکمیل خودکار
این مورد مخصوصاً برای سایتهایی که آنها چیزی را بصورت آنلاین می فروشند بسیار مهم است و شما باید فرمهای استاندارد پرداخت ، تحویل و غیره را پر کنید اگر شخصی از طریق تلفن خریدی انجام داد ، به احتمال زیاد وی زمان مراجعه به رایانه را ندارد ، به این معنی که این روند خریدها باید تا حد امکان سریع و راحت انجام شود.
برای این فرم ممکن است دارای داده های از قبل تکمیل شده باشد ، می توانید به محبوب ترین پاسخ ها متوسل شوید. به عنوان مثال ، اگر در همان منطقه کار می کنید ، تاریخ امروز ، روش پرداخت وجه نقد ، شهر را درج کنید. آنها می توانند تغییر کنند ، اما اگر به هدف ضربه بزنید ، زمان کاربر ذخیره می شود.
همه چیز خوانده شده است ، همه چیز مشاهده می شود
هنگام طراحی نسخه موبایل سایت ، به یاد داشته باشید که همه تلفن ها دارای تلفن های مختلف و همچنین بینایی هستند. شاید سایت شما از یک صفحه کوچک مشاهده شود ، بنابراین قلم ها باید ساده و خواندنی باشند ، دکمه ها باید به اندازه کافی بزرگ باشند تا بتوان بر روی آن کلیک کرد و به صفحه دیگری نرسید ، و تصاویر باید بطور جداگانه ، بزرگ باز شوند ، به خصوص وقتی که به اینترنت رسید. فروشگاه
برخی از آمار
صحبت از سازگاری سایت با دستگاه های تلفن همراه ، نمی توان به آماری متوسل شد تا درک کند که این روند برای ارتقاء در شبکه تا چه اندازه اهمیت دارد.
اعداد به شرح زیر است. امروزه ، 87٪ از جمعیت ، ظاهرا به جز كوچكترین كودكان و برخی افراد سالخورده از اسباب بازی استفاده می كنند. اقتصاددانان پیش بینی افزایش 100 برابری تجارت موبایل را طی 5 سال آینده دارند. در عین حال ، تنها 21٪ سایت ها برای کار با دستگاه های تلفن همراه سازگار هستند. این بدان معنی است که ترافیک اینترنت و بازار تجارت الکترونیکی فقط توسط یک بخش کوچک 5 اشغال شده است.
به این شماره ها فکر کنید. آیا منطقی است که منابع خود را تطبیق دهید؟ البته بله علاوه بر این ، تا زمانی که فضای آزاد زیادی در این بازار وجود داشته باشد ، می توانید بخش خود را در آن بکشید.
نسخه موبایل مورد نیاز کجاست؟
استفاده از نسخه موبایل برای هر پلتفرمی که می خواهد رتبه بالایی داشته باشد مناسب است. از این گذشته ، این یک تأثیر مستقیم بر کاربر است و شرایطی را برای او فراهم می کند که بتواند در سایت شما بماند.
بدون نسخه موبایل موارد زیر نمی تواند وجود داشته باشد:
- پورتال های خبری ، زیرا دقیقاً اکثریت آنها از طریق تلفن در راه کار یا مدرسه مشاهده می شود.
- شبکه های اجتماعی - به همین دلیل ، به علاوه یک عامل ارتباط آنلاین وجود دارد ، به این معنی که باید چت مناسب و قابل درک برای این کار ایجاد شود.
- سایتهای مرجع ، سایتهای دارای ناوبری و غیره ، جایی که افراد وقتی به دنبال چیزی می گردند به آن روی می آورند.
- فروشگاه های آنلاین - فرصتی برای جذب خریدارانی که وقت خود را صرف خرید نمی کنند ، اما همه چیز را از طریق اینترنت موبایل خریداری می کنند.
به جای نتیجه گیری
امروزه فناوری های تلفن همراه در مرحله رشد و توسعه فعال قرار دارند ، بنابراین ، با تلاش برای رهبری در بازار ، هر شرکتی باید اطمینان حاصل كند كه منبع اینترنت خود مطابق با الزامات است. به دلیل افزایش درخواست های کاربران ، سایت ها مجبورند دائماً دستگاه های مختلف را ارتقا و سازگار کنند. واضح است که اگر شخصی از حضور در یک منبع خاص ناراحت باشد ، نمی تواند در مورد محصول یا قیمت آن اطلاعاتی بدست آورد ، سفارش خود را صادر کند ، در مورد تحویل اطلاعات کسب کند ، در این صورت سایت را پیدا خواهد کرد که همه این موارد امکان پذیر باشد. بنابراین ، برای پیروزی در رقابت ، داشتن یک منبع انعطاف پذیر ، راحت ، کاربردی و جالب توجه است.
نسخه موبایل سایت Android یا Ios به انجام این کار کمک خواهد کرد. برای انجام این کار ، شما باید یکی از روشهای فوق برای طراحی مجدد را انتخاب کنید - یک الگوی تطبیقی \u200b\u200b، ایجاد یک سایت جدید در یک فرعی و تغییر مسیر به آن از طریق یک تغییر مسیر ، استفاده از قالب های رایگان یا ایجاد یک برنامه موبایل که با استفاده از آن کاربر می تواند راحت تر وارد این صفحه شود و در صفحه بماند.
