19 dei migliori esempi di progettazione di siti Web mobili

Ognuno ha la sua mappa preferita o le indicazioni stradali. Il mio è Google Maps, che utilizzo sia che io stia camminando, guidando, andando in bicicletta o prendendo i mezzi pubblici. La particolarità del loro sito web mobile è che è praticamente indistinguibile dalla loro app mobile scaricabile.

Le schermate sottostanti sono prese dal loro sito web mobile, ma se sei familiare con l'app, noterai che appaiono esattamente lo stesso. Non solo l'aspetto è identico, ma il sito web mobile ha la velocità e la funzionalità dell'app.

Typeform è un'azienda tecnologica con sede a Barcellona con una missione semplice: "creare forme fantastiche". Il loro sito Web desktop è davvero ben progettato, accoglie i visitatori con una copia succinta, video ad alta definizione, animazioni pertinenti e altri componenti di progettazione più complessi.

Prendi nota dei pulsanti grandi sulla loro pagina del menu – perfetta per toccare con il dito su uno schermo mobile.

4. Etsy

Etsy è un sito di e-commerce in cui le persone possono acquistare e vendere oggetti vintage o fatti a mano. La maggior parte degli acquirenti che visitano il sito Web di Etsy sono lì per fare una delle due cose: O stanno cercando un elemento specifico, o stanno sfogliando gli oggetti nelle categorie che li interessano.

Il sito web mobile si rivolge a entrambi i tipi di visitatori fin dall'inizio. Quando si accede al proprio sito Web per dispositivi mobili, viene visualizzata l'opzione per cercare articoli, negozi o categorie specifici.

Immediatamente sotto la barra di ricerca ci sono le immagini in miniatura degli oggetti di tendenza che mostrano alcune delle cose più popolari che puoi comprare su Etsy. Gli utenti mobili possono visualizzare questi elementi di tendenza in un formato collage e le immagini sono abbastanza grandi da poter essere toccati facilmente con un dito.

Questo è il sito personale di Adrian Zumbrunnen, un designer, scrittore e oratore di UX. Quando visiti il ​​suo sito web, noterai subito che c'è qualcosa di veramente unico al riguardo: è a discorsivo sito web.

Sembra quasi una conversazione di messaggi di testo che avresti normalmente sul tuo telefono, compresi i puntini di sospensione per mostrare che sta "digitando". Agli utenti vengono fornite due opzioni di risposta alla fine di ogni scambio, quindi è un po 'come un'esperienza di "scegliere la propria avventura".

Mentre l'esperienza mobile e desktop sono molto simili, il sito web desktop sembra essere stato realizzato principalmente per i dispositivi mobili, il che potrebbe essere la direzione in cui i siti andranno in futuro.

E se preferisci non impegnarti nello scambio di conversazione, puoi semplicemente scorrere verso il basso per i dettagli.

Elf on the Shelf è, relativamente parlando, una tradizione natalizia abbastanza nuova basata su un libro per bambini. Se non ti è familiare, la premessa di base è questa: il libro racconta la storia degli elfi di Babbo Natale, che vengono inviati da Babbo Natale per sorvegliare i bambini nelle loro case in tutto il mondo e riportare a Santa.

Insieme al libro, i genitori possono acquistare una statuetta di elfo, che metteranno sottilmente da qualche parte nella loro casa dove i bambini potranno vederla. Ogni notte fino a Natale, i genitori spostano l'elfo in una posizione diversa intorno alla loro casa per "dimostrare" ai loro figli che gli elfi scout sono reali e li osservano sempre.

Quando arrivi sul sito di Elf sul sito di Shelf, vedrai che ci sono in realtà numerosi tipi di Elf sui prodotti Shelf che puoi acquistare. Ma invece di obbligare gli utenti a scorrere individualmente ogni prodotto, i web designer confezionano ciascun prodotto in una tessera ampia e invitante che descrive l'obiettivo del viaggio di ciascun acquirente, con l'elemento in primo piano visualizzato sul lato anteriore.

Non stai comprando il tuo elfo o cucciolo – sei tu l'adozione esso. È un'esperienza davvero potente su un piccolo schermo.

BuzzFeed è una società di notizie nota per i suoi contenuti virali e quiz popolari. Capita anche di essere una delle mie fonti preferite di intrattenimento durante il mio tragitto da e per lavoro.

E dove pensi che sto controllando BuzzFeed durante il mio tragitto? Hai indovinato: sul mio telefono. BuzzFeed sa che molti dei loro visitatori visitano il loro sito su dispositivi mobili, quindi hanno fatto molta attenzione a creare un'esperienza fluida per i loro lettori in movimento.

Quando arrivi al sito web mobile di BuzzFeed, la prima cosa che vedrai sono alcuni dei loro contenuti più popolari visualizzati in un semplice formato simile a collage utilizzando immagini di grandi dimensioni che sono facili da toccare con il dito.

Per gli utenti interessati a categorie specifiche, c'è un menu cliccabile nell'angolo in alto a sinistra dello schermo che elenca tutte le categorie di post.

Evernote è un'applicazione che ti consente di memorizzare note, immagini e articoli web per poi accedervi su tutti i tuoi dispositivi. Poiché gli utenti tendono a scaricare l'app o ad accedere al sito Web su più dispositivi, inclusi computer desktop, smartphone e tablet, è essenziale che Evernote ottenga l'esperienza mobile giusta.

Se guardi la homepage di Evernote sul tuo computer desktop, noterai quanto è pulito il design. Le dichiarazioni di valore sono brevi e to-the-point, e la grafica si aggiunge al posizionamento del marchio ma non ingombra la pagina.

Quando guardi il sito web mobile di Evernote, puoi vedere che hanno mantenuto intatti il ​​loro palato dei colori e lo stile generale del marchio. Il sito web mobile dell'azienda è pulito, semplice e non toglie nulla al valore dell'app. Il percorso di conversione di Evernote è evidente dall'invito all'azione centrato: "Registrati gratuitamente".

L'Huffington Post è una nota fonte di notizie che riporta di tutto, dalla politica e gli eventi attuali, all'intrattenimento e alla tecnologia. Ciò che rende unico il loro sito mobile è che in realtà alterano leggermente i titoli degli utenti di dispositivi mobili in modo che il loro contenuto sia più facilmente analizzabile.

Se confronti i siti web desktop o mobili, noterai che il sito web mobile ha meno parole sulla home page. I titoli sono più brevi e molto più digeribili, perfetti per qualcuno che sfiora o legge su un piccolo schermo.

Come con BuzzFeed, troverai un menu cliccabile nell'angolo in alto a sinistra dello schermo che elenca tutte le categorie di post.

Express è un negozio di abbigliamento che si rivolge a giovani uomini e donne. Poiché il loro pubblico arriva spesso al loro sito web per sfogliare gli abiti, è importante che il loro sito includa immagini grandi e chiare dei loro vestiti, specialmente sui dispositivi mobili, quando gli utenti devono toccare gli elementi sullo schermo con le dita per fare clic per informazioni sull'acquisto

Express porta la propria esperienza mobile ad un passo in più rispetto alla maggior parte dei siti di vendita online. Se fai scorrere il dito da sinistra a destra su un'immagine che mostra un capo di abbigliamento, l'immagine cambierà in modo da poter vedere gli abiti in una vista diversa. In altre parole, gli utenti non devono caricare un'altra pagina per vedere più immagini dello stesso articolo di abbigliamento.

Guarda l'immagine in alto a destra nelle seguenti due immagini per vedere come cambia quando scorri da un lato:

Nationwide Insurance fornisce servizi assicurativi e finanziari. Si potrebbe pensare che una società finanziaria abbia un sito Web davvero complicato, ma su dispositivi mobili, Nationwide Insurance riduce la semplice esperienza dell'utente.

Quando arrivi sul sito mobile di Nationwide, vedrai due schede in alto che ti consentono di identificare immediatamente uno dei due tipi di utenti per personalizzare la tua esperienza: personale o aziendale. In alternativa, puoi "Trovare un agente" o "Trova un consulente finanziario" per ulteriori informazioni sui loro servizi.

Sebbene limitare l'esperienza a queste due opzioni escluda le funzionalità più approfondite di Nationwide, rende molto più facile l'esperienza per i visitatori che utilizzano schermi piccoli. Questa è una grande tecnica per guidare i potenziali clienti nella giusta direzione se non sono ancora titolari di account e stanno visitando il sito Web per la prima volta.

Ciò che mi colpisce di più sono le combinazioni di colori visivamente piacevoli e la trama tridimensionale alla loro homepage – così come i grandi punti cliccabili al centro di ogni sezione a cui è possibile scorrere.

These dots are animated call-to-action buttons, and the tapping the ones below the home screen will produce a pop-out page with more information on Squaredot's approach to marketing.

13. Zappos

Zappos is an online vendor for shoes and clothing known for their stellar customer service. Their top priority on mobile is to help users search easily for the items they're looking for on their website, so they've put a large search bar at both the top and bottom of their mobile website to make it super easy for them.

This is what the top of their mobile site looks like:

ABC is a television broadcasting company known for popular shows like "The Bachelorette," "The Rookie," and "General Hospital." Users visiting ABC's desktop website are greeted with these options and more. View the network's television schedule, check out the most recent Emmy winners, watch some of your favorite television shows, or even look at entertainment news relating to those shows.

But because nearly every household today is a multi-screen household, ABC knows its experience on a mobile device should be both simple and ready for viewing.

When you visit the ABC website on a mobile device, you'll see a dark background for a theatre-like experience with tiles for each program you might want to stream. Users can scan through these options and click into any show they want based on genre, alphabetical order, what's popular, and similar categories you'd also find on your TV's streaming platform.

Notice how Lean Labs's mobile website uses scale, contrast, and typeface to distinguish certain elements of their page. You can even see the subtle photo of a mountain set to the website's background, eliciting the altezza your brand can reach as a Lean Labs customer.

And, as explained above, their core "10x" formula is clearly visible and broken down into easy steps for mobile users scrolling through the homepage, with relevant icons to match.

16. SAP

SAP is an enterprise software company that manages business operations and customer relations. The business enhances its mobile experience by condensing information, specifically into one important video case study, playable from the homepage on a mobile device.

SAP also combines some of their calls-to-action into sliders, whereas their desktop website has these CTAs laid out horizontally. This helps keep things simple so mobile users aren't overwhelmed with a lot of information at once, and it also ensures none of the CTAs are too small to read.

KISSmetrics provides analytics software for businesses. On their homepage, there's a lot of information explaining what the software does along with a testimonial.

But their mobile site is displayed a little differently: On a mobile device, the information on their site is shown in a list with alternative dark and light modules. This makes it easy for users to skim the page without getting lost in text.

They've also made the text and fields on their forms large and easy to read:

idig Marketing is a development and communications provider. Their mobile website is laid out similarly to their desktop website, but I especially liked how they incorporated the interactive heart icons into their blog posts so users can "Like" their posts.

This mimics the "Like" heart icon in Instagram and Twitter, which is easily recognizable for mobile users familiar with those platforms.

IndiaMART is the largest online B2B marketplace in India, and its simple category-based mobile store makes it one of the best mobile websites we've ever seen in the ecommerce industry.

The company's mobile homepage puts the search bar right at the top so you can always retreat to a custom search if browsing no longer suffices to find the item you're looking for.

But, IndiaMART makes it easy to peruse its digital aisles by sorting each item by item type, and then sub-types within each item type — a smart design move to encourage users to explore your site further. Under "Apparel & Garments," for example, you have easily clickable tiles to check out more specific categories of clothings, such as menswear, women's dresses, and even suits, sarees, and similar garb native to India.

Underneath IndiaMART's browsing tiles, the company has its own trending section specifically for merchandise people are paying most attention to — similar to a trending list of news on a social media platform. Each trending category has a mobile-friendly call-to-action button allowing users to get price quotes for the product they're interested in.

Want more information on how to optimize your business for mobile devices? Download the free kit on mobile marketing below.