webdesign tips & tricks

Responsief ontwerp bij een nieuwe website laten maken is de nieuwe webstandaard geworden. Veel bedrijven hebben de uitdaging geaccepteerd en hebben specifieke ontwerpoplossingen ontwikkeld (zoals alleen mobiel) of hebben geprobeerd het kwestie cross platform aan te pakken. In dit artikel kijken we naar verschillende tips om u te helpen bij het ontwerpproces en efficiënter te maken. De uitdagingen van Cloud Integration.

Desk with Notes About SEO

1. Planning: Zoals altijd is planning de eerste prioriteit. Zodra u uw ontwerpuitdagingen op papier hebt opgelost, bent u klaar om uw site (en) te bouwen.

2. Maak gebruik van prototypesoftware: Een dergelijk programma is Adobe Edge Reflow, waarmee u gebruik kunt maken van media vragen, breekpunten in het programma instellen en uw lay-outs ontwerpen om op desktop, tablet en mobiel te passen. U kunt dan de CSS kopiëren naar een ander programma, zoals Adobe Dreamweaver of andere HTML-editor, om uw ontwerp verder te verfijnen.

3. Overweeg een Mobiele Eerste Strategie: Hier bouw je de mobiele site eerst, dan opschalen en bouwen van de tablet- en desktopontwerpen. Een van de belangrijkste zorgen voor alle drie is het logo en / of de tekst. Als de tekst gemakkelijk te lezen is op het mobiele apparaat, moet u geen problemen hebben met de tablet of het bureaublad.

webdesign14. Pas op voor navigatie: als uw site slechts 2-3 navigatiemenu’s bevat, kunt u deze in een eenvoudig menu op het scherm bevatten. Als er meer menu-elementen zijn, kunt u overwegen om een ​​enkel pictogram te maken dat opent in een vervolgkeuzemenu van extra menu-items.          Een andere optie is gebruik te maken van een icoon menu stijl zoals men zou zien met een GoMobi site.

5. Bouw de kijk en voel van uw site (s) Ten eerste: Sommige bedrijven, zoals Jiffy Software, bouwen eerst de volledige lay-out van de interface voordat u een codering doet. Dit zorgt ervoor dat ze de look en feel hebben die de klant wil voordat ze een codering uitvoeren. Bij het opbouwen van een lay-out voor een mobiele site is een zeer belangrijke overweging de knoppen groot genoeg voor een vingertop. Een andere overweging is het ontwerp zowel eenvoudig als functioneel. Veel ontwerpers hebben de neiging om teveel aan een mobiele interface toe te voegen, wat ontwerp- en bruikbaarheidsproblemen kan veroorzaken. Als u twijfelt, houd het eenvoudig.

6. Voorbereid zijn om veel softwareprogramma’s te gebruiken: Voor veel gebruikers is het gebruik van een sjabloon met WordPress voldoende, maar als u een complex ontwerp wilt maken, moet u wellicht aangepaste programma’s gebruiken en u kunt elke site afzonderlijk codeer.     Als uw lay-out bijvoorbeeld vrij eenvoudig is, gebruik je een sjabloon zoals Moboom, maar voor een complexere lay-out moet u mogelijk programma’s zoals Adobe Dreamweaver voor het bureaublad gebruiken en een zelfstandig programma zoals GoMobi voor de mobiele lay-out.     Indien u een website laten maken kan u natuurlijk ook gewoon o-design bellen

7. Afbeeldingen: Bij het opbouwen van responsieve ontwerplayouts, creëer geoptimaliseerde afbeeldingen voor elke lay-out. Dit vermindert schaal- en bandbreedte problemen. Maak gebruik van JPEG, GIF en PNG-8 bestandsformaten. Gebruik nooit PNG omdat het uw bestandsgrootte 5-10 keer kan opblazen.

8. Gebruik nauwkeurige metingen met afbeeldingen: (dat wil zeggen 500x350px bij 100ppi) en stel beeldafmetingen in elkaar om te passen. Dit zal schalen elimineren en behoudt ook de resolutie en kwaliteit van uw afbeeldingen. Als uw schaalafbeeldingen schalen, kan dit leiden tot kleurdiepte- en oplossingsproblemen.

9. Gebruik Parallax Scrolling: Hier is een handleiding over hoe u uw site reageert. Net als bij veel designelementen kan het effect overdreven worden, dus hier zijn enkele voorbeelden van verschillende sites die de techniek goed gebruiken.

10. Over updates: Als uw site een eenmalige productie is, zullen updates geen probleem zijn maar als u de site wilt bouwen, geef het dan aan anderen voor updates, zorg er dan voor dat het makkelijk is om dit te doen. Inclusief instructies voor degenen die na u komen. Zorg ervoor dat u opmerkingen in de code plaatst samen met de geschreven documentatie zodat degenen die na u komen, kunnen zien wat u hebt gedaan. Dit zal het voor hen makkelijker maken om updates of veranderingen aan te brengen.

11. Beperk het gebruik van tekst op mobiele apparaten: gebruik alleen wat nodig is, in plaats van te proberen om uw desktop-site op mobiel apparaat te reproduceren. Deze laatstgenoemde creëren lange scrolling pagina’s, waardoor u kijkers kwijt kan raken.

12. Profiteer van Google Design Standards: Op deze pagina leert u wat Google aanbeveelt bij het ontwerpen van sites voor gebruik met smartphones. U vindt er onder meer wat u moet doen om uw smartphonepagina’s snel te laden.

13. Test Code Snippets en Templates: Zoals in sommige van onze eerdere artikelen over het gebruik van API’s, wees voorzichtig. U kunt per ongeluk de prestaties van uw site vertragen. Als u twijfelt, moet u eerst de componenten testen.

14. Bouw een toolkit van Kaders: Een snelle manier om responsief ontwerpen te creëren is om voort te bouwen op wat er al bestaat, met bestaande thema’s (zoals Genesis of Thesis) en gebruik deze om aangepaste kinderthema’s te maken. Dit bespaart een enorme hoeveelheid tijd, aangezien u geen nieuwe lay-out van nu toe hoeft op te bouwen.

Kijk ook eens op de site van o-design

Advertenties

Geef een reactie

Vul je gegevens in of klik op een icoon om in te loggen.

WordPress.com logo

Je reageert onder je WordPress.com account. Log uit / Bijwerken )

Twitter-afbeelding

Je reageert onder je Twitter account. Log uit / Bijwerken )

Facebook foto

Je reageert onder je Facebook account. Log uit / Bijwerken )

Google+ photo

Je reageert onder je Google+ account. Log uit / Bijwerken )

Verbinden met %s