Share
Quando i tablet e gli smartphone hanno iniziato a emergere, molti editori hanno sviluppato siti web distinti, o almeno alberi di codice HTML generati in modo distinto, per personalizzare l'esperienza per i visitatori su dispositivi diversi. Sicuramente sono emerse soluzioni per renderlo più semplice, come questo plugin per tema WordPress mobile:
Ma, per fornire una solida esperienza per i visitatori su tutti i dispositivi, la maggior parte dei progetti richiedeva sforzi di progettazione, di codifica e di test in duplice o triplice copia.
Il concetto di web design reattivo ha cercato di unificare la struttura del codice, eliminare le code fork e fornire un approccio più semplice per fornire un'esperienza utente di alta qualità su tutti i dispositivi. All'inizio, ha richiesto un po 'di sperimentazione e alcune competenze iniziali, ma oggi è diventato mainstream. È una testimonianza dell'orientamento attorno all'ingegneria di DRY.
Quando ho lanciato il mio sito WordPress personale, la scelta del responsive design è stata ancora un po 'trascurabile e molti siti sono stati eseguiti con diversi livelli di qualità per l'esperienza dei tuoi visitatori.
Il rilascio open source di Twitter di Bootstrap ha contribuito a trasformare enormemente la reattività nel web design. Probabilmente, come me, gestisci un tema reattivo sul tuo sito web e hai familiarità con i concetti generali della presentazione dinamica. Ma sai come funziona responsabilmente il web design sotto il cofano? Sai come costruire qualcosa di reattivo da zero? Vorresti saperne di più?
In questo tutorial ti stiamo incoraggiando a consultare l'ultimo white paper di Telerik sul responsive web design (RWD). Tecniche indispensabili per la creazione di app HTML5 per qualsiasi dimensione dello schermo, che puoi scaricare gratuitamente in questo momento, fornisce una guida estremamente dettagliata per rispondere a queste domande e aiutarti a raggiungere la velocità.
Ci sono molte ragioni per cui il responsive web design è passato dalla definizione di tendenza ad essere sinonimo di best practice web. È un modo rapido ed economico per offrire un'esperienza su misura agli utenti di desktop e dispositivi mobili. Puoi utilizzare il set di competenze esistente, avere una base di codice, un set di URL e una lingua di progettazione.
Il white paper ti insegna cosa devi sapere sulle pratiche web reattive in modo da poter creare app per qualsiasi dimensione dello schermo. Ti insegna come:
In questo tutorial, ti darò un breve riepilogo di ciò che offre il white paper. Inoltre, parteciperò alle discussioni di seguito. Se hai una domanda o un suggerimento sull'argomento, per favore pubblica un commento o twittami su @reifman o scrivimi direttamente via email.
Ecco alcune delle aree su cui il white paper ti insegnerà.
Le query multimediali fanno parte di CSS3 e sono ciò che rende possibile la progettazione di responsive web.
In sostanza, le query sui media aiutano il browser a comunicare ai condizionali nel codice CSS come personalizzare, nascondere o rivelare elementi di contenuto.
Ecco un esempio per la dimensione più piccola del dispositivo fino a uno con una larghezza maggiore di 768 px:
/ * Stile di base per dispositivi di piccole dimensioni di dimensioni ridotte * / .hero-text font-size: 22px; / * Per lo schermo grande e alto * / @media e (min-larghezza: 768px) .hero-text font-size: 48px;
Strutture popolari come Bootstrap, Foundation e Telerik RadPageLayout fanno ampio uso delle media query per creare i loro potenti sistemi di grid.
Utilizzando le query multimediali all'interno del tuo codice, puoi costruire fogli di stile con griglie che rispondono fluidamente ai dispositivi, regolando dinamicamente cosa e come il visitatore vede i tuoi contenuti in base al loro dispositivo e alla larghezza del loro browser.
La sintassi può variare tra i framework, ma il concetto generale è lo stesso. Ogni dimensione del dispositivo ha una query multimediale corrispondente e proprietà di stile che creano l'effetto di layout desiderato. Queste query multimediali sono indicate come punti di interruzione. Bootstrap identifica i punti di interruzione come xs (extra small), sm (small), md (med), lg (large). Questi si riferiscono alle dimensioni del dispositivo.
Ecco alcuni esempi di Bootstrap e ciò che potrebbero rendere come su dispositivi di dimensioni diverse:
In alto a sinistra ci sono piccoli dispositivi e tablet più piccoli, in alto a destra si trovano dispositivi di medie dimensioni. Più bassi sono i dispositivi e i desktop più grandi.
Un altro concetto comune è il contenitore di contenuto di base. L'elemento contenitore è l'elemento più esterno del layout. Il suo scopo è quello di creare uno spazio bianco tra il layout e il bordo della finestra del browser.
Il white paper mostra anche che il responsive web design indica al contenuto di espandersi o contrarsi in base alle dimensioni del display del visitatore:
Credo che la scelta degli standard sia incredibilmente importante nello sviluppo del software di successo. Aiuta le squadre a comunicare e consente alle nuove persone di arrivare rapidamente alla velocità. Rende le persone che assumono più facilmente la conoscenza delle loro competenze in tecnologie standard. Inoltre, l'aggiornamento per sicurezza, prestazioni e funzionalità è più facile nel tempo, soprattutto quando si utilizzano tecnologie open source.
La scelta di un framework standard nel responsive web design può fare una grande differenza per il successo o il fallimento del progetto. Il white paper di Telerik ti guida attraverso i pro ei contro di uno dei più popolari, Bootstrap:
Bootstrap offre le migliori caratteristiche di classe come una solida griglia reattiva, un primo design mobile, classi di helper CSS, componenti JavaScript adattivi e molto altro. La griglia è, per impostazione predefinita, una griglia di 12 colonne standard con una semplice sintassi per la creazione di layout che supportano più dimensioni dello schermo.
Il white paper evidenzia anche la Zurb Foundation. È un framework open source che si è evoluto da Bootstrap.
Foundation è dotato di funzionalità avanzate adatte a team con sviluppatori front-end esperti, in particolare quelli che usano Sass.
Il white paper si articola in una serie di argomenti avanzati:
Senza andare troppo lontano, offre alla maggior parte di noi un'introduzione molto dettagliata degli aspetti più importanti che è necessario conoscere.
Spero di averti incuriosito abbastanza da voler saperne di più. Come project manager che gestisce regolarmente persone con esperienza in questi argomenti, ho trovato che questa è una guida eccellente e facilmente comprensibile per il responsive web design e come funziona.
Vuoi immergerti? Visita la raccolta White Paper di Telerik e scarica le tecniche indispensabili per creare app HTML5 per qualsiasi dimensione dello schermo.
Questi framework reattivi sono punti di partenza importanti e includono componenti dell'interfaccia utente per avviare il progetto. I componenti di solito contengono le funzionalità di base necessarie per operare e costruire prototipi. Tuttavia, le tue applicazioni più avanzate e complete di funzionalità richiedono funzionalità di interfaccia utente più robuste. Presto, stai cercando una suite UI compatibile con responsive web.
L'interfaccia utente di Telerik Kendo è dotata di una griglia reattiva, di grafici, di pianificazione e di altri componenti che funzionano perfettamente con qualsiasi framework di progettazione web reattivo che stai utilizzando. È realizzato dal nostro sponsor che ha creato il white paper RWD sopra.
Voglio solo darti un rapido tour visivo di ciò che puoi aspettarti dall'interfaccia utente di Kendo:
Costruire controlli di griglia interattivi avanzati non è mai facile. L'interfaccia utente di Kendo fornisce una griglia potente e flessibile pronta all'uso:
C'è una vista programmata (o calendario):
L'interfaccia utente di Kendo include grafici incorporati:
E c'è un editor ricco di funzionalità e facilmente configurabile:
In effetti, c'è una libreria piena di altri 73 widget UI da aggiungere:
Fondamentalmente a questo punto, ci sono due cose da fare per voi:
Spero che tu sia affascinato da ciò che il whitepaper HTML5 di Telerik può offrire (e dal framework UI di Kendo). Non esitate a postare le vostre esperienze qui sotto, così come domande e commenti. Puoi anche twittare su me @reifman o mandarmi una email direttamente, e sfogliare la mia pagina di istruttori + istruttore Envato per vedere altri tutorial che ho scritto.
Accentsconagua