Modello HTML per dispositivi mobili. Modello mobile flatsome: tema WordPress multiuso e reattivo

Tutti i modelli presentati per il tuo sito web sono basati su versioni moderne di HTML5 e CSS3. Inoltre, gli autori utilizzano funzionalità alla moda come design piatto, design reattivo, layout adattivo, cursori jQuery, animazione CSS3, ecc. Cioè, se stai cercando un modello di sito Web mobile, puoi scegliere uno qualsiasi di quelli presentati. Bellissimi modelli HTML5 2017, anche se gratuiti, sembrano premium.

Qui troverai più di 50 modelli di siti web reattivi gratuiti di alta qualità in HTML5 e CSS3, che possono essere utilizzati sia per nuovi siti che per riprogettare quelli esistenti. Eleganti modelli di siti Web HTML5 sono ciò di cui hai bisogno!

Aggiornato il 03/12/2019: da quando l'articolo è stato scritto 2 anni fa, molti collegamenti si sono interrotti. O i proprietari dei modelli si sono fusi o hanno cambiato lo stato dei modelli da gratuiti a a pagamento, oppure gli alieni hanno rovinato tutto. Vi chiediamo, cari lettori, se trovate un link del genere, lasciatelo nei commenti, lo correggerò.

1. Modello di pagina di destinazione senza neve che utilizza HTML5 e CSS3

Modello HTML5 css3 pagina di destinazione Snow è costruito sul framework Bootstrap. Il modello è molto elegante e interessante! Uno sfondo fisso e un enorme Jumbotron: qualcosa che mostra il contenuto principale del sito. Qual è la cosa più importante sulla landing page? Esatto, un invito all'azione. Naturalmente il modello è completamente adattato ai dispositivi mobili. Puoi anche usarlo come base per i tuoi modelli.

2. Sima: modello di sito web commerciale chic

Anche questo modello HTML5 CSS3 è basato sul framework Bootstrap. Puoi creare un sito Web unico su questo modello con un portfolio, il tuo team, prezzi, recensioni e tutto ciò che sarà necessario. Ad esempio, questo modello è perfetto per un sito Web per servizi di pulizia. L'animazione in questo modello è fluida ed efficace, i caratteri sono puliti e facili da leggere. Proprio il modello perfetto!

3. Bianco: un meraviglioso modello di una pagina!

Una caratteristica distintiva del modello di sito Web White sono le due opzioni di sfondo nella parte superiore. La tua scelta è uno slider con immagini o uno sfondo video. Modello efficace e di altissima qualità per il sito!

4. Platz: modello di sito Web gratuito basato su griglia HTML5

Un modello di sito Web HTML5 moderno e visivamente accattivante progettato su base griglia (ulteriori informazioni sulla griglia). Design del modello bello e reattivo per un blog o un sito Web.

5. Mart eCommerce: un meraviglioso modello di sito Web HTML5 e CSS3 per e-commerce

Il design fresco ed elegante del modello di sito Web è più adatto a tutti i tipi di siti Web di moda che vendono scarpe, vestiti, orologi, accessori, abbigliamento sportivo, ecc. Viene fornito con un file PSD che puoi modificare in base alle tue esigenze.

6. Nava: spettacolare modello HTML5 e CSS3 per siti Web creativi

Nava è un moderno modello di sito Web HTML5 utilizzato principalmente per i professionisti creativi che desiderano mostrare il proprio lavoro in tutto il suo splendore. Molte varianti delle impostazioni del modello ti consentono di rendere unico il tuo sito web. Modello di sito Web leggero, bello e reattivo.

7. Box Portfolio: un modello di sito Web creativo unico che utilizza HTML5 e CSS3

Il modello di sito Web Box Portfolio ha un design minimalista pulito e moderno. Perfetto per i professionisti che desiderano visualizzare in modo efficace il proprio lavoro online. Come suggerisce il nome, il modello di sito web è ideale per un portfolio.

8. Mountain King: modello di sito Web HTML5 e CSS3 popolare e funzionale

Il tema della montagna nel design dei siti web è stato molto popolare ultimamente. Il modello di sito web Mountain King non fa eccezione. Include 336 icone vettoriali di Typecons. Inoltre ottima animazione utilizzando CSS3. Il modello è perfetto per i siti Web di viaggi e portfolio.

9. Centro benessere - modello interessante sito su HTML5 e CSS3 per saloni spa

Beauty Spa è un modello di sito Web reattivo che ha molte funzionalità, ideale per siti termali, centri benessere o fitness, siti di yoga o persino parrucchieri. Eccellente leggibilità dei caratteri e minimalismo discreto.

10. Bent: pagina di destinazione elegante ed efficace per siti Web che utilizzano HTML5 e CSS3

Bent è un ottimo modello di sito Web gratuito in HTML5 e CSS3. Design reattivo, animazione CSS3, scorrimento parallasse, navigazione personalizzata e altre chicche. Si tratta di un modello dal design pulito per i siti che desiderano utilizzare un design equilibrato per garantire che i visitatori apprezzino l'aspetto del sito pur vedendone chiaramente il contenuto principale.

11. Triangle: modello HTML5 e CSS3 reattivo multiuso gratuito

Triangle è un esclusivo modello di sito Web HTML5 e CSS3 creativo specifico per coloro che desiderano modificare il proprio design interessante, ma non peggiorare le cose. Il modello viene fornito con oltre 40 pagine predefinite che ti consentono di personalizzare il tuo sito a tuo piacimento.

12. Future Imperfect: un brillante modello di sito web per persone creative!

Prova un autentico senso di divertimento con questo modello di sito web, ideale per scrittori, autori, copywriter e altri lavoratori con carta e penna. Il modello può essere utilizzato anche per un blog personale, un blog sui viaggi, sulla creatività, ecc. Molte persone apprezzeranno il design creativo e il layout adattivo del modello.

13. Bodo: un ottimo modello per un sito web personale

Bodo- bellissimo modello sito su HTML5 e CSS3, ideale per un sito personale. Soprattutto per organizzare un portfolio. Tipografia pulita e nitida, cursore a carosello, finestre pop-up per visualizzare il lavoro e molto altro.

14. Lens: il modello di sito Web HTML5 perfetto per i fotografi

I fotografi sono sempre alla ricerca del modello perfetto per il loro sito web per mostrare il loro lavoro in tutto il suo splendore, in modo impressionante e, soprattutto, in grande! Un modello di sito Web raro soddisfa questi requisiti. Lens è uno di questi modelli di siti Web per fotografi.

15. Spectral: un modello di sito Web unico fatto a mano che utilizza HTML5 e CSS3

Se stai cercando modelli di siti Web gratuiti sul tema automobilistico, Spectral lo farà soluzione ideale. Ecco un modello di sito web di una pagina realizzato a mano e assolutamente unico. Il design può essere modificato a tua discrezione. Con questo modello puoi creare un sito Web straordinario su qualsiasi argomento, che si tratti di un blog di viaggi o di una galleria fotografica impressionante, di un sito Web automobilistico o di un provider di hosting.

16. Oxygen: modello di sito Web HTML5 e CSS3 di una pagina

Oxygen è un modello comodo e unico per un sito Web aziendale. Design piatto moderno, layout adattivo. Ad esempio, questo modello è ideale per un sito sulle applicazioni mobili o sulla tecnologia mobile.

17. Mobirise Bootstrap: il modello di sito Web gratuito perfetto su HTML5 e CSS3

Se stai cercando un modello di sito web gratuito, Mobirise Bootstrap è perfetto per iniziare. Questo è un modello multifunzionale con molti extra inclusi. Tre layout predefiniti pagina iniziale e il blog ti aiuterà in questo. Mobirise Bootstrap è anche ottimizzato al 100% SEO e si adatta a qualsiasi dimensione dello schermo.

18. La Casa - bellissimo e gratuito template HTML5 per un sito web immobiliare

Il modello Brandy è perfetto per organizzare un sito web immobiliare commerciale. Il design reattivo e molto bello piacerà non solo al proprietario del sito, ma anche ai visitatori.

19. Drifolio: elegante modello di sito Web HTML5 per portfolio

Modello di sito Web HTML5 e CSS3 elegante e animato per l'organizzazione di un portfolio. Design pulito, ottima tipografia, bellissime icone e molto altro.

20. Pluton: un modello luminoso ed elegante per un sito Web di una pagina

Pluton è un modello di sito Web luminoso ed efficace basato su Bootstrap. Un modello di sito Web moderno con il suo layout unico di una pagina e un design reattivo, ideale per studi, fotografi e designer creativi.

21. SquadFree: modello di sito Web professionale di una pagina in HTML5

Il modello SquadFree è perfetto per creare un sito Web commerciale di una pagina. Il modello non solo ha un aspetto professionale, ma è anche adatto a tutti i tipi di schermi. Il modello è basato su Bootstrap.

22. Sublime: un affascinante modello di sito Web su HTML5 e CSS3

Sublime è un modello di sito Web HTML5 e CSS3 pulito e straordinariamente bello, perfetto per una startup, un'agenzia creativa o un sito portfolio. Design reattivo e due opzioni di pagina tra cui scegliere.

23. Timber: modello di sito Web HTML5 e CSS3 insolito e bello

Timber è un tema di modelli di siti Web di una pagina fresco, elegante e insolito. La diagonale è la caratteristica principale del design di questo modello. Il modello è perfetto per un sito Web o un portfolio aziendale. C'è una galleria integrata, una mappa e Informazioni sui contatti, che puoi facilmente adattare alle tue esigenze.

24. E-Shopper: il miglior modello di sito web di e-commerce

E-Shopper è un'ottima opzione per un modello di sito Web di e-commerce. Costruito su bootstrap con un fantastico set di funzionalità per un negozio online completo ed efficiente.

25. Magnetico: modello HTML5 e CSS3 gratuito per un sito di foto

Un modello HTML5 e CSS3 assolutamente straordinario per creare un sito Web o un portfolio fotografico per un designer, illustratore o artista. Questo modello porta la barra dei modelli professionali al livello successivo! Design reattivo, supporto eccellente per tutti i tipi di dispositivi di visualizzazione, navigazione facile e comoda e molto altro ancora.

26. Mabur Portfolio: un bellissimo modello di sito Web in stile minimalista che utilizza HTML5 e CSS3

Il design piatto di questo modello di sito web minimalista è perfetto per creare un portfolio. Nel modello, tutti i dettagli sono controllati perfettamente!

27. Modern Bootstrap HTML5: modello di sito Web gratuito di una pagina

Questa pagina singola gratuita basata sul framework Bootstrap è perfetta per i siti Web aziendali, sia per le piccole che per le grandi aziende. Design piatto, layout adattivo, tutti elementi di design di alta qualità. Il modello è disponibile in 4 colori diversi.

28. Infusion: elegante modello di sito Web di una pagina che utilizza HTML5 e CSS3

Infusion è un ottimo esempio di modello di sito Web HTML5 e CSS3 progettato specificamente per la creazione di un portfolio aziendale. La ricca funzionalità di questo modello ti consente di lavorare in modo efficace con i clienti e di attirarne di nuovi.

29. Yebo - modello di sito web aziendale su HTML5 e CSS3

Questo modello di sito Web in stile piatto di alta qualità è perfetto per qualsiasi sito Web aziendale. Design adattivo, tantissime impostazioni e opzioni di modifica.

30. Twenty: spettacolare modello di sito Web HTML5 e CSS3 con parallasse

Questo modello di sito web unico e molto bello con effetto parallasse non lascerà nessuno indifferente. Il modello di una pagina è basato su HTML5 e CSS3 puri con layout reattivo, sfondi impressionanti, supporto per i social media, ecc.

31. Urbanic: eccellente modello di sito Web HTML5 e CSS3 su Bootstrap

Urbanic è un modello di sito Web HTML5 e CSS3 fresco e interessante costruito sul motore Bootstrap. Perfetto per avviare subito il tuo sito web senza problemi speciali. Il modello si adatta perfettamente a qualsiasi dimensione dello schermo.

32. Design Showcase: modello di sito Web portfolio HTML5

Un modello di sito Web HTML5 visivamente armonioso ed efficace per organizzare il tuo portfolio. Il modello è perfettamente adattato ai dispositivi mobili, cosa molto difficile da realizzare per siti di questo formato.

33. Mamba One: un modello di sito Web semplice ed elegante che utilizza HTML5 e CSS3

Mamba One è un esempio di modello di sito Web semplice ma elegante per la creazione di una pagina singola. Compatibile con tutti i browser moderni e verrà visualizzato adeguatamente ovunque.

34. KreativePixel: modello di sito Web gratuito per fotografi

Un altro ottimo modello di sito Web per fotografi. Il design reattivo e l'ordinamento molto conveniente delle foto in portfolio e gallerie piaceranno a molti amanti della fotografia. Il modello utilizza anche un effetto di parallasse, che impressiona anche gli spettatori durante la visualizzazione delle foto.

35. App reattiva Retina Ready: modello di pagina di destinazione gratuito che utilizza HTML5 e CSS3

Come suggerisce il nome, questo meraviglioso modello di sito web non è ideale solo per le pagine di destinazione, ma soddisfa anche le nuove tendenze mobili, soprattutto in termini di chiarezza di visualizzazione sui dispositivi con display Retina.

36. Spazzolato: modello di sito Web HTML5 e CSS3 reattivo basato sul motore Bootstrap

Brushed è un modello di sito Web HTML5 e CSS3 reattivo e gratuito basato sul motore Bootstrap. Ottimizzato anche per display Retina (iPhone, iPad, Ipod touch E Macbook Pro Retina).

37. Modello di sito Web Big Picture HTML5 e CSS3

Benvenuti su Big Picture! Questo modello di sito Web HTML5 reattivo è perfetto per tutte le persone creative che hanno qualcosa da mostrare e lo mostrano in modo grande e impressionante sul proprio sito Web. Inoltre, il modello utilizza un'animazione eccellente.

38. Tesselatte - Modello responsivo HTML5 e CSS3 gratuito

Un semplice modello di una pagina che tiene conto di tutto strumenti necessari per la creazione di un sito web di successo. Ideale per il blog personale di uno scrittore, copywriter o semplicemente di un amante della parola scritta.

39. Overflow: un modello di sito Web unico che utilizza HTML5 e CSS3

Questo esclusivo modello di sito Web HTML5 e CSS3 puro è perfetto per qualsiasi persona creativa. È completamente reattivo e completamente gratuito.

40. Runkeeper: modello di sito Web reattivo e molto bello

Runkeeper è un modello di sito Web gratuito, reattivo e molto bello. Può essere utilizzato per un sito web di qualsiasi argomento. Stile brillante e caratteri chiari, design reattivo e dettagli del modello impressionanti. Tutto funziona per te!

41. Stile griglia reattiva flipper: ottimo modello di sito Web basato su griglia

Questo fantastico modello di sito Web professionale basato su griglia è perfetto per un sito Web aziendale. Il design piatto moderno e la struttura reattiva del modello vengono visualizzati perfettamente sia su monitor di grandi dimensioni che dispositivi mobili.

42. Prologo: modello di sito Web pulito di una pagina utilizzando HTML5 e CSS3

Questo modello di sito Web HTML5 e CSS3 pulito, semplice e chiaro è perfetto per creare una landing page. Il design minimalista non distrae dalla cosa principale. Un'accattivante barra di navigazione laterale a scorrimento e linee di pagina pulite sono semplicemente la combinazione perfetta!

43. Helios: modello di sito Web moderno che utilizza HTML5 puro e CSS3

Un altro modello di sito Web in stile minimalista e forme pulite. Progettato specificatamente per sfruttare i grandi schermi, ma perfettamente adattato anche ai piccoli schermi dei dispositivi mobili.

44. Telephasic: modello di sito Web HTML5 gratuito e reattivo

Questo modello di sito web moderno, reattivo e completamente gratuito ha un grande vantaggio: è semplice e conciso, ma è esattamente ciò che manca a molte persone.

45. Strongly Typed: un modello di sito Web molto bello in stile semi-retrò

Un nuovo modello di sito web dallo stile minimalista semi-retrò. È solo che il retrò non è più di moda, ma un leggero accenno è molto gradito. Questo modello di sito Web è completamente reattivo, basato su HTML5 e CSS3 puri e include tutti gli elementi principali della pagina necessari. Il modello Strongly Typed è ideale per i siti Web creativi. Ad esempio, per un sito sull'arredamento della casa.

46. ​​​​Striped: modello di sito Web HTML5 e CSS3 pulito, bello e funzionale

Fresco e pulito, bello e funzionale, nuovo modello di sito web in HTML5 e CSS3. Ha nel suo arsenale tutti gli elementi necessari della pagina, comprese virgolette, tabelle ed elenchi progettati, nonché una barra laterale adattata (a destra o a sinistra, come desideri).

47. Parallelism: un modello di sito Web insolito ed elegante che utilizza HTML5 e CSS3

Parallelism è un elegante modello di sito Web per l'organizzazione di portfolio o foto. Ciò che lo rende insolito è che lo scorrimento qui non è verticale, come al solito, ma orizzontale. Ciò conferisce al sito un'eleganza e una memorabilità speciali.

48. Miniport: modello di sito Web HTML5 completamente reattivo in stile minimalista

Eccellente modello di sito Web in stile minimalista su HTML5. Perfetto per un sito web/blog personale, così come un piccolo sito web aziendale di una pagina o come sito web per biglietti da visita.

49. Verti: modello di sito Web HTML5 reattivo, spazioso e gratuito

Il design pulito e spazioso di questo modello di sito Web è perfetto per siti Web aziendali di grandi dimensioni o progetti commerciali. Reattivo e conveniente sia per l'autore che per gli utenti.

50. ZeroFour: modello di sito Web impressionante ed elegante che utilizza HTML5 e CSS3

E l'ultimo della lista, ma non meno importante in termini di qualità ed efficacia visiva, è il modello di sito web: ZeroFour. Design elegante, menu molto bello, forme e pulsanti perfettamente adattati, bellissime icone e molto altro. E tutto questo è assolutamente gratuito!

Spero che tu abbia trovato qualcosa di adatto a te tra questi fantastici modelli di siti Web HTML5 e CSS3. Buona fortuna!

Aggiungilo ai segnalibri in modo da poterlo trovare rapidamente.

PS: Se non puoi fare una scelta, leggi l’articolo “Non so cosa voglio”. Sarà utile.

Ho preparato una nuova selezione di venti tra i temi premium più interessanti per WordPress, perfetti per creare siti Web di presentazione e pagine di destinazione. giochi per cellulari e applicazioni.

Sviluppo globale delle telecomunicazioni mobili, accessibilità Internet mobile ha formato un mercato completamente nuovo e in sviluppo dinamico per le applicazioni mobili. Che in pochi anni è diventata un’industria enorme. È difficile contare quante startup interessanti focalizzate sui dispositivi mobili siano apparse negli ultimi anni. Il mercato è ampio e redditizio, molte aziende e sviluppatori lo capiscono e si sforzano di conquistarlo.

Lo sviluppo delle tecnologie mobili e la crescita della produttività degli smartphone contribuiscono al miglioramento, alla funzionalità e alla qualità delle applicazioni mobili. I migliori smartphone sono già quasi uguali in termini di prestazioni computer personale. E quelli d’ufficio probabilmente sono già stati bypassati. In questo contesto, la crescita diffusa non è più così sorprendente traffico mobile. Google, ad esempio, ha disattivato la sua “ricerca in tempo reale” la settimana scorsa. Ciò è stato motivato dall’enorme quota di traffico mobile e dalle funzionalità della ricerca mobile. Penso che il mercato delle applicazioni mobili sia molto promettente. Almeno nei prossimi anni ci sarà solo crescita, sviluppo, miglioramento, penetrazione più profonda nella vita di tutti i giorni, nel cosiddetto. Internet delle cose.

Come in qualsiasi altro settore, qualsiasi applicazione mobile necessita di un packaging luminoso e bello sotto forma di un sito Web di presentazione. Dove sarebbe possibile dimostrare le sue capacità, parlare dei suoi vantaggi, benefici, ecc.

Un moderno tema di una pagina con un design pulito per la presentazione di applicazioni mobili, facile da personalizzare, dispone di 12 opzioni di visualizzazione già pronte, caratteri Web, icone, parallassi, lightbox, Visual Composer integrato, Slider Revolution e molto altro.

Scaricamento Dimostrazione

Pagina di destinazione di una pagina con ampie opzioni di personalizzazione, generatore di pagine visive integrato, supporto di Google Fonts, e-commerce basato su WooCommerce, Slider Revolution e molto altro.

Scaricamento Dimostrazione

Un eccellente tema reattivo per la presentazione di applicazioni mobili, basato su Bootstrap con supporto per Google Fonts e Google Maps.

Scaricamento Dimostrazione

Un tema moderno multiuso con un design pulito, può funzionare in modalità a pagina singola e multipagina, ha 4 opzioni di progettazione della home page, supporta la modalità multilingue basata sul plug-in WPML, sul costruttore Visual Composer, sulle newsletter Mailchimp, ecc.

Scaricamento Dimostrazione

Tema multiuso per dimostrare le capacità delle applicazioni mobili basate su Bootstrap, 2 opzioni di visualizzazione domestica, supporto display alta definizione, Visual Composer integrato, importazione con un clic di contenuti demo e tutte le munizioni tradizionali.

Scaricamento Dimostrazione

Modello di destinazione per WordPress con clean design moderno, incentrato sulla presentazione di app mobili per tre piattaforme principali: Android, iOS e Windows. Ben documentato, facile da configurare.

Scaricamento Dimostrazione

Un'altra landing page adattiva per WordPress su Bootstrap con 24 opzioni di design, adatta anche per presentazioni di applicazioni mobili e startup. C'è un generatore di pagine visive e più di 80 elementi di design integrati, moduli di contatto, integrazione Newsletter di Mailchimp e altro.

Scaricamento Dimostrazione

Un nuovo modello di landing page adattivo basato sul Warp 7 Framework per gli amanti dei siti web leggeri e modulari. Adatto non solo per applicazioni mobili, ma anche per altri settori.

Scaricamento Dimostrazione

Un tema semplice e moderno da mostrare applicazione mobile con due opzioni di progettazione della home page, supporto per display Retina, designer Visual Composer integrato, slider Slider Revolution, importazione di contenuti con un clic, mega menu, oltre 600 caratteri e molto altro.

Scaricamento Dimostrazione

Tema WordPress multiuso di una pagina per la dimostrazione di applicazioni mobili, startup, siti Web personali. Basato su Bootstrap, Visual Composer integrato, Revolution Slider, moduli di contatto, codici brevi, icone, ecc.

Scaricamento Dimostrazione

Modello di pagina di destinazione dell'applicazione mobile con 3 opzioni di home page, 20 opzioni di design, personalizzazione semplice, generatore di pagine visive Visual Composer, supporto per il plug-in multilingue WPML.

Scaricamento Dimostrazione

Tema WordPress reattivo multiuso ed economico con 23 opzioni di progettazione già pronte.

Scaricamento Dimostrazione

Un tema moderno e multiuso con un design responsivo professionale per la presentazione di app e giochi mobili. A bordo Visual Composer, supporto per il plugin multilingue WPML, newsletter Mailchimp, moduli feedback Modulo di contatto 7.

Scaricamento Dimostrazione

Modello di pagina di destinazione ottimizzato multiuso per sviluppatori di applicazioni mobili, prodotti software, startup, agenzie creative e di design. 4 opzioni di progettazione della home page, facile personalizzazione utilizzando il personalizzatore WordPress integrato, generatore di pagine visive con oltre 40 elementi di design, Revolution Slider, oltre 50 codici brevi, oltre 500 icone ottimizzate per display Retina.

Scaricamento Dimostrazione

Uno dei temi reattivi di una pagina più veloci su ThemeForest, perfetto per le startup. 12 design già pronti, importazione con un clic di contenuti demo, facile personalizzazione, codice pulito, generatore di pagine Visual Composer, Revolution Slider, supporto per l'e-commerce WooCommerce e molto altro.

Scaricamento Dimostrazione

Lo sviluppatore afferma che con l'aiuto del tema Helium, le tue pagine di destinazione si trasformeranno in una potente arma di marketing. È difficile discuterne: il tema è molto moderno, basato su Bootstrap, ottimizzato per SEO, ha 10 opzioni di visualizzazione principali, uno slider, oltre 1000 caratteri, Visual Composer integrato con oltre 50 elementi di design, supporto per WooCommerce, Mailchimp, Google Mappa, Google Fonts, Contact Form 7, portfolio e molto altro ancora.

Scaricamento Dimostrazione

Un tema molto elegante con 7 layout di home page, 6 opzioni di visualizzazione dell'intestazione, 5 opzioni di piè di pagina, Visual Composer integrato con Ultimate Addons, Slider Revolution, WooCommerce, One Page Navigator, supporto WPML e importazione di contenuti demo con un clic.

Scaricamento Dimostrazione

Un tema moderno e reattivo con un design Bootstrap pulito per i siti di distribuzione software. 9 opzioni per la home page, 8 combinazioni di colori, 3 opzioni per il design dell'intestazione, supporto per Twitter, YouTube, Font Awesome, ecc.

Scaricamento Dimostrazione

Un tema creativo di una pagina con design reattivo, 17 opzioni di design già pronte, supporto per display Retina, Visual Composer integrato, Slider Revolution, supporto Google Fonts, vari parallassi e animazioni.

Scaricamento Dimostrazione

Modello reattivo landing page dal design pulito e moderno e ampie opzioni di personalizzazione, perfetta per applicazioni mobili, prodotti, startup. Visual Composer integrato, importazione con un clic, supporto multilingue su WPML, moduli di contatto Modulo di contatto 7, Revolution Slider e molto altro.

Scaricamento Dimostrazione

Un modello molto bello che darà al sito web della tua app mobile un aspetto professionale senza renderlo noioso. Puoi scegliere tra tre opzioni pagina iniziale, ognuno dei quali sembra semplicemente meraviglioso. La combinazione di colori del futuro progetto online può essere modificata come desideri. Inoltre, la funzionalità drag-and-drop ti consente di lavorare con i contenuti senza approfondire il codice.

Scaricamento Demo PayPal

Un modello eccellente che ti consentirà di creare il progetto online desiderato senza spendere un'enorme quantità di denaro. Offre una vasta gamma di opzioni di personalizzazione aspetto luogo. E il builder Elementor ti permetterà di dimenticare il codice e tutto ciò che è connesso ad esso. Non dimenticare di utilizzare un mega menu per rendere molto più semplice per gli utenti la navigazione nel tuo sito.

Scaricamento Demo Momex

Momex è un modello moderno che, come tutte le altre soluzioni già pronte di questa raccolta, ti consente di creare un progetto online impressionante. Agli utenti viene offerta una vasta selezione di opzioni che possono essere utilizzate per migliorare sia l'aspetto del sito che la sua funzionalità. Ad esempio, tra i quattro layout del blog, chiunque può trovare un'opzione che gli piacerà sicuramente. E il pacchetto di plugin Cherry piacerà a chi vuole presentare i servizi in modo tale da convincere il pubblico a cui si rivolge a sceglierli.

Scaricamento Dimostrazione

Consor è un modello meraviglioso in grado di presentare qualsiasi attività commerciale nel modo più memorabile. Pertanto, posso consigliarlo per la creazione di siti di applicazioni mobili. Nel suo pacchetto puoi trovare una varietà di opzioni di intestazione, con l'aiuto delle quali si ottiene anche l'unicità del progetto online. E WordPress Live Customizer ti consentirà di lavorare con i colori e i caratteri del tuo futuro progetto online senza ulteriori sforzi.

Scaricamento Dimostrazione

Un modello completamente funzionale e flessibile che attirerà sicuramente molta attenzione. Include molte pagine già pronte che ti aiuteranno a presentare i tuoi servizi, creare una galleria di progetti e molto altro ancora. Insieme a Elementor-builder, la creazione di un sito Web si trasformerà in puro piacere. Dopotutto, ti consente semplicemente di trascinare e rilasciare il contenuto selezionato nella posizione desiderata sul sito.

Scaricamento Demo In conclusione

Come puoi vedere, c'è molto tra cui scegliere. Puoi anche consultare gli argomenti nella categoria "Software" su TemplateMonster. La scelta non è così ampia come su ThemeForest, ma ci sono anche alcune cose interessanti. Lascia che ti ricordi che quando scegli un tema premium per il tuo sito, non dovresti rimanere bloccato sull'argomento. La cosa principale è il design, la struttura e qualsiasi tema può essere “attratto”. Ho parlato di più di come non rovinare tutto in uno dei miei articoli precedenti.

Iscriviti al mio telegramma e sii il primo a ricevere nuovi materiali, compresi quelli non presenti sul sito.

Ho adattato questo modello agli standard dei browser di piattaforme come IOS (3.1+), Android (2.1+), Blackberry (6.0+), Windows Phone 7, così come Opera mobile per Android, che sta guadagnando popolarità. Vorrei sottolineare che tutti i browser standard (ad eccezione di Windows Phone 7 che ha IE9) sono basati su webkit.

Qual è la differenza tra lo sviluppo di siti desktop e siti per dispositivi mobili? Successivamente, parlerò di alcuni trucchi che ti aiuteranno a aggirare molti problemi.

Quale risoluzione scegliere e il meta tag viewport

Sembrerebbe che dovremmo porci una domanda su quale risoluzione utilizzare come base per il nostro sito? Dopotutto, i dispositivi con 230x340 (ad esempio HTC Wildfire S), e circa 800x480,960x640 (HTC Incredible S, iPhone 4), e persino 1280x720 (HTC One X) sono rilevanti adesso. Ci viene in aiuto il meta tag viewport, che risolverà il problema con risoluzione e ridimensionamento.

• larghezza=larghezza-dispositivo: il valore è impostato dal dispositivo stesso
• scala-iniziale=1 - la scala iniziale è impostata su 1 (ovvero 1:1)
• scala massima=1.0, scalabile dall'utente=no - il ridimensionamento è vietato (vorrei notare che anche con questi parametri, HTC continuerà a ridimensionarsi in modo persistente e gli sviluppatori hanno affermato che questo non è un bug, ma una funzionalità)

Un po' di grafica

Anche con questa gamma di risoluzioni, devo notare che la maggior parte dei dispositivi mobili, avendo una risoluzione elevata, la utilizzano non per espandere il proprio spazio di lavoro, ma per aumentare la chiarezza (maggiori informazioni su questo). In altre parole, la saturazione dei pixel (DPI) è molte volte superiore rispetto alle risoluzioni più piccole. Ciò porta alla conclusione che i dispositivi con un PDI elevato comprimono effettivamente il sito 2 volte per ottenere le stesse dimensioni dei dispositivi con una risoluzione inferiore (ad esempio, nei dispositivi Apple con display Retina, ci sono 4 volte più punti sul display) la stessa area dello schermo, il che aumenta la definizione). Possiamo vedere il risultato più chiaramente nella foto qui sotto.

Ora che sappiamo come funzionano gli schermi con DPI elevati, vale la pena pensare alla corretta visualizzazione di tutti gli elementi del nostro sito Web.
Cominciamo con elementi come caratteri, bordi e altri elementi simili. Tutti questi elementi sono essenzialmente oggetti vettoriali che il browser può ridimensionare senza problemi, quindi non soffermiamoci su questo.
La situazione è diversa con le immagini e le immagini di sfondo. Dopotutto, se salviamo l'immagine di sfondo sulla base del fatto che abbiamo 320x480, i dispositivi con un DPI più denso non saranno in grado di apparirci in tutto il suo splendore e tutti gli sforzi per trasmettere la chiarezza e la bellezza dell'immagine verranno a nulla, poiché in realtà lo aumenteranno di 2 volte (e non importa quanto bene si ridimensioni il browser, la qualità viene sempre persa quando il software aumenta le dimensioni). È qui che un trucchetto ci viene in aiuto! Proverò a spiegarmi con un esempio. Abbiamo un sito web nella cui intestazione c'è un certo sfondo che occupa 320px di larghezza. Quindi, affinché i nostri schermi super chiari possano visualizzare questa immagine al 100%, l'immagine originale non dovrebbe essere 320x50 ma 640x100 (esattamente 2 volte più grande) e utilizzando CSS imposta la dimensione dello sfondo: 320px 50px;. Facciamo sciamanesimo simile con immagini sotto forma di img.

Ottimizziamo le query

Dato che Android, BlackBerry, IOS e Windows Phone 7 supportano completamente Data-url, possiamo ridurre significativamente il numero di richieste implementando tutte le immagini di sfondo in CSS. Oltre all'ottimizzazione delle query, abbiamo un enorme vantaggio grazie alla memorizzazione nella cache CSS.

Problemi con sprite e immagini

A causa del fatto che il nostro browser comprime il contenuto e lo ridimensiona a una dimensione particolare, potrebbe arrotondare erroneamente le dimensioni durante i calcoli e pertanto, quando si incollano gli sprite pixel per pixel, apparirà una striscia dell'elemento successivo. Per evitare ciò, vale la pena lasciare uno spazio di un paio di pixel durante l'incollaggio.

Piccolo problema con i formati immagine

Ho riscontrato anche uno spiacevole problema su alcuni dispositivi relativo ai formati delle immagini. Ancora una volta, farò un esempio: ci sono 2 immagini salvate utilizzando Salva per Web in Photoshop (una delle quali è un gradiente lineare che si estende lungo l'asse Y e la seconda è una sorta di immagine ritagliata con un pezzo del gradiente, e in effetti dovrebbe adattarsi al gradiente ripetuto), ma in formati diversi (png e jpg). Quindi su alcuni dispositivi un'immagine è più chiara e la seconda è più scura. Quindi per risolvere questo problema ho dovuto salvare entrambe le immagini nello stesso formato.

Nascondere la barra degli URL

Dato che non abbiamo molto spazio sul nostro dispositivo, non ci farà male vincere un paio di dozzine di pixel in più. E possiamo trovarli nascondendo la nostra barra degli URL. Per questo abbiamo un semplice script:

AddEventListener("carica", funzione() ( setTimeout(hideURLbar, 0); ), false); funzione hideURLbar() ( window.scrollTo(0, 1); )

Ma noto che questo script può interferire con noi se il nostro collegamento porta a una delle ancore nuova pagina(in questo caso verremo fatti scorrere fino al nostro elemento e dopo il caricamento la pagina verrà riportata in alto), ma questo può essere facilmente evitato eseguendo un ulteriore controllo del nostro URL.

Effetto visivo del clic su un elemento

Ad esempio, per iOS possiamo ottenere l'effetto clic utilizzando la pseudo-classe: active. Ma funzionerà anche se il nostro elemento è a fuoco durante lo scorrimento della pagina, il che non è molto carino. Pertanto, ho deciso di scrivere un piccolo script che emulerà un clic e lo annullerà durante lo scorrimento della pagina.

Var scroller=falso; $("a").live("touchstart",function(event)( var elem=$(this); clickable=setTimeout(function () ( elem.addClass("active");), 100); )) ; $("a").live("touchmove",function(event)( clearTimeout(clickable); scroller=true; )); $("a").live("touchend",funzione(evento)( var elem=$(this); clearTimeout(cliccabile); if(!scroller) ( elem.addClass("attivo"); setTimeout(funzione ( ) ( elem.removeClass("attivo");), 50); ) else ( elem.removeClass("attivo"); ) ));

Rimozione della cornice ed evidenziazione da collegamenti e pulsanti

Probabilmente ogni utente ha notato che quando si fa clic su un collegamento, questo viene incorniciato ed evidenziato. Questo effetto può rovinare notevolmente l’idea del designer. Qui ci viene in soccorso una sorta di reset dello stile (testato su tutti i browser webkit, e questi sono browser nativi IOS, Android, BlackBerry)

*( -webkit-text-size-adjust: none; /*corregge un bug in IOS con il ridimensionamento in orizzontale*/ outline: none; /*rimuove la cornice attorno a collegamenti e pulsanti*/ -webkit-touch-callout: none; /* se necessario, disabilitiamo l'evidenziazione del testo*/ -webkit-tap-highlight-color:rgba(0,0,0,0); /*rimuove l'evidenziazione in background di collegamenti e pulsanti*/ )

supporto fisso

Perché tecnologie mobili Ora stanno andando avanti molto rapidamente e al momento della stesura di questo articolo la percentuale di browser che non supportano il fisso si sta avvicinando allo zero, non entrerò troppo in profondità nella descrizione. Dirò solo che per questi browser dovremmo usare iscroll. Descriverò anche un piccolo trucchetto riguardante la connessione dinamica degli script (necessario per non includere un file in più per i normali browser)

//rilevata versione IOS precedente var OSName="Sistema operativo sconosciuto"; if (navigator.appVersion.indexOf("Mac")!=-1) OSName="MacOS"; var bversion=parseInt(jQuery.browser.version,10); if((NomeOS=="MacOS")&&(bversion

IN in questo esempio Ho controllato se si tratta di un Iphone e la versione del browser è inferiore a 534 (non supporta il fisso). Includo dinamicamente lo script Fixing.js

CSS3

Inoltre, non dimenticare che possiamo già utilizzare al massimo alcune proprietà css3 (basta non dimenticare i prefissi moz-, webkit-, o-). Per WP7, sentiti libero di connettere pie.htc.

Collegamento al desktop per IOS

Probabilmente per Utenti iOS Non è un segreto che in Safari puoi inserire un collegamento a un sito Web sul desktop.
Ecco un esempio di tale collegamento a Forismatic.

Sotto Esempio HTML codice per l'icona (IOS stesso lo ingrandirà, aggiungerà angoli arrotondati), lo annuncia questo linkè necessario aprirlo come applicazione (funziona a schermo intero), così come il codice che nasconde la barra degli URL. Se lo desideri, puoi anche mostrare una finestra iniziale.

- annuncia che si aprirà a schermo intero, nascondendo la barra degli URL - cambia il colore della barra di stato in nero (i valori disponibili sono predefinito, nero, nero-traslucido). default default - collegamento all'icona visualizzata sul desktop.

Possiamo vedere un esempio dal vivo di tutto quanto descritto sopra.

Saluti, miei cari lettori del blog. Ruslan Galiulin è in contatto. Oggi parleremo delle versioni mobile dei siti web che ogni sito o blog dovrebbe avere per poter passare al TOP motori di ricerca. Nell'articolo fornirò codici di stile ed esempi già pronti di layout di pagina che potrai scaricare sul tuo computer.

Se il tuo sito non è ancora mobile, ti consiglio di utilizzare il mio consiglio o di contattare i professionisti - http://www.Mobile-version.ru che faranno tutto secondo gli standard dei motori di ricerca. Utilizzando lo stesso collegamento, puoi verificare la mobilità del tuo sito.

Nel 2013, Google ha iniziato a fare pressione sui webmaster (https://webmasters.googleblog.com/2013/06/changes-in-rankings-of-smartphone_11.html), convincendoli della necessità di apportare modifiche leggere al sito, e da allora Dal 2015 la mobilità è diventata uno degli aspetti del ranking (https://webmasters.googleblog.com/2015/04/rolling-out-mobile-friendly-update.html). Yandex non è da meno, avendo creato uno speciale algoritmo "Vladivostok" che tiene conto dell'idoneità del sito per la visualizzazione sui telefoni.

Mobile Friendly oggi non significa solo prendersi cura dei visitatori, ma una condizione indispensabile per la promozione.

Quando un sito web viene creato da zero viene utilizzato l’approccio Mobile First. Ma la maggior parte ha vecchi progetti di lavoro. La domanda principale che solleva la versione mobile del sito in tali situazioni è come realizzarla senza rovinare il modello esistente?

Esistono tre approcci:

• Un indirizzo e un layout separati, posizionati su un sottodominio come m.site.ru. Il reindirizzamento avviene tramite un reindirizzamento del server all'agente utente.
• Design reattivo: l'URL e l'HTML rimangono gli stessi del formato desktop, ma nelle media query CSS forniscono regole per schermi diversi.
• RESS è un design reattivo, l'indirizzo rimane lo stesso, ma il server invia set di stili a seconda del tipo di hardware che richiede la pagina.

Per i proprietari di vecchi progetti scelta ottimale- utilizzo del layout adattivo. Vediamo passo dopo passo come farlo con le tue mani e senza utilizzare plugin non sicuri.

Versione mobile del sito: come farlo nel modo giusto

Ulteriori azioni richiederanno fiducia conoscenza di base html e css o la capacità di cercare rapidamente su Google cose incomprensibili.

Informazioni per principianti: nei CSS le parole prima delle parentesi graffe significano blocchi specifici file html, di cui sono responsabili della visualizzazione. Sono spesso scritti con un punto o un cancelletto - #luogo (proprietà: valore;).

Passaggio 1. Rimuovere le restrizioni.

I proprietari di layout in gomma possono saltare questo passaggio. Il resto dovrà lavorare di più.

Larghezza: cerchiamo sezioni ampie nel codice con una visualizzazione rigidamente definita. Se il parametro è specificato in pixel o punti, è necessario modificare il suo valore in percentuali, em e altre unità sensibili all'ambiente. Spesso il contenitore principale o l'area del contenuto ha una larghezza fissa: nella maggior parte dei casi le restrizioni vengono rimosse sostituendola con larghezza massima.

Immagini: invece di cancellare le dimensioni, scriviamo proprietà per il tag img, che renderanno le immagini adattabili. Le foto cambieranno proporzioni all'interno dei contenitori principali.

immagine(

Larghezza massima: 100%;

Altezza: automatica;

Tabelle: non potrai impostarle affinché siano completamente reattive, ma puoi rendere le pagine adatte ai dispositivi mobili aggiungendo questo codice:

tavolo (

Blocco di visualizzazione;

Larghezza: 100%;

Overflow-x: scorrimento;

Overflow-y: nascosto;

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

Scorrimento webkit-overflow: touch;

Gli avvolgimenti sono specificati dalla proprietà float. L'impostazione di questo parametro consentirà ai blocchi di spostarsi in base ai parametri della finestra, adattandosi agli elementi con una posizione stabile o all'interno dei contenitori principali. Gli elementi div standard vengono tradotti per impostazione predefinita ciascuno in nuova linea. Ad esempio, posizionando blocchi div da 1000 px di 200 px ciascuno in un contenitore, puoi vedere la seguente immagine.

I blocchi erano uno sopra l'altro. L'aggiunta di un ritorno a capo rimuove le interruzioni di riga e allinea gli elementi in tutto lo spazio disponibile.

Passaggio 2: pianifica la riorganizzazione dei contenuti.

Scopri quali parti del tuo sito desktop dovrebbero essere visualizzate sui dispositivi mobili. Per fare ciò, rispondi a queste domande:

• Quali blocchi svolgono solo funzioni decorative? - Molto spesso si tratta di cursori, decorazioni della barra laterale, questionari, foto casuali.
• Cosa ignorano i visitatori? - Le mappe termiche dei clic e dei percorsi aiuteranno a rispondere a questa domanda. Nasconderemo spietatamente gli elementi meno attivi.
• Ciò che deve assolutamente restare versione mobile? - Di solito si tratta di pubblicità, un modulo di feedback, abbonamenti o pulsanti di social media.
• Pensa a come dovrebbe apparire il sito su tablet, smartphone e piccoli vecchi telefoni: puoi impostare un aspetto diverso per ciascun dispositivo.

Passaggio 3. Convenienza.

Navigazione: gli schermi dei telefoni sono troppo piccoli; il normale menu di un sito web raramente rientra in una cornice del genere. È consuetudine installare un menu a discesa tramite un pulsante.

Area contenuto: per i telefoni, è normale impostare la larghezza del corpo nei CSS al 100%, a seconda dello spazio disponibile. Ciò significa che testo, moduli, pubblicità e contenuto della barra laterale verranno visualizzati in un'unica colonna sui dispositivi di piccole dimensioni.

Sensori: le dita non sono precise come un mouse, date loro molto spazio. Lo spazio attorno ai collegamenti e agli altri elementi attivi deve essere di almeno 28 x 28 pixel.

Aiuta i tuoi visitatori a definire lo spazio attivo: rientri, evidenziazioni, cambi di colore e altre cose che possono essere impostate per i tocchi, scrivi una pseudo-classe al passaggio del mouse per collegamenti e pulsanti.

Implementazione di Media Queries con esempi

Se hai mai creato tabelle CSS per la stampa, hai già un'idea delle possibilità di assegnare stili individuali a seconda delle condizioni.

Le media query sono espressioni logiche; accedervi implica una risposta con un parametro vero o falso. Se il risultato della query è vero, ovvero se le dimensioni dell'agente utente o del dispositivo corrispondono al tipo di supporto specificato, le regole di stile specificate all'interno del blocco multimediale vengono applicate automaticamente.

Le media query possono essere assegnate in base ai seguenti parametri:

• larghezza e altezza della finestra del browser;
• larghezza e altezza del dispositivo;
• orientamento: modalità orizzontale o verticale;
• risoluzione dello schermo.

L'elenco attuale degli argomenti è disponibile nelle specifiche ufficiali.

Passiamo agli esempi. Mangiare modello già pronto, la dimensione della sua parte di contenuto è 1000 pixel, tutti gli elementi interni e i dettagli sono configurati in relazione a questo parametro.

Se lo schermo dell'utente è più stretto della parte di contenuto specificata, verrà visualizzata una barra di scorrimento. Gli elementi di design fluttuanti possono comportarsi in modi imprevedibili: scontrandosi l'uno con l'altro, sfocandosi o restringendosi troppo.

Innanzitutto rimuoviamo la dimensione fissa che crea la fascia in modo che non interferisca con le impostazioni. Nel nostro modello, questo è il wrapper di navigazione. In un layout di lettura, possono essere uno o più elementi. Se trovi difficile determinarlo, apri gli strumenti di sviluppo del browser: utilizzando la visualizzazione del modello a blocchi, trova l'elemento che non si adatta alle dimensioni dello schermo.

Per risolvere questo problema, rimuovi i frame fissi scrivendo negli stili del modello:

Schermata solo @media e (larghezza massima: 1000px) (

Navigazione (larghezza: 100%; )

Ora, se la larghezza dello schermo dell'utente è inferiore a 1000 px, la larghezza del menu sarà pari al 100% della sua dimensione. La versione principale del modello è la stessa di prima. La sostituzione della proprietà ha rimosso la barra di scorrimento inferiore durante la riduzione dello schermo.

Ma i blocchi sembrano ancora dubbi: cambiamo la loro visualizzazione, aumentando la larghezza in percentuale fino alla dimensione richiesta.

Aggiungiamo alla stessa mediaquery:

Blocco (larghezza: 35%;)

Come scoprire le dimensioni ottimali per i blocchi del tuo sito? Calcola manualmente o prendi come base qualsiasi griglia già pronta: griglia fluida. Puoi concentrarti sugli standard esistenti: nei layout a due colonne con una larghezza della finestra di 980-1050 px, il wrapper viene considerato al 95%, il contenuto al 60% e il 30% viene lasciato alla barra laterale. Lo spazio rimanente viene utilizzato per formare bordi e margini per l'ordine.

Puoi comunque utilizzare il box-sizing del contenuto in modo da non calcolare ogni volta i pixel, ma lavorare in base alle dimensioni complessive.

Passiamo all'impostazione della visualizzazione su schermi con risoluzione inferiore:

Schermata solo @media e (larghezza massima: 600px) (

Blocca (

Galleggiante: nessuno;

Larghezza:85%;

Margine: 1em automatico;

Se lo schermo è inferiore a 600 px, i nostri blocchi dovrebbero adattarsi a una colonna: rimuovi gli involucri, imposta nuovi rientri, centra e modifica la larghezza. Molto spesso è impostato al 100%, ma se per qualche motivo ciò risulta scomodo, impostiamo la nostra dimensione.

In questo modo puoi impostare non solo le dimensioni dei blocchi di contenuto, ma anche la loro visualizzazione. Ad esempio, vietare la visualizzazione di elementi di grandi dimensioni, sostituendoli con altri convenienti.

Dimostriamo le possibilità utilizzando l'esempio della modifica dei colori e dei display.

La versione per smartphone nasconde il menu principale e colora il blocco di blu, mentre lo schermo più grande mostra il design senza queste modifiche.

Nella maggior parte dei casi è necessario nascondere la navigazione: viene sostituita con un pulsante. È più appropriato farlo utilizzando Javascript, puoi utilizzare soluzioni già pronte.

Le modifiche vengono apportate in modo puntuale, l'intervallo può essere limitato sia sopra che sotto. È veloce e conveniente: in una riga specifichi CSS separato per diversi dispositivi senza influenzare la visualizzazione principale del sito.

Puoi dichiarare le regole @media ovunque all'interno di un foglio di stile esistente oppure crearne uno separato per queste dichiarazioni e quindi importarlo nel CSS principale utilizzando la regola @import.

Versione mobile del sito: come fare e a cosa prestare attenzione

MediaQuery è compreso da tutti i browser moderni, ma non funzionerà in IE 8 e versioni precedenti. Il problema viene risolto ricorrendo agli IE più vecchi utilizzando commenti condizionali. Devono essere scritti nel codice del modello, non nel CSS.

Lo script stesso è disponibile su GitHub (https://github.com/scottjehl/Respond), aggiunge il supporto per dimensioni minime e massime e query multimediali al vecchio IE.

Un altro problema è che il responsive design prevede l'utilizzo di Html5, che risulta ancora incomprensibile per i browser più vecchi. Trattato con hack:

Document.createElement("intestazione");

Document.createElement("nav");

Document.createElement("sezione");

Document.createElement("articolo");

Document.createElement("a parte");

Document.createElement("footer");

Il codice è scritto in html; inoltre la visualizzazione a blocchi degli elementi creati è impostata in CSS:

intestazione, navigazione, sezione, articolo, parte, piè di pagina (display:block;)

Tocchiamo immediatamente la domanda: come assicurarsi che alcuni script vengano visualizzati solo con i parametri dello schermo specificati. Se usi jquery, dovrai aggiungere un semplice script al codice del modello. I numeri cambiano in quelli richiesti. Si legge così: se la larghezza della finestra supera i 980 pixel, alla pagina viene applicato lo script specificato nel percorso. È possibile specificarne diversi, la sintassi è scritta per analogia utilizzando un punto e virgola tra parentesi graffe.

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

$.getScript("percorso dello script");

Un altro punto è come il browser mobile dell’iPhone dovrebbe elaborare il contenuto trasmesso e se è consentito il suo aumento. Per fare ciò, viene scritta in testa una scala iniziale:

Resta solo da verificare la correttezza: per questo puoi utilizzare il tuo browser e telefono o rivolgerti ai servizi.

Se il sito viene riprogettato server locale, la correttezza può essere determinata in ami.responsivedesign.is . Per una corretta visualizzazione, i proprietari di Denver dovranno modificare la codifica in utf-8 modificando il file httpd.conf del server.

Il servizio dimostrerà come appare il progetto su diversi dispositivi.

Inoltre, il modello viene testato https://developers.google.com/speed/pagespeed/insights/ o in un modulo speciale https://www.google.com/webmasters/tools/mobile-friendly, nonché nei webmaster .

In Yandex questo sembra dettagliato, ma Google segnalerà semplicemente che non ci sono problemi.

Se tutto è fatto correttamente non ci saranno elementi di scorrimento o inutili. La versione mobile è pronta e ora hai imparato come realizzarla da solo. Se il materiale ti è stato utile, metti mi piace e iscriviti alla newsletter del blog. Ti auguro il meglio.

Di seguito, facendo clic su uno dei pulsanti, puoi scaricare 2 esempi della pagina piegata in questa lezione e lavorare semplicemente con le pagine finite e copiare il codice.

Cordiali saluti, Galiulin Ruslan.

In questo post parleremo di un template mobile per Wordpress. Il template è molto bello, funzionale, con un'ottima usabilità e pensato appositamente per piattaforme mobile e tablet.

Il modello dispone di un comodo menu che può essere configurato in bianco e nero o scegliere una combinazione di colori diversa per la visualizzazione. Il template è realizzato per il motore Wordpress comprensivo di tutte le pagine necessarie ed è completo nel suo assemblaggio.

In questo caso, abbiamo davanti a noi un tipico modello di blog mobile. Date le dinamiche della transizione dai dispositivi computer desktop alle loro incarnazioni mobili, dovresti fare un piccolo sforzo per aumentare l'impatto dei tuoi blog nell'ambiente Internet mobile.

Interessante sotto tutti gli aspetti, il modello mobile Dot Mobi troverà molte applicazioni nei tuoi progetti Internet. Design fresco, layout professionale, leggerezza ed eccellente usabilità troveranno molti sostenitori con cui lavorare con il modello per un sito mobile subito dopo il download.

Questo è uno di quei design di siti mobili da cui non vuoi separarti e che conservi per i tuoi siti. Tuttavia, questo non sarà il caso e sarà in contrasto con il principio di presentazione delle informazioni sul sito. Pertanto, prendilo.