Share
Met meer mobiele webgebruikers dan ooit, is het belangrijk om uw branding sterk te houden. Laten we een stap verder gaan dan het standaard favicon en uw website helpen opvallen door pictogrammen te maken voor gebruik op de startschermen van iOS en Android.
* Awesome wafel icoon door Eddie Lobanovskiy
Voordat we zelfs maar nadenken over de afmetingen van onze pictogrammen, zijn er een paar belangrijke dingen die je in gedachten moet houden bij het ontwerpen ervan (specifiek waar het Apple-apparaten betreft).
Het is ook de moeite waard om in gedachten te houden bij het ontwerpen van je pictogram dat het mogelijk is om dit standaard iOS-gedrag te overschrijven. We zullen kijken hoe dit binnenkort wordt gedaan.
Elk Apple-apparaat heeft een ander schermformaat en een andere resolutie. Dat betekent voor de beste resultaten dat u voor elk apparaat een afzonderlijk pictogram met verschillende formaten nodig hebt. Maak je geen zorgen over Android: elk icoon van formaat wordt automatisch verkleind.
Hier is alles wat u moet weten voor elk Apple-apparaat:
iOS bepaalt welk pictogram moet worden gebruikt, afhankelijk van de grootte. Door grotere pictogrammen te gebruiken voor schermen met een hogere resolutie, kunnen we de kwaliteit van onze afbeeldingen verbeteren. Bekijk de extra aandacht voor details over deze voorbeelden:
Zoals eerder vermeld, voegt iOS automatisch effecten toe zoals afgeronde hoeken, slagschaduwen en de klassieke reflecterende glans van Apple. Als u pictogrammen ontwerpt om hiervan te profiteren, maakt u eenvoudig uw pictogram vierkant en laat u de effecten over aan iOS. Als u liever uw eigen afgeronde hoeken maakt, moet u er rekening mee houden dat het er rommelig en inconsistent uit kan zien.
Gebruik om deze standaardinstellingen te negeren -precomposed binnen de rel attribuut wanneer u naar uw pictogram linkt. Hier is hoe het kan lijken:
U merkt hierboven dat we een pictogram hebben getoond met de -precomposed sleutelwoord aan het einde van de bestandsnaam. Dit is puur als een herinnering voor onszelf.
Je naam op deze manier benoemen is niet vereist, maar het is handig om de omstandigheden te onthouden waarvoor je het pictogram hebt ontworpen. Als je van plan bent om alles uit te gaan en iconen te maken voor zoveel mogelijk apparaatgroottes, dan is het verstandig om ze allemaal dienovereenkomstig te benoemen. Bijvoorbeeld:
Het toevoegen van de pictogrammen aan uw site is heel eenvoudig - het enige dat u hoeft te doen is één regel code voor elk pictogramformaat. Laten we aannemen dat je iconen hebt gemaakt met de maten 57x57px, 72x72px en 114x114px. Het is belangrijk om de grootte van het pictogram correct te definiëren, zodat ze kunnen worden gebruikt voor het juiste apparaat - ongeacht het feit dat ze allemaal onder de rel van 'apple-touch-icon' vallen.
Vergeet niet dat als u de standaard iOS-weergave-instellingen wilt overschrijven, u de -precomposed sleutelwoord na "apple-touch-icon" in de rel kenmerkveld.
En dat is alles wat er is! Nu heb je een nieuwe reeks iconen klaar om je merk te versterken op de groeiende markt voor mobiel internet. Als iemand uw site toevoegt aan zijn iOS-startscherm, ziet hij in plaats van een screenshot uw pictogram. Omdat veel iOS-gebruikers websites opslaan om later te lezen, is het belangrijk om een goed pictogram te hebben zodat uw site opvalt.
Als u nadenkt over hoe dit van toepassing is op Android-gebruikers, hoeft u zich geen zorgen te maken.
Android ondersteunt ook de 'apple-touch-icon-precomposed'link rel attribuut, dus het is niet nodig om een fallback-code toe te voegen. Het besturingssysteem zal het meest geschikte pictogram naar de juiste grootte schalen, zodat u geen pictogrammen van specifieke grootte voor Android-apparaten hoeft te maken. Zelfs als u geen van de Apple-touch-pictogramopties gebruikt, zal het Android-besturingssysteem de standaard bladwijzerafbeelding (favicon) van uw site gebruiken voor uw startschermpictogram.
Niet alle gebruikers van mobiele apparaten weten dat ze webpagina-bladwijzers kunnen toevoegen aan hun startscherm, dus u kunt overwegen hen hiertoe te vragen. Er zijn een paar JavaScript-fragmenten om u te helpen, zoals het Add to Home Screen-script van Matteo Spinelli.
Zoals altijd is het echter de moeite waard de prestatie-impact van het aantrekken van een ander .js-bestand te overwegen.
Ik hoop dat deze snelle tip je heeft geïnspireerd om je eigen iconen voor iOS te maken. Ze kunnen erg handig zijn voor uw gebruikers en aangepaste pictogrammen zullen uw merk veel beter van pas komen dan een onleesbaar screenshot.
Accentsconagua