HTML šablóna pre mobilné zariadenia. Plochá mobilná šablóna – viacúčelová a citlivá téma WordPress

Všetky prezentované šablóny pre váš web sú postavené na moderných verziách HTML5 a CSS3. Okrem toho autori používajú také módne funkcie, ako je plochý dizajn, responzívny dizajn, adaptívne rozloženie, posuvníky jQuery, animácia CSS3 atď. To znamená, že ak hľadáte šablónu mobilného webu, môžete si vybrať ktorúkoľvek z prezentovaných. Krásne šablóny html5 2017, aj keď sú bezplatné, vyzerajú prémiovo.

Nájdete tu viac ako 50 bezplatných kvalitných responzívnych webových šablón v HTML5 a CSS3, ktoré je možné použiť ako pre nové stránky, tak aj pre redizajn tých existujúcich. Štýlové html5 šablóny webových stránok sú to, čo potrebujete!

Aktualizované 3.12.2019: Odkedy bol článok napísaný pred 2 rokmi, mnohé odkazy prestali fungovať. Buď sa majitelia šablón zlúčili, alebo zmenili stav šablón z bezplatných na platené, alebo mimozemšťania všetko pokazili. Prosíme vás, milí čitatelia, ak nájdete takýto odkaz, nechajte ho v komentároch, opravím ho.

1. Sneh – bezplatná šablóna vstupnej stránky využívajúca HTML5 a CSS3

HTML5 css3 šablóna vstupná stránka Snow je postavený na ráme Bootstrap. Šablóna je veľmi štýlová a cool! Pevné pozadie a obrovský Jumbotron – vec, ktorá zobrazuje hlavný obsah stránky. Čo je najdôležitejšie na vstupnej stránke? Presne tak, výzva k akcii. Prirodzene, šablóna je plne prispôsobená pre mobilné zariadenia. Môžete ho dokonca použiť ako základ pre svoje vlastné šablóny.

2. Sima – elegantná šablóna komerčnej webovej stránky

Táto šablóna html5 css3 je tiež postavená na frameworku Bootstrap. Pomocou tejto šablóny si vytvoríte jedinečnú webstránku s portfóliom, vaším tímom, cenami, recenziami a všetkým ostatným, čo bude potrebné. Táto šablóna je napríklad ideálna pre webovú stránku upratovacích služieb. Animácia v tejto šablóne je plynulá a efektívna, fonty sú čisté a ľahko čitateľné. Proste dokonalá šablóna!

3. Biela - nádherná jednostránková šablóna!

Charakteristickým rysom šablóny White website sú dve možnosti pozadia v hornej časti. Vaša voľba je buď posuvník s obrázkami alebo video pozadím. Veľmi kvalitná a efektívna šablóna pre stránku!

4. Platz – bezplatná šablóna webových stránok založená na mriežke HTML5

Moderná, vizuálne príťažlivá šablóna webovej stránky HTML5 navrhnutá na báze mriežky (prečítajte si viac o mriežke). Krásny a responzívny dizajn šablóny pre blog alebo webovú stránku.

5. Mart eCommerce – skvelá šablóna webových stránok HTML5 a CSS3 elektronický obchod

Svieži a štýlový dizajn šablóny webovej stránky sa najlepšie hodí pre všetky typy módnych webových stránok, ktoré predávajú obuv, oblečenie, hodinky, doplnky, športové oblečenie atď. Dodáva sa so súborom PSD, ktorý si môžete upraviť podľa svojich potrieb.

6. Nava – veľkolepá HTML5 a CSS3 šablóna pre kreatívne weby

Nava je moderná HTML5 šablóna webovej stránky, ktorá sa používa hlavne pre kreatívnych profesionálov, ktorí chcú svoju prácu predviesť v celej svojej kráse. Mnoho variácií nastavení šablón vám umožňuje urobiť vašu webovú stránku jedinečnou. Ľahká, krásna a responzívna šablóna webu.

7. Box Portfolio – unikátna šablóna kreatívnej webovej stránky využívajúca HTML5 a CSS3

Šablóna webovej stránky Box Portfolio má čistý a moderný minimalistický dizajn. Ideálne pre profesionálov, ktorí chcú efektívne prezentovať svoju prácu online. Ako už názov napovedá, šablóna webovej stránky sa ideálne hodí pre portfólio.

8. Mountain King – populárna a funkčná HTML5 a CSS3 šablóna webu

Horská téma v dizajne webových stránok je v poslednej dobe veľmi populárna. Šablóna webu Mountain King nie je výnimkou. Obsahuje 336 vektorových ikon z Typicons. Plus skvelá animácia pomocou CSS3. Šablóna je ideálna pre cestovateľské a portfóliové webové stránky.

9. Beauty Spa - cool šablóna stránky na HTML5 a CSS3 pre kúpeľné salóny

Beauty Spa je responzívna šablóna webovej stránky, ktorá má mnoho funkcií, ideálne pre kúpeľné stránky, zdravotné alebo fitness centrá, stránky zamerané na jogu alebo dokonca kadernícke salóny. Výborná čitateľnosť písma a nevtieravý minimalizmus.

10. Bent – ​​štýlová a efektívna vstupná stránka pre webové stránky využívajúce HTML5 a CSS3

Bent je skvelá bezplatná šablóna webových stránok v html5 a css3. Responzívny dizajn, CSS3 animácia, paralaxné rolovanie, vlastná navigácia a ďalšie vychytávky. Toto je čistý dizajn šablóny pre stránky, ktoré chcú používať vyvážený dizajn, aby sa zabezpečilo, že návštevníci si vychutnajú vzhľad a dojem z lokality a zároveň budú jasne vidieť jej hlavný obsah.

11. Trojuholník – bezplatná responzívna viacúčelová šablóna HTML5 a CSS3

Trojuholník je exkluzívna kreatívna šablóna webovej stránky HTML5 a CSS3 špeciálne pre tých, ktorí chcú svoj skvelý dizajn vylepšiť, no nie ho ešte zhoršiť. Šablóna sa dodáva s viac ako 40 vopred navrhnutými stránkami, ktoré vám umožňujú prispôsobiť si web podľa vašich predstáv.

12. Future Imperfect – skvelá šablóna webovej stránky pre kreatívnych ľudí!

Zažite skutočný zmysel pre zábavu s touto webovou šablónou, ktorá je ideálna pre spisovateľov, autorov, copywriterov a iných pracovníkov s perom a papierom. Šablónu je možné použiť aj na osobný blog, blog o cestovaní, kreativite atď. Mnohým sa bude páčiť kreatívny dizajn a adaptívne rozloženie šablóny.

13. Bodo – skvelá šablóna pre osobnú webovú stránku

bodo- krásna šablóna stránky na HTML5 a CSS3, čo je ideálne pre osobné stránky. Najmä na organizáciu portfólia. Čistá a ostrá typografia, posuvný posuvník, vyskakovacie okná na zobrazenie práce a oveľa viac.

14. Objektív – perfektná HTML5 šablóna webovej stránky pre fotografov

Fotografi vždy hľadajú perfektnú šablónu pre svoje webové stránky, aby ukázali svoju prácu v celej svojej kráse, pôsobivo a čo je najdôležitejšie - veľké! Zriedkavá šablóna webovej stránky spĺňa tieto požiadavky. Lens je jednou z takýchto šablón webových stránok pre fotografov.

15. Spektrálne - jedinečná šablóna ručná webová stránka pomocou HTML5 a CSS3

Ak hľadáte bezplatné šablóny webových stránok na tému auto, potom to bude spoločnosť Spectral ideálne riešenie. Tu je úplne jedinečný ručne vyrobený návrh šablóny webovej stránky na jednej stránke. Dizajn je možné zmeniť podľa vlastného uváženia. Pomocou tejto šablóny môžete vytvoriť úžasnú webovú stránku na absolútne akúkoľvek tému, či už je to pôsobivý cestovateľský blog alebo fotogaléria, web o automobilovom priemysle alebo poskytovateľ hostingu.

16. Kyslík – jednostránková HTML5 a CSS3 šablóna webu

Kyslík je pohodlná a jedinečná šablóna pre firemnú webovú stránku. Moderný plochý dizajn, adaptívne usporiadanie. Táto šablóna je napríklad ideálna pre stránky o mobilných aplikáciách alebo mobilných technológiách.

17. Mobirise Bootstrap – perfektná bezplatná šablóna webovej stránky na HTML5 a CSS3

Ak hľadáte bezplatnú šablónu webovej stránky, potom je Mobirise Bootstrap ideálny na začiatok. Toto je multifunkčná šablóna s množstvom doplnkov. Tri vopred pripravené rozloženia domovskej stránke a blog vám s tým pomôže. Mobirise Bootstrap je tiež 100% optimalizovaný pre SEO a prispôsobí sa akejkoľvek veľkosti obrazovky.

18. La Casa – krásna a bezplatná HTML5 šablóna pre web s nehnuteľnosťami

Šablóna Brandy je ideálna na organizáciu webovej stránky komerčných nehnuteľností. Responzívny a veľmi krásny dizajn osloví nielen majiteľa stránky, ale aj návštevníkov.

19. Drifolio – štýlová HTML5 šablóna webu pre portfólio

Štýlová a animovaná šablóna webu HTML5 a CSS3 na usporiadanie portfólia. Čistý dizajn, skvelá typografia, krásne ikony a oveľa viac.

20. Pluto - jasné a štýlová šablóna pre jednostránkový web

Pluton je jasná a efektívna šablóna webovej stránky založená na Bootstrap. Moderná šablóna webovej stránky s jedinečným jednostránkovým rozložením a responzívnym dizajnom, ktorá je skvelá pre štúdiá, fotografov a kreatívnych dizajnérov.

21. SquadFree – profesionálna jednostránková HTML5 šablóna webu

Šablóna SquadFree je ideálna na vytvorenie komerčného jednostránkového webu. Šablóna nielenže vyzerá profesionálne, ale je prispôsobená aj všetkým typom obrazoviek. Šablóna je založená na Bootstrape.

22. Sublime – fascinujúca šablóna webu na HTML5 a CSS3

Sublime je čistá a úžasne krásna šablóna webových stránok HTML5 a CSS3, ktorá je ideálna pre startup, kreatívnu agentúru alebo stránku portfólia. Responzívny dizajn a dve možnosti stránky na výber.

23. Timber - nezvyčajná a krásna šablóna webu HTML5 a CSS3

Timber je svieža, štýlová a nezvyčajná téma jednostránkovej webovej stránky. Uhlopriečka je hlavným dizajnovým prvkom tejto šablóny. Šablóna je ideálna pre firemnú webovú stránku alebo portfólio. Je tu zabudovaná galéria, mapa a Kontaktné informácie, ktoré si jednoducho prispôsobíte svojim potrebám.

24. E-Shopper – najlepšia šablóna webovej stránky elektronického obchodu

E-Shopper je skvelá voľba pre šablónu webovej stránky elektronického obchodu. Postavený na bootstrape s úžasnou sadou funkcií pre kompletný a efektívny internetový obchod.

25. Magnetic - bezplatná šablóna HTML5 a CSS3 pre stránku s fotografiami

Úplne úžasná šablóna HTML5 a CSS3 na vytvorenie webovej stránky s fotografiami alebo portfólia pre dizajnéra, ilustrátora alebo umelca. Táto šablóna posúva latku profesionálnych šablón na ďalšiu úroveň! Responzívny dizajn, vynikajúca podpora pre všetky typy zobrazovacích zariadení, jednoduchá a pohodlná navigácia a mnoho ďalšieho.

26. Mabur Portfolio – krásna šablóna webovej stránky v minimalistickom štýle využívajúca HTML5 a CSS3

Plochý dizajn tejto minimalistickej šablóny webovej stránky je ideálny na vytváranie portfólia. V šablóne sú všetky detaily skontrolované dokonale!

27. Moderný Bootstrap HTML5 – Bezplatná šablóna webovej stránky s jednou stránkou

Toto bezplatná jednostránková stránka Na základe rámca Bootstrap je ideálny pre firemné weby, pre malé aj veľké spoločnosti. Plochý dizajn, adaptívne usporiadanie, všetky vysoko kvalitné dizajnové prvky. Šablóna sa dodáva v 4 rôznych farbách.

28. Infusion - štýlová šablóna jednostránkového webu využívajúca HTML5 a CSS3

Infusion je skvelým príkladom webovej šablóny HTML5 a CSS3, ktorá je špeciálne navrhnutá na vytváranie obchodného portfólia. Bohatá funkčnosť tejto šablóny vám umožňuje efektívne pracovať s klientmi a prilákať nových.

29. Yebo – šablóna firemnej webovej stránky na HTML5 a CSS3

Táto vysoko kvalitná šablóna webovej stránky s plochým štýlom je ideálna pre akúkoľvek firemnú webovú stránku. Adaptívny dizajn, množstvo nastavení a možností úprav.

30. Dvadsať – veľkolepá šablóna webu HTML5 a CSS3 s paralaxou

Táto jedinečná a veľmi krásna šablóna webovej stránky s paralaxovým efektom nenechá nikoho ľahostajným. Jednostránková šablóna je postavená na čistom HTML5 a CSS3 s responzívnym rozložením, pôsobivým pozadím, podporou sociálnych médií atď.

31. Urbanic – výborná HTML5 a CSS3 šablóna webu na Bootstrape

Urbanic je svieža a skvelá šablóna webových stránok HTML5 a CSS3 postavená na motore Bootstrap. Ideálne na okamžité spustenie vášho webu bez špeciálne problémy. Šablóna sa dokonale prispôsobí akejkoľvek veľkosti obrazovky.

32. Ukážka dizajnu – šablóna webovej stránky portfólia HTML5

Vizuálne harmonická a efektívna šablóna webovej stránky HTML5 na usporiadanie vášho portfólia. Šablóna je dokonale prispôsobená pre mobilné zariadenia, čo je pre stránky tohto formátu veľmi ťažké.

33. Mamba One – jednoduchá a štýlová šablóna webu využívajúca HTML5 a CSS3

Mamba One je príkladom jednoduchej, ale štýlovej šablóny webovej stránky na vytvorenie one-pager. Je kompatibilný so všetkými modernými prehliadačmi a bude sa všade primerane zobrazovať.

34. KreativePixel – bezplatná šablóna webovej stránky pre fotografov

Ďalšia skvelá šablóna webu pre fotografov. Responzívny dizajn a veľmi pohodlné triedenie fotografií v portfóliách a galériách osloví nejedného milovníka fotografie. Šablóna využíva aj efekt paralaxy, ktorý na divákov zapôsobí aj pri prezeraní fotografií.

35. Retina Ready Responsive App – bezplatná šablóna vstupnej stránky využívajúca HTML5 a CSS3

Ako už názov napovedá, táto nádherná šablóna webu je nielen ideálna pre vstupné stránky, ale spĺňa aj nové mobilné trendy, najmä čo sa týka prehľadnosti zobrazenia na zariadeniach s displejom Retina.

36. Kartáčovaná - responzívna šablóna webu HTML5 a CSS3 založená na engine Bootstrap

Brushed je responzívna bezplatná šablóna webových stránok HTML5 a CSS3 založená na motore Bootstrap. Optimalizované aj pre Retina displeje (iPhone, iPad, Ipod Touch A MacBook Pro Sietnica).

37. Šablóna webových stránok Big Picture HTML5 a CSS3

Vitajte v Big Picture! Táto responzívna šablóna webovej stránky HTML5 je ideálna pre všetkých kreatívnych ľudí, ktorí majú čo ukázať a ukázať to na svojom webe vo veľkom a pôsobivom. Šablóna navyše využíva výbornú animáciu.

38. Tesselatte – bezplatná responzívna šablóna HTML5 a CSS3

Jednoduchá jednostránková šablóna, ktorá zohľadňuje všetko potrebné nástroje pre úspešné vytvorenie webovej stránky. Ideálne pre osobný blog spisovateľa, copywritera alebo len milovníka písaného slova.

39. Overflow – unikátna šablóna webu využívajúca HTML5 a CSS3

Táto jedinečná šablóna webovej stránky v čistom HTML5 a CSS3 je ideálna pre každého kreatívneho človeka. Je plne responzívny a úplne zadarmo.

40. Runkeeper - citlivá a veľmi krásna šablóna webovej stránky

Runkeeper je bezplatná, responzívna a veľmi krásna šablóna webovej stránky. Môže byť použitý pre webovú stránku akéhokoľvek predmetu. Brilantný štýl a jasné fonty, responzívny dizajn a pôsobivé detaily šablón. Všetko funguje pre vás!

41. Pinball reagujúci štýl mriežky – šablóna webovej stránky založená na skvelej mriežke

Táto úžasná profesionálna šablóna webovej stránky založená na mriežke je ideálna pre firemnú webovú stránku. Moderný plochý dizajn a responzívna štruktúra šablóny sa perfektne zobrazí ako na veľkých monitoroch, tak aj na mobilné zariadenia.

42. Prológ - čistá šablóna jednostránkového webu pomocou HTML5 a CSS3

Táto čistá, jednoduchá a jasná šablóna webu HTML5 a CSS3 je ideálna na vytvorenie vstupnej stránky. Minimalistický dizajn neodvádza pozornosť od toho hlavného. Pútavá rolovacia bočná navigačná lišta a čisté línie stránky sú tou správnou kombináciou!

43. Helios - moderná šablóna webu využívajúca čisté HTML5 a CSS3

Ďalšia šablóna webu v štýle minimalizmu a čistých foriem. Špeciálne navrhnutý tak, aby využíval výhody veľkých obrazoviek, ale zároveň dokonale prispôsobený malým obrazovkám mobilných zariadení.

44. Telephasic – bezplatná a responzívna HTML5 šablóna webovej stránky

Táto moderná, responzívna a úplne bezplatná šablóna webu má jednu veľkú výhodu – je jednoduchá a výstižná, no práve to mnohým ľuďom chýba.

45. Strongly Typed – veľmi krásna šablóna webovej stránky v semi-retro štýle

Nová šablóna webovej stránky s minimalistickým semi-retro štýlom. Je to tak, že retro už nie je v móde, no jeho mierny náznak je veľmi vítaný. Táto šablóna webu je plne responzívna, postavená na čistom HTML5 a CSS3 a obsahuje všetky potrebné základné prvky stránky. Šablóna Strongly Typed je ideálna pre kreatívne webové stránky. Napríklad pre stránku o domácich dekoráciách.

46. ​​Pruhované - čistá, krásna a funkčná šablóna webovej stránky HTML5 a CSS3

Svieža a čistá, krásna a funkčná, nová šablóna webu v HTML5 a CSS3. Má vo svojom arzenáli všetky potrebné prvky stránky vrátane navrhnutých citátov, tabuliek a zoznamov, ako aj prispôsobený bočný panel (vpravo alebo vľavo - podľa želania).

47. Paralelnosť – nezvyčajná a štýlová šablóna webu využívajúca HTML5 a CSS3

Parallelism je štýlová šablóna webovej stránky na organizovanie portfólií alebo fotografií. Nezvyčajné je, že rolovanie tu nie je vertikálne, ako zvyčajne, ale horizontálne. To dáva stránke osobitnú eleganciu a zapamätateľnosť.

48. Miniport – plne responzívna HTML5 šablóna webu v minimalistickom štýle

Vynikajúca šablóna webu v minimalistickom štýle na HTML5. Ideálne pre osobnú webovú stránku/blog, ako aj malú jednostránkovú firemnú webstránku alebo ako webovú stránku s vizitkami.

49. Verti – priestranná a bezplatná šablóna webovej stránky s responzívnou HTML5

Čistý a priestranný dizajn tejto šablóny webovej stránky je ideálny pre veľké firemné webové stránky alebo komerčné projekty. Reagujúce a pohodlné pre autora aj používateľov.

50. ZeroFour - pôsobivá a štýlová šablóna webovej stránky využívajúca HTML5 a CSS3

A posledná na zozname, no v neposlednom rade z hľadiska kvality a vizuálnej efektivity, je šablóna webu – ZeroFour. Štýlový dizajn, veľmi krásne menu, dokonale prispôsobené formuláre a tlačidlá, krásne ikony a oveľa viac. A to všetko je úplne zadarmo!

Dúfam, že ste medzi týmito úžasnými šablónami webových stránok HTML5 a CSS3 našli niečo vhodné pre seba. Veľa štastia!

Uložte si ju do záložiek, aby ste ju mohli rýchlo nájsť.

PS: Ak si neviete vybrať, prečítajte si článok „Neviem, čo chcem“. Bude to užitočné.

Pre WordPress som pripravil čerstvý výber dvadsiatich najzaujímavejších prémiových tém, ktoré sú ako stvorené na tvorbu prezentačných webov a vstupných stránok. mobilné hry a aplikácie.

Globálny rozvoj mobilných telekomunikácií, dostupnosť mobilný internet vytvorila úplne nový, dynamicky sa rozvíjajúci trh mobilných aplikácií. Ktoré sa za pár rokov rozrástlo na obrovský priemysel. Ťažko spočítať, koľko zaujímavých startupov zameraných na mobilné zariadenia sa za posledné roky objavilo. Trh je veľký a ziskový, mnohé spoločnosti a vývojári to chápu a snažia sa ho dobyť.

Rozvoj mobilných technológií a rast produktivity smartfónov prispieva k zlepšovaniu, funkčnosti a kvalite mobilných aplikácií. Špičkové smartfóny sa už výkonom takmer rovnajú osobné počítače. A tie kancelárske už zrejme obišli. Na tomto pozadí už nie je rozšírený rast taký prekvapivý mobilná návštevnosť. Google napríklad minulý týždeň vypol svoje „živé vyhľadávanie“. Bolo to motivované obrovským podielom mobilnej návštevnosti a funkciami mobilného vyhľadávania. Myslím si, že trh s mobilnými aplikáciami je veľmi sľubný. Minimálne v najbližších rokoch bude len rast, rozvoj, zdokonaľovanie, hlbšie prenikanie do každodenného života, do tzv. internet vecí.

Ako v každej inej oblasti, každá mobilná aplikácia potrebuje svetlé, krásne balenie vo forme prezentačnej webovej stránky. Kde by bolo možné predviesť jeho schopnosti, porozprávať sa o jeho výhodách, výhodách atď.

Moderná jednostránková téma s čistým dizajnom na prezentáciu mobilných aplikácií, ľahko prispôsobiteľná, má 12 pripravených možností zobrazenia, webové fonty, ikony, paralaxy, lightboxy, vstavaný Visual Composer, Slider Revolution a mnoho ďalších.

Stiahnuť ▼ Demo

Vstupná stránka na jednej stránke s rozsiahlymi možnosťami prispôsobenia, vstavaný tvorca vizuálnych stránok, podpora Google Fonts, elektronický obchod založený na WooCommerce, Slider Revolution a mnoho ďalších.

Stiahnuť ▼ Demo

Vynikajúca responzívna téma na prezentáciu mobilných aplikácií, postavená na Bootstrap s podporou Google Fonts a Google Maps.

Stiahnuť ▼ Demo

Viacúčelová moderná téma s čistým dizajnom, môže pracovať v jednostránkových a viacstránkových režimoch, má 4 možnosti dizajnu domovskej stránky, podporuje viacjazyčný režim založený na doplnku WPML, konštruktor Visual Composer, newslettery Mailchimp atď.

Stiahnuť ▼ Demo

Viacúčelová téma na demonštráciu možností mobilných aplikácií založených na Bootstrap, 2 možnosti domáceho zobrazenia, podpora displeja vysoké rozlíšenie, vstavaný Visual Composer, import demo obsahu jedným kliknutím a všetka tradičná munícia.

Stiahnuť ▼ Demo

Šablóna pristátia pre WordPress s čistým moderný dizajn, zameraná na predvádzanie mobilných aplikácií pre tri hlavné platformy: Android, iOS a Windows. Dobre zdokumentované, ľahko konfigurovateľné.

Stiahnuť ▼ Demo

Ďalšia adaptívna vstupná stránka pre WordPress na Bootstrap s 24 možnosťami dizajnu, prispôsobená aj pre prezentácie mobilných aplikácií a startupov. K dispozícii je vizuálny tvorca stránok a viac ako 80 vstavaných dizajnových prvkov, kontaktné formuláre, integrácia newslettery Mailchimp a ďalšie.

Stiahnuť ▼ Demo

Nová adaptívna šablóna vstupnej stránky založená na Warp 7 Framework pre milovníkov ľahkých modulárnych webových stránok. Vhodné nielen pre mobilné aplikácie, ale celkom vhodné aj pre iné oblasti.

Stiahnuť ▼ Demo

Jednoduchý moderný motív na prezentáciu mobilná aplikácia s dvomi možnosťami dizajnu domovskej stránky, podporou displejov Retina, vstavaným návrhárom Visual Composer, posúvačom Slider Revolution, importom obsahu jedným kliknutím, mega menu, viac ako 600 fontov a oveľa viac.

Stiahnuť ▼ Demo

Viacúčelová jednostránková téma WordPress na demonštráciu mobilných aplikácií, startupov, osobných webov. Postavené na Bootstrape, vstavanom Visual Composer, Revolution Slider, kontaktných formulároch, krátkych kódoch, ikonách atď.

Stiahnuť ▼ Demo

Šablóna vstupnej stránky mobilnej aplikácie s 3 možnosťami domovskej stránky, 20 možnosťami dizajnu, jednoduchým prispôsobením, vizuálnym tvorcom stránok Visual Composer, podporou pre viacjazyčný plugin WPML.

Stiahnuť ▼ Demo

Lacná viacúčelová responzívna téma WordPress s 23 hotovými možnosťami dizajnu.

Stiahnuť ▼ Demo

Moderná viacúčelová téma s profesionálnym responzívnym dizajnom na prezentáciu mobilných aplikácií a hier. Na palube Visual Composer, podpora pre viacjazyčný doplnok WPML, bulletiny Mailchimp, formuláre spätná väzba Kontaktný formulár 7.

Stiahnuť ▼ Demo

Viacúčelová optimalizovaná šablóna vstupnej stránky pre vývojárov mobilných aplikácií, softvérových produktov, startupy, kreatívne a dizajnérske agentúry. 4 možnosti dizajnu domovskej stránky, jednoduché prispôsobenie pomocou vstavaného prispôsobovača WordPress, tvorca vizuálnych stránok so 40+ dizajnovými prvkami, Revolution Slider, 50+ krátkych kódov, 500+ ikon optimalizovaných pre displeje Retina.

Stiahnuť ▼ Demo

Jedna z najrýchlejších jednostránkových reagujúcich tém na ThemeForest, ideálna pre začínajúce firmy. 12 pripravených návrhov, import ukážkového obsahu jedným kliknutím, jednoduché prispôsobenie, čistý kód, tvorca stránok Visual Composer, Revolution Slider, podpora elektronického obchodu WooCommerce a mnoho ďalšieho.

Stiahnuť ▼ Demo

Vývojár tvrdí, že pomocou témy Helium sa vaše vstupné stránky zmenia na silnú marketingovú zbraň. Ťažko argumentovať – téma je veľmi moderná, postavená na Bootstrape, optimalizovaná pre SEO, má 10 hlavných možností zobrazenia, posuvník, 1000+ fontov, vstavaný Visual Composer s 50+ dizajnovými prvkami, podpora pre WooCommerce, Mailchimp, Google Mapa, písma Google, kontaktný formulár 7, portfólio a oveľa, oveľa viac.

Stiahnuť ▼ Demo

Veľmi štýlová téma so 7 rozloženiami domovskej stránky, 6 možnosťami zobrazenia hlavičky, 5 možnosťami päty, vstavaným Visual Composer s Ultimate Addons, Slider Revolution, WooCommerce, One Page Navigator, podporou WPML a importom ukážkového obsahu jedným kliknutím.

Stiahnuť ▼ Demo

Moderná, responzívna téma s čistým dizajnom Bootstrap pre stránky distribúcie softvéru. 9 možností domovskej stránky, 8 farebných schém, 3 možnosti dizajnu hlavičky, podpora pre Twitter, YouTube, Font Awesome atď.

Stiahnuť ▼ Demo

Kreatívna jednostránková téma s responzívnym dizajnom, 17 pripravenými možnosťami dizajnu, podpora Retina displejov, vstavaný Visual Composer, Slider Revolution, podpora Google Fonts, rôzne paralaxy a animácie.

Stiahnuť ▼ Demo

Responzívna šablóna vstupnej stránky s čistým, moderným dizajnom a rozsiahlymi možnosťami prispôsobenia, ideálna pre mobilné aplikácie, produkty a startupy. Vstavaný Visual Composer, import jedným kliknutím, podpora viacerých jazykov vo WPML, kontaktné formuláre Kontaktný formulár 7, Revolution Slider a oveľa viac.

Stiahnuť ▼ Demo

Veľmi krásna šablóna, ktorá dodá vašej webovej stránke mobilnej aplikácie profesionálny vzhľad bez toho, aby bola nudná. Môžete si vybrať z troch možností domovskej stránke, z ktorých každá vyzerá jednoducho úžasne. Farebnú schému budúceho online projektu je možné ľubovoľne meniť. Funkcia drag-and-drop vám navyše umožňuje pracovať s obsahom bez ponorenia sa do kódu.

Stiahnuť ▼ Demo PaPay

Vynikajúca šablóna, ktorá vám umožní vybudovať požadovaný online projekt bez toho, aby ste naň utratili obrovské množstvo peňazí. Ponúka široké možnosti personalizácie vzhľad stránky. A Elementor builder vám umožní zabudnúť na kód a všetko s ním spojené. Nezabudnite použiť mega menu, ktoré používateľom výrazne zjednoduší navigáciu na vašej stránke.

Stiahnuť ▼ Demo Momex

Momex je moderná šablóna, ktorá, rovnako ako všetky ostatné hotové riešenia v tejto kolekcii, umožňuje vybudovať pôsobivý online projekt. Používateľom sa ponúka obrovský výber možností, ktoré možno použiť na zlepšenie vzhľadu stránky aj jej funkčnosti. Napríklad medzi štyrmi rozloženiami blogu si každý môže nájsť možnosť, ktorá sa mu bude určite páčiť. A balík pluginov Cherry poteší tých, ktorí chcú služby prezentovať tak, aby presvedčili cieľovú skupinu, aby si ich vybrala.

Stiahnuť ▼ Demo

Consor je úžasná šablóna, ktorá dokáže prezentovať akúkoľvek firmu tým najpamätnejším spôsobom. Preto ho môžem odporučiť na tvorbu stránok pre mobilné aplikácie. V jeho balení nájdete rôzne možnosti hlavičiek, pomocou ktorých sa dosahuje aj jedinečnosť online projektu. A WordPress Live Customizer umožní pracovať s farbami a písmami vášho budúceho online projektu bez ďalšieho úsilia.

Stiahnuť ▼ Demo

Plne funkčná a flexibilná šablóna, ktorá určite upúta veľa pozornosti. Zahŕňa mnoho pripravených stránok, ktoré vám pomôžu prezentovať vaše služby, vytvoriť galériu projektov a oveľa, oveľa viac. Spolu s Elementor-builderom sa tvorba webovej stránky premení na čisté potešenie. Koniec koncov, umožňuje vám jednoducho pretiahnuť vybraný obsah na požadované miesto na stránke.

Stiahnuť ▼ Demo Na záver

Ako vidíte, je z čoho vyberať. Môžete sa tiež pozrieť na témy v kategórii „Softvér“ na TemplateMonster. Výber tam nie je taký široký ako na ThemeForest, no nájdu sa aj zaujímavé veci. Dovoľte mi pripomenúť, že pri výbere prémiovej témy pre svoju stránku by ste sa nemali zavesiť na jej tému. Hlavná vec je dizajn, štruktúra a každá téma môže byť „pritiahnutá“. Viac o tom, ako to nepokaziť, som hovoril v jednom z predchádzajúcich článkov.

Prihláste sa na odber môjho telegramu a buďte prvý, kto dostane nové materiály, vrátane tých, ktoré nie sú na stránke.

Túto šablónu som prispôsobil štandardom prehliadačov takých platforiem ako IOS (3.1+), Android (2.1+), Blackberry (6.0+), Windows telefón 7, ako aj Opera mobile pre Android, ktorá si získava na popularite. Chcel by som poznamenať, že všetky štandardné prehliadače (s výnimkou Windows Phone 7, ktorý má IE9) sú založené na webkite.

Aký je rozdiel medzi vývojom stránok pre počítače a stránok pre mobilné zariadenia? Ďalej budem hovoriť o niektorých trikoch, ktoré vám pomôžu obísť mnohé problémy.

Aké rozlíšenie zvoliť a metaznačku výrezu

Zdá sa, že by sme si mali položiť otázku, aké rozlíšenie použiť ako základ pre našu stránku? Koniec koncov, zariadenia s rozlíšením 230 x 340 (napríklad HTC Wildfire S) a približne 800 x 480 960 x 640 (HTC Incredible S, iPhone 4) a dokonca aj 1280 x 720 (HTC One X) sú teraz relevantné. Na pomoc nám prichádza metaznačka výrezu, ktorá vyrieši problém s rozlíšením a škálovaním.

• width=device-width - hodnota je nastavená samotným zariadením
• počiatočná mierka=1 – počiatočná mierka je nastavená na 1 (t.j. 1:1)
• maximum-scale=1.0, user-scalable=no - škálovanie je zakázané (rád by som poznamenal, že aj s týmito parametrami bude HTC stále vytrvalo škálovať a vývojári povedali, že to nie je chyba, ale funkcia)

Trochu o grafike

Aj pri tomto rozsahu rozlíšení by som mal poznamenať, že väčšina mobilných zariadení s vysokým rozlíšením ho nepoužíva na rozšírenie svojho pracovného priestoru, ale na zvýšenie prehľadnosti (viac o tom). Inými slovami, ich saturácia pixelov (DPI) je niekoľkonásobne vyššia ako pri menších rozlíšeniach. To vedie k záveru, že zariadenia s veľkým PDI skutočne komprimujú stránku 2-krát, aby získali rovnaké rozmery ako v zariadeniach s nižším rozlíšením (napríklad v zariadeniach Apple s retina displejom je na ňom 4-krát viac bodov rovnakú oblasť obrazovky, čo zvyšuje rozlíšenie). Výsledok vidíme jasnejšie na obrázku nižšie.

Teraz, keď vieme, ako fungujú obrazovky s vysokým DPI, stojí za to premýšľať o správnom zobrazení všetkých prvkov našej webovej stránky.
Začnime s prvkami, ako sú fonty, okraje a iné podobné prvky. Všetky tieto prvky sú v podstate vektorové objekty, ktoré prehliadač dokáže bez problémov škálovať, takže sa tým nezaoberáme.
Iná situácia je s obrázkami a obrázkami na pozadí. Koniec koncov, ak uložíme obrázok na pozadí na základe toho, že máme 320 x 480, zariadenia s hustejším DPI sa nám nebudú môcť objaviť v celej svojej kráse a všetko úsilie o sprostredkovanie jasnosti a krásy obrázka príde. k ničomu, pretože ho v skutočnosti zväčšia 2-krát (a bez ohľadu na to, ako dobre sa škáluje prehliadač, kvalita sa vždy stratí, keď softvér zväčší veľkosť). Tu nám prichádza na pomoc trik! Pokúsim sa vysvetliť na príklade. Máme webovú stránku, v ktorej hlavičke je určité pozadie, ktoré zaberá šírku 320 pixelov Takže, aby naše super čisté obrazovky zobrazili tento obrázok na 100%, pôvodný obrázok by nemal byť 320 x 50, ale 640 x 100 (presne 2 krát). väčší) a už s pomocou css nastaviť veľkosť pozadia: 320px 50px;. Podobný šamanizmus robíme s obrázkami v podobe img.

Optimalizujeme dopyty

Vzhľadom na to, že Android, BlackBerry, IOS a Windows Phone 7 plne podporujú Data-url, môžeme výrazne znížiť počet požiadaviek implementáciou všetkých obrázkov na pozadí v css. Okrem optimalizácie dopytov máme obrovský zisk vďaka css cache.

Problémy so škriatkami a obrázkami

Vzhľadom na to, že náš prehliadač komprimuje obsah a upraví ho na určitú veľkosť, môže pri výpočtoch nesprávne zaokrúhliť veľkosti, a preto sa pri lepení škriatkov pixel po pixeli objaví pruh ďalšieho prvku. Aby ste tomu zabránili, pri lepení sa oplatí urobiť medzeru niekoľkých pixelov.

Malý problém s formátmi obrázkov

Na niektorých zariadeniach som sa stretol aj s nepríjemným problémom súvisiacim s obrazovými formátmi. Opäť uvediem príklad: pomocou funkcie Uložiť pre web vo Photoshope sú uložené 2 obrázky (jeden z nich je lineárny gradient, ktorý sa tiahne pozdĺž osi Y, a druhý je nejaký druh obrázka, ktorý je vyrezaný kúskom prechodu av skutočnosti by sa mal hodiť do opakujúceho sa prechodu), ale v rôznych formátoch (png a jpg). Na niektorých zariadeniach je teda jeden obrázok svetlejší a druhý tmavší. Aby som tento problém vyriešil, musel som uložiť oba obrázky v rovnakom formáte.

Skrytie panela s adresou URL

Keďže na našom zariadení nemáme toľko miesta, nezaškodí nám vyhrať pár tuctov pixelov navyše. A môžeme ich nájsť tak, že skryjeme panel s adresou URL. Na to máme jednoduchý skript:

AddEventListener("load", function() ( setTimeout(hideURLbar, 0); ), false); funkcia hideURLbar() ( window.scrollTo(0, 1); )

Ale podotýkam, že tento skript nám môže prekážať, ak náš odkaz vedie na niektorú z kotiev nová stránka(v tomto prípade sa posunieme na náš prvok a po načítaní sa stránka vráti na začiatok), ale tomu sa dá ľahko vyhnúť vykonaním dodatočnej kontroly našej adresy URL.

Vizuálny efekt kliknutia na prvok

Napríklad pre iOS môžeme efekt kliknutia dosiahnuť pomocou pseudotriedy: active. Ale bude to fungovať, aj keď je náš prvok zaostrený pri posúvaní stránky, čo nie je veľmi pekné. Preto som sa rozhodol napísať malý skript, ktorý bude emulovať kliknutie a zruší ho pri rolovaní stránky.

Var scroller=false; $("a").live("touchstart",function(event)( var elem=$(this); clickable=setTimeout(function () ( elem.addClass("active");), 100); )) ; $("a").live("touchmove",function(event)( clearTimeout(kliknuteľné); scroller=true; )); $("a").live("touchend",function(event)( var elem=$(this); clearTimeout(možnosť kliknutia); if(!scroller) ( elem.addClass("active"); setTimeout(function ( ) ( elem.removeClass("active");), 50 else ( elem.removeClass("active"); )));

Odstránenie rámu a zvýraznenia z odkazov a tlačidiel

Asi každý používateľ si všimol, že keď kliknete na odkaz, je orámovaný a zvýraznený. Tento efekt môže značne pokaziť nápad dizajnéra. Tu nám prichádza na pomoc určitý druh obnovenia štýlu (testované vo všetkých prehliadačoch webkit, a to sú natívne prehliadače IOS, Android, BlackBerry)

*( -webkit-text-size-adjust: none; /*opraviť chybu v IOS so zmenou mierky na šírku*/ obrys: žiadny; /*odstrániť rám okolo odkazov a tlačidiel*/ -webkit-touch-callout: none; /* v prípade potreby zakáže zvýrazňovanie textu*/ -webkit-tap-highlight-color:rgba(0,0,0,0 /*odstráni zvýraznenie na pozadí odkazov a tlačidiel*/ )

pevná podpora

Pretože mobilných technológií Teraz napredujú veľmi rýchlo a v čase písania tohto článku sa percento prehliadačov, ktoré nepodporujú fix, blíži k nule, nebudem zachádzať príliš hlboko do popisu. Poviem len, že pre tieto prehliadače by sme mali používať iscroll. Tiež popíšem malý trik pokiaľ ide o dynamické pripojenie skriptov (potrebné, aby sa v bežných prehliadačoch nenachádzal ďalší súbor)

//detekcia starej verzie IOS var OSName="Unknown OS"; if (navigator.appVersion.indexOf("Mac")!=-1) OSName="MacOS"; var bversion=parseInt(jQuery.browser.version,10); if((OSName=="MacOS")&&(bversion

IN v tomto príklade Skontroloval som, že ak ide o Iphone a verzia prehliadača je menšia ako 534 (nepodporuje opravené). Dynamicky zahŕňam skript fixing.js

CSS3

Nezabudnite tiež, že niektoré vlastnosti css3 už vieme využiť naplno (len nezabudnite na predpony moz-, webkit-, o-). Pre WP7 pokojne pripojte pie.htc.

Odkaz na plochu pre IOS

Pre používateľov iOS zrejme nebude žiadnym tajomstvom, že v Safari si môžete na plochu umiestniť odkaz na webovú stránku.
Tu je príklad takéhoto prepojenia na Forizmatic.

Nižšie HTML príklad kód pre ikonu (samotný IOS ju zväčší, pridá zaoblené rohy), oznámenia, ktoré tento odkaz musíte ho otvoriť ako aplikáciu (beží na celej obrazovke), ako aj kód, ktorý skryje panel s adresou URL. Ak chcete, môžete dokonca zobraziť úvodné okno.

- oznamuje, že sa otvorí na celej obrazovke, skryje panel s adresou URL - zmeňte farbu stavového riadka na čiernu (dostupné hodnoty sú predvolené, čierna, čierna-priesvitná). predvolené predvolené - odkaz na ikonu, ktorá sa zobrazuje na pracovnej ploche.

Môžeme sa pozrieť na živý príklad všetkého opísaného vyššie.

Zdravím vás, moji milí čitatelia blogu. Ruslan Galiulin je v kontakte. Dnes si povieme niečo o mobilných verziách webov, ktoré by mal mať každý web či blog, aby sa posunul na TOP vyhľadávače. V článku uvediem kódy štýlov a hotové príklady rozloženia stránky, ktoré si môžete stiahnuť do počítača.

Ak vaše stránky stále nie sú mobilné, odporúčam vám použiť moju radu alebo kontaktovať profesionálov - http://www.Mobile-version.ru, ktorí urobia všetko podľa štandardov vyhľadávacích nástrojov. Pomocou rovnakého odkazu môžete skontrolovať mobilitu svojho webu.

V roku 2013 Google začal tlak na webmasterov (https://webmasters.googleblog.com/2013/06/changes-in-rankings-of-smartphone_11.html), ktorý ich presviedča o potrebe vytvárať nenáročné úpravy stránok a od roku 2015 sa mobilita stala jednou z nich aspektov hodnotenia ( https://webmasters.googleblog.com/2015/04/rolling-out-mobile-friendly-update.html ). Yandex nie je pozadu, pretože vytvoril špeciálny algoritmus „Vladivostok“, ktorý zohľadňuje vhodnosť stránky na prezeranie na telefónoch.

Mobile Friendly dnes nie je len o starostlivosti o návštevníkov, ale je nevyhnutnou podmienkou propagácie.

Keď je webová stránka vytvorená úplne od začiatku, používa sa prístup Mobile First. Väčšina však má staré pracovné projekty. Hlavnou otázkou, ktorú mobilná verzia stránky v takýchto situáciách vyvoláva, je, ako to urobiť bez toho, aby sa pokazila existujúca šablóna?

Existujú tri prístupy:

• Samostatná adresa a rozloženie – umiestnené na subdoméne ako m.site.ru. Presmerovanie nastáva prostredníctvom presmerovania servera na používateľského agenta.
• Responzívny dizajn – url a html zostávajú rovnaké ako vo formáte pre stolné počítače, ale v CSS dopyty na médiá poskytujú pravidlá pre rôzne obrazovky.
• RESS je responzívny dizajn, adresa zostáva rovnaká, ale server odosiela sady štýlov v závislosti od typu hardvéru, ktorý stránku požaduje.

Pre majiteľov starých projektov optimálna voľba- použitie adaptívneho rozloženia. Pozrime sa, ako to urobiť vlastnými rukami a bez použitia nebezpečných doplnkov krok za krokom.

Mobilná verzia stránky: ako to urobiť správne

Ďalšie kroky si budú vyžadovať sebadôveru základné znalosti html a css alebo schopnosť rýchlo vygoogliť nepochopiteľné veci.

Informácie pre začiatočníkov: v CSS slová pred zloženými zátvorkami znamenajú konkrétne kusy html súbor, za ktorých zobrazovanie zodpovedajú. Často sa píšu s bodkou alebo krížikom - #miesto (vlastnosť: hodnota;).

Krok 1. Odstráňte obmedzenia.

Majitelia gumených rozložení môžu tento krok preskočiť. Zvyšok sa bude musieť viac snažiť.

Šírka - hľadáme veľké časti v kóde s pevne definovaným zobrazením. Ak je parameter špecifikovaný v pixeloch alebo bodoch, musíte zmeniť jeho hodnotu na percentá, ems a iné jednotky, ktoré sú citlivé na prostredie. Hlavná nádoba alebo oblasť obsahu má často pevnú šírku – vo väčšine prípadov sa obmedzenia odstránia jej nahradením maximálnou šírkou.

Obrázky - namiesto prehľadných veľkostí napíšeme vlastnosti pre img tag, vďaka čomu budú obrázky prispôsobiteľné. Fotky zmenia rozmery v rámci svojich nadradených kontajnerov.

img(

Maximálna šírka: 100 %;

Výška: automatická;

Tabuľky – nebudete ich môcť nastaviť tak, aby boli plne responzívne, ale môžete pomocou nich upraviť stránky vhodné pre mobilné zariadenia pridaním tohto kódu:

stôl (

Displej: blok;

Šírka: 100 %;

Overflow-x: scroll;

Pretečenie-y: skryté;

Ms-overflow-style: -ms-autohiding-scrollbar;

Webkit-overflow-scrolling: touch;

Zábaly sú špecifikované vlastnosťou float. Nastavenie tohto parametra umožní blokom pohybovať sa v závislosti od parametrov okna, prispôsobiť sa prvkom so stabilnou polohou alebo v rámci rodičovských kontajnerov. Štandardné prvky div sa predvolene prekladajú do Nový riadok. Napríklad pri umiestnení blokov div s veľkosťou 1 000 px po 200 px do kontajnera môžete vidieť nasledujúci obrázok.

Bloky stáli jeden na druhom. Pridaním zalamovania sa odstránia zlomy riadkov a zarovnajú sa prvky vo všetkom dostupnom priestore.

Krok 2: Naplánujte si reorganizáciu obsahu.

Zistite, ktoré časti vašej stránky pre počítače by sa mali zobrazovať na mobilných zariadeniach. Ak to chcete urobiť, odpovedzte si na tieto otázky:

• Ktoré bloky plnia iba dekoratívne funkcie? - Najčastejšie sú to posúvače, dekorácie bočných panelov, dotazníky, náhodné fotografie.
• Čo návštevníci ignorujú? - Tepelné mapy kliknutí a ciest vám pomôžu odpovedať na túto otázku. Najmenej aktívne prvky nemilosrdne schováme.
• Čo musí určite zostať v mobilná verzia? - Zvyčajne ide o reklamu, formulár spätnej väzby, odbery alebo tlačidlá sociálnych médií.
• Zamyslite sa nad tým, ako by mala stránka vyzerať na tabletoch, smartfónoch a malých starých telefónoch – pre každé zariadenie si môžete nastaviť iný vzhľad.

Krok 3. Pohodlie.

Navigácia: obrazovky telefónu sú príliš malé; Je zvykom nainštalovať menu, ktoré sa spúšťa pomocou tlačidla.

Oblasť obsahu: Pre telefóny je bežné nastaviť šírku tela v CSS na 100 % v závislosti od dostupného priestoru. To znamená, že text, moduly, reklama a obsah bočného panela sa na malých zariadeniach zobrazia v jednom stĺpci.

Senzory: Prsty nie sú také presné ako myš, doprajte im dostatok priestoru. Priestor okolo odkazov a iných aktívnych prvkov musí byť aspoň 28 x 28 pixelov.

Pomôžte svojim návštevníkom definovať aktívny priestor – odsadenia, zvýraznenia, zmeny farieb a ďalšie veci, ktoré možno nastaviť pre dotyky, napíšte pseudotriedu vznášania pre odkazy a tlačidlá.

Implementácia Media Queries s príkladmi

Ak ste niekedy vytvorili CSS tabuľky pre tlač, potom už máte predstavu o možnostiach priradenia jednotlivých štýlov v závislosti od podmienok.

Dotazy na médiá sú logické výrazy; prístup k nim znamená odpoveď s parametrom true alebo false. Ak je výsledok dotazu pravdivý, to znamená, že rozmery používateľského agenta alebo zariadenia zodpovedajú zadanému typu média, potom sa automaticky použijú pravidlá štýlu špecifikované v bloku médií.

Mediálne dotazy možno priradiť podľa nasledujúcich parametrov:

• šírka a výška okna prehliadača;
• šírka a výška zariadenia;
• orientácia - režim na šírku alebo na výšku;
• Rozlíšenie obrazovky.

Aktuálny zoznam argumentov je dostupný v oficiálnej špecifikácii.

Prejdime na príklady. Existuje hotová šablóna, veľkosť jej obsahovej časti je 1000 pixelov, všetky vnútorné prvky a detaily sú nakonfigurované vo vzťahu k tomuto parametru.

Ak je obrazovka používateľa užšia ako zadaná časť obsahu, zobrazí sa rolovacia lišta. Plávajúce dizajnové prvky sa môžu správať nepredvídateľným spôsobom – narážať do seba, rozmazávať sa alebo sa príliš zužovať.

V prvom rade odstránime pevnú veľkosť, ktorá pásik vytvára, aby neprekážal pri nastavení. V našej šablóne ide o obálku navigácie. V rozložení čítačky to môže byť jeden alebo viac prvkov. Ak sa vám to ťažko určuje, otvorte nástroje pre vývojárov prehliadača – pomocou zobrazenia blokového modelu nájdite prvok, ktorý sa nezmestí do rozmerov obrazovky.

Ak to chcete vyriešiť, odstráňte pevné rámy napísaním štýlov šablóny:

@media only obrazovka a (maximálna šírka: 1000px) (

Nav (šírka: 100 %; )

Ak je teraz šírka obrazovky používateľa menšia ako 1 000 px, šírka ponuky sa bude rovnať 100 % jej veľkosti. Hlavná verzia šablóny vyzerá rovnako ako predtým. Nahradením vlastnosti sa odstránil spodný posúvač pri zmenšovaní obrazovky.

Bloky však stále vyzerajú pochybne - zmeňme ich zobrazenie a zväčšme šírku v percentách na požadovanú veľkosť.

Do rovnakého mediálneho dopytu pridávame:

Blok (šírka: 35 % ;)

Ako zistiť optimálne veľkosti blokov vášho webu? Vypočítajte ručne alebo ako základ vezmite akúkoľvek hotovú mriežku - tekutú mriežku. Môžete sa zamerať na existujúce štandardy: v dvojstĺpcových rozloženiach so šírkou okna 980-1050px sa obal berie ako 95%, obsah - 60% a 30% zostáva pre bočný panel. Zostávajúci priestor sa používa na vytvorenie okrajov a okrajov pre úhľadnosť.

Môžete však použiť veľkosť boxu pre obsah, aby ste nepočítali pixely zakaždým, ale pracovali podľa celkových rozmerov.

Prejdime k nastaveniu zobrazenia na obrazovkách s nižším rozlíšením:

@media only obrazovka a (maximálna šírka: 600px) (

Blokovať (

Plavák:žiadny;

šírka: 85 %;

Okraj: 1 em auto;

Ak je obrazovka menšia ako 600 px, potom by sa naše bloky mali zmestiť do jedného stĺpca - odstráňte obaly, nastavte nové zarážky, vycentrujte a zmeňte šírku. Najčastejšie je nastavená na 100 %, ale ak je to z nejakého dôvodu nepohodlné, nastavíme si vlastnú veľkosť.

Takto si nastavíte nielen rozmery blokov obsahu, ale aj ich zobrazenie. Napríklad zakážte zobrazovanie veľkých prvkov a nahraďte ich akýmikoľvek vhodnými prvkami.

Ukážme si možnosti na príklade zmeny farieb a zobrazení.

Smartfónová verzia skryje hlavné menu a zmení farbu bloku na modrú, zatiaľ čo väčšia obrazovka zobrazuje dizajn bez týchto zmien.

Vo väčšine prípadov je potrebné navigáciu skryť - nahradí sa tlačidlom. Je vhodnejšie to urobiť pomocou javascriptu, môžete použiť hotové riešenia.

Úpravy sa vykonávajú bodovo, rozsah je možné obmedziť nad aj pod. Je to rýchle a pohodlné – v jednom riadku zadáte samostatné CSS pre rôzne zariadenia bez ovplyvnenia hlavného zobrazenia stránky.

Pravidlá @media môžete deklarovať kdekoľvek v existujúcej šablóne štýlov alebo môžete pre tieto deklarácie vytvoriť samostatné pravidlá a potom ich importovať do hlavného CSS pomocou pravidla @import.

Mobilná verzia stránky: ako na to a na čo si dať pozor

MediaQuery rozumejú všetkým moderným prehliadačom, ale nebude fungovať v IE 8 a nižších. Problém je vyriešený obrátením sa na staršie IE pomocou podmienených komentárov. Musia byť napísané v kóde šablóny, nie v CSS.

Samotný skript je dostupný na GitHub (https://github.com/scottjehl/Respond), pridáva podporu pre minimálne a maximálne rozmery a mediálne dotazy do starého IE.

Ďalším problémom je, že responzívny dizajn zahŕňa použitie Html5, čo je opäť pre staršie prehliadače nezrozumiteľné. Ošetrené hackom:

Document.createElement("hlavička");

Document.createElement("nav");

Document.createElement("sekcia");

Document.createElement("článok");

Document.createElement("aside");

Document.createElement("päta");

Kód je napísaný v html, navyše blokové zobrazenie vytvorených prvkov je nastavené v CSS:

hlavička, navigácia, sekcia, článok, bokom, päta (display:block;)

Okamžite sa dotkneme otázky - ako zabezpečiť, aby sa niektoré skripty zobrazovali iba so zadanými parametrami obrazovky. Ak používate jquery, budete musieť do kódu šablóny pridať jednoduchý skript. Čísla sa zmenia na požadované. Znie to takto: ak šírka okna presiahne 980 pixelov, na stránku sa použije skript zadaný v ceste. Môžete zadať niekoľko, syntax sa zapíše analogicky pomocou bodkočiarky vo zložených zátvorkách.

If ($(document).width() > 980) (

$.getScript("cesta k skriptu");

Ďalším bodom je, ako by mal mobilný prehliadač iPhone spracovať prenášaný obsah a či je povolené jeho zvýšenie. Na tento účel je v hlave napísaná počiatočná stupnica:

Zostáva len skontrolovať správnosť - na to môžete použiť svoj vlastný prehliadač a telefón alebo sa obrátiť na služby.

Ak je stránka prerobená na lokálny server, správnosť sa dá určiť v ami.responsivedesign.is . Pre správne zobrazenie budú musieť majitelia Denveru zmeniť kódovanie na utf-8 úpravou súboru httpd.conf servera.

Služba predvedie, ako projekt vyzerá na rôznych zariadeniach.

Okrem toho je šablóna testovaná https://developers.google.com/speed/pagespeed/insights/ alebo v špeciálnom formulári https://www.google.com/webmasters/tools/mobile-friendly, ako aj vo webmasteroch .

V Yandex to vyzerá podrobne, ale Google jednoducho oznámi, že nie sú žiadne problémy.

Ak je všetko vykonané správne, nedôjde k posúvaniu ani nepotrebným prvkom. Mobilná verzia je pripravená a teraz ste sa naučili, ako si ju vyrobiť sami. Ak bol materiál pre vás užitočný, dajte like a prihláste sa na odber bulletinu blogu. Všetko najlepšie.

Nižšie si kliknutím na jedno z tlačidiel môžete stiahnuť 2 príklady zloženej stránky v tejto lekcii a už len pracovať s hotovými stránkami a skopírovať kód.

S pozdravom Galiulin Ruslan.

V tomto príspevku budeme hovoriť o mobilnej šablóne pre Wordpress. Šablóna je veľmi krásna, funkčná, s vynikajúcou použiteľnosťou a navrhnutá špeciálne pre mobilné platformy a tablety.

Šablóna má pohodlné menu, ktoré je možné konfigurovať čiernobielo alebo zvoliť inú farebnú schému zobrazenia. Šablóna je vyrobená pre Wordpress engine vrátane všetkých potrebných stránok a je kompletná v zostave.

V tomto prípade máme pred sebou typický šablóna mobilného blogu. Vzhľadom na dynamiku prechodu zo stolných počítačov na ich mobilné inkarnácie by ste mali vynaložiť malé úsilie na zvýšenie vplyvu vašich blogov v prostredí mobilného internetu.

Vo všetkých ohľadoch zaujímavá mobilná šablóna Dot Mobi nájde mnoho aplikácií vo vašich internetových projektoch. Svieži dizajn, profesionálne rozloženie, nízka hmotnosť a výborná použiteľnosť si hneď po stiahnutí nájde mnoho priaznivcov pre prácu so šablónou pre mobilnú stránku.

Toto je jeden z tých návrhov mobilných stránok, s ktorými sa nechcete rozlúčiť a ponechať si ich pre svoje vlastné stránky. To však nebude tento prípad a bude to v rozpore s princípom uvádzania informácií na stránke. Preto si to vezmite.