Once upon a time, ongeveer een uur verwijderd van waar ik momenteel woon, werkte een webdesigner die hield van zijn Photoshop-composities en lay-outs met een vaste breedte. En goed, ik wil het einde niet verpesten, maar die ontwerper was ik.
Toen ik me op mijn eigen bedrijf richtte, ging de op het web gebaseerde creatieve gemeenschap keihard tekeer over dit nieuwerwetse concept dat "responsief ontwerp" heet. Zoals elke jonge professional met een heldere ogen en een bossige staart zou doen, onderzocht ik het. Immers, het nieuwste, nieuwste moet altijd op zijn minst een voorbijgaande blik krijgen.
Wat ik echter ontdekte, liet me ontsteld. Een kwaadaardig meesterbrein genoemd Ethan Marcotte had a losgelaten laf plan om webontwerpers harder te laten werken! Zijn boek liet mensen razen en razend over hoe we "mobiele gebruikers moesten overwegen" en "onze websites moesten laten werken op zoveel mogelijk platforms" ... de heidenen.
Natuurlijk verzette ik me zo lang als ik kon. Ik vocht hard en dapper tegen dit tij van gezond verstand en slimme zaken; maar het was allemaal voor niets. Toen viel ik terug op excuses: "Maar ik heb geen mobiel apparaat om mee te testen!" En dat is de lezer, beste lezer. Het blijkt dat je er absoluut geen behoefte aan hebt.
In de loop van de tijd heb ik enkele basisrichtlijnen opgesteld die je, als je merkt dat je zonder mobiele telefoon of tablet bent, kunt gebruiken om websites te ontwerpen die ervoor zorgen dat dingen er in de meeste mobiele browsers toch goed uitzien.
... u bouwt iets groters dan een kleine, inhoudsgestuurde website. Grote websites en toepassingsgestuurde sites moeten zeker worden getest op echte mobiele platforms. Ik bedoel, zeker, je zou het waarschijnlijk kunnen vervalsen, maar ik zou het niet adviseren.
Wanneer je met onbekende variabelen werkt, is je beste optie om dingen dom te houden. Ja, ik roep de bijna cliche KISS-regel aan, omdat het werkt.
Zonder een rack vol met smartphones, enzovoort, moet je vertrouwen op wat andere mensen weten. Gelukkig is er veel tijd en energie gestoken in het onderzoeken van de mogelijkheden van de meer populaire mobiele browsers die er zijn, en hoe ze zich tot elkaar verhouden.
Ontdek wat uw doelgroep is en zoek vervolgens uit wat voor soort browsers ze gebruiken. Zoals altijd is Google uw vriend. Alles wat u hoeft te doen, is ontwerpen voor statistieken.
Als het grootste deel van uw mobiele doelmarkt Android / iOS in een of andere vorm gebruikt, hebt u geluk! Hun standaard browsers (en de meest populaire alternatieven, zoals Firefox) zijn voor het grootste deel modern. Geavanceerde lay-outtechnieken, basis CSS3-effecten, jQuery ... deze zullen naar alle waarschijnlijkheid redelijk goed werken.
Als uw doelgroep andere platforms gebruikt, moet u echter specifieker onderzoek doen over hen en ontdekken wat ze wel en niet kunnen doen.
Wat doet u nu als u weinig tot geen informatie over uw gebruikers hebt? Probeer op zijn minst te achterhalen waar ze zijn. De meeste websites hebben op zijn minst een algemene regio waar de meeste gebruikers vandaan komen. Verkrijg de statistieken voor die regio.
Als dat niet lukt, ontwerp dan voor het slechtste scenario.
Om uw werk een beetje makkelijker te maken, vond ik een website met een vrij gedetailleerde vergelijking van wat de meer populaire mobiele browsers wel en niet ondersteunen. Bekijk het op mobilehtml5.org .
En natuurlijk is er de altijd populaire caniuse.com
Ik weet dat sommige ontwerpers zweren door aangepaste code te maken die specifiek is voor elk project, maar wanneer je blind aan het werk bent, is het opnieuw uitvinden van het wiel geen praktische optie. Kaders die al zijn getest op mobiele platforms, maken veel giswerk uit het proces.
Giswerk is slecht. Vermijd het.
Nu heb ik natuurlijk niet persoonlijk elk kader getest of getest, dus je moet er een vinden dat doet wat je wilt, en het onderzoeken, vergelijken met de mogelijkheden van je beoogde mobiele platform. Toch zijn er een paar waarmee je zou kunnen beginnen:
Dit zijn de letters die je waarschijnlijk van boven kunt noemen. Ze worden gekenmerkt door hun enorme complexiteit. Ze brengen indelingen, UI-elementen en jQuery-plug-ins samen in één krachtig pakket.
De beroemdste hiervan zijn bootstrap en fundament . Ik zal niet de moeite nemen om ze hier te vergelijken, dus ga je gang en Google "Bootstrap vs. Foundation" als je meer details nodig hebt. Alles wat u nu echt moet weten, is dat in elk raamwerk elk onderdeel uitgebreid is getest door een vrij grote fanbase en klaar is voor mobiel.
Deze proberen niet alles voor je te doen, maar geven je genoeg om aan de slag te gaan. Dit maakt het aanpassen van dingen een beetje eenvoudiger, maar het maken en / of stylen van meer complexe UI-elementen is aan jou.
Deze categorie omvat Skelet , LESS Framework 4 enzovoort…
Dit is eigenlijk mijn persoonlijke favoriete categorie. Ik geef er de voorkeur aan om te beginnen met een leeg scherm en een opmaaksysteem in de aanslag, waarmee ik de gewenste soort website kan maken zonder veel CSS te hoeven overschrijven, of specifieke delen van een bepaald raamwerk uit te pakken.
Deze kaders lijken zich over het algemeen niet bezig te houden met lay-out of paginastructuur. Ze zijn ontworpen om een gemakkelijke manier te bieden om fraaie, mobiel-compatibele interface-elementen toe te voegen (lees: widgets).
Ik heb er slechts één getest, maar mijn onderzoek zegt dat de drie beste (of op zijn minst meest populaire) kaders in deze categorie zijn jQuery Mobile , KendoUI , en Wijmo .
Toegankelijkheid blijkt niet alleen voor kleurenblinden of volledig blinden te zijn. Veel van de oudere mobiele browsers zijn zo beperkt in mogelijkheden dat het lijkt op bladeren met alle CSS en Javascript uitgeschakeld.
In dit geval kun je het beste doen om er absoluut zeker van te zijn dat je website onder deze omstandigheden bruikbaar is. Schakel al die mooie dingen uit en zorg ervoor dat gebruikers de doelen van de website zonder hen kunnen bereiken.
Device-emulators zijn meestal niet honderd procent nauwkeurig, maar u kunt de belangrijkste dingen testen, zoals lay-out enzovoort. Bugs die ik ben tegengekomen, zijn vaak kleinere dingen, zoals weblettertypen die niet worden weergegeven. Maak je geen zorgen, ze zouden prima moeten werken op de eigenlijke hardware.
Maar welke emulators zou u moeten gebruiken?
Deze werkt een beetje langzaam, maar het werkt als een charme. Je moet de hele ontwikkelaarskit downloaden, maar het is de moeite waard om een programma te hebben dat niet alleen de standaardbrowser van Android, maar ook het volledige besturingssysteem nauw nagebootst. Bovendien kunt u uw site testen op verschillende virtuele "apparaten".
Nog een dat werkt eigenlijk zoals geadverteerd. Je download het, kies je "apparaat" en ga.
Firefox heeft verschillende opties voor het testen van uw mobiele inhoud. De eerste is een eenvoudige emulator die de weergavefunctionaliteit van het mobiele Firefox-project van Mozilla nabootst, codenaam: Fennec.
Het is niet overdreven ingewikkeld en biedt u een eenvoudig, aanpasbaar venster, dus het is aan u om handmatig de schermgrootte in te stellen die u wilt testen.
De tweede optie is een add-on voor de desktopversie van Firefox. Dubbed de Firefox OS Simulator, het biedt je een heel platform om mee te spelen, niet alleen de browser (net als de Android SDK).
Ik kon niet testen deze emulator , omdat er een zeer grote SDK moet worden geïnstalleerd en de installatie is afgekeurd, althans voor mij. Toch is het aan jou om dit naar eigen inzicht te testen.
Blackberry biedt een aantal simulators voor BB10. Misschien ben ik het, maar ik heb er niet veel succes mee gehad. Ik hoor graag van iedereen die erin slaagt om ze te laten werken.
Last, but zeker not least, Apple biedt een gratis iOS-simulator die kan worden gebruikt om Apple-apparaten te testen als onderdeel van Xcode. Helaas, omdat het deel uitmaakt van Xcode, is het alleen een Mac.
Als je het budget hebt (of heel snel kunt testen, omdat hun vrije tijd beperkt is in de tijd), kun je niet te veel verkeerd doen met BrowserStack . Hiermee kunt u testen op veel desktops en een grote verscheidenheid aan mobiele apparaten. Niet zo responsief als het echte werk, ze zullen je problemen laten zien met dingen zoals lay-out.
Mobiele browsers hebben de neiging om te spelen met zoominstellingen, wat mijn ervaring is geweest. Als u wilt dat uw website eruitziet zoals die eruitziet wanneer u uw browservenster verkleint naar mobiele formaten, gebruik dan dit mooie stuk HTML in de kop van uw document:
Laat me dat anders formuleren: het minimalisme schommelt op mobiel. De minimalistische esthetiek past zich goed aan kleinere schermafmetingen aan met minder aanpassingen en aanpassingen, waardoor ik veel tijd kan besparen. Misschien lijkt dit voor sommigen van jullie een goed idee, maar ik kan het niet genoeg benadrukken.
Deze informatiecollage is natuurlijk slechts het topje van de ijsberg en geen partij voor het testen van uw websites op echte mobiele hardware, maar u moet hiermee aan de slag kunnen gaan en hopelijk voldoende verdienen met mobiel ontwerp om dat apparaat te veroorloven. zo rijkelijk verdienen.
Uitgelichte afbeelding / thumbnail, afbeelding van een mobiel apparaat via Shutterstock.