Am adaptat acest șablon la standardele browserelor unor platforme precum IOS (3.1+), Android (2.1+), Blackberry (6.0+), Windows Phone 7, precum și Opera mobile pentru Android, care câștigă popularitate. Aș dori să notez că toate browserele standard (cu excepția Windows Phone 7 care are IE9) se bazează pe webkit.

Care este diferența dintre dezvoltarea site-urilor desktop și a site-urilor pentru dispozitive mobile? În continuare, voi vorbi despre câteva trucuri care vă vor ajuta să ocoliți multe probleme.

Ce rezoluție să alegeți și metaeticheta de vizualizare

S-ar părea că ar trebui să avem o întrebare despre ce rezoluție să folosim ca bază pentru site-ul nostru? La urma urmei, dispozitivele cu 230x340 (de exemplu HTC Wildfire S) și aproximativ 800x480.960x640 (HTC Incredible S, iPhone 4) și chiar 1280x720 (HTC One X) sunt relevante acum. Metaeticheta viewportului ne vine în ajutor, ceea ce va rezolva problema cu rezoluția și scalarea.

• width=device-width - valoarea este setată de dispozitivul însuși
• initial-scale=1 - scara inițială este setată la 1 (adică 1:1)
• maximum-scale=1.0, user-scalable=no - scalarea este interzisă (aș dori să remarc că, chiar și cu acești parametri, HTC va scala în continuare, iar dezvoltatorii au spus că aceasta nu este o eroare, ci o caracteristică)

Un pic despre grafică

Chiar și cu această gamă de rezoluții, ar trebui să remarc că majoritatea dispozitivelor mobile, având o rezoluție mare, o folosesc nu pentru a-și extinde spațiul de lucru, ci pentru a crește claritatea (mai multe despre asta). Cu alte cuvinte, saturația lor în pixeli (DPI) este de câteva ori mai mare decât rezoluțiile mai mici. Din care rezultă că dispozitivele cu un PDI mare comprimă efectiv site-ul de 2 ori pentru a obține aceleași dimensiuni ca la dispozitivele cu o rezoluție mai mică (de exemplu, în Dispozitivele Apple Cu display retină Există de 4 ori mai multe puncte pe aceeași zonă a ecranului, ceea ce mărește claritatea). Rezultatul îl putem vedea mai clar în imaginea de mai jos.

Acum că știm cum funcționează ecranele cu DPI ridicat, merită să ne gândim la afișarea corectă a tuturor elementelor site-ului nostru Web.
Să începem cu elemente precum fonturi, chenare și alte elemente similare. Toate aceste elemente sunt în esență obiecte vectoriale pe care browserul le poate scala fără probleme, așa că să nu ne oprim asupra asta.
Situația este diferită cu imaginile și imaginile de fundal. La urma urmei, dacă salvăm imaginea de fundal pe baza faptului că avem 320x480, atunci dispozitivele cu un DPI mai dens nu vor putea să ne apară în toată splendoarea ei și vor veni toate eforturile de a transmite claritatea și frumusețea imaginii. la nimic, deoarece de fapt o vor crește de 2 ori (și oricât de bine se scalează browserul, calitatea se pierde întotdeauna când software-ul crește dimensiunea). Aici ne vine în ajutor un truc! Voi încerca să explic cu un exemplu. Avem un site web în antetul căruia există un anumit fundal care ocupă 320px în lățime, astfel încât ecranele noastre super clare să afișeze această imagine la 100%. poza originala nu ar trebui să fie 320x50, ci 640x100 (exact de 2 ori mai mare) și deja cu folosind css setați dimensiunea fundalului: 320px 50px;. Facem șamanism similar cu imagini sub formă de img.

Optimizăm interogările

Datorită faptului că Android, BlackBerry, IOS și Windows Phone 7 acceptă pe deplin Data-url, putem reduce semnificativ numărul de solicitări prin implementarea tuturor imagini de fundalîn css. Pe lângă optimizarea interogărilor, avem un câștig uriaș datorită stocării în cache CSS.

Probleme cu sprite-urile și imaginile

Datorită faptului că browserul nostru comprimă conținutul și îl scala la una sau alta dimensiune, acesta poate rotunji incorect dimensiunile în timpul calculelor și, prin urmare, atunci când lipim sprite-uri pixel cu pixel, va apărea o dungă a următorului element. Pentru a evita acest lucru, merită să faceți un spațiu de câțiva pixeli atunci când lipiți.

Mică problemă cu formatele de imagine

Am intampinat si o problema neplacuta pe unele dispozitive legate de formatele de imagine. Din nou, voi da un exemplu: există 2 imagini salvate folosind Salvare pentru Web în Photoshop (dintre care una este un gradient liniar care se întinde de-a lungul axei Y, iar a doua este un fel de imagine care este decupată cu o bucată). a gradientului și, de fapt, ar trebui să se potrivească în gradient care se repetă), dar în formate diferite (png și jpg). Deci, pe unele dispozitive, o imagine este mai deschisă, iar a doua este mai întunecată. Așa că pentru a rezolva această problemă a trebuit să salvez ambele imagini în același format.

Ascunderea barei URL

Deoarece nu avem atât de mult spațiu pe dispozitivul nostru, nu ne va strica să câștigăm încă câteva zeci de pixeli. Și le putem găsi ascunzând bara URL. Pentru aceasta avem un script simplu:

AddEventListener("încărcare", function() ( setTimeout(hideURLbar, 0); ), false);

funcția hideURLbar() ( window.scrollTo(0, 1); ) Dar observ că acest script poate interfera cu noi dacă linkul nostru duce la una dintre ancore noua pagina

(în acest caz, vom fi derulați la elementul nostru, iar după încărcare pagina va fi returnată în partea de sus), dar acest lucru poate fi ușor evitat prin verificarea suplimentară a URL-ului nostru.

Efectul vizual al clicului pe un element

De exemplu, pentru iOS putem obține efectul de clic folosind pseudo-clasa: activ. Dar va funcționa chiar dacă elementul nostru este în centrul atenției atunci când derulați pagina, ceea ce nu este foarte frumos. Așa că am decis să scriu un mic script care să emuleze un clic și să-l anuleze la derularea paginii.

Var scroller=fals; $("a").live("touchstart",function(eveniment)( var elem=$(this); clickable=setTimeout(function () ( elem.addClass("activ");), 100); )) ; $("a").live("touchmove",function(eveniment)( clearTimeout(clic); scroller=true; )); $("a").live("touchend",function(eveniment)( var elem=$(this); clearTimeout(clic); if(!scroller) ( elem.addClass("activ"); setTimeout(function ( ) ( elem.removeClass("activ");), 50 ( elem.removeClass("activ"); ) ));

Eliminarea cadrului și evidențierea din linkuri și butoane

Probabil fiecare utilizator a observat că atunci când dai clic pe un link, acesta este încadrat și evidențiat. Acest efect poate strica foarte mult ideea designerului. Aici un fel de resetare a stilului ne vine în ajutor (testat în toate browserele webkit, iar acestea sunt browsere native IOS, Android, BlackBerry)

*( -webkit-text-size-adjust: none; /*remediază o eroare în IOS cu scalare în peisaj*/ outline: none; /*elimină cadrul din jurul linkurilor și butoanelor*/ -webkit-touch-callout: none; /* dacă este necesar, dezactivează evidențierea textului*/ -webkit-tap-highlight-color:rgba(0,0,0,0) /*elimină evidențierea în fundal a linkurilor și a butoanelor*/ )

suport fix Deoarece tehnologii mobile Acum înaintează foarte repede, iar la momentul scrierii acestui articol, procentul de browsere care nu acceptă fix se apropie de zero, nu voi intra prea mult în descriere. Voi spune doar că pentru aceste browsere ar trebui să folosim iscroll. Voi descrie, de asemenea, un mic truc referitor la scripturi (necesare pentru a nu include un fișier suplimentar pentru browserele normale)

//Versiunea veche IOS detectează var OSName="SO necunoscut";

if (navigator.appVersion.indexOf("Mac")!=-1) OSName="MacOS"; var bversion=parseInt(jQuery.browser.version,10); if((OSName=="MacOS")&&(bversiune

ÎN

în acest exemplu

Am verificat ca daca este un Iphone si versiunea de browser este mai mica de 534 (nu suporta fix). Includ dinamic scriptul fixing.js

CSS3
De asemenea, nu uitați că putem folosi deja unele proprietăți css3 la maximum (nu uitați de prefixele moz-, webkit-, o-). Pentru WP7, nu ezitați să conectați pie.htc.

Link pentru desktop pentru IOS Probabil că nu va fi un secret pentru utilizatorii iOS că în Safari puteți plasa un link către un site web pe desktop. Iată un exemplu de astfel de link către Forismatic.

De mai jos Exemplu HTML cod pentru pictogramă (IOS însuși îl va mări, adăuga colțuri rotunjite), un anunț că acest link ar trebui să fie deschis ca o aplicație (se rulează pe ecran complet), precum și un cod care ascunde bara URL. Dacă doriți, puteți chiar să afișați o fereastră splash.

- anunță că se va deschide pe ecran complet, ascunzând bara URL

- schimbați culoarea barei de stare în negru (valorile disponibile sunt implicite, negru, negru-translucid). implicit implicit - link la pictograma care este afișată pe desktop. Putem vedea un exemplu viu a tot ceea ce este descris mai sus.

În lumea modernă, uneori, a avea propriul site web este la fel de important ca, de exemplu, să ai un număr de telefon sau o adresă

Un alt avantaj incontestabil al șabloanelor de site-uri web este că, în majoritatea cazurilor, acestea sunt scrise de profesioniști. Un șablon profesional de site web înseamnă nu doar un design frumos și modern, ci și modul în care este scris codul. Motoarele de căutare se uită la modul în care este scris site-ul tău, dacă codul este optimizat SEO sau nu, și pe baza acestui lucru îți scad sau măresc poziția în rezultatele căutării. Prin urmare, un site bun nu trebuie să fie doar frumos și modern, ceea ce este important, ci și scris corect din punct de vedere al codului.

Descărcați șabloane de site web HTML gratuite și creați-vă proiectele în cel mai scurt timp.

Astăzi, multe companii acordă mult mai multă atenție creării de resurse mobile de înaltă calitate, deoarece conform celor mai recente date, 80% dintre utilizatorii de Internet folosesc dispozitive portabile pentru a găsi informațiile necesare. Mai mult, specialiștii în marketing se pregătesc pentru schimbări majore ale algoritmului Google, care a intrat în vigoare pe 21 aprilie 2015. Blogul oficial al companiei spune că acum calitatea optimizării pentru mobil a unei resurse va determina în mare măsură poziția acesteia în rezultatele căutării.

Actualizarea viitoare va avea un impact mult mai mare asupra sistemului de clasare decât Panda sau , și de aceea îmbunătățirea experienței mobile ar trebui să fie prioritatea ta pentru viitorul apropiat. Potrivit unui articol din Search Engine Land on această actualizare, toate site-urile vor fi supuse unor teste stricte pentru adaptabilitatea la dispozitivele mobile.

Pentru a vă putea pregăti pe deplin site-ul pentru astfel de schimbări serioase, am selectat 15 exemple inspirate de design web mobil pentru dvs.

Shutterfly este un serviciu online care vă permite să creați albume foto, felicitări, scrisori de invitație și multe altele. Cu tot mai mulți oameni care accesează fotografii de pe smartphone-urile lor în fiecare zi, Shutterfly se angajează să ofere clienților săi o experiență mobilă pozitivă.

Site-ul mobil al companiei rămâne de succes din două motive principale: facilitează găsirea de către utilizatori a informațiilor despre oferte și le vinde prin imagini frumoase.

Odată ajuns pe site, veți vedea că secțiunile de meniu sunt prezentate sub formă de butoane mari în partea de jos a ecranului. Datorită acestui fapt, vizitatorii pot decide foarte repede opțiunea de care sunt interesați și pot primi informații suplimentare.

Un șablon de site mobil este o soluție indispensabilă pentru un site web modern care trebuie să îndeplinească cele mai înalte cerințe. Orice resursă web de calitate trebuie să aibă un design care să se adapteze dispozitivelor mobile, iar pentru aceasta șablonul trebuie să fie adaptiv sau responsive. Această caracteristică, în special, are Șabloane WordPress. Site-urile web ale multor branduri globale operează pe baza acestei platforme, de exemplu, Harvard Business Review, cântăreața Katy Perry, saga științifico-fantastică Star Wars și Mercedes-Benz. Toate aceste site-uri sunt adaptate pentru dispozitive mobile, ceea ce reprezintă un avantaj semnificativ.

Acum este foarte important ca site-ul să fie optimizat nu numai pentru motoarele de căutare, dar și adaptat pentru dispozitive mobile. Acest lucru se datorează în primul rând popularității în creștere a smartphone-urilor și tabletelor în rândul utilizatorilor obișnuiți. Dacă site-ul tău nu este „prietenos” cu dispozitivele mobile, va arăta cel puțin ciudat: fonturi mici, text care nu se potrivește pe ecran pe care trebuie să-l defilezi la dreapta, imagini uriașe și o grămadă de alte probleme. Un utilizator mobil va părăsi pur și simplu un astfel de site pentru site-ul concurenței dvs. Importanța adaptării pentru site-urile mobile este dictată și de faptul că traficul mobil ponderea totală poate ajunge până la 50%. Uitând inițial că site-ul trebuie să aibă un design responsive sau adaptiv, riști nu doar să pierzi o mare parte din publicul tău potențial, ci și să reduci șansele de succes în general.

Șabloanele WordPress premium oferă soluție cuprinzătoare, care va deveni o bază sigură pentru site-ul dvs. de orice tip: blog, revistă, magazin online, site corporativ, site de sală de sport, site de cinema, organizație non-profit și așa mai departe. Pe lângă faptul că designul unor astfel de șabloane este realizat la cel mai înalt nivel și nu conține niciun defecte nici în cod, nici în aspect, este și responsive.

Alegând un șablon WordPress și această platformă, poți fi sigur că site-ul tău nu numai că va avea ca scop atragerea de vizitatori, ci va funcționa bine și pe orice dispozitiv și browser. Pentru a vă economisi timp, am decis, împreună cu specialiștii noștri, să facem o mică selecție de astfel de șabloane în diverse scopuri. Alegeți ceea ce vă place și creați un site web de succes chiar acum.

Șablon de site mobil

Flatsome – Tema WordPress multifuncțională și receptivă

Flatsome este o alegere excelentă pentru crearea oricărui tip de site web, fie că este vorba despre un blog, un magazin, un portofoliu etc. Versatilitatea acestei teme se exprimă și prin adaptabilitatea sa excelentă la dispozitive. diverse tipuriși la toate extensiile de ecran. Tema va arăta grozav și va funcționa atât pe dispozitive mobile, cât și pe laptopuri. calculatoare personale. Editor simplu de pagini Trageți și Drop vă permite să creați și să editați paginile site-ului dvs. așa cum doriți. Tema este echipată și cu pluginul WooCommerce, așa că veți avea ocazia să vă creați propriul magazin online.

Porto este o temă WordPress grozavă și plină de culoare

Porto este versatil și pe deplin receptiv Tema WordPress WooCommerce pentru afaceri, care este potrivit și pentru crearea oricărui site web. Porto vă oferă oportunitatea de a profita de multe elemente și caracteristici puternice care vă vor ajuta să personalizați tot ceea ce doriți. În comparație cu caracteristicile altor teme universale, Porto oferă funcții avansate WooCommerce, aspecte exclusive ale paginilor, funcții de personalizare a designului și multe altele. Porto garantează super lucru rapid pe toate dispozitivele, ceea ce este foarte important pentru orice afacere și magazine online.

Puca – Tema WordPress WooCommerce optimizată pentru mobil

Puca este o temă WP WooCommerce extrem de flexibilă și personalizabilă, care poate fi instalată și personalizată după bunul plac în câteva minute prin importul rapid de machete demo. Puca poate fi folosită în diverse scopuri: magazine de modă, magazine de mobilă, magazine de electronice etc. Tema este pe deplin compatibilă cu toate standardele SEO, ceea ce vă va ajuta afacerea să se claseze pe primul loc în căutare pe Google. Toate paginile Puca sunt pe deplin receptive, astfel încât pot fi vizualizate indiferent de tipul dispozitivului sau dimensiunea afișajului.

Șabloane de site-uri mobile pentru afaceri

Avocat și avocat – șablon pentru un site web pentru un avocat, avocat și birou notar

Acesta este un model legal universal care poate fi folosit și în sectorul financiar. Pentru a crea un site web pe acesta, trebuie să importați un site web gata făcut sau să-l creați singur prin interfața drag-and-drop a constructorului. Un site web gata făcut, cu un design țintit, are secțiuni standard cu domenii de practică juridică, exemple de cazuri finalizate cu succes, membri ai echipei și ore de lucru. Puteți adăuga un formular pentru a vă înscrie pentru o consultație juridică gratuită.

Pe lângă faptul că este receptiv și funcționează bine cu dispozitivele tactile, șablonul acceptă și pluginuri SEO și are de mare viteză se încarcă în ciuda utilizării animațiilor CSS. Puteți adăuga pictograme frumoase (1200+ piese) și un glisor cu efecte uimitoare pe site.

Houzez – șablon de site mobil pentru agenție imobiliară

Acesta nu este doar un șablon pentru un agent imobiliar sau o agenție imobiliară. Pe baza acestuia, puteți obține un sistem de management imobiliar cu drepturi depline, cu posibilitatea de a le plasa în catalog. Acest lucru va crește fluxul de clienți către site-ul dvs. Există mai multe demonstrații de importat. Puteți utiliza efectul de paralaxă și puteți adăuga videoclipuri pe fundal.

Catalogul acceptă mai multe aspecte pentru afișarea articolelor într-o listă sau grilă, precum și machete de pagină obiecte individuale. Căutarea se face după diverse criterii: mărime, tip, cost, locație și dotări. Când caută o proprietate, utilizatorul poate vedea obiectele aflate în apropiere. Puteți examina obiectul în detaliu folosind funcția „Tur virtual 360°”. Șablonul acceptă pluginuri profesionale iHomeFinder și dsIDXpress.

Total – un șablon de site universal pentru dispozitive mobile pentru orice afacere

Unul dintre cele mai bine vândute șabloane de pe ThemeForest pentru utilizare în diverse domenii: design interior, dezvoltare, SEO, industria serviciilor, construcții, medicină și așa mai departe. Puteți instala una dintre temele demonstrative pentru aplicația dvs., dar dacă aveți timp, faceți-vă timp pentru a utiliza instrumentul de generare prin glisare și plasare de la Visual Composer pentru a obține un design cu adevărat unic. Pentru aceasta, există module speciale pentru portofolii, recenzii, personal, galerii și alte secțiuni.

Șablonul acceptă funcțiile de magazin, forum și glisor. Cu pluginul Calendar Events puteți planifica, adăuga și invita la evenimente, iar cu pluginul Contact Form 7 puteți adăuga un formular de contact convenabil pe site-ul dvs. Suport pentru pluginul Yoast SEO.

Șabloane pentru site-uri mobile – Blog și reviste

Soledad – Șablon conceptual WordPress pentru site-ul mobil pentru blog și reviste

Acesta este cel mai bine vândut șablon din categoria Blog și reviste pentru 2016. Pentru a-l configura, utilizați instrumentul Live Customizer, care funcționează în modul în timp real și acceptă mai mult de 300 de opțiuni. De asemenea, pentru a personaliza sau a crea un site web de la zero, există pluginul Visual Composer. Peste 900 de opțiuni pagina de start pentru reviste și bloguri pe diverse subiecte (călătorii, muzică, videoclipuri, jocuri, filme, alimente, sănătate, mașini, modă și așa mai departe) și peste 300 de forme de glisare. Cinci machete de postare, trei modele de bară laterală și șase machete de portofoliu. Grile de galerie uimitoare.

Caress – un șablon de blog cu drepturi depline pentru WordPress

Tema caress are un design curat și proaspăt, care poate fi personalizat cu ușurință pentru a se potrivi nevoilor dumneavoastră. Pentru a face acest lucru, instrumentul Live Customizer are peste 70 de opțiuni diferite. Șablonul este potrivit în special pentru bloggerii care încarcă mult conținut grafic - oferă suport pentru încărcarea fotografiilor de înaltă rezoluție, organizarea galeriilor și adăugarea de videoclipuri care vor arăta foarte armonios în postări.

Există 14 machete disponibile pentru design de blog și categorii. Două tipuri de glisor cu stâlpi lipiți. Bara laterală De asemenea, îl puteți face lipicios și puteți adăuga o secțiune de produse magazin WooCommerce și nouă widget-uri pentru rețelele sociale și postări. Subsolul are și zone pentru widget-uri, inclusiv un carusel de fotografii Instagram.

Vlog – blog video WordPress sau șablon de revistă

Acest șablon conceput cu măiestrie se concentrează strict pe prezentarea videoclipurilor pe diverse subiecte. Acesta ar putea fi un vlog, un site web cu tutoriale video sau o revistă pentru videoclipuri virale. Pentru a face acest lucru, este pe deplin compatibil cu serviciile video binecunoscute YouTube, Vimeo și Dailymotion.

Șablonul acceptă peste 200 de aspecte și funcții rafinate pentru a prezenta frumos conținutul text și video așa cum doriți. Folosind pluginul Series, puteți grupa și crea liste de redare din articole și videoclipuri, ceea ce este foarte convenabil pentru videoclipurile educaționale. Pluginul Miniaturi video vă va ajuta să configurați o imagine în miniatură pentru videoclipul dvs. Similar cu YouTube, vizitatorii pot extinde videoclipul pe ecran complet sau îl pot viziona mai târziu. Prin plasarea de bannere, puteți câștiga bani din publicitate.

Șabloane de site-uri pentru dispozitive mobile – Magazine online

Oxygen – Tema magazinului WooCommerce cu opțiuni de personalizare

Șablonul personalizat pentru site-ul mobil Oxygen vă va ajuta să obțineți un magazin cu un design sofisticat și suport pentru funcțiile de bază pentru a vinde produse. Pentru pagini, vă puteți crea propriile machete absolut gratuit folosind Visual Composer. O prezentare de diapozitive va ajuta la atragerea potențialilor cumpărători către produse populare, promoții și oferte speciale. Navigarea poate fi proiectată cu un meniu lateral fix, care poate fi foarte convenabil.

Folosind modulul interactiv, cumpărătorii vor putea vizualiza rapid produsul de care sunt interesați fără a părăsi pagina de catalog. Cele mai bune produse pot fi adăugate în lista de dorințe sau în coșul de cumpărături, care este întotdeauna disponibil în partea de sus a site-ului. Unele produse pot fi proiectate și ca un lookbook. Tema are un design receptiv și acceptă pe deplin toate gesturile de pe dispozitivele mobile.

Savoy – șablon de magazin online în stil minimalist bazat pe AJAX

Tema Savoy este simplă și în același timp design frumos, care vă permite să puneți accent principal pe mărfurile vândute. Funcționalitatea AJAX va fi convenabilă atât pe computerele desktop, cât și pe dispozitivele mobile. Avantajul său este că utilizatorul nu trebuie să treacă la pagină separată pentru a efectua o acțiune. În special, este acceptată căutarea simplă Ajax pentru produse.

Pentru a optimiza performanța magazinului, este utilizată funcția „încărcare leneră” a fotografiilor produselor. Suport pentru o galerie de produse pe ecran complet, cu posibilitatea de a mări imaginea. Sprijină vizualizarea rapidă, lista de dorințe și formularul de autentificare/înregistrare în fereastra pop-up.

Există mai multe aspecte de pagină de blog. Glisoarele și galeriile răspund liber la gesturile tactile mobile.

Diferite șabloane pentru site-uri care acceptă dispozitive mobile

Bellevue – șablon de site mobil pentru hotel cu suport pentru servicii de rezervare

Această temă are șapte demonstrații pentru diverse opțiuni site-ul web, inclusiv cele de o pagină. Versiunea premium a pluginului WP Booking System va oferi vizitatorilor posibilitatea de a rezerva cu ușurință o cameră la hotelul dvs. Cu Calendarul de evenimente, puteți adăuga evenimente importante în calendarul dvs. cu suport pentru iCal de la Apple și puteți exporta în Gmail. Există și MasterSlider cu suport pentru gesturi mobile.

Efectul de paralaxă va face site-ul mai atractiv din punct de vedere vizual. Blogul este disponibil în două aspecte: standard și masonry. Aspecte de pagină uimitoare pentru camere și camere. Un set de peste 1300 de pictograme vectoriale clare și scalabile, precum și animații CSS3, vă vor ajuta să vă decorați site-ul. Pentru conversie, puteți adăuga orice formular pe site. Suport pentru reduceri sezoniere și plăți prin WooCommerce.

Sport – șablon de club sportiv pentru WordPress

Sportul este un șablon de site mobil specializat pentru un club sportiv, centru sau comunitate. Designul este simplu și curat, astfel încât site-ul dvs. va fi confortabil de utilizat atât de pe un computer obișnuit, cât și de pe dispozitive mobile, inclusiv iPhone și iPad, cu cerințe crescute pentru calitatea imaginii.

Setul include două site-uri web gata făcute cu două scheme de culori, care sunt ușor de configurat prin panoul de administrare. Pentru a crea un antet, există un constructor special cu suport pentru 40 de opțiuni pentru reclame și link-uri către rețelele sociale. Patru tipuri de galerie: Izotop, Masonry, cu glisor și Single. Suport pentru pluginuri de forum, retea sociala, un calendar de evenimente și un magazin online vor fi foarte utile pentru site-ul unui club sportiv.

Alegeți doar un șablon de site mobil de înaltă calitate pentru scopurile dvs. și cu siguranță nu veți regreta. Puteți găsi și mai multe teme pentru site-urile web mobile în recenziile noastre - și.

Alexander este fondatorul proiectului de site web „Web Laboratory of Success”, creat pentru a sprijini antreprenorii de pe Internet începători și continui. Este un workaholic convins cu experiență profesională în gestionarea redacției unei reviste online, crearea și administrarea propriului magazin online. Ocupația principală: promovarea afacerilor (inclusiv magazine online) prin Facebook și Google Adwords. Hobby principal: monetizarea site-urilor web prin instrumente de marketing afiliat și Google Adsense. Înregistrări personale confirmate: 3 milioane de vizitatori pe blog pe lună.

Astăzi, majoritatea oamenilor accesează internetul prin intermediul gadgeturilor mobile - tablete, telefoane, iar în acest sens, optimizarea site-ului ajunge și ea la un nou nivel. Dacă un utilizator intră și vede că site-ul nu este optimizat pentru dispozitive mobile: imaginea nu poate fi vizualizată, butoanele s-au mutat, fonturile sunt mici și imposibil de citit, designul este denaturat - 99 din 100%, că va pleacă și începe să cauți altul mai convenabil. Și va bifa caseta că resursa este irelevantă, adică nu corespunde interogării de căutare. Prin urmare, designul paginii trebuie adaptat la diverse dispozitive mobile. Ce este o versiune mobilă a unui site web, cum se realizează și care este cea mai bună metodă de utilizat? Citiți mai multe în acest articol.

Deci, există patru moduri cheie de a vă adapta site-ul la versiunea mobilă.

Metoda unu - design receptiv

Șabloanele adaptive implică schimbarea imaginii site-ului web în funcție de dimensiunea ecranului. De regulă, acestea sunt setate la 1600, 1500, 1280, 1100, 1024 și 980 pixeli standard. Interogările sunt folosite pentru implementare. Nu se schimba singur.

Avantajele acestei metode includ:

• dezvoltare convenabilă, deoarece structura în sine se adaptează la parametrii ecranului și orice actualizare nu necesită dezvoltarea unui design de la zero, este suficient să corectați CSS și HTML;
• unul adresa URL- utilizatorul nu trebuie să-și amintească mai multe nume, nu este nevoie de o redirecționare (redirecționare de la o adresă la alta), ceea ce poate complica munca unui webmaster și este mai ușor pentru un motor de căutare să sorteze și să clasifice o resursă cu o singură adresă.

Desigur, șabloanele adaptive au și dezavantajele lor, care, apropo, depășesc avantajele lor. Cu toate acestea, mulți dezvoltatori aderă la acest concept special, de exemplu, Google Corporation, a cărei versiune mobilă a site-ului are un design responsive. Deci, dezavantajele:

• Designul responsive nu acceptă aceleași sarcini pe un dispozitiv mobil ca pe un desktop. Dacă aceasta este, de exemplu, o versiune mobilă a site-ului web al unei bănci, unde utilizatorul va avea cel mai probabil nevoie de informații despre cursurile de schimb sau bancomatele din apropiere, atunci acest design este destul de suficient. Dar dacă este o resursă structurată complexă cu multe secțiuni și subsecțiuni, atunci este puțin probabil să atragă vizitatorii.
• Încărcarea lentă transformă site-ul tău preferat într-unul urât. Acest lucru este valabil mai ales pentru resursele în care există o abundență de animații, videoclipuri, ferestre pop-up și alte elemente active. Din cauza greutate mare pagina pur și simplu va „încetini”, utilizatorul se va enerva și va pleca, iar pozițiile de căutare ale site-ului vor cădea.
• Incapacitatea de a opri versiunea mobilă- un alt dezavantaj semnificativ. Dacă un element este ascuns de un astfel de aspect, nu puteți face nimic pentru a-l deschide, spre deosebire de site-urile unde îl puteți dezactiva și trece la un domeniu obișnuit.

Cu toate acestea, o astfel de versiune mobilă a site-ului rapid, fără abilități și costuri speciale, vă permite să adaptați resursa la orice gadget. Dar, având în vedere deficiențele enumerate, este potrivit pentru resurse mici, simple, cu un minim de informații și multimedia, fără navigare și animație complexe. Pentru un site complex sunt potrivite alte 2 metode.

Metoda a doua - o versiune separată a site-ului

Această metodă este foarte comună și adesea face un site mai ușor de utilizat pe un dispozitiv mobil. Esența sa este de a crea o versiune separată a paginii, concepută pentru aplicație și situată pe un URL sau subdomeniu separat, de exemplu, m.vk.com. În același timp, funcționalitatea principală este păstrată, designul site-ului pur și simplu arată diferit. Avantajele acestei metode sunt evidente:

• interfață de utilizator convenabilă;
• este ușor să schimbați și să faceți modificări, deoarece versiunea există separat de resursa principală;
• datorită greutății sale reduse, o versiune separată a site-ului funcționează mult mai rapid decât șablon receptiv;
• Cel mai adesea este posibilă trecerea la versiunea principală a paginii de pe cea mobilă.

Dar acest lucru nu este lipsit de dezavantajele sale:

• Mai multe adrese - versiuni desktop și mobile ale site-ului. Cum să faci utilizatorul să-și amintească două opțiuni? Webmasterii transferă adesea din versiunea desktop în versiunea mobilă, dar dacă această pagină nu există în versiunea mobilă, utilizatorul va primi o eroare. Aici apar dificultăți cu motoarele de căutare, cărora le este greu să clasifice 2 resurse identice, iar acest lucru afectează direct promovarea.
• Versiunea mobilă a site-ului de pe computer, dacă un utilizator o accesează din greșeală, va arăta ridicol, ceea ce poate afecta și traficul.
• Această versiune este adesea foarte redusă, desktop, astfel încât utilizatorul va primi funcționalități foarte limitate. Dar, în același timp, dacă ceva lipsește, vizitatorul poate merge la versiunea completă pagini.

În general, un site mobil separat se justifică și este cel mai comun mod de a adapta o resursă pentru dispozitive mobile. Este popular printre magazinele online mari, cum ar fi Amazon.

A treia cale este proiectarea RESS

Motorul de căutare Google sprijină în mod activ această direcție a designului mobil. Aceasta este cea mai dificilă, costisitoare, dar eficientă metodă de adaptare a unui site web pentru telefon sau tabletă. Se numește RESS. Aceasta vizează o resursă într-o aplicație mobilă care poate fi descărcată pentru fiecare dispozitiv separat. Pentru Android - de pe GooglePlay și pentru Apple - de pe iTunes.

Astfel de aplicații sunt rapide, gratuite, convenabile și au capacitatea de a găzdui diverse tipuri informații, în timp ce memoria telefonului și traficul pe Internet nu sunt consumate la fel de mult ca atunci când vizitați un site prin intermediul unui browser. Ele sunt ușor de accesat, deoarece linkul va fi întotdeauna pe ecranul la îndemână și nu este nevoie să introduceți un nume complex în bara de adrese a browserului.

Desigur, aici există și dezavantaje, cum ar fi complexitatea dezvoltării, costurile ridicate ale forței de muncă număr mare programatori, necesitatea de a face mai multe opțiuni de aspect. Uneori, dispozitivul mobil nu este recunoscut de aplicație. Regulat suport tehnic, corectarea deficiențelor. Cu toate acestea, această opțiune este considerată cea mai bună dintre cele trei propuse datorită funcționării productive, neîntrerupte.

Cel mai ieftin mod de a face un site web mobil

Toate metodele de mai sus necesită muncă, deși nu întotdeauna lungă și complexă, dar încă plătită pentru webmaster. Dacă nu vedeți o nevoie urgentă pentru o astfel de dezvoltare, o versiune mobilă simplă și gratuită a site-ului vi se va potrivi. Care este cel mai simplu mod de a o face?

Descărcați șabloane speciale (plugin-uri) pentru design adaptiv. De exemplu, WP Mobile Detector, WordPress Mobile Pack, WPSmart Mobile și altele. Ele vă vor ajuta să afișați mai corect site-ul pe telefon și veți primi mai multe sfaturi despre ce ar trebui corectat pentru a adapta mai bine pagina la versiunea mobilă.

Desigur, este puțin probabil ca această metodă să fie potrivită pentru resurse serioase. Mai degrabă, este oportunitate gratuită Destinat site-urilor mici și simple, blogurilor, fluxurilor de știri. De asemenea, nu trebuie să uităm că motorul de căutare Google, precum Yandex, impune astăzi cerințe serioase versiunilor mobile, așa că există șanse uriașe de a vă scădea clasamentul folosind această metodă.

Cu această metodă, cel mai probabil, reclamele și bannerele pop-up vor fi tăiate, dar pagina se va încărca rapid și fără întârzieri.

Principii de creare a versiunilor mobile

Nu contează dacă versiunea mobilă a site-ului a fost creată gratuit sau cu ajutorul unui staff de webmasteri, dacă a fost realizată folosind sistemul RESS sau folosind un șablon adaptiv. Cel mai important lucru este că pentru ca acesta să funcționeze eficient, este necesar să se respecte câteva principii extrem de importante. Deci, cum ar trebui să fie versiunea mobilă a site-ului? Cum să-l faci productiv, eficient și productiv?

Îndepărtăm tot ce nu este necesar

Minimalismul este ceea ce ar trebui să încerce un dezvoltator al unei versiuni mobile a unui site web. Imaginați-vă cât de dificil este să percepeți informații care sunt pline de culori, butoane, bannere și pe care trebuie să le parcurgeți la nesfârșit în căutarea materialului potrivit. Design mobil ar trebui să fie simplu și curat. Alegeți 2-3 culori pentru a împărți spațiul (de exemplu, culori de marcă). Este mai bine dacă unul dintre ele este alb. Împărțiți spațiul mic de pe ecran în zone clare și lizibile. Cheile virtuale trebuie să fie vizibile pentru ca utilizatorul să știe clar unde să apese și să vadă - aici este produsul, aici este formularul de completare a datelor, aici sunt informațiile despre livrare și plată.

Toate opțiunile suplimentare care ar fi utile în versiunea desktop și ar face viața mai ușoară utilizatorului vor aduce doar complicații aici. Lăsați doar elementele cele mai importante. Animația, bannerele publicitare și multimedia vor încetini cel mai probabil funcționarea unui site web sau a unei aplicații și vor distrage atenția de la principalul lucru.

Aliniere

Problema alinierii nu este mai puțin presantă, deoarece dacă este făcută incorect, utilizatorul va primi doar terminațiile cuvintelor importante. În general, este acceptat să se alinieze stânga și vertical. Imaginați-vă că defilați prin fluxul de știri de pe telefon. Faceți acest lucru de sus în jos, dar nu la stânga sau la dreapta.

Asociere

Când nu există posibilitatea unui lanț lung de tranziții, încercați să combinați mai mulți pași într-unul singur. De exemplu, un site necesită introducerea datelor în mai multe etape - un nume, apoi o adresă, unde în fiecare celulă individuală există o casă separată, stradă, apartament etc. Pentru a nu forța utilizatorul să încerce să intre în multe mici celule, cereți-i să completeze doar 2 - numele și adresa.

Și deconectare

Uneori, dimpotrivă, este necesară și deconectarea număr mare informaţii. De exemplu, în meniul derulant aveți o listă cu peste 80 de orașe în care se efectuează livrarea. Grupați-le după regiune, astfel încât utilizatorul să nu fie nevoit să defileze prin această listă imensă. Când mută cursorul peste un centru regional sau regiune, va apărea o altă listă de orașe.

Liste

Apropo, despre liste. Există două dintre ele - fixate în ordine alfabetică sau altă ordine și cu substituție. Alegerea lor depinde de ceea ce va fi listat.

Fixed este convenabil dacă utilizatorul știe exact ce caută. De exemplu, orașul, numărul sau data. A doua opțiune este potrivită pentru nume lungi, complexe sau pentru cazurile în care există multe variații ale aceluiași nume, iar fiecare aduce utilizatorul cu un pas mai aproape de obiectiv. Opțiunea de înlocuire automată este folosită cel mai adesea atunci când un vizitator are nevoie de ajutor. De exemplu, un site web de tricotat oferă să cumpere ace de tricotat. Utilizatorul introduce interogarea de căutare „Ace de tricotat metal”, iar în indiciu vede „Ace de tricotat 5 mm”, „Ace de tricotat 4,5 mm”, etc.

Completare automată

Acest punct se aplică în special site-urilor unde vând ceva online și trebuie să completați formulare standard pentru plată, livrare etc. Dacă o persoană face o achiziție de pe telefonul său, atunci cel mai probabil nu are timp să ajungă la computer , ceea ce înseamnă că procesul de achiziție trebuie făcut cât mai rapid și convenabil posibil.

Pentru a face acest lucru, formularele pot conține date deja completate, puteți apela la cele mai populare răspunsuri. De exemplu, introduceți data de astăzi, metoda de plată în numerar, orașul, dacă lucrați în aceeași regiune. Ele pot fi modificate, dar dacă atingeți ținta, timpul utilizatorului va fi salvat.

Totul se citește, totul se vede

Când creați designul versiunii mobile a site-ului, amintiți-vă că telefonul fiecăruia este diferit, la fel și viziunea lor. Site-ul dvs. poate fi vizualizat pe un ecran mic, astfel încât fonturile ar trebui să fie simple și lizibile, butoanele ar trebui să fie suficient de mari pentru a fi făcute clic fără a fi duse la o altă pagină, iar imaginile ar trebui să se deschidă separat și mari, mai ales când vine vorba de Internet. magazin.

Câteva statistici

Când vorbim despre adaptarea unui site web la dispozitivele mobile, nu se poate să nu recurgă la statistici pentru a înțelege cât de important este acest proces pentru promovarea online.

Numerele sunt după cum urmează. Astăzi, 87% din populație folosește gadgeturi, aparent cu excepția celor mai mici copii și a unor persoane în vârstă. Economiștii prevăd că comerțul mobil va crește de 100 de ori în următorii 5 ani. Cu toate acestea, doar 21% dintre site-uri sunt adaptate să funcționeze cu dispozitive mobile. Aceasta înseamnă că traficul de internet și piața de comerț electronic sunt ocupate doar de o mică parte a 5-a.

Gândește-te la aceste numere. Are sens să vă adaptați resursa? Desigur că da. Mai mult, în timp ce sunt atât de multe spatiu liber pe această piață, vă puteți lua propriul segment în ea.

Unde este nevoie de versiunea mobilă?

Utilizarea versiunii mobile este recomandabilă pentru orice platformă care urmărește să obțină un rating ridicat. La urma urmei, acesta este un impact direct asupra utilizatorului, creând condiții confortabile pentru ca acesta să rămână pe site-ul tău.

Următoarele nu pot exista fără o versiune mobilă:

• portaluri de știri, deoarece acestea sunt ceea ce majoritatea oamenilor văd de pe telefoanele lor în drum spre serviciu sau școală;
• rețelele sociale - din același motiv, plus că există și factorul comunicării online, ceea ce înseamnă că pentru aceasta trebuie creat un chat convenabil, ușor de înțeles;
• cărți de referință, site-uri cu navigare etc., unde oamenii se întorc când caută ceva;
• magazinele online sunt o oportunitate de a atrage clienți care nu pierd timpul la cumpărături, ci cumpără totul prin internetul mobil.

În loc de o concluzie

Astăzi, tehnologiile mobile se află într-o etapă de creștere și dezvoltare activă, prin urmare, luptă pentru leadership pe piață, orice companie trebuie să se asigure că resursa sa de Internet îndeplinește cerințele. Datorită cererilor tot mai mari ale utilizatorilor, site-urile trebuie să fie permanent modernizate și adaptate pentru a se potrivi diverse dispozitive. Este clar că, dacă o persoană este incomod să fie pe o anumită resursă, nu poate obține informații despre un produs sau preț acolo, să plaseze o comandă, să afle despre livrare, atunci va găsi site-ul unde toate acestea vor deveni posibile. Prin urmare, pentru a câștiga competiția, este important să aveți o resursă flexibilă, convenabilă, funcțională și interesantă.

Versiunea mobilă a site-ului Android sau iOS vă va ajuta să faceți acest lucru. Pentru a face acest lucru, trebuie să alegeți una dintre metodele de reproiectare de mai sus - un șablon adaptiv, creând un site nou pe un subdomeniu și trecerea la acesta prin redirecționare, folosind șabloane gratuite sau creație aplicație mobilă, cu care utilizatorul poate intra și rămâne mai comod pe pagină.