Responsiewe ontwerp is al meer as 'n dekade standaardpraktyk, en byna elke besigheid sal jou vertel dat hul webwerf reageer. Wat hulle gewoonlik bedoel, is dat dit nie op 'n foon breek nie.
Om nie te breek nie en goed te werk is verskillende standaarde, en die gaping tussen hulle kos regte geld.
Die toestel verdeel
Vir die meeste diens- en verbruikersondernemings maak selfoon meer as die helfte van die verkeer uit - dikwels aansienlik meer. Tog ontwerp die meeste spanne steeds op 'n groot lessenaarmonitor, hersien op 'n groot lessenaarmonitor en teken af op 'n groot lessenaarmonitor.
Dit lewer 'n webwerf wat by die minderheid besoekers pas en die meerderheid tekortkom.
Waar mobiele omskakeling eintlik breek
Raak teikens aan wat te klein is
Vingers is onakkuraat. Interaktiewe elemente kleiner as ongeveer 44 by 44 piksels produseer verkeerde tik, en verkeerde tik produseer frustrasie. Dit verskyn die skadelikste in navigasie-spyskaarte, vormvelde en betaalknoppies – presies die elemente waarmee jy nie mense kan bekostig om mee te sukkel nie.
Skakels wat te naby aan mekaar sit, veroorsaak 'n verwante probleem: mense tik die verkeerde een, gaan terug, en sommige van hulle gaan eenvoudig.
Vorms ontwerp vir sleutelborde
Vorms is die enkele mees algemene plek waar mobiele omskakeling verlore gaan. Elke veld is meer moeite op 'n foon as op 'n lessenaar, en moeite kom saam.
Praktiese regstellings: verwyder elke veld wat jy nie werklik nodig het nie, gebruik toepaslike invoertipes sodat die korrekte sleutelbord verskyn, aktiveer outovul met behoorlike outovoltooi-kenmerke, valideer inlyn eerder as wanneer dit ingedien word, en moet nooit 'n vorm uitvee as dit fout is nie.
As jy 'n telefoonnommer, 'n maatskappy se naam en 'n postitel op 'n aanvanklike navraagvorm vra, verhandel jy omskakelingskoers vir data wat jy waarskynlik nie sal gebruik nie.
Inhoud versteek om die uitleg te vereenvoudig
'n Algemene kortpad is om sekondêre inhoud op kleiner skerms te versteek om die uitleg skoon te hou. Die probleem is dat die verborge inhoud dikwels is wat 'n huiwerige koper nodig gehad het - pryse, afleweringsinligting, spesifikasies, gerusstelling.
Inhoudpariteit maak saak. As inligting iemand help om op rekenaar te besluit, help dit hulle om op selfoon te besluit. Herorganiseer dit, vou dit in 'n trekklavier in, maar moenie dit verwyder nie.
Prestasie op regte netwerke
Mobiele werkverrigting gaan nie net oor lêergrootte nie. Fone het minder verwerkingskrag, en mobiele netwerke het hoër latensie en veranderlike bandwydte. 'n Bladsy wat binne een sekonde op kantoor-wifi laai, kan agt neem op 'n mobiele verbinding in 'n gebou met swak sein.
JavaScript is besonder duur hier, want dit moet afgelaai, ontleed en uitgevoer word - en ontleding is CPU-gebonde, dit is waar fone die swakste is relatief tot rekenaars.
Duimbereik
Mense hou fone op spesifieke maniere vas, en die gemaklike bereiksone vir 'n duim is die onderste en middelste gedeelte van die skerm. Primêre handelinge wat boaan 'n lang bladsy geplaas word, of in 'n hoek regs bo, is meetbaar moeiliker om op groter fone te bereik.
Dit is hoekom taai onderste strepies vir primêre oproepe tot aksie goed op selfoon werk. Dit is nie 'n neiging nie. Dit volg uit hoe 'n hand die toestel vashou.
Toets op regte toestelle
Die grootte van 'n lessenaarblaaiervenster is nuttig om uitlegbreekpunte na te gaan en niks anders nie. Dit kan nie vir jou aanraakakkuraatheid, duimbereik, hoe die sleutelbord op die skerm die veld waarin jy tik, verberg, of hoe die bladsy op 'n middelafstand Android-foon optree met 'n stadige verbinding nie.
Toets op 'n regte toestel, ideaal 'n onmerkwaardige middelslag een eerder as die nuutste vlagskip. Dit is nader aan wat die meeste van jou besoekers gebruik.
Mobile-first is 'n werkmetode
Om mobiele eerste te ontwerp gaan nie daaroor om die mobiele weergawe beter te maak ten koste van rekenaar nie. Dit is 'n beperking wat prioritisering afdwing - met beperkte skermspasie moet jy besluit wat werklik saak maak, en daardie dissipline is geneig om ook die rekenaarweergawe te verbeter.
Om met die klein skerm te begin en opwaarts te verbeter, lewer duideliker hiërargie as om groot te begin en af te sny. Ons bou op hierdie manier as standaard op elke webontwerpprojek, en die omskakeling verskil is gewoonlik sigbaar in die eerste maand na bekendstelling.
Responsiewe uitleg is net die helfte van die werk: sien hoe 'n omskakelingsgerigte webwerf homself terugbetaal, of lees ons gereelde vrae oor webontwerp oor tydlyne en eienaarskap.
Wil jy dit vir jou hanteer?
Ons bou en optimaliseer webwerwe soos hierdie elke week. Bespreek 'n gratis 30-minuut-oproep en ons sal jou presies vertel wat ons aan joune sal verander.
Kry 'n gratis werfoorsig