• Articles
• admin

jak zahajujeme novější projekty, je snadné zapomenout na aktualizaci starších blogů a webových stránek. V tomto článku chci představit 30 solidních nápadů, které můžete rychle implementovat, aby byl váš web mnohem uživatelsky přívětivější. Ne všechny jsou založeny výhradně na front-end designu. Budu také diskutovat o populárních kódovacích technikách HTML5, které mohou pomoci webovým analyzátorům a pavoukům vhodně kategorizovat vaše data.

ne každý web bude muset být aktualizován, a ne s každou technikou dostupnou v tomto příspěvku. Tyto nápady jsou zde, aby přiměly vývojáře přemýšlet o designu a o tom, jak webové stránky vypadat hezčí. Nyní je snazší než kdy předtím vytvářet škálovatelné responzivní rozvržení webových stránek, které vypadají dobře na jakékoli digitální obrazovce, takže se pojďme pustit do sprucingu našich stránek.

1. Testování UX

jsem vinen z toho, že ne vždy provádím testy na spuštění mých webových stránek, ale kdykoli je to možné, je to jedna z mých oblíbených aktivit. Můžete se dozvědět tolik o typických interakcích uživatelů tím, že studujete, jak si hrají s vaším webem. Studie uživatelské zkušenosti mohou být prováděny výhradně prostřednictvím nástrojů, jako je Google Analytics, nebo pomocí jiných zdrojů 3. strany.

potenciální výhody, které můžete najít, jsou obrovské. Testování uživatelských zkušeností je užitečné pro webové vývojáře, aby zjistili, které oblasti jejich webových stránek jsou nepříjemné, rozbité nebo by mohly být vylepšeny. Zvažte použití nejen digitálních nástrojů, ale také vašich přátel a kolegů. Poslech nějaké skutečné lidské zpětné vazby na vašem webu může poskytnout výsledky, které jste nemohli dostat přes obrazovku počítače.

2. Mezery

můžeme považovat mezery za množství prostoru mezi prvky na vaší stránce. Někteří uživatelé nebudou vadit stísněnému rozvržení, pokud jsou na to již zvyklí. Zvažte však své cílové publikum a zvažte, kolik z nich není tak počítačově gramotných jako mladší generace.

můžete určit oblasti, které potřebují další mezery prostřednictvím split a / B testů a zachování zpětné vazby od uživatelů. Nebo jen křídlo a uvidíme, co můžete přijít s!

3. Webová písma

dynamická webová písma umožňují návrhářům vytvářet webové stránky bez omezení na typické rodiny písem. Tento trend je nyní stále populárnější, protože většina průměrných uživatelů internetu je na slušném připojení DSL / T1 / optických vláken. Zahrnutí odkazů na styly písma 3. strany již nebude mít velké zpoždění ve vašich rychlostech DL.

pravděpodobně nejlepší poskytovatel písem je prostřednictvím Google Webfonts. K aplikaci máte přístup, i když nemáte účet Google, i když registrace má výhody. Celý proces nastavení trvá pouze 3 kroky a během několika minut můžete mít na svém webu spuštěná vlastní písma Google.

4. Stíny CSS3

když mluvím o použití stínů ke zlepšení rozvržení, ve skutečnosti odkazuji na dvě odlišné vlastnosti. Stále populárnější box-shadow je opravdu skvělý pro divs a boxy ve vašem rozvržení. Připojení tohoto efektu na kontejner, obal nebo vnitřní stránky boxů poskytne hubnutí 3-D efekt na vaše webové stránky.

ale také stojí za zvážení vlastnost CSS3 text-shadow pro typografii, která vyskočí ze stránky. Apple je jednou z prvních společností, která silně implementovala textové stíny po celém svém rozvržení. Můžete vytvořit skličující efekt přidáním textových stínů, které jsou naproti barvě vašich písem(bílé stíny pro tmavý text, černé stíny pro světlý text).

5. Textury & opakující se vzory

existuje spousta webových stránek, které lze získat pouhým použitím standardních barevných schémat. Ale aby vaše webové stránky opravdu vyčnívat z davu, můžete zvážit přidání textury a opakování dlaždice do pozadí. Jedním z nejlepších bezplatných webapps je Noise Texture Generator, který lze spustit v libovolném prohlížeči.

stačí si vybrat barvu BG a množství šumu, které chcete použít, pak tato aplikace dynamicky vytvoří obrázek na pozadí. Pokud hledáte vzory a dlaždice, doporučil bych jemné vzory. Mají obrovskou sbírku použitelných textur, které si můžete zdarma stáhnout.

6. CSS3 Gradient Backgrounds

zatímco diskutujeme o pozadí, měl bych vychovávat stále populární přechody CSS3. Ty poskytují webovým vývojářům obrovský přínos udržet je z Adobe Photoshop pro webové pozadí. A tyto přechody mohou pracovat na více než jen na těle, aplikované na navigační lišty a zápatí a další důležité oblasti ve vašem rozvržení.

7. Boostrap

Twitter Bootstrap je dost možná největší frontend UI rámec pro webové vývojáře. To zahrnuje tlačítka, vstupy formuláře, odkazy, sloupce a tuny dalších předformátovaných objektů stránky. Nejběžnější použití pro Bootstrap je v rámci vstupních stránek pro nové aplikace.

ale vývojáři s otevřeným zdrojovým kódem také využívají Bootstrap při vytváření demo stránek pro knihovny, pluginy nebo mini skripty, které publikují.

mám pocit, že Bootstrap se rozrostl do tak masivního rozsahu, že může být v těchto dnech aplikován na jakýkoli web. Vývojáři, kteří najdou největší přínos, však používají Bootstrap jako rychlou náhradu za zavádění vlastních návrhů uživatelského rozhraní. Zvažte tuto knihovnu frontend při příštím spuštění webové stránky s jediným konkrétním účelem: vstupní stránka, demo produktu, Web mobilní aplikace atd.

související:

• Začínáme s Twitter Bootstrap
• Bootstrap 201: Modální okno Plugin

8. HTML5 Kickstart

většina webových vývojářů ještě neslyšela o HTML5 Kickstart vytvořeném 99Lime. To je další frontend UI knihovna, která se zaměřuje více na pěkné designové estetiky než běžné rozvržení HTML5. Existují však vzorky kódu pro generování obou v piky. Můžete si vybrat ze sad předem určených prvků, jako jsou přechodová tlačítka a rozbalovací nabídky. Neřekl bych, že to má stejnou popularitu jako Bootstrap, ale co zase dělá?

pokud máte čas a trpělivost, doporučil bych jen dát této knihovně rychlý testovací běh. Vytvořte malé rozložení karantény a zjistěte, zda se vám líbí výchozí pocit z každého prvku uživatelského rozhraní. Kickstart rozhodně není pro každý projekt, ale může to být hlavní úspora času, když je chycen v vazbě.

9. jQuery UI

animace a posuvníky a vybledlé prvky jsou obvykle spuštěny z knihovny jQuery. Toto je nejběžnější open source knihovna JavaScript pro vývojáře frontendu, ale má také doprovodnou knihovnu jQuery UI. Vývojáři to přehlížejí, myslí si, že to nemůže poskytnout příliš mnoho na oplátku za extra KB.

ale včetně knihovny UI znamená, že můžete aktualizovat volání easing pro libovolné dynamické animace stránky. To znamená, že můžete přizpůsobit typ animace jQuery pro všechny rozbalovací nabídky,vybledlé položky, rolovací prezentace a vše ostatní dynamické.

web jQueryUI má uvolňující demo stránku, kde si můžete vyzkoušet mnoho variací a zjistit, zda se vám líbí nějaké konkrétní typy animací.

související:

• jak Styl jQuery UI akordeon
• regulátor hlasitosti s jQuery UI Slider
• přizpůsobení a motivování jQuery UI Datepicker
• Drag and Drop s jQuery UI Sortable

10. Extravagantní fotografie bg

v dnešní době existuje nespočet webových stránek, které využily efekt obrázku na pozadí celé obrazovky. Pokud najdete vzorek fotografií s vysokým rozlišením, který by vypadal dobře jako obrázek na pozadí, pak se tato technika vyplatí přidat do rozvržení. Velké pozadí odvádí vynikající práci, když upoutá pozornost vašeho uživatele a zároveň naznačuje žánr vašeho webu.

pokud hledáte rychlé řešení, podívejte se na plugin jQuery Backstretch. To vyžaduje pouze jeden řádek kódu pro vaše nové pozadí, aby bylo možné správně a zodpovědně škálovat pomocí jakéhokoli rozlišení. Ale pro vývojáře, kteří jsou proti metodám JavaScript doporučuji CSS3 fullpage image techniku zveřejněné na CSS-triky.

11. Ikony Menu

Chcete-li upoutat větší pozornost návštěvníků, může být užitečné zahrnout malou ikonu nastavenou na vaší webové stránce. Standardní odkazy na nabídky jsou často dostačující pro správnou funkci a pomáhají uživatelům procházet mezi stránkami.

Nicméně jsem často ohromen, když vidím přizpůsobené ikony určené pro každý odkaz v nabídce. Najdete spoustu bezplatných sad ikon, které by vypadaly perfektně ve vaší horní navigaci, postranním panelu nebo zápatí.

12. Aktualizované barevné schéma

nemám na mysli změnu celkového designu barevného schématu, ale spíše přidání nových barev do něj. Po spuštění stejného rozvržení měsíce po měsících je hezké aktualizovat menší oblasti a překvapit opakované návštěvníky.

některé položky zájmu mohou zahrnovat kotevní odkazy, záhlaví, pozadí a panely nástrojů. Zvažte použití online nástrojů, jako je návrhář barevných schémat, ke zlepšení vaší trajektorie.

13. Vylepšená podpora prohlížeče

je obtížné vytvořit web, který je plně podporován všemi hlavními staršími prohlížeči. Ačkoli jen velmi málo lidí používá Internet Explorer 6, stále se zobrazuje v několika mých přehledech Google Analytics. Vývojáři, kteří hledají nápady, mohou zvážit provedení malé zkoušky testů prohlížeče.

mezi důležitější běžné prohlížeče patří Nejnovější verze IE9, Mozilla Firefox, Opera, Chrome, Safari a případně Camino / SeaMonkey. Internet Explorer 6-8 je však stále široce používán mezi podniky a staršími počítačovými laboratořemi. Můžete spustit rychlé vykreslování testy pomocí softwaru IETester. Podobně IE8 má režim developers tool, kde můžete přepnout do starších vykreslovacích motorů pro ladění.

14. Vestavěná typografie

možná zjistíte, že vaše stará rozvržení stále efektivně využívají textové styly, ale není tomu tak vždy. Mám pocit, že velká typografie se vejde do rozvržení mnohem jednodušší. Nemluvě o tom, že je snáze čitelný a zabírá více místa na větších rozlišeních obrazovky.

myšlenka „vybavené typografie“ je styl textu tak, aby se pohodlně vešel na vaše webové stránky. Můžete projít několika stránkami a aktualizovat tyto styly za 10-15 minut.

15. Sdílení sociálních médií

teď jsem si jistý, že většina vývojářů jsou obeznámeni s sdílení odznaky používané v populárních sociálních sítí webových stránek. Facebook, Cvrlikání, Reddit, Pinterest, Dzone a mnoho dalších externích sítí poskytují kódy, které můžete vložit na svůj web. Poté mohou návštěvníci sdílet váš odkaz na tyto sítě, aniž by museli opustit váš web.

na některých blogech nebo webových časopisech si všimnete, že tyto odznaky budou následovat posouvání stránky. To je vynikající technika, protože je často můžete nechat vznášet se těsně mimo oblast těla, kde neblokují žádný důležitý obsah. Doporučuji také procházet náš příspěvek na panelech nástrojů sociálních médií, které mohou mít podobný účinek.

16. Uživatelská diskuse

pokud používáte CMS, jako je WordPress nebo Drupal, máte možnost ve výchozím nastavení Zahrnout formuláře komentářů. Nicméně při vytváření statických webových stránek budete muset nastavit vlastní databázový systém napodobit tuto funkci. Ale s nárůstem open source technologie vývojáři mohou nyní implementovat lepší řešení, jako je Disqus.

pomocí této metody se neustále zabýváte úklidem spamu a nevyžádané pošty z diskusní oblasti. Uživatelé, kteří ještě nemají účet Disqus, se mohou rychle připojit pomocí oblíbených profilů sociálních sítí, nebo se zaregistrujte přímo z vaší stránky. Dokonce i uživatelé WordPress, kteří jsou nemocní z Akismetu, se mohou přepínat pomocí pluginu Disqus Comment System.

17. Rozšíření oblasti zápatí

většina menších rozvržení webových stránek bude velmi konzervativní se spodní částí zápatí. To může zahrnovat některé základní informace o autorských právech a několik odkazů na hlavní stránku. Moderní trendy webového designu však podporují myšlenku velkých zápatí se spoustou meta odkazů.

ty jsou běžně vidět v startupech a na webových stránkách velkých společností se spoustou dalších informací. Rozhodně se nesnažte nutit to do rozvržení, kam nepatří, nicméně stojí za to nějaké rozjímání, pokud otevření větší zápatí může zlepšit zážitek z vašeho webu.

18. Responsify Images

dynamická tekutina a citlivé obrázky webových stránek se staly trendem samy o sobě. Nyní je téměř absurdní mít stále své obrázky nastavené na pevné šířky a vymanit se z obalu kontejneru při změně velikosti oken. Nejběžnější technikou je použití width: 100% pomocí CSS na všech prvcích img.

ale můžete také zvážit některé další metody open source, které se mohou ukázat jako užitečné v vazbě. ResponsiveImg je jeden takový jQuery plugin s velmi malou velikostí souboru. Stačí to zahrnout do své stránky a spustit jednořádkový kód zaměřený na všechny obrázky na stránce. To je vynikající doplněk k mobilním rozvržením, které stále používají obsah založený na ploše.

19. Přístupnost nabídky

neřekl bych, že je to něco, co byste se měli neustále pokoušet aktualizovat ve svých rozvrženích, ale je to něco, co vývojáři a návrháři nedostanou hned napoprvé. Mám pocit, že stojí za to podívat se zpět na vaše navigační systémy a brainstorming, pokud existují nějaké lepší způsoby, jak implementovat odkazy v dílčích nabídkách.

postranní panely a oblasti obsahu často obsahují akordeonové nabídky, protože je zde dostatek místa svisle. Ale přemýšlejte o vodorovných navigačních lištách s rozevíracími nabídkami nebo posuvnými dílčími nabídkami. Dokud jsou odkazy na vaše nabídky rychlé a snadné, neměly by být mezi vaší uživatelskou základnou žádné problémy.

20. Sémantické mikroformáty / mikrodata

mikroformáty a novější SPECIFIKACE mikrodat se používají k rozšíření metadat uvnitř vašeho HTML kódu. Tyto atributy poskytují další informace o vašem obsahu a o tom, jak se vztahuje k jinému obsahu na stránce. A nakonec tyto výsledky pomáhají společnosti Google určit pořadí vašich webových stránek pro jednotlivá klíčová slova a v jiných motorech, jako je Vyhledávání obrázků a videa.

nejvýrazněji podporovaná dokumentovaná verze mikrodat se nazývá Schema.org. jejich webové stránky poskytují všechny informace, které budete potřebovat, abyste se vrátili a upravili obsah HTML pomocí značky sémantického schématu. Tato syntaxe schématu je podporována a podporována všemi hlavními vyhledávači a pravděpodobně se vyvine do budoucnosti sémantického návrhu metadat.

21. Přeskupení Nav odkazů

u některých webových stránek nemusí být spuštění navigace s pevným obsahem skutečným problémem. V některých větších obchodních webech nebo portfoliích jsem však zjistil, že určité navigační odkazy mají příliš velkou přednost. A podobně existují některé položky, které lze jen zřídka najít! Udělejte si čas na procházení webu a chovejte se, jako byste byli jiným návštěvníkem.

zvažte, které odkazy vás nejvíce zajímají, a případně jakékoli odkazy, které byste chtěli přidat. Ty mohou zahrnovat stručnou historii vašeho webu, informace o týmu, kontaktní údaje, obavy o soukromí, Tiskové zprávy, atd. Může také pomoci získat zpětnou vazbu od uživatelů a zjistit, zda existují korelace mezi jejich přáními a poptávkou po nových nebo aktualizovaných stránkách.

22. Zpět na začátek odkaz

pokud váš web publikuje velmi dlouhé stránky obsahu, pak je to nezbytný prvek ve vašem rozvržení. Rolování zpět na začátek odkazy lze nalézt téměř všude v těchto dnech. Uživatelé si nemyslí, že narazí na klíč domů a může to být nepříjemné posouvání až zpět nahoru. Nejlepší umístění pro tento odkaz je plovoucí vedle kontejneru, nebo sedí přímo v zápatí, jak jsme implementovali na Hongkiat.

23. Přizpůsobit kód / pre tagy

při prvním vytvoření webové stránky stylesheet mnoho vývojářů přehlédne typické prvky stránky. Záhlaví a odstavce jsou velmi časté,ale co předznačky nebo inline kódové značky? Ty se používají k zapouzdření předformátované syntaxe zdrojového kódu, jako byste vidět v textu / NFO souboru. Některé webové stránky Tyto prvky nepotřebují, ale stále se považuje za dobrou praxi nechat je stylizovat jen pro případ.

24. Přidání atributů šířka / výška obrázku

nyní by tento úkol mohl chvíli trvat, v závislosti na tom, kolik obrázků budete muset projít. Pokud však na svém webu najdete obrázky bez definované šířky/výšky, může být vhodné je aktualizovat.

typicky se obrázky, které postrádají tyto atributy, zobrazí jako čtverec 1×1 px před úplným načtením. To způsobí, že vaše webové stránky a posuvník skočit jako nové obrázky jsou načteny. Opět to nebude užitečné pro všechny, ale v některých případech stojí za zmínku jako rychlý fixátor. A stále existují techniky CSS pro citlivé obrázky pomocí pevných atributů.

25. JavaScript Notifications

každý vývojář, který pracoval v JavaScriptu, ví o typických dialogových oknech. Můžete nastavit výstražné pole, které nabízí uživateli tlačítko OK, jen zobrazování informací. Existují však také potvrzovací upozornění s tlačítky ano/ne spolu s výzvou, která žádá o vstup uživatele.

všechny tyto mohou být přizpůsobeny pomocí alertify.js. Jedná se o velmi malou knihovnu s otevřeným zdrojovým kódem pro navrhování vlastních frontendových výstražných polí. Nastavení je velmi rychlé a snadno se přizpůsobuje, pokud potřebujete přizpůsobit své vlastní styly CSS.

26. Responzivní dotazy médií

to se nemusí zdát jako rychlý kousek kódu, který chcete přidat, ale opravdu to nezabere moc času. Responzivní dotazy mohou být přidány do vašeho stávajícího stylu nebo přidány do nového responzivního.css dokument. Ať tak či onak, můžete rychle nastavit opakující se styly pro zpracování různých velikostí zobrazení z monitorů, tabletů a chytrých telefonů.

responzivní dotazy nemusí vždy plně reagovat na vaše rozvržení. Někdy to může jen skrýt kousky obsahu, například podlouhlý postranní panel nebo větší zápatí. Poté můžete zobrazit plně responzivní mini zápatí, které je původně skryto v rozvržení plochy. Více informací o mediálních dotazech najdete v naší sbírce responzivních webových tutoriálů.

27. Affiliate odkazy

tam bude vždy podobné webové stránky on-line stavební obsah související s vaší oblasti. Velmi zřídka se vytvářejí nové nápady, většina z nich jsou odnože a parodie z existujícího obsahu. Ale místo toho, aby se web změnil v soutěž, proč nevytvořit přátelskou atmosféru? Máte-li další prostor ve vašem rozvržení vyslat několik e-mailů na související webové stránky ve vašem výklenku (vyhledávání Google) s žádostí o přidružení.

můžete si vyměňovat odkazy a pomáhat si navzájem přenášet provoz. To otevírá dveře novým uživatelům, aby našli váš web mnohem rychleji, a vidět, že jste také součástí komunity jiných webů. Plus získání zpětných odkazů z webů s autoritou v Googlu může pomoci pouze důvěryhodnosti vaší domény.

28. Fonty založené na ikonách

Nedávno jsem četl článek o 24ways, který diskutoval o fontech ikon a atributech dat. To mě přimělo přemýšlet o budoucnosti webdesignu a o tom, jak HTML/CSS dramaticky ovlivnilo kódování frontendu. Písma založená na ikonách jsou ideální z mnoha důvodů, včetně navigačních nabídek, uspořádaných / neuspořádaných seznamů a dokonce i základního obsahu stránky.

mnoho z těchto písem lze rychle přidat na váš web pomocí @font-face. To znamená, že pro hostování písem se nemusíte spoléhat na službu 3rd party, jako je Typekit. To také znamená více sémantický styl designu, spíše než jen pomocí ikon PNG.

29. Stíny obrazových polí

pokud chcete udržet návštěvníky na vaší stránce déle, musíte nabídnout nějaký obsah v reálné kvalitě. To již může být případ vašeho webu, pokud jsou však vaše styly nevýrazné, lidé budou hledat jinde. Atmosféra a estetika jsou obrovské v dobrém webdesignu.

doporučuji vytvořit třídu rychlých obrázků, která obtéká ohraničení kolem obrázků vaší stránky. To může zahrnovat malý stín krabice spolu s okraji a polstrováním, také. Cokoli, co pomůže vašim obrázkům vyskočit z obrazovky a vyniknout v odstavcích textu.

30. Alternativní styly

zvažte všechny různé styly médií, které musíte zahrnout při vytváření jediného rozvržení webových stránek. To by muselo vypadat dobře na stolních monitorech, noteboocích, tabletech a možná i chytrých telefonech. A nezapomeňte na projekční a tisková média, která nejsou vždy podporována.

pokud máte velké publikum, které používá tyto obskurní typy médií, doporučuji styling vlastní alternativní styly. Ty mohou být označeny na základě typu média, jako je tisk.css, nebo přidány do stávajících stylů. Pokud je dostatek poptávky, budou vaši návštěvníci věčně vděční. A upřímně to nezabere spoustu času na úpravu výchozího rozvržení webových stránek pro běžné tiskárny.

Závěrečné myšlenky

kreativní návrháři a zejména weboví vývojáři frontendu doufejme najdou mezi tímto seznamem některé užitečné techniky. Většina z těchto nápadů by neměla trvat déle než 1-2 hodiny, zatímco mnoho z nich může být provedeno za pouhých 15-30 minut.

přehodnocení rozvržení webových stránek a aktualizace s novými trendy z času na čas je často dobrý nápad, zejména s novějšími verzemi vlastností CSS3, které umožňují nativní stíny prohlížeče, animace a zaoblené rohy. Jedná se o vynikající sbírku nápadů, které stojí za to se podívat, pokud potřebujete nějaké rychlé aktualizace.

navíc, pokud máte dotazy nebo nápady týkající se článku, neváhejte se s námi podělit v diskusní oblasti po.