• Articles
• admin

när vi startar nyare projekt är det lätt att glömma att uppdatera äldre bloggar och webbplatser. I den här artikeln vill jag presentera 30 solida ideer som du snabbt kan implementera för att göra din webbplats så mycket mer användarvänlig. Inte alla är baserade enbart på front-end design. Jag kommer också att diskutera populära HTML5-kodningstekniker som kan hjälpa webbparser och spindlar att kategorisera dina data på lämpligt sätt.

inte varje webbplats behöver uppdateras, och inte med alla tillgängliga tekniker i det här inlägget. Dessa ideer är här för att få utvecklare att tänka när det gäller design och hur man får webbplatser att se snyggare ut. Det är nu enklare än någonsin att bygga skalbara responsiva webbplatslayouter som ser bra ut på alla digitala skärmar, så låt oss komma ner till sprucing upp våra webbplatser.

1. UX-testning

jag är skyldig att inte alltid köra tester på min webbplatslansering, men när det är möjligt är detta en av mina favoritaktiviteter. Du kan lära dig så mycket om typiska användarinteraktioner genom att studera hur de spelar med din webbplats. Användarupplevelsestudier kan genomföras enbart genom verktyg som Google Analytics eller med hjälp av andra 3: e parts resurser.

de potentiella fördelarna du kan hitta är enorma. Användarupplevelsetestning är till hjälp för webbutvecklare att lära sig vilka områden på deras webbplats som är irriterande, trasiga eller kan förbättras. Överväg att använda inte bara digitala verktyg utan också dina vänner och kollegor. Att lyssna på verklig mänsklig feedback på din webbplats kan ge resultat som du inte kunde komma igenom en datorskärm.

2. Whitespace

vi kan tänka på whitespace som mängden utrymme mellan element på din sida. Vissa användare har inget emot en trång layout om de redan är vana vid detta. Men överväga din målgrupp och överväga hur många av dem inte är lika datorkunniga som den yngre generationen.

du kan bestämma områden som behöver extra avstånd genom delade A/B-tester och behålla användarens återkoppling. Eller bara vinge det och se vad du kan komma med!

3. Webbfonter

dynamiska webbfonter tillåter designers att bygga webbsidor utan att vara begränsade till de typiska teckensnittsfamiljerna. Denna trend har blivit alltmer populär nu när de flesta genomsnittliga Internetanvändare har en anständig DSL / T1 / fiberoptisk anslutning. Inklusive hänvisningar till 3: e parts typsnitt stylesheets kommer inte längre att producera stora eftersläpning i DL hastigheter.

förmodligen den bästa leverantören av teckensnitt är via Google Webfonts. Du kan komma åt applikationen även om du inte har ett Google-konto, även om det finns förmåner att registrera. Den fullständiga installationsprocessen tar bara 3 steg och du kan ha anpassade Google-teckensnitt som körs på din webbplats inom några minuter.

4. CSS3 Shadows

när jag pratar om att använda skuggor för att förbättra din layout refererar jag faktiskt till två distinkta egenskaper. Den ständigt populära box-shadow är riktigt cool för divs och lådor i din layout. Att lägga till denna effekt på din behållare, omslag eller inre sidlådor ger en bantning 3D-effekt på din webbsida.

men det är också värt att överväga egenskapen CSS3 text-shadow för typografi som hoppar av sidan. Apple är ett av de första företagen som kraftigt implementerar textskuggor runt sin layout. Du kan bygga en skrämmande effekt genom att lägga till textskuggor som är motsatta färgen på dina teckensnitt (vita skuggor för mörk text, svarta skuggor för lätt text).

5. Texturer & upprepande mönster

det finns gott om webbplatser som kan få genom att bara använda vanliga färgscheman. Men för att din webbplats verkligen ska sticka ut från mängden kan du överväga att lägga till texturer och upprepa brickor i din bakgrund. En av de coolaste gratis webapps är Noise Texture Generator som kan köras på alla webbläsare.

välj bara BG färg och mängden brus du vill använda, då denna app kommer att skapa en kaklad bakgrundsbild dynamiskt. Om du letar efter mönster och plattor skulle jag rekommendera subtila mönster. De har en enorm samling användbara texturer som du kan ladda ner gratis.

6. CSS3 Gradient bakgrunder

medan vi diskuterar bakgrunder borde jag ta upp de ständigt populära CSS3-gradienterna. Dessa ger webbutvecklare en enorm fördel att hålla dem borta från Adobe Photoshop för webbbakgrunder. Och dessa lutningar kan fungera på mer än bara kroppen, appliceras på navigeringsfält och sidfot och andra viktiga områden i din layout.

7. Boostrap

Twitters Bootstrap är förmodligen den största frontend UI-ramen för webbutvecklare. Detta inkluderar knappar, formuläringångar, länkar, kolumner och massor av andra förformaterade sido objekt. Den vanligaste användningen för Bootstrap är inom målsidor för nya applikationer.

men open source-utvecklare använder också Bootstrap när de bygger demosidor för bibliotek, plugins eller miniskript som de publicerar.

jag känner att Bootstrap har vuxit i så stor utsträckning att den kan tillämpas på vilken webbplats som helst idag. Men utvecklare som finner den största fördelen använder Bootstrap som en snabb ersättning för att rulla ut sina egna UI-mönster. Tänk på det här frontendbiblioteket nästa gång du lanserar en webbsida med ett enda konkret syfte: målsida, produktdemo, mobilappwebbplats etc.

relaterat:

• komma igång med Twitter Bootstrap
• Bootstrap 201: Modal fönster Plugin

8. HTML5 Kickstart

de flesta webbutvecklare har ännu inte hört talas om HTML5 Kickstart skapad av 99Lime. Detta är en annan frontend UI bibliotek som fokuserar mer på snygg design estetik än vanliga HTML5 layouter. Men det finns kodprover för att generera båda i spader. Du kan välja mellan uppsättningar av förutbestämda element som lutning knappar och rullgardinsmenyer. Jag skulle inte säga att detta har samma popularitet som Bootstrap, men vad gör det igen?

om du har tid och tålamod skulle jag rekommendera att bara ge detta bibliotek en snabb testkörning. Bygg en liten sandlåda layout och se om du njuta av standard känslan av varje UI element. Kickstart är verkligen inte för varje projekt, men det kan vara en stor tidsbesparare när den fångas i en bindning.

9. jQuery UI

animationer och reglage och blekningselement körs vanligtvis av jQuery-biblioteket. Detta är den vanligaste open source JavaScript-bibliotek för frontend utvecklare, men det har också en följeslagare bibliotek jQuery UI. Utvecklare förbiser detta och tror att det inte kan ge mycket i utbyte mot extra KB.

men inklusive UI-biblioteket betyder att du kan uppdatera easing – samtalet för alla dynamiska sidanimationer. Det betyder att du kan anpassa jQuery-animeringstypen för alla rullgardinsmenyer, blekande objekt, rullande bildspel och allt annat dynamiskt.

jQueryUI-webbplatsen har en lättnadssida där du kan testa de många variationerna och se om du gillar några specifika animationstyper.

relaterat:

• hur Stil jQuery UI dragspel
• volymkontroll med jQuery UI reglaget
• Anpassa och teman jQuery UI Datepicker
• dra och släpp med jQuery UI Sorterbara

10. Extravaganta bg foton

det finns otaliga webbplatser nuförtiden som har utnyttjat fullscreen bakgrundsbild effekt. Om du kan hitta ett högupplöst fotoprov som skulle se bra ut som bakgrundsbild, kan den här tekniken vara värt att lägga till i din layout. Stora bakgrunder gör ett utmärkt jobb med att fånga användarens uppmärksamhet samtidigt som det antyder genren på din webbplats.

om du letar efter en snabb lösning kolla in jQuery Backstretch plugin. Detta kräver bara en enda rad kod för dina nya bakgrunder att skala ordentligt och responsivt med någon upplösning. Men för utvecklare som är emot JavaScript-metoder rekommenderar jag CSS3 fullpage image technique publicerad på CSS-Tricks.

11. Menyikoner

för att dra mer uppmärksamhet från besökare kan det vara värt att inkludera en liten ikonuppsättning på din webbsida. Standardmenylänkar räcker ofta för att fungera korrekt och hjälpa användare att navigera mellan sidor.

men jag är ofta imponerad av att se anpassade ikoner utformade för varje meny länk. Du kan hitta massor av gratis ikonuppsättningar som skulle se perfekt ut i din toppnavigering, sidofält eller sidfot.

12. Uppdaterat färgschema

jag menar faktiskt inte att ändra din övergripande färgschemadesign, men mer som att lägga till nya färger i den. Efter att ha kört samma layout i månader efter månader är det trevligt att uppdatera mindre områden och fånga upprepade besökare överraskande.

vissa objekt av intresse kan innehålla ankarlänkar, rubriker, bakgrunder och verktygsfält. Överväg att använda onlineverktyg som Color Scheme Designer för att förbättra din bana.

13. Förbättrad webbläsarsupport

det är svårt att bygga en webbplats som stöds fullt ut av alla större äldre webbläsare. Även om väldigt få människor kör Internet Explorer 6 visas det fortfarande i några av mina Google Analytics-rapporter. Utvecklare som letar efter ideer kan överväga att göra en liten test av webbläsartester.

de viktigare vanliga webbläsare inkluderar den senaste versionen av IE9, Mozilla Firefox, Opera, Chrome, Safari, och eventuellt Camino/SeaMonkey. Men Internet Explorer 6-8 används fortfarande i stor utsträckning bland företag och äldre datalaboratorier. Du kan köra snabb rendering tester med hjälp av ietester programvara. På samma sätt har IE8 ett utvecklarverktygsläge där du kan växla till äldre renderingsmotorer för felsökning.

14. Monterad typografi

du kanske upptäcker att dina gamla layouter fortfarande använder textstilar effektivt, men det är inte alltid fallet. Jag känner att Stor typografi kommer att passa in i layouter mycket lättare. För att inte tala om det är lättare att läsa och tar upp mer utrymme på större skärmupplösningar.

tanken med ”monterad typografi” är styling text så att den passar tätt i din webbplats. Du kan gå igenom några sidor och uppdatera dessa stilar på 10-15 minuter.

15. Social Media Sharing

vid det här laget är jag säker på att de flesta utvecklare är bekanta med delnings märken som används i populära sociala nätverk webbplatser. Facebook, Twitter, Reddit, Pinterest, Dzone och många andra externa nätverk ger koder som du kan bädda in på din webbplats. Då kan besökare dela din länk till dessa nätverk utan att behöva lämna din webbplats.

på vissa bloggar eller webbtidningar kommer du att märka dessa märken kommer att följa dig rulla ner på sidan. Detta är en utmärkt teknik eftersom du ofta kan få dem att sväva precis utanför kroppsområdet där de inte blockerar något viktigt innehåll. Jag rekommenderar också att du bläddrar i vårt inlägg på verktygsfält på sociala medier som kan ha en liknande effekt.

16. Användardiskussion

om du kör ett CMS som WordPress eller Drupal har du möjlighet att inkludera kommentarformulär som standard. Men när du skapar statiska webbsidor skulle du behöva ställa in ditt eget databassystem för att efterlikna denna funktion. Men med ökningen av Open source-teknikutvecklare kan nu implementera bättre lösningar som Disqus.

med den här metoden arbetar du inte ständigt med att städa upp spam och skräp från diskussionsområdet. Användare som inte redan har ett Disqus-konto kan snabbt ansluta med populära sociala nätverksprofiler eller registrera sig direkt från din sida. Även WordPress-användare som är sjuka av Akismet kan byta med Disqus Comment-systemplugin.

17. Bredda sidfotsområdet

de flesta mindre webbplatslayouter kommer att vara mycket konservativa med avsnittet nedre sidfot. Detta kan innehålla några grundläggande upphovsrätt info och några huvudsidan länkar. Men moderna webbdesigntrender stöder tanken på stora sidfot med massor av metalänkar.

dessa ses ofta i startups och stora företags webbplatser med massor av ytterligare information. Visst försök inte tvinga detta till en layout där det inte hör hemma, men det är värt lite kontemplation om att öppna ett större sidfotområde kan förbättra din webbplatsupplevelse.

18. Responsify bilder

dynamisk vätska och lyhörd webbsida bilder har blivit en trend i sig. Det är nu nästan löjligt att fortfarande ha dina bilder inställda på fasta bredder, bryta ut ur behållaromslaget när windows ändras. Den vanligaste tekniken är att använda width: 100% med CSS på alla img-element.

men du kan också överväga några andra open source-metoder som kan vara användbara i en bindning. ResponsiveImg är en sådan jQuery plugin med en mycket liten filstorlek. Inkludera bara detta på din sida och kör enradig kod som riktar sig till alla bilder på sidan. Detta är ett utmärkt komplement till mobila layouter som fortfarande använder skrivbordsbaserat innehåll.

19. Meny tillgänglighet

jag skulle inte säga att det här är något du ständigt bör försöka uppdatera i dina layouter men det är något som utvecklare och designers inte får rätt första gången. Jag tycker att det är värt att titta tillbaka på dina navigationssystem och brainstorming om det finns några bättre sätt att implementera undermenylänkar.

sidofält och innehållsområden håller ofta dragspelmenyer eftersom det finns tillräckligt med utrymme vertikalt. Men tänk på horisontella navigeringsfält med rullgardinsmenyer eller glidande undermenyer. Så länge dina menylänkar är snabba och enkla att komma åt, borde det inte vara några problem bland din användarbas.

20. Semantiska mikroformat / mikrodata

mikroformat och den nyare Mikrodataspecifikationen används för att utöka metadata i din HTML-kod. Dessa attribut ger extra information om ditt innehåll och hur det relaterar till annat innehåll på sidan. Och i slutändan hjälper dessa resultat Google att bestämma webbplatsens rangordning för enskilda sökord och inom andra motorer som bild-och videosökning.

den mest notably stöds dokumenterad version av mikrodata kallas Schema.org. deras webbplats ger all information du behöver för att gå tillbaka och redigera ditt HTML-innehåll med semantisk schemamarkering. Denna Schemasyntax stöds och stöds av alla stora sökmotorer och kommer sannolikt att utvecklas till framtiden för semantisk metadatadesign.

21. Ordna Nav länkar

för vissa webbplatser, körs på fast innehåll navigering kan inte vara ett verkligt problem. Men jag har hittat i vissa större affärswebbplatser eller portföljer att vissa navigeringslänkar ges för mycket företräde. Och på samma sätt finns det några saker som sällan kan hittas! Ta dig tid att surfa på din webbplats och bete dig som om du var någon annan besökare.

Tänk på vilka länkar du är mest intresserad av, och eventuellt eventuella länkar som du vill se läggas till. Dessa kan innehålla en kort historik över din webbplats, Information om teamet, kontaktuppgifter, integritetsfrågor, pressmeddelanden etc. Det kan också hjälpa till att samla in användarfeedback och se om det finns samband mellan deras önskemål och efterfrågan på nya eller uppdaterade sidor.

22. Tillbaka till toppen länk

om din webbplats publicerar mycket långa sidor med innehåll är detta ett måste i din layout. Rullning tillbaka till toppen länkar kan hittas nästan överallt dessa dagar. Användare tror inte att slå hemknappen och det kan vara irriterande att rulla hela vägen tillbaka. Den bästa platsen för den här länken flyter bredvid din behållare, eller sitter precis i sidfoten som vi har implementerat på Hongkiat.

23. Anpassa kod / pre Tags

när du först skapar en webbplats stilark kommer många utvecklare att förbise de typiska sidelementen. Rubriker och stycken är mycket vanliga, men hur är det med pre-taggar eller inline-kodtaggar? Dessa används för att inkapsla förformaterad källkod syntax som du skulle se i en text/NFO-fil. Vissa webbplatser har inget behov av dessa element, men det anses fortfarande vara god praxis att få dem utformade för alla fall.

24. Lägga till bildbredd / höjd attribut

nu kan den här uppgiften enkelt ta ett tag, beroende på hur många bilder du måste gå igenom. Men om du hittar bilder på din webbplats utan en definierad bredd/höjd kan det vara värt att uppdatera dem.

vanligtvis visas bilder som saknar dessa attribut som en kvadrat på 1 kg 1 px innan de laddas i sin helhet. Detta kommer att orsaka dina webbsidor och rullningslisten för att hoppa som nya bilder laddas. Återigen kommer det inte att vara till hjälp för alla, men det är värt att notera som en snabb fixare i vissa fall. Och det finns fortfarande CSS-tekniker för responsiva bilder med fasta attribut.

25. JavaScript-meddelanden

alla utvecklare som har arbetat i JavaScript vet om de typiska dialogrutorna. Du kan ställa in en varningsruta som ger användaren en OK-knapp, bara visa information. Men det finns också bekräftelsevarningar med ja / nej-knappar tillsammans med snabbrutan som ber om användarinmatning.

alla dessa kan anpassas med alertify.js. Detta är ett mycket litet open source-bibliotek för att designa dina egna frontend alert-rutor. Det är väldigt snabbt att installera och enkelt att anpassa om du behöver matcha dina egna CSS-stilar.

26. Responsive Media Queries

det här kanske inte verkar som en snabb bit kod att lägga till, men det tar verkligen inte mycket tid alls. Responsiva frågor kan läggas till i din befintliga stilmall eller läggas till i en ny lyhörd.css-dokument. Hur som helst kan du snabbt ställa in återkommande stilar för att hantera olika skärmstorlekar från bildskärmar, surfplattor och smartphones.

responsiva frågor behöver inte alltid svara fullt ut på din layout. Ibland kan dessa bara dölja bitar av innehåll, till exempel din långsträckta sidofält eller större sidfot. Du kan sedan visa en fullt lyhörd Mini sidfot som ursprungligen är dold i skrivbordslayouten. Du kan lära dig mer om mediefrågor i vår samling av responsiva webbhandledning.

27. Affiliate länkar

det kommer alltid att finnas liknande webbplatser online bygga innehåll relaterat till ditt område. Det finns mycket sällan nya ideer skapas; de flesta av dem är utlöpare och parodier från befintligt innehåll. Men istället för att göra webben till en tävling varför inte skapa en vänlig atmosfär? Om du har extra utrymme i din layout skicka ut några e-postmeddelanden till relaterade webbplatser i din nisch (Sök på Google) ber att affiliate.

du kan utbyta länkar och hjälpa till att få varandra trafik. Detta öppnar dörrar för nya användare att hitta din webbplats mycket snabbare, och att se att du ingår i gemenskapen av andra webbplatser samt. Plus att få bakåtlänkar från webbplatser med auktoritet i Google kan bara hjälpa din domäns trovärdighet.

28. Ikonbaserade teckensnitt

nyligen läste jag en artikel om 24ways som diskuterade ikonfonter och dataattribut. Detta fick mig att tänka på framtiden för webbdesign och hur HTML/CSS har dramatiskt påverkat frontend kodning. Ikonbaserade teckensnitt är perfekta för ett antal skäl, inklusive navigeringsmenyer, beställda / oordnade listor och till och med grundläggande sidinnehåll.

många av dessa teckensnitt kan snabbt läggas till på din webbplats med @font-face. Det betyder att du inte behöver lita på en 3: e parts tjänst som Typekit för att vara värd för dina teckensnitt. Det betyder också en mer semantisk designstil snarare än att bara använda PNG-ikoner.

29. Image Box Shadows

om du vill behålla besökare på din sida längre måste du erbjuda riktigt kvalitetsinnehåll. Detta kan redan vara fallet för din webbplats, men om dina stilar är intetsägande då människor kommer att leta någon annanstans. Atmosfär och estetik är enorma i bra webbdesign.

jag rekommenderar att du bygger en snabbbildsklass som sveper en kant runt dina sidbilder. Detta kan inkludera en liten låda skugga tillsammans med gränser och stoppning, för. Allt för att hjälpa dina bilder att hoppa av skärmen och sticka ut i textstyckena.

30. Alternativa formatmallar

Tänk på alla olika mediestilar du måste inkludera när du bygger en enda webbplatslayout. Detta måste se bra ut på stationära bildskärmar, bärbara datorer, surfplattor och eventuellt även smartphones. Och glöm inte projektion och utskriftsmedia, som inte alltid stöds.

om du har en stor publik som använder dessa obskyra typer av media rekommenderar jag att du stylar dina egna alternativa stilmallar. Dessa kan märkas baserat på medietypen, t.ex. utskrift.css, eller läggas till i dina befintliga formatmallar. Om det finns tillräckligt med efterfrågan kommer dina besökare att vara evigt tacksamma. Och det tar ärligt talat inte mycket tid att redigera din standardwebbplatslayout för vanliga skrivare.

slutliga tankar

kreativa designers och särskilt frontend webbutvecklare kommer förhoppningsvis att hitta några användbara tekniker bland den här listan. De flesta av dessa tankar bör inte ta mer än 1-2 timmar att genomföra, medan många kan uppnås på så lite som 15-30 minuter.

omvärdera dina webbplatslayouter och uppdatera med nya trender från tid till annan är ofta en bra ide, särskilt med nyare versioner av CSS3-egenskaper som tillåter inbyggda webbläsarskuggor, animationer och rundade hörn. Detta är en utmärkt samling ideer värda en blick om du behöver några snabba uppdateringar.

dessutom om du har frågor eller tankar om artikeln kan du dela med oss i postdiskussionsområdet.