Share
È passato quasi un anno da quando il tablet di Apple, l'iPad, è stato diffuso tra la folla di adoranti amanti dei gadget. Steve Jobs ha recentemente fatto una visita molto apprezzata a San Francisco per svelare la seconda generazione di questo dispositivo in mezzo a una nave carica di tablet Android tra cui Motorola Xoom e Samsung Galaxy Tab. Questi dispositivi stanno diventando nelle mani di milioni di utenti e stanno rapidamente diventando dispositivi con un grande potenziale di navigazione.
In un precedente articolo qui su Webdesigntuts +, abbiamo discusso l'argomento della "nuova piega" e in che modo l'ondata di nuovi dispositivi (dai telefoni cellulari ai tablet alle HDTV) ha creato un buco nella nozione di un ambiente a schermo singolo che i web designer possono piano per.
Sul lato desktop / laptop del settore informatico (ovvero PC), i monitor hanno iniziato a diventare significativamente più grandi qualche anno fa? e il web design ha iniziato a riflettere questo nel 2009-2010 con grandi progetti di paesaggi, immagini di grande formato e ricchi sfondi strutturati. Possiamo chiamare questo movimento "scalare" il web design per il grande schermo.
Nota: Per gli scopi di questo articolo, faremo riferimento a tutti i computer desktop che hanno monitor dedicati (sai, quei grandi behemoth che siedono sui banchi delle persone) come PC. Sì, anche i computer desktop con marchio Apple verranno chiamati "PC" per la durata di questo articolo. Va bene, puoi respirare ora.
Dall'inizio del 2010, tuttavia, è iniziata anche la diversità degli schermi a ridimensionamento processi. I produttori di dispositivi hanno iniziato a lanciare una serie di nuove risoluzioni dello schermo nel mix, molte delle quali più piccole. Come abbiamo visto con trend quando i monitor sono diventati grandi, vediamo anche una tendenza simile per questi nuovi dispositivi più piccoli; In quanto tale, il web design è cambiato in modo significativo, le nuove dimensioni dello schermo con nuovi metodi di input stanno diventando radicalmente protagonisti delle forze trainanti dietro le tendenze del web design.
In questo articolo daremo un'occhiata ad alcuni importanti cambiamenti che i web designer hanno dovuto fare per ottenere la compatibilità con i tablet e come si può fare lo stesso. Daremo anche un'occhiata ad alcuni grandi esempi di questi siti amici "tablet".
Prendiamo uno degli evidenti punti di esperienza dell'utente fuori mano: quando si naviga su un touchscreen, si deve usare un dito. Quando si naviga su un computer, si può avere la precisione di un mouse.
La principale differenza nella progettazione di a esperienza utilizzabile per entrambe le piattaforme è proporzionale. La navigazione su un tablet deve essere più semplice e più grande rispetto a un PC? il che significa che i progettisti devono raggiungere quella "via di mezzo" (essere abbastanza grande da navigare facilmente su un tablet, ma non troppo grande da sembrare stupida su un computer) o avere un sito dedicato dedicato ai tablet che utilizza un foglio di stile diverso (e anche un diverso layout) del tutto.
La maggior parte degli utenti di PC ha una delle poche risoluzioni comuni sui monitor da circa 15 anni? - 24 ?. Alcuni hanno screeens molto più grandi, ma pochissimi sono più piccoli. L'iPad, in netto contrasto, ha un 9,7? schermo a una risoluzione di 1024x768 e la maggior parte dei tablet Android arriva a 7?.
Tuttavia, risoluzioni 1024px non sono estremamente rare per tablet o PC. La vera differenza che dobbiamo notare è la ?in ogni modo è la strada giusta? attitudine di compresse con accelerometri integrati. L'iPad gestisce questo cambiamento in modo discreto, ridimensionando i progetti a larghezza fissa per adattarli alla larghezza di 768 px o, naturalmente, riaggiustare quelli a larghezza di fluido per adattarli alle nuove dimensioni.
Tuttavia, il web designer medio ha un unico problema di non essere in grado di prevedere l'ambiente in cui qualcuno sta andando a vedere il proprio sito.
La domanda è: qual è la soluzione a questo problema? Metodi di progettazione adattivi sono la soluzione principale in quanto gli sviluppatori utilizzano CSS adattivo per mostrare solo se un dispositivo è di una determinata marca, browser o risoluzione.
Il problema è che non c'è solo una risoluzione aggiuntiva aggiunta nel mix? C'è una pletora di loro. I metodi adattivi CSS / JavaScript funzionano bene per alcuni dispositivi, ma è un metodo ingombrante che dubito che la maggior parte degli sviluppatori vorrebbe utilizzare. Voglio dire, vorresti progettare il tuo sito web venti volte prima del lancio per tutti i diversi dispositivi disponibili? So che non lo farei.
Di conseguenza, i layout fluidi molto probabilmente diventeranno anche più comuni, in quanto si adattano automaticamente alle nuove risoluzioni che vengono loro presentate senza l'ingombrante necessità di più fogli di stile.
Come abbiamo detto prima, gli accelerometri incorporati indicano che il display di una tavoletta non ha una risoluzione definita. Grazie alla modifica della risoluzione con poco sforzo e ai nuovi meccanismi di scorrimento inerziale, non esiste una piega definita.
Qual è la piega? La piega è fondamentalmente il punto di separazione tra ciò che l'utente può vedere e ciò che non può fare prima di scorrere. Questo era un termine portato dall'idea di giornale piegato ed è stato usato nel web design come definizione di visibilità. Gli utenti passano a giudicare ciò che possono vedere e quanto velocemente lo percepiscono.
Tuttavia, il problema è che ci sono troppi browser da considerare. Il grafico sottostante è stato utilizzato nell'articolo di Shaun Cronin sull'ovile per mostrare l'ampia gamma di risoluzioni utilizzate per visitare WebDesignTuts +. Come puoi vedere, ci sono più browser di quanti siano possibili da considerare in un normale flusso di lavoro e i dispositivi mobili hanno contribuito al numero.
Il problema sta nel fatto che la piega è adattabile su ogni dispositivo mentre il dispositivo ruota. È una storia molto simile a quella precedente su fluido e larghezza.
Probabilmente hai sentito: a Apple non piace Flash. Nessuno dei dispositivi Apple dotati di iOS ha Adobe Flash integrato, né è possibile installarlo. Ciò significa che parti del web sono semplicemente incompatibili con un iPad.
Va detto che l'uso corrente dei siti Web Flash è raro al giorno d'oggi, ma gli elementi del sito Web utilizzano ancora lo standard. Un sacco di video su siti web semi-popolari, ad esempio, non è disponibile su iPad. Tuttavia, i siti di video più popolari come YouTube stanno lentamente integrando HTML5. Questa è la soluzione preferita di Apple per Adobe Flash. La quinta revisione di HTML offre una selezione di nuovi elementi che possono essere offerti come alternative agli usi fondamentali di Flash, come la distribuzione di video e audio. E grazie all'implementazione da siti come YouTube e CNET, è chiaro che questa transizione sta accadendo.
La maggior parte delle persone potrebbe scrollarsela di dosso perché non necessario. Ma dopo che è passato solo un anno in mani pubbliche, l'iPad ha già raccolto una grande quota di mercato di navigazione, quindi sta diventando quasi più importante che considerare gli utenti di IE 6.
?È quasi come se il ridimensionamento non fosse importante sui tablet.?
iPad esegue il browser Safari basato su webkit, in una forma mobile. Come discusso nella sezione precedente, Safari per iPad è molto conforme a HTML5 ma si riduce a poche aree. La tipografia è una cosa come se l'iPad supporta il rendering SVG, non supporta altri servizi di rendering del testo che utilizzavano Adobe Flash o persino Cufon.
Le pseudo classi popolari non possono essere utilizzate per creare effetti come il passaggio del mouse sui collegamenti a causa della mancanza di cursore.
L'iPad, tuttavia, abbatte le barriere tra utente e contenuto mentre lo zoom in entrata e in uscita è molto più semplice. È quasi come se il ridimensionamento non fosse importante sui tablet.
Dì addio alle app Web: Spostiamoci per un momento dall'esempio specifico dell'iPad. Invece, guardiamo l'immagine più grande. Ci sono centinaia di migliaia di app su App Store con oltre 65.000 di esse specifiche per iPad. Un numero di app in continua crescita è disponibile sul mercato Android (molte delle quali sono app di copia-gatto dalle versioni di iApp). Mentre è ovvio che non ci sarà un declino dei siti web, molto probabilmente potrebbe esserci un declino app web-based in cambio di app che risiedono esclusivamente su un dispositivo.
Cosa significa questo? Significa che l'app web che hai usato una volta navigando su un determinato sito Web probabilmente sparirà o diventerà ridondante, nel luogo in cui si trova un'app effettiva sul tuo dispositivo. Il tuo browser cesserà di essere il modo principale di accesso alle informazioni.
Dì addio all'interfaccia utente mouse-centrica: Probabilmente ci sarà un passaggio da una navigazione di precisione verticale a tipi casual e rilassati. Tutte quelle app Web che richiedono la precisione di un cursore vengono sostituite da controparti native che funzionano molto più agevolmente su un tablet. Ma per i marchi più piccoli, c'è una maggiore possibilità che ridisegnino la loro app web per adattarsi meglio alle dimensioni di un tablet.
I tablet stanno introducendo una nuova categoria di dispositivi per i web designer da considerare. Alcuni stanno solo recuperando l'aumento della navigazione da smartphone e ora hanno cinque o sei nuove risoluzioni da considerare. I browser di questi dispositivi sono sicuramente da considerare e la mia previsione è che, in un anno o due, i siti non avranno una versione per iPad ma vedremo invece siti universali come facciamo noi.
Dì ciao all'interfaccia utente App-Centric: Non dirò che il dito sarà il nuovo fattore di guida in tutto il web design perché, beh, i mouse (topi?) Non andranno da nessuna parte in qualsiasi momento presto. Certo, in una generazione o due potremmo controllare tutti i siti web con le dita, i bulbi oculari e persino le onde cerebrali? ma fino ad allora, il mouse / cursore resterà lo strumento principale che la maggior parte delle persone interagisce con i siti web.
Quello che dirò invece è che i siti web inizieranno ad assorbire sempre più l'influenza del design dal design delle app: questo significa pulsanti più grandi, tipografia più grande, uso significativo di sfumature e trame e layout meno complicati. Senza ulteriori indugi, diamo un'occhiata agli elementi principali dei design efficaci dei tablet:
La maggior parte dei punti principali che andremo a descrivere qui può essere riassunta in una brillante affermazione:
Se il web design è Lego, il design di iPad deve essere Duplo
- Oliver Reichenstein
Se hai mai giocato con Lego (e quale web designer non ha ?!), questo messaggio è sicuro di colpire casa. Progettare per tablet è un po 'come progettare la carta a griglia per i più piccoli che usano queste matite jumbo per disegnare immagini - il che vuol dire che vuoi mantenere la cosa semplice e GRANDE.
Piccolo tipo (e intendo il tipo di bitty che ci piaceva usare nel 2005) non è leggibile su un tablet. Certo, puoi ingrandire? ma se la lunghezza della linea è troppo lunga, il testo è ancora piuttosto difficile da leggere a meno che non si stia scorrendo ogni riga di testo.
Allo stesso modo, il testo grande può essere un turn-off anche sui tablet. Il testo troppo grande costringe gli utenti a scorrere più spesso di quanto potrebbe altrimenti necessitare. La risposta è un testo che è "giusto" come potrebbe dire Goldilocks. Questo non significa solo trovare la perfetta dimensione del font; Significa trovare la perfetta combinazione di font-face, dimensioni, line-height e line length.
Sono sicuro che saremo in grado di suddividerlo in un articolo completo in futuro, ma per ora la tua guida dovrebbe essere quella di creare uno schema tipografico facile da guardare e divertente da leggere.
Questo è ovvio, ma quelle piccole icone 16px per 16px non lo taglieranno su un tablet quando il dito medio può facilmente fare clic su uno spazio di circa 20px. Proprio come il tipo però, questo non significa che i pulsanti debbano essere ginormi per essere utilizzabili. I buoni pulsanti dovrebbero essere facili da premere con un dito, ma non dovrebbero far sentire i navigatori del PC come se stessero usando un mouse Playskool.
C'è stato un periodo a metà del 2000 in cui i designer hanno iniziato a utilizzare le trame solo perché potevano. Tutto va bene e bene, ma in realtà non è un punteggio elevato quando si tratta di usabilità.
Quindi quali sono significativo trame e sfumature? Per dirla semplicemente - sono effetti visivi che enfatizzano e supportano l'usabilità di un sito. Ad esempio, un pulsante potrebbe avere un gradiente sottile su di esso per farlo apparire "pressabile". Una trama di fondo potrebbe sembrare fibra di carbonio scura per far risaltare maggiormente il primo piano. Questo è un altro caso in cui potremmo scrivere un articolo completo su questo solo argomento, ma usare il buon senso. Se una trama o un gradiente non offre alcun valore significativo, probabilmente puoi sbarazzartene.
Starò attento a questo perché i layout "meno complicati" non significano meno colonne, meno varietà o griglie meno interessanti. Detto questo, se hai mai provato a utilizzare il sistema di backend di WordPress su un iPad, saprai esattamente di cosa sto parlando. I layout complicati richiedono all'utente di ingrandire costantemente particolari informazioni per poterlo leggere (molto meno usarlo).
Layout migliori significa un approccio più attento alla progettazione del tuo sito. Se il tuo sito non ha una miniatura per ogni post del blog, non preoccuparti di provare a forzare un layout guidato dall'immagine? e, viceversa, se il tuo sito utilizza molte immagini, utilizza un layout che integri quel lato del tuo contenuto piuttosto che cercare di inserire sempre un estratto di 40 parole accanto a ciascuna immagine.
Layout meno complicati significa liberarsi dei metadati non necessari che sono diventati i nostri siti al giorno d'oggi? invece di elencare il data, tag, categorie, icone dei social media, autore e qualsiasi altra cosa puoi pensare, basta fare più spazio per ciò che è veramente importante: il tuo contenuto principale!
Ora sappiamo cosa rende un sito ottimizzato per i tablet, diamo un'occhiata a una manciata di siti che hanno già fatto questo. I siti sottostanti funzionano perfettamente su un iPad, sia che si tratti del loro utilizzo in verticale o orizzontale, sia del loro uso di elementi HTML5.
Accentsconagua