• Articles
• admin

bij het opstarten van nieuwere projecten is het gemakkelijk om oudere blogs en websites te vergeten. In dit artikel wil ik 30 solide ideeën presenteren die u snel kunt implementeren om uw website net dat veel gebruiksvriendelijker te maken. Niet alle van hen zijn uitsluitend gebaseerd op front-end ontwerp. Ik zal ook populaire HTML5 codering technieken die kunnen helpen web parsers en spiders om uw gegevens op de juiste wijze te categoriseren bespreken.

niet elke website hoeft te worden bijgewerkt, en niet met elke techniek die beschikbaar is in dit bericht. Deze ideeën zijn hier om ontwikkelaars te laten denken in termen van design en hoe je websites mooier kunt maken. Het is nu eenvoudiger dan ooit om schaalbare responsieve website lay-outs te bouwen die er goed uitzien op elk digitaal scherm, dus laten we onze sites verfraaien.

1. UX Testing

ik ben schuldig aan het niet altijd uitvoeren van tests op mijn website lanceert, maar waar mogelijk is dit een van mijn favoriete activiteiten. U kunt zo veel over typische gebruikersinteracties leren door te bestuderen hoe ze spelen met uw website. Gebruikerservaring studies kunnen uitsluitend worden uitgevoerd door middel van tools zoals Google Analytics, of met behulp van andere bronnen van derden.

de potentiële voordelen die u kunt vinden, zijn enorm. User experience testing is handig voor webontwikkelaars om te leren welke gebieden van hun website zijn vervelend, gebroken, of kan worden verbeterd. Overweeg om niet alleen digitale tools te gebruiken, maar ook je vrienden en collega ‘ s. Luisteren naar wat echte menselijke feedback op uw website kan resultaten bieden die u niet via een computerscherm kon krijgen.

2. Witruimte

we kunnen witruimte beschouwen als de hoeveelheid ruimte tussen elementen in uw pagina. Sommige gebruikers zullen het niet erg een krappe lay-out als ze al gewend zijn aan dit. Maar denk aan je doelgroep, en bedenk hoeveel van hen zijn niet zo computergelet als de jongere generatie.

u kunt gebieden bepalen die extra ruimte nodig hebben door A/B-tests te splitsen en gebruikersfeedback te behouden. Of gewoon wing it en kijk wat je kunt bedenken!

3. Web Fonts

met dynamische web fonts kunnen ontwerpers webpagina ‘ s bouwen zonder zich te beperken tot de typische lettertypefamilies. Deze trend is steeds populairder geworden nu de meeste gemiddelde internetgebruikers op een fatsoenlijke DSL/T1/glasvezelverbinding zitten. Met inbegrip van verwijzingen naar 3rd party lettertype stylesheets zal niet langer produceren grote vertraging in uw DL snelheden.

mogelijk is de beste aanbieder van fonts via Google Webfonts. U hebt toegang tot de applicatie, zelfs als u geen Google-Account hebt, hoewel er voordelen zijn aan het registreren. Het volledige installatieproces duurt slechts 3 stappen en u kunt aangepaste Google fonts draaien op uw website binnen enkele minuten.

4. CSS3 Shadows

als ik het heb over het gebruik van schaduwen om uw lay-out te verbeteren, verwijs ik eigenlijk naar twee verschillende eigenschappen. De immer populaire box-shadow is echt cool voor divs en dozen binnen uw lay-out. Het toevoegen van dit effect op uw container, wrapper, of binnenpagina dozen zal een Afslanken 3-D effect op uw webpagina te bieden.

maar het is ook de moeite waard om de CSS3 text-shadow eigenschap voor typografie te overwegen die van de pagina springt. Apple is een van de eerste bedrijven die tekstschaduwen zwaar implementeren rondom hun lay-out. U kunt een ontmoedigend effect bouwen door tekstschaduwen toe te voegen die tegenover de kleur van uw lettertypen staan (witte schaduwen voor donkere tekst, zwarte schaduwen voor lichte tekst).

5. Textures & herhalende patronen

er zijn tal van websites die kunnen krijgen door gewoon gebruik te maken van standaard kleurenschema ‘ s. Maar om uw website echt te onderscheiden van de menigte kunt u overwegen het toevoegen van texturen en het herhalen van tegels in uw achtergrond. Een van de coolste gratis webapps Is Noise Texture Generator die kan draaien op elke browser.

kies gewoon de AG-kleur en de hoeveelheid ruis die u wilt gebruiken, dan zal deze app dynamisch een betegelde achtergrondafbeelding maken. Als u op zoek bent naar patronen en tegels dan zou ik aanraden subtiele patronen. Ze hebben een enorme collectie van bruikbare texturen die u gratis kunt downloaden.

6. CSS3 Gradient Backgrounds

terwijl we het over achtergronden hebben, zou ik de steeds populaire CSS3 gradiënten naar voren moeten brengen. Deze bieden webontwikkelaars met een enorm voordeel houden ze uit Adobe Photoshop voor web achtergronden. En deze gradiënten kunnen werken op meer dan alleen het lichaam, toegepast op navigatiebalken en voetteksten en andere belangrijke gebieden in uw lay-out.

7. Boostrap

Twitter ‘ s Bootstrap is waarschijnlijk het grootste frontend UI framework voor webontwikkelaars. Dit omvat knoppen, formulier ingangen, links, kolommen, en tonnen andere vooraf geformatteerde pagina-objecten. Het meest voorkomende gebruik voor Bootstrap is binnen landing pages voor nieuwe toepassingen.

maar open source ontwikkelaars gebruiken ook Bootstrap bij het bouwen van demo pagina ‘ s voor de bibliotheken, plugins of mini scripts die ze publiceren.

Ik heb het gevoel dat Bootstrap zo enorm is gegroeid dat het tegenwoordig op elke website kan worden toegepast. Maar ontwikkelaars die het grootste voordeel vinden, gebruiken Bootstrap als een snelle vervanging voor het uitrollen van hun eigen UI-ontwerpen. Overweeg deze frontend bibliotheek de volgende keer dat u de lancering van een webpagina met een enkel concreet doel: landing page, Product demo, mobiele app website, enz.

gerelateerd:

• aan de slag met Twitter Bootstrap
• Bootstrap 201: modal Window Plugin

8. HTML5 Kickstart

de meeste webontwikkelaars hebben nog niet gehoord over HTML5 Kickstart gemaakt door 99Lime. Dit is een andere frontend UI bibliotheek die zich meer richt op mooi design esthetiek dan gewone HTML5 lay-outs. Maar er zijn codevoorbeelden voor het genereren van beide in schoppen. U kunt kiezen uit sets van vooraf bepaalde elementen zoals gradiënt knoppen en dropdown menu ‘ s. Ik zou niet zeggen dat dit dezelfde populariteit heeft als Bootstrap, maar wat dan wel?

als je de tijd en het geduld hebt raad ik je aan om deze bibliotheek snel te testen. Bouw een kleine sandbox lay-out en kijk of je geniet van het standaard gevoel van elk UI-element. Kickstart is zeker niet voor elk project, maar het kan een grote tijdsbesparing zijn wanneer je in een bind gevangen zit.

9. jQuery UI

animaties en sliders en fading elementen worden meestal uitgevoerd uit de jQuery bibliotheek. Dit is de meest voorkomende open source JavaScript-bibliotheek voor frontend ontwikkelaars, maar het heeft ook een metgezel bibliotheek jQuery UI. Ontwikkelaars zien dit over het hoofd, denken dat het niet veel kan bieden in ruil voor de extra KB.

maar met de UI-bibliotheek kunt u de easing aanroep bijwerken voor dynamische paginaanimaties. Dit betekent dat u de Jquery animatie type voor een dropdown menu ‘ s, fading items, scrollen diavoorstellingen, en al het andere dynamisch aanpassen.

de jQueryUI website heeft een easing demo pagina waar u de vele variaties kunt testen en zien of u van specifieke animatie types houdt.

gerelateerd:

• hoe jQuery UI accordeon
• volumeregelaar met jQuery UI Slider
• aanpassen en Themeren jQuery UI Datepicker
• slepen en neerzetten met jQuery UI sorteerbaar

10. Extravagante BG foto ‘ s

er zijn tegenwoordig talloze websites die gebruik hebben gemaakt van het fullscreen achtergrondeffect. Als u een voorbeeld van een foto met hoge resolutie kunt vinden die er goed uit zou zien als een achtergrondafbeelding, dan is deze techniek misschien de moeite waard om toe te voegen aan uw lay-out. Grote achtergronden doen een uitstekend werk van het vangen van de aandacht van uw gebruiker, terwijl ook impliceren het genre van uw website.

als u op zoek bent naar een snelle oplossing, bekijk dan de jquery Backstretch plugin. Dit vereist slechts een enkele regel code voor uw nieuwe achtergronden om correct en responsief te schalen met behulp van elke resolutie. Maar voor ontwikkelaars die tegen JavaScript methoden Ik beveel de CSS3 fullpage image techniek geplaatst op CSS-Tricks.

11. Menupictogrammen

om meer aandacht te trekken van bezoekers kan het de moeite waard zijn om een kleine pictogramset op uw webpagina op te nemen. Standaard menu links zijn vaak genoeg om goed te functioneren en gebruikers te helpen navigeren tussen pagina ‘ s.

ik ben echter vaak onder de indruk om aangepaste pictogrammen te zien die zijn ontworpen voor elke menukoppeling. U kunt ton van gratis icon sets die zou er perfect uitzien in uw bovenste navigatie vinden, zijbalk, of voettekst gebied.

12. Bijgewerkt kleurenschema

ik bedoel niet echt het veranderen van uw algemene kleurenschema ontwerp, maar meer als het toevoegen van nieuwe kleuren in het. Na het uitvoeren van dezelfde lay-out voor maanden na maanden is het leuk om kleinere gebieden bij te werken en te vangen terugkerende bezoekers bij verrassing.

sommige interessante items kunnen ankerkoppelingen, headers, achtergronden en werkbalken bevatten. Overweeg het gebruik van online tools zoals kleurenschema ontwerper om uw traject te verbeteren.

13. Verbeterde browserondersteuning

het is moeilijk om een website te bouwen die volledig wordt ondersteund door alle belangrijke oudere browsers. Hoewel zeer weinig mensen zijn met Internet Explorer 6 Het verschijnt nog steeds in een paar van mijn Google Analytics rapporten. Ontwikkelaars die op zoek zijn naar ideeën kunnen overwegen het doen van een kleine proef van browser tests.

de belangrijkste mainstream browsers zijn de nieuwste release van IE9, Mozilla Firefox, Opera, Chrome, Safari en mogelijk Camino/SeaMonkey. Maar Internet Explorer 6-8 worden ook nog steeds veel gebruikt onder bedrijven en oudere computerlabs. U kunt quick rendering tests uitvoeren met behulp van de IETester software. Op dezelfde manier IE8 heeft een Ontwikkelaars tool mode waar u kunt overschakelen naar oudere rendering engines voor het debuggen.

14. Aangepaste typografie

het kan zijn dat uw oude lay-outs nog steeds efficiënt gebruik maken van tekststijlen, maar dit is niet altijd het geval. Ik voel dat grote typografie zal passen in lay-outs een stuk gemakkelijker. Niet te vergeten is het gemakkelijker te lezen en zal meer ruimte in beslag nemen op grotere schermresoluties.

het idee van “fitted typography” is het stylen van tekst zodat deze goed past in uw website. U kunt een paar pagina ‘ s doorlopen en deze stijlen in 10-15 minuten bijwerken.

15. Social Media Sharing

inmiddels ben ik er zeker van dat de meeste ontwikkelaars bekend zijn met de sharing badges die worden gebruikt in populaire sociale netwerksites. Facebook, Twitter, Reddit, Pinterest, Dzone, en vele andere externe netwerken bieden codes die u kunt insluiten in uw website. Dan kunnen bezoekers uw link delen op deze netwerken zonder dat u uw website hoeft te verlaten.

op sommige blogs of webmagazines ziet u dat deze badges u volgen terwijl u naar beneden scrolt. Dit is een uitstekende techniek omdat je ze vaak net buiten het lichaam kunt laten zweven waar ze geen belangrijke inhoud blokkeren. Ik raad ook aan om door onze post te bladeren op sociale media werkbalken die een vergelijkbaar effect kunnen hebben.

16. Gebruikersdiscussie

als u een CMS zoals WordPress of Drupal draait, dan hebt u de mogelijkheid om standaard commentaarformulieren op te nemen. Bij het maken van statische webpagina ‘ s moet u echter uw eigen databasesysteem Instellen om deze functionaliteit na te bootsen. Maar met de opkomst van open source technologie ontwikkelaars kunnen nu betere oplossingen zoals Disqus implementeren.

met behulp van deze methode heeft u niet voortdurend te maken met het opruimen van spam en spam uit het discussiegebied. Gebruikers die nog geen Disqus-account hebben, kunnen snel verbinding maken met behulp van populaire sociale netwerkprofielen of zich direct vanaf uw pagina Aanmelden. Zelfs WordPress gebruikers die ziek zijn van Akismet kan schakelen met behulp van de Disqus commentaar systeem plugin.

17. Verbreed het voettekstgebied

de meeste kleinere website-lay-outs zullen zeer conservatief zijn met de onderste voettekst. Dit kan enkele basis copyright info en een paar hoofdpagina links bevatten. Maar moderne web design trends ondersteunen het idee van grote voetteksten met veel meta links.

deze worden vaak gezien op websites van startups en grote bedrijven met veel aanvullende informatie. Probeer dit zeker niet te forceren in een lay-out waar het niet thuishoort, maar het is de moeite waard wat contemplatie als het openen van een grotere voettekst gebied uw website ervaring kan verbeteren.

18. Responsify Images

dynamische vloeiende en responsieve webpagina images zijn een trend op zich geworden. Het is nu bijna belachelijk om nog steeds uw afbeeldingen ingesteld op vaste breedtes, breken uit de container wrapper als vensters worden aangepast. De meest gebruikte techniek is width: 100% toepassen met behulp van CSS op alle img-elementen.

maar u kunt ook enkele andere open source methoden overwegen die nuttig kunnen zijn in een bind. ResponsiveImg is een dergelijke jQuery plugin met een zeer kleine bestandsgrootte. Voeg dit gewoon toe aan uw pagina en voer de single-line code uit die gericht is op alle afbeeldingen op de pagina. Dit is een uitstekende aanvulling op mobiele lay-outs die nog steeds met behulp van desktop-gebaseerde inhoud.

19. Menutoegankelijkheid

ik zou niet zeggen dat dit iets is dat je constant moet proberen te updaten in je lay-outs, maar het is iets dat ontwikkelaars en ontwerpers de eerste keer niet goed krijgen. Ik vind het de moeite waard om terug te kijken naar uw navigatiesystemen en brainstormen als er betere manieren zijn om submenu links te implementeren.

zijbalken en inhoudsgebieden bevatten vaak accordeonmenu ‘ s omdat er voldoende ruimte verticaal is. Maar denk aan horizontale navigatiebalken met dropdown menu ’s of glijdende submenu’ s. Zolang uw menu links zijn snel en gemakkelijk toegankelijk, er moeten geen problemen onder uw userbase.

20. Semantische Microformaten / Microdata

Microformaten en de nieuwere microdata-specificatie worden gebruikt om metadata binnen uw HTML-code uit te breiden. Deze attributen bieden extra informatie over uw inhoud en hoe deze zich verhoudt tot andere inhoud op de pagina. En uiteindelijk helpen deze resultaten Google bepalen van uw website rang voor individuele zoekwoorden, en binnen andere motoren, zoals Beeld en Video zoeken.

de meest in het bijzonder ondersteunde gedocumenteerde versie van Microdata wordt genoemd Schema.org hun website biedt alle informatie die u nodig hebt om terug te gaan en uw HTML-inhoud te bewerken met semantische schema markup. Dit schema syntaxis wordt ondersteund en ondersteund door alle grote zoekmachines, en zal waarschijnlijk evolueren naar de toekomst van semantische metadata ontwerp.

21. Het herschikken van Nav-Links

voor sommige websites is het uitvoeren van navigatie met vaste inhoud misschien geen echt probleem. Maar ik heb in sommige grotere zakelijke websites of portefeuilles gevonden dat bepaalde navigatielinks te veel voorrang krijgen. En ook zijn er een aantal items die zelden kunnen worden gevonden! Neem de tijd om uw website te bladeren en gedraag je alsof je een andere bezoeker.

overweeg in welke links u het meest geà nteresseerd bent, en eventueel welke links U toegevoegd wilt zien. Deze kunnen een korte geschiedenis van uw website, informatie over het team, contactgegevens, Privacy zorgen, persberichten, enz. Het kan ook helpen om feedback van gebruikers te verzamelen en te zien of er correlaties zijn tussen hun wensen en de vraag naar nieuwe of bijgewerkte pagina ‘ s.

22. Terug naar boven Link

als uw website zeer lange pagina ‘ s met inhoud publiceert, dan is dit een must-have element in uw lay-out. Het terug scrollen naar Top links is tegenwoordig bijna overal te vinden. Gebruikers denken niet te raken de Home-toets en het kan vervelend scrollen helemaal back-up. De beste locatie voor deze link is zwevend naast uw container, of zit direct in de voettekst zoals we hebben geïmplementeerd op Hongkiat.

23. Pas code / pre-Tags

bij het maken van een websitestylesheet zullen veel ontwikkelaars de typische pagina-elementen over het hoofd zien. Headers en alinea ‘ s zijn heel gebruikelijk, maar hoe zit het met pre-tags of inline code tags? Deze worden gebruikt om voorgeformatteerde broncode syntaxis te inkapselen zoals je zou zien in een tekst/NFO bestand. Sommige websites hebben geen behoefte aan deze elementen, maar het wordt nog steeds beschouwd als een goede praktijk om ze gestyled voor het geval dat.

24. Het toevoegen van Afbeeldingsbreedte / hoogte attributen

nu kan deze taak gemakkelijk een tijdje duren, afhankelijk van het aantal afbeeldingen dat u moet doorlopen. Maar als u afbeeldingen in uw website zonder een gedefinieerde Breedte/Hoogte vindt, is het misschien de moeite waard om ze bij te werken.

normaal gesproken worden afbeeldingen zonder deze attributen weergegeven als een vierkant van 1×1 px voordat ze volledig worden geladen. Dit zal ervoor zorgen dat uw webpagina ‘ s en scrollbar om te springen als nieuwe afbeeldingen worden geladen. Nogmaals, dit zal niet nuttig zijn voor iedereen, maar het is vermeldenswaard als een snelle fixer in sommige gevallen. En er zijn nog steeds CSS technieken voor responsieve beelden met behulp van vaste attributen.

25. JavaScript-meldingen

elke ontwikkelaar die in JavaScript heeft gewerkt, kent de typische dialoogvensters. U kunt een waarschuwingsvenster instellen dat de gebruiker een OK-knop biedt, alleen informatie weergeven. Maar er zijn ook bevestigingswaarschuwingen met ja / nee knoppen samen met het promptvenster dat vraagt om input van de gebruiker.

deze kunnen allemaal worden aangepast met behulp van alertify.js. Dit is een zeer kleine open source bibliotheek voor het ontwerpen van uw eigen frontend alert boxes. Het is zeer snel te installeren en gemakkelijk aan te passen als je nodig hebt om uw eigen CSS-stijlen.

26. Responsieve Media Queries

dit lijkt misschien niet een snel stukje code om toe te voegen, maar het kost echt niet veel tijd. Responsieve queries kunnen worden toegevoegd aan uw bestaande stylesheet of toegevoegd aan een nieuwe responsieve.css-document. Hoe dan ook, u kunt snel terugkerende stijlen Instellen om verschillende weergaveformaten van beeldschermen, tablets en smartphones te verwerken.

responsieve query ‘ s hoeven niet altijd uw lay-out volledig te beantwoorden. Soms kunnen deze gewoon stukjes inhoud verbergen, zoals uw langwerpige zijbalk of Grotere voettekst. U kunt dan een volledig responsieve mini footer die oorspronkelijk is verborgen in de desktop lay-out weer te geven. U kunt meer informatie over media queries te leren in onze collectie van responsive web tutorials.

27. Affiliate Links

er zullen altijd vergelijkbare websites zijn die online content bouwen met betrekking tot uw veld. Er zijn zeer zelden nieuwe ideeën worden gecreëerd; de meeste van hen zijn uitlopers en parodieën van bestaande inhoud. Maar in plaats van het web te veranderen in een wedstrijd waarom niet een vriendelijke sfeer te creëren? Als u de extra ruimte in uw lay-out stuur een paar e-mails naar gerelateerde websites in uw niche (zoeken Google) vragen om affiliate.

u kunt koppelingen uitwisselen en elkaar helpen verkeer te brengen. Dit opent deuren voor nieuwe gebruikers om uw website te vinden een stuk sneller, en om te zien dat u zijn opgenomen in de gemeenschap van andere websites ook. Plus het verkrijgen van backlinks van websites met autoriteit in Google kan alleen maar helpen uw domein geloofwaardigheid.

28. Icon-gebaseerde lettertypen

onlangs las ik een artikel over 24ways waarin icoonlettertypen en gegevensattributen werden besproken. Dit zette me aan het denken over de toekomst van webdesign en hoe HTML/CSS drastisch frontend codering heeft beïnvloed. Op pictogrammen gebaseerde lettertypen zijn perfect voor een aantal redenen, waaronder navigatiemenu ‘ s, geordende/ongeordende lijsten en zelfs basispagina-inhoud.

veel van deze fonts kunnen snel aan uw website worden toegevoegd met @font-face. Dit betekent dat u niet hoeft te vertrouwen op een 3rd party service zoals Typekit voor het hosten van uw lettertypen. Het betekent ook een meer semantische ontwerpstijl in plaats van alleen PNG-pictogrammen te gebruiken.

29. Schaduwen van afbeeldingskader

Als u bezoekers langer op uw pagina wilt houden, moet u wat inhoud van echte kwaliteit aanbieden. Dit kan al het geval zijn voor uw website, maar als uw stijlen zijn saai dan zullen mensen elders zoeken. Sfeer en esthetiek zijn enorm in goed webdesign.

Ik adviseer om een snelle afbeeldingsklasse te maken die een rand om uw paginaafbeeldingen wikkelt. Dit kan een kleine doos schaduw samen met randen en opvulling, ook. Alles om te helpen uw beelden springen van het scherm en opvallen in de paragrafen van de tekst.

30. Alternatieve Stylesheets

overweeg alle verschillende mediastijlen die u moet opnemen bij het bouwen van een enkele website-indeling. Dit zou er goed uitzien op desktop monitoren, laptops, tablets en eventueel zelfs smartphones. En vergeet niet projectie en print media,die niet altijd wordt ondersteund.

als u een groot publiek hebt dat deze obscure soorten media gebruikt, raad ik aan om uw eigen alternatieve stylesheets te stylen. Deze kunnen worden gelabeld op basis van het mediatype, zoals print.css, of toegevoegd aan uw bestaande stylesheets. Als er genoeg vraag is dan zullen uw bezoekers eeuwig dankbaar zijn. En het kost eerlijk gezegd niet veel tijd om uw standaard website lay-out voor gemeenschappelijke printers te bewerken.

Final Thoughts

creatieve ontwerpers en vooral frontend webontwikkelaars zullen hopelijk enkele nuttige technieken vinden in deze lijst. De meeste van deze ideeën moeten niet meer dan 1-2 uur te implementeren, terwijl veel kan worden bereikt in slechts 15-30 minuten.

het herevalueren van uw website lay-outs en het bijwerken met nieuwe trends van tijd tot tijd is vaak een goed idee, vooral met nieuwere versies van CSS3-eigenschappen die native browser schaduwen, animaties en afgeronde hoeken toestaan. Dit is een uitstekende verzameling ideeën die een blik waard zijn als u behoefte heeft aan een aantal snelle updates.

bovendien als u vragen of ideeën over het artikel hebt, kunt u dit met ons delen in de post discussion area.