Selvom antallet af websteder uden mobiloptimering er faldende, er der stadig nogle, der kun er designet til desktop. Desværre er Googles tidligere 'mobilizer' -webservice afbrudt. Tjenestens åndelige efterfølger er Google Weblight, designet til optimering til langsomme forbindelser frem for at revidere websteder til mobilvisning. Ud over Googles service er der en række praksis og værktøjer, der skal overvejes, når man udvikler et websted med mobil i tankerne.
Trin
Del 1 af 2: Eksperimentering med Google Weblight
Trin 1. Analyser, hvordan Weblight fungerer
Weblight er en algoritme, der er skabt af Google for at give brugerne hurtigere og lettere sideindlæsning, når de er i dårlige netværksforhold. Det betyder, at Weblight ikke har nogen brugergrænseflade og fungerer på backend. Sider er frataget deres mere komplekse elementer, hvilket giver en afskalet, let oplevelse frem for en eksplicit optimeret til mobilplatformen.
Trin 2. Test webstedets ændringer med Weblight
På din mobilenhed skal du blot tilføje din fulde webadresse til slutningen af weblight -adressen (f.eks. Hvis dit websted er "mywebsite.com", så indtaster du https://googleweblight.com/?lite_url=https://mywebsite.com). Siden indlæser en forenklet, men funktionel version af sig selv. Med de fjernede elementer kan nogle websteder se meget bedre ud på skærme på mobilenheder.
Trin 3. Anerkend begrænsningerne
Husk, at dette ikke er et eksplicit konverteringsværktøj designet til brugerinteraktion. Mens manuelt indtastning af webstedet kan bruges i klemme, er Weblight designet til hastighed, ikke brugervenlighed.
Del 2 af 2: Design til mobil kompatibilitet
Trin 1. Husk begrænsninger på mobilenheden
Mobilenheder deler et par aspekter, der adskiller dem fra deres desktop -kolleger. Disse kerneegenskaber bør være de vigtigste overvejelser, når du opretter et websted til mobilforbrug.
- Små skærme og lodrethed: Selvom skærmopløsninger på mobile enheder konstant forbedres, er størrelsen og formfaktoren stadig en bekymring for sitedesign. At designe et websted i et enkelt kolonne -layout er bedst til telefoner (tablets kan ofte bruge desktop -websteder uden for meget problem).
- Berøringsgrænseflader: Sideelementer skal placeres med en fingerstørrelse i tankerne. Elementer, der anvender mouseover, bør minimeres eller redesignes til berøring (f.eks. Rullemenuer).
- Datahastigheder: En af de store fordele ved mobile enheder er brug uden for wifi -område, men dataforbindelser er typisk langsommere og mindre pålidelige. Brugergrænseflader (UI) skal forblive enkle, og indholdet skal være synligt og tilgængeligt. For meget rod vil ødelægge lastetider og gøre navigation vanskelig.
Trin 2. Brug en Content Management System (CMS) -tjeneste
For dem, der udvikler med færre ressourcer, er brug af en CMS-service som Wordpress eller Squarespace en god mulighed for billigt, brugervenligt mobildesign. Temaer, der anvender responsivt webdesign, giver den nemmeste skabelon til et mobilwebsted.
Responsivt webdesign er en teori om webdesign, der fremmer brugen af flydende designelementer for at muliggøre glatte overgange af design og brugervenlighed på tværs af platforme
Trin 3. Test skærme på mobilenheder ved hjælp af desktop -software
Der er en række gratis webapplikationer, der giver dig mulighed for at efterligne mobile enheder for at teste webstedets æstetik og funktionalitet. Det er lige så nemt at bruge disse værktøjer som at vælge den ønskede testenhed og derefter gå ind på målwebstedet for at få en forhåndsvisning. De fleste vil indeholde værktøjer til variabler som skærmretning, pixeltæthed eller endda browservalg. Et par populære eksempler er:
- Chrome Device Mode -emulator
- mobilephoneemulator.com
- screenfly (en delmængde af quirktools)
- mobiletest.me (betalt medlemskab)
