Een kijkje in ontwerpen voor mobiele apparaten

Toen de eerste iPhone werd uitgebracht, had het de technologische wereld stormenderhand nodig. Sindsdien is het bijna 5 jaar geleden en de smartphonemarkt is in populariteit gestegen, met zelfs Microsoft is in de competitie terechtgekomen met zijn Windows 7 OS en partners. Met zoveel internetgebruikers tegenwoordig op hun smartphone, is het logisch om te verwachten dat het aantal mobiele websites agressief zal toenemen.

Het ontwerpen voor het mobiele web is echter een geheel andere bewerking met een gemeenschappelijk webontwerp. Onze websites zijn ontworpen voor een groot scherm, maar de schermgrootte van de smartphone is veel te klein in vergelijking met die, wat leidt tot vervelende usability-problemen. Nieuwe ontwerpstandaarden en -praktijken zijn sterk vereist voor een beter ontwerp van mobiele sites met een soepele gebruikerservaring.

In deze gids zullen we een gebruiksvriendelijke site voor mobiele browsers voor smartphones ontwerpen. Ik zal het hebben over de best practices en nuttige ontwikkelaarstool voor u om een ​​betere mobiele website te ontwerpen, dus laten we er na de sprong in stappen!

Een sterke gebruikerservaring plannen

Wanneer u een mobiele website bouwt, is het belangrijk om dit te doen houd uw gebruikers te allen tijde in gedachten, omdat uiteindelijk uw website wordt ontworpen en gemaakt zodat gebruikers ervan kunnen genieten. Het is zeker gebruikelijk dat gebruikers verwachten dat een mobiele website zich op dezelfde manier als de desktopomgeving gedraagt, dus de gebruikerservaring vriendelijk houden moet uw belangrijkste focus zijn bij het bouwen van een succesvolle mobiele site.

Er zijn veel bruikbaarheidconcepten te overwegen voor uw gebruikers. Deze overwegingen omvatten scherm grootte, inline afbeeldingen, hyperlinks, lettergroottes, en paginanavigatie. We hebben geschreven over ontwerp van mobiele bruikbaarheid zodat u uw website kunt kerven voor betere bruikbaarheid. Naast de gids, moet je altijd blijf alert op nieuwe ideeën om uw site te verbeteren.

Het plannen van een sterke gebruikerservaring betekent ook dat u dat zou moeten doen overweeg hoe een gebruiker interactie zal hebben met uw website. Op een desktop kan uw website interactief zijn met een muis en een toetsenbord, maar op een smartphone zullen gebruikers dat wel zijn aftakking, flicking, en vegen hun weg rond uw site. U moet de site waarschijnlijk op de manier ontwerpen die de gebruikers kunnen gebruiken toegang tot de site-informatie gemakkelijk met deze fysieke bewegingen.

Houd pagina's kort en krachtig

Het vlees en de aardappelen van een website is het pagina inhoud. Elk van uw webpagina's bevat aanzienlijke hoeveelheden bruikbare informatie voor uw gebruikers, zoals tekst, foto's of video's. Je zult ook nieuwsartikelen en blogberichten vinden die maar een paar pagina's duren, wat kan helpen om de tekst te verbreken, maar het wordt niet aanbevolen voor mobiele apparaten als de techniek vereist meer laden van pagina's, wat betekent dat er meer wachttijd is aan de kant van de gebruiker.

Tenzij het absoluut vereist is, adviseer ik uw pagina-inhoud kort houden. Je moet ook overwegen om het er zoet uit te laten zien het lettertype naar een veel grotere maat te stylen en misschien bewegende beelden opzij. Met uw inhoud op het volledige scherm trekt het natuurlijk aandacht, om nog te zwijgen van de optimalisatie maakt het scannen van de pagina's een stuk eenvoudiger. Dit is ook de reden waarom een één kolom lay-out past perfect bij de rekening.

In de meeste gevallen laden mobiele browsers de webpagina's niet zo snel als desktopbrowsers en dit zou je lezers kunnen irriteren, daarom moet je optimaliseer de inhoud en website voor het laden van hoge snelheden. Je kan of verkort het artikel met behoud van de volledige inhoud, of gewoon verwijder onnodige afbeeldingen. Richt je op eenvoud in plaats van schoonheid.

Uw kernnavigatie is de reddingsboei voor uw bezoekers die tussen pagina's willen bladeren. Op een mobiel apparaat zullen schermkoppelingen van nature veel kleiner lijken, waardoor het veel moeilijker is om te tikken. Een essentiële tweak om dit probleem op te lossen is om maximaliseer het lettertype en de ruimte voor uw navigatielinks, misschien neemt het hele blokgebied in beslag. Als alternatief kunt u ontwerp de navigatiebalk om te lijken op de tabbladbalk van de echte iPhone-applicatie, zoals de hierboven getoonde.

Mobiele CSS-stijlen bouwen

Nu we weten hoe we de mobiele website kunnen optimaliseren voor een betere leesbaarheid en bruikbaarheid, is het goed om te praten over CSS-stijlen. Elke CSS-stylesheet bevat veel selectors met eigenschappen met betrekking tot lettertypen, formaten, positionering en weergave-instellingen. Als het op mobiel aankomt, moet u opletten hoe je blokken op hun plaats vallen.

(Beeldbron: Smashing Magazine)

Een gebied om aan de slag te gaan is stel de wikkebreedten van uw site opnieuw in op een percentage. Het is normaal om pixels te gebruiken als eenheid voor positionering, lijnhoogte, tekengrootte en breedte van div, maar als het om mobiel gaat, wilt u dat uw pagina's vloeistof en overgang tussen elk apparaat natuurlijk. Door container-divs in te stellen op 100% breedte, kan de content worden geplaatst vul eenvoudig tussen portret / landschap-modus zonder over de rand te vloeien.

Als u een van de mensen bent die uw volledige lay-out opnieuw willen structureren, zorg dan dat u dat doet sloeg alles met een reset. Ook paragrafen, koppen en navigatielinks moeten allemaal worden ingesteld op weergave: blok; dus je krijgt dat gevoel van lineaire printstijl. Verplaats de marges en opvulling om de zwelling van uw lay-out te verwijderen. Vermijd tafels indien mogelijk, aangezien deze de neiging hebben buggy-resultaten te genereren tussen apparaten.

Grote afbeeldingen zijn ook een probleem tussen apparaten. De meeste van uw websiteafbeeldingen zullen groter dan 480 px weergeven en u wilt misschien niet dat ze de container doorbreken. De eerste optie is om stel hun breedte in op 100% zodat de afbeeldingen op natuurlijke wijze van grootte kunnen veranderen. Het is zeker mogelijk om maak verschillende sets afbeeldingen voor uw website en render ze anders op basis van de browser-agent, maar eerlijk gezegd voegt dit gewoon meer werk toe aan je kant, dus probeer het gebruik de techniek alleen als het echt nodig is.

Websites ontwerpen voor iPhone

Het mobiele marktaandeel is redelijk groot en verdeeld, maar Apple heeft een groot deel van de taart met hun iDevices. Zowel de iPhone als de iPad zijn mobiele, voor internet geschikte apparaten met ingebouwde touchscreen-functionaliteit. Ze hebben dezelfde standaardwebbrowser, Safari, en een hele reeks andere opties.

Voor iPhone-specifieke websites moet u de schermgrootte targeten. De vaste schermgrootte is ingesteld op 320 px bij 480 px voor oudere iPhone-modellen en 640px bij 960px voor iPhone 4 en iPhone 4S.

iPhone-schermen zijn beperkt tot de ruimte. Je had moeten een blok met inhoud die zo lang als nodig is omspant. Elementen in één kolom bewaren zal je hoofdpijn besparen en zorg voor een vloeiende lay-out “invullen” zowel portret- als landschapsmodi. Hiervoor moet u waarschijnlijk een andere sjabloon ontwikkelen en een manier vinden om te controleren of uw bezoeker (s) een iPhone gebruiken. Het kleine PHP-fragment hieronder zou goed moeten werken:

In principe trekt de logica ons wereldwijde $ _SERVER variabele voor de HTTP-agent en controleert of het woord “iphone” verschijnt overal. Zo ja, dan weten we dat onze bezoeker een iPhone gebruikt en van daaruit kunnen we iets andere HTML plaatsen of zelfs een geheel nieuwe sjabloonlay-out! Dit kan ook worden gebruikt om een iPhone-specifieke stylesheet opnemen, verander uw paginatitels, verwijder afbeeldingen of bijna alle dynamische effecten.

Als het gaat om het bedienen van nieuwe stijlen is er een eenvoudigere manier. Zoals eerder vermeld, is de maximale schermgrootte voor de iPhone 960 px breed. Daarom kunt u met nieuwe CSS3-mediaquery's rechtstreeks stijlen toevoegen aan de belangrijkste stylesheet van uw site enkel en alleen weergeven op iPhone. Hieronder is een kleine voorbeeldcode:

@media-scherm en (max-device-width: 960px) / * iPhone css * / 

Dit werkt omdat CSS kan nu surfagenten en hun eigenschappen detecteren. Max. Schermbreedte is een van de eigenschappen die ook kan worden gedetecteerd.

All-in-all mobiele website voor iPhone-apparaten is niet zo moeilijk om te ontwerpen, er zijn gewoon te veel voorbeelden om te verwijzen, dat wil zeggen, CSS-iPhone. Houd jezelf bezig met studeren en wees niet bang om te doen experimenteer met nieuwe technieken in UI-ontwerp.

Mobiele jQuery-scripts

De meerderheid van front-end webontwikkelaars is bekend met de jQuery-bibliotheek. Het biedt een aantal fantastische afkortingen voor coderingseffecten, animaties, vervolgkeuzemenu's en een groot aantal andere browserfunctionaliteit, en het wordt alleen maar leuker met de aankondiging van jQuery Mobile. Het is niet aan te raden om direct in de technologie te springen en laad je website overal met effecten, maar voor testdoeleinden kan de geavanceerde functionaliteit heel goed spelen.

jQuery Mobile is een beetje anders dan reguliere jQuery omdat het je een volledige omgeving geeft om op te bouwen. Wanneer u met hun bestanden werkt, zijn ze niet alleen JavaScript, maar ook CSS-stijlen voor knoppen, koppelingen en overgangseffecten. U schrijft nog steeds webpagina's in HTML-code, maar het team van jQuery Mobile heeft dat wel heeft veel optionele UI-ontwerpfuncties geleverd. We kunnen veel met dit kader doen, maar sindsdien het framework is nog steeds in bèta, laten we vasthouden aan eenvoudige effecten.

Een kleine tutorial op DevGrow-blog biedt enkele geweldige voorbeelden. De officiële site biedt ook demo's die u kunt uitproberen. Houd er rekening mee dat we het HTML-kenmerk gebruiken, data-overgang om animatie-effecten toe te voegen met een van de vooraf gedefinieerde waarden. Deze omvatten dia, pop, flip, fade, etc. Bekijk het kleine DevGrow-voorbeeld om een ​​voorproefje van deze effecten te krijgen.

De effecten en overgangen zijn behoorlijk netjes, en het feit dat je een volledige mobiele interface strikt met jQuery kunt bouwen, is ook een enorme stap voorwaarts voor dit platform, maar met het platform alleen in bèta zou ik je niet aanraden om je hele mobiele site te bouwen met hun bibliotheek, vooral met het feit dat het is niet ondersteund door alle grote smartphones op het moment van schrijven (in het bijzonder Windows Phone 7), maar het zal met de tijd zeker beter worden.

Uiteindelijk raad ik aan om vertrouwd te raken met dit nieuwe mobiele framework voor live inzetten op elk project.

Nuttige ontwikkelaarstools

Mobiele ontwikkelaars kijken niet alleen naar codeer- en ontwerpmiddelen. Er is ook veel vraag naar softwaretools en IDE's, om nog te zwijgen van krachtige mobiele frameworks. Webontwikkeling is een moeilijke taak die nogal wat toewijding vereist, maar het gebruik van extra hulpmiddelen zal uw werk een stuk eenvoudiger maken.

Opera Mobile Emulator

Bent u op zoek naar een manier om te controleren hoe uw mobiele website wordt weergegeven? Dit kan een enorme pijn zijn als je geen smartphone hebt met internettoegang. Of u wilt uw smartphone gewoon niet gebruiken om de site te testen elke keer dat een update op uw server wordt gepusht. Nou, Opera Mobile Emulator is een fantastisch stukje software om je mobiele website te testen.

De emulator ondersteunt wel 20 mobiele profielen zoals Samsung Galaxy S, HTC Desire en zelfs tablets zoals Motorola Xoom. Het is ook mogelijk om de aangepaste resolutie en pixel dichtheid voor intensieve testdoeleinden. Het beste van alles is dat u niet te veel configuratiewerk hoeft te doen, maar een paar klikken maakt en u bent klaar om te gaan.

De download is volledig gratis en de software wordt zowel in Mac OS X- als Windows-omgeving uitgevoerd. Hun ontwikkelaars werken hard aan het maken van goede webstandaarden en het verfijnen van hun mobiele rendering-engine. Ik raad hun andere dev-tools aan als je op zoek bent naar extra tools om je op weg te helpen.

PhoneGap

Er zijn niet veel API's ontwikkeld over HTML5 om solide mobiele applicaties te bouwen. Met name het mobiele landschap heeft dit soort websites niet gehad, en dat is precies waarom PhoneGap de niche zo goed vult. Hun platform laat je gemakkelijk op HTML5 gebaseerde apps bouwen als native applicaties op 6 verschillende platforms.

Het proces werkt door eerst uw code te comprimeren en door te geven via het applicatieframework van PhoneGap. Van daaruit kunnen uw apps een groot deel van de mobiele marktplaats bereiken, waaronder Android, iOS, Windows Phone 7 en BlackBerry.

Als je een beetje in de war bent, maak je dan geen zorgen. Hun ondersteuningspagina's geven een overzicht van het proces en bieden links naar nuttige bronnen. De apps die al zijn ontwikkeld, zijn gecompileerd in een prachtige portefeuille in bibliotheekstijl. Bekijk hun volledige verzameling apps die u vervolgens kunt sorteren op apparaten met schermafbeeldingen.

Aptana Studio

De Aptana-website is de beste locatie om meer te weten te komen over hun ontwikkeltools. De nieuwste suite-release, Aptana 3.0.3, heeft een volledig geïntegreerde IDE voor webontwikkeling, CSS-stijlen en nesting van HTML-tags, en het beste deel: Aptana is volledig gratis downloaden! Ze bieden pakketten voor alle 3 de grote besturingssystemen (inclusief Linux), wat een groot gemak is voor ontwikkelaars.

Wat Aptana speciaal maakt, is hoe snel u een kleine webtoepassing kunt ontwikkelen en uw ontwerp kunt testen. Met de studiosuite kun je snel een webtoepassing ontwikkelen en testen die wordt uitgevoerd via Ruby on Rails, PHP, Python of gewoon HTML / CSS, en hun functies voor het markeren van codes zijn recentelijk verbeterd naar bevatten nieuwe HTML5- en CSS3-tagbibliotheken. Het komt ook met Git-integratie, een ingebouwde terminal, code debugger en een handvol andere handige functies.

Mobiele GUI-kits en pictogrammen

Wat zou het web zijn zonder freebies die rondslingeren? Voor webontwerpers staat het belang van de gebruikersinterface boven alles. Eenvoudige GUI's zijn moeilijk te verkrijgen en alleen de meest creatieve ontwerpers hebben werkoplossingen bedacht.

Er zijn echter veel gratis maar hoogwaardige bronnen beschikbaar om door uw webdesigner te testen. Deze GUI-kits zijn meestal ontworpen voor Adobe Photoshop of Fireworks, waar u elementen kunt verplaatsen en exporteren als platte afbeeldingsbestanden.

Pictogrammen zijn een zeer handige bron om te hebben. Ontwerpers maken gratis sets en bieden ze vaker dan ooit tevoren online aan. Een dergelijke website Glyphish heeft een showcase van zowel gratis als pro-pictogrammen. Deze ontwerpen zijn gebaseerd op een enkel thema dat moet worden gebruikt voor mobiele sjablonen en app-ontwerpen.

Onze verzameling sjablonen voor het maken van prototypen voor mobiele apparaten is een geweldige hulp voor u tijdens de ontwikkeling van websites en toepassingen. Je moet niet beginnen met coderen totdat je een sterke grafische interface hebt en deze webkits zullen je op het goede pad helpen.

iOS 5 GUI Kit

iPhone UI Vector-elementen

iPhone App Icon Kit

Wireframe magneten (DIY-set)

Android Interface GUI