Mobile Web Design Cheat Sheet

Als je begint te denken over de beste manier om de mobiele versie (of versies) van uw website te ontwerpen, rekening houden met de unieke uitdagingen van het mobiele web. Hier zijn een aantal belangrijke overwegingen om in gedachten te houden als je het ontwerpen van websites voor het mobiele web:

  • Zorg ervoor dat uw ontwerp past op kleine schermen.
  • Beperk afbeeldingen en tekst, zodat pagina's laden snel, zelfs bij langzame verbindingen snelheden.
  • Maak links en andere navigatie-opties die gemakkelijk aan te klikken met een (dikke) vinger, stylus, of andere beperkte invoeropties zijn.
  • Uw bezoekers hebben een dringende behoefte aan informatie. Veel mensen wenden tot het mobiele web, omdat ze moeten. Uw bezoekers kunnen verloren gaan, te laat, of het echt nodig om te weten wie de Super Bowl in 1987 won een bar weddenschap te winnen.
  • Tijd en plaats materie. Dona € ™ t vergeet dat uw gebruikers toegang hebben tot meer dan alleen uw website en dat hun acties zijn die kunnen worden beïnvloed door de plaats waar ze zijn, wat tijd van de dag, en zelfs of ita € ™ s regent.

Kies een Mobile Web Design Strategy

Uw benadering van het ontwerpen van een mobiele website is afhankelijk van inhoud van uw site, uw middelen, en uw publiek. De volgende tips kunnen u helpen de mogelijke mobiele Web design strategieën begrijpen en kies er een die werkt voor u:

  • Maak een eenvoudige versie van uw site: Deze strategie zorgt ervoor dat het grootste aantal bezoekers naar uw site in ieder geval de meest belangrijke informatie op uw site kunt krijgen (zoals uw telefoonnummer wanneer theyâ € ™ re op hun weg naar uw kantoor). Zorg ervoor dat het ontwerp werkt zelfs op low-end mobiele apparaten en de link naar het van uw desktop website. De website http://mobilynx.net, getoond in de figuur, is ontworpen om te werken aan een verscheidenheid aan mobiele apparaten en biedt een georganiseerde verzameling links naar andere sites die ontworpen zijn voor het mobiele web.

    Mobile Web Design Cheat Sheet

  • Ontwerpen meerdere versies: Veel ontwerpers creëren van verschillende versies van een website en vervolgens automatisch bezoekers naar de versie die het best is geoptimaliseerd voor de grootte van het scherm en de functies die door hun telefoon of apparaten.

    Als je de tijd hebt, expertise, of budget, het ontwerpen van verschillende versies van uw website, elk geoptimaliseerd voor de verschillende maten en mogelijkheden van verschillende apparaten, is de beste strategie.

  • Gebruik inhoud aanpassing: Kortom, u een website ontwerp te maken en vervolgens aan te passen aan elk apparaat. Dus de basisstructuur van de site hetzelfde voor alle apparaten, maar specifieke elementen zoals beeldgrootte of de weergave van video wijzigen op basis van wat het apparaat kan ondersteunen.

    Wanneer u een site te ontwikkelen met behulp van de inhoud aanpassing aanpak, ita € ™ s een goede gewoonte om te beginnen door het creëren van een wireframe, een soort blauwdruk van uw website design, zoals weergegeven in de figuur

    Mobile Web Design Cheat Sheet

  • Ontwerp van een high-end versie: Dit werkt als u weet dat uw bezoekers voornamelijk gebruik van een high-end iPhone of Droid, de naam die wordt gebruikt voor telefoons die draaien op Googleâ € ™ s Android besturingssysteem. Jasper Johalâ € ™ s fotografie website, getoond in de figuur, ziet er goed uit op een iPhone en een desktop computer.

    Mobile Web Design Cheat Sheet

Gebruik Location-Based zoekmachines voor Mobiel

Mobiel zoeken is steeds de volgende grote hyper-competitieve slagveld. Alle usual suspects zijn er al, slugging het uit voor het marktaandeel, maar ook andere, meer gespecialiseerde, locatie-gebaseerde mobiele zoekmachines schieten er in de hoop van het uithakken van een niche voor zichzelf. Hier zijn enkele van de belangrijkste spelers:

  • AOL Mobile: http://wap.aol.com
  • Ask.com Mobiel: http://m.ask.com
  • Bing Mobile: http://m.bing.com
  • Find.Mobi: http://find.mobi
  • Google Mobile: www.google.com/m
  • Taptu: http://m.taptu.mobi
  • Yahoo! Mobile: http://m.yahoo.com