• Articles
• admin

kun käynnistämme uudempia projekteja, vanhempien blogien ja verkkosivujen päivittäminen unohtuu helposti. Tässä artikkelissa haluan esittää 30 vankka ideoita voit nopeasti toteuttaa tehdä sivuston juuri että paljon käyttäjäystävällisempi. Kaikki niistä eivät perustu pelkästään etupään suunnitteluun. Aion myös keskustella suosittu HTML5 koodaus tekniikoita, jotka voivat auttaa web parsers ja hämähäkit luokitella tietosi asianmukaisesti.

kaikkia verkkosivuja ei tarvitse päivittää, eikä kaikilla tämän julkaisun tekniikoilla. Nämä ideat ovat täällä saada kehittäjät ajattelevat kannalta suunnittelu ja miten tehdä sivustot näyttävät kauniimpi. Se on nyt helpompaa kuin koskaan ennen rakentaa skaalautuva reagoiva verkkosivuilla asetteluja, jotka näyttävät hyvältä tahansa digitaalisen näytön, joten mennään alas sprucing up sivustomme.

1. UX-testaus

olen syyllinen siihen, etten aina aja testejä nettisivujeni lanseerauksissa, mutta aina kun mahdollista tämä on yksi suosikkitoiminnoistani. Voit oppia niin paljon tyypillisistä käyttäjien vuorovaikutuksista tutkimalla, miten he pelaavat sivustollasi. Käyttäjäkokemustutkimuksia voidaan tehdä ainoastaan Google Analyticsin kaltaisilla työkaluilla tai käyttämällä muita kolmannen osapuolen resursseja.

mahdolliset hyödyt ovat valtavat. Käyttäjäkokemuksen testaus on hyödyllistä web-kehittäjille oppia, mitkä alueet niiden verkkosivuilla ovat ärsyttäviä, rikki, tai voitaisiin parantaa. Harkitse digitaalisten työkalujen lisäksi myös ystäviesi ja kollegoidesi käyttöä. Kuuntelemalla joitakin todellisia ihmisen palautetta sivustossasi voi antaa tuloksia et voinut saada läpi tietokoneen näytön.

2. Välilyönnit

voimme ajatella välilyöntejä sivusi elementtien välisen tilan määränä. Jotkut käyttäjät eivät välitä ahdas ulkoasu, jos he ovat jo tottuneet tähän. Mutta ajattele kohdeyleisöäsi ja mieti, kuinka monet heistä eivät ole yhtä tietoteknisesti lukutaitoisia kuin nuorempi sukupolvi.

voit määrittää alueet, jotka tarvitsevat lisäväliä jaettujen A/B-testien avulla ja säilyttää käyttäjäpalautteen. Tai vain siipi ja katso, mitä voit keksiä!

3. Verkkofontit

dynaamiset verkkofontit antavat suunnittelijoille mahdollisuuden rakentaa verkkosivuja rajoittumatta tyypillisiin kirjasinperheisiin. Tämä suuntaus on tullut yhä suositumpi nyt, kun useimmat keskimääräiset Internetin käyttäjät ovat kunnon DSL / T1 / valokuituyhteys. Mukaan lukien viittaukset 3rd party-kirjasintyylisivuihin eivät enää tuota merkittävää viivettä DL-nopeuksissasi.

melko mahdollisesti paras fonttien tarjoaja on Googlen Webfontien kautta. Voit käyttää sovellusta, vaikka sinulla ei olisi Google-tiliä, vaikka rekisteröitymisessä on etunsa. Täydellinen asennus kestää vain 3 vaihetta ja voit olla mukautettuja Google fontteja käynnissä sivustossasi muutamassa minuutissa.

4. CSS3 Shadows

When I ’ m talking about using shadows to improve your layout I am actually referencing two different properties. Yhä suosittu box-shadow on todella viileä divs ja laatikot sisällä asettelu. Tämän vaikutuksen liittäminen konttiin, kääreeseen tai sisäsivun laatikoihin antaa laihtumiseen 3-D-vaikutuksen verkkosivullesi.

mutta on myös syytä harkita CSS3 teksti-varjo ominaisuus typografia, joka hyppää pois sivulta. Apple on yksi ensimmäisistä yrityksistä, jotka ovat ottaneet voimakkaasti käyttöön tekstivarjoja kaikkialla ulkoasussaan. Voit luoda pelottavan efektin lisäämällä tekstivarjoja, jotka ovat fonttien värin vastakohtia (valkoiset varjot tummalle tekstille, mustat varjot vaalealle tekstille).

5. Tekstuurit & toistavat kuviot

on paljon sivustoja, jotka pärjäävät pelkillä tavallisilla väriteemoilla. Mutta saada sivustosi todella erottuvat joukosta voit harkita lisäämällä kuvioita ja toistamalla laatat taustaasi. Yksi hienoimmista ilmainen webapps on Melu tekstuuri generaattori, joka voi toimia millä tahansa selaimella.

valitse vain bg-väri ja melun määrä, jota haluat käyttää, niin tämä sovellus luo kaakeloidun taustakuvan dynaamisesti. Jos etsit kuvioita ja laattoja, suosittelen hienovaraisia kuvioita. Heillä on valtava kokoelma käyttökelpoisia tekstuureja, jotka voit ladata ilmaiseksi.

6. CSS3 Gradient Backgrounds

while we ’ re discussing backgrounds I should to bring up the ever-popular CSS3 gradients. Nämä tarjoavat web-kehittäjille valtava etu pitää ne pois Adobe Photoshop web taustat. Ja nämä liukuvärit voivat vaikuttaa muuhunkin kuin runkoon, jota käytetään navigointipalkkeihin ja alatunnistimiin ja muihin tärkeisiin alueisiin asettelussasi.

7. Boostrap

Twitterin Bootstrap on melko mahdollisesti suurin frontend-KÄYTTÖLIITTYMÄKEHYS web-kehittäjille. Tämä sisältää painikkeet, lomaketulot, linkit, sarakkeet, ja tonnia muita valmiiksi muotoiltuja sivun objekteja. Yleisimmin Bootstrapia käytetään uusien sovellusten aloitussivujen sisällä.

mutta avoimen lähdekoodin kehittäjät hyödyntävät Bootstrapia myös rakentaessaan demosivuja julkaisemilleen kirjastoille, laajennuksille tai mini-skripteille.

minusta tuntuu, että Bootstrap on kasvanut niin massiiviseksi, että sitä voidaan soveltaa nykyään mille tahansa verkkosivustolle. Kuitenkin kehittäjät, jotka löytävät suurimman hyödyn, käyttävät Bootstrapia nopeana korvaajana omien KÄYTTÖLIITTYMÄMALLIENSA käyttöönotossa. Harkitse tätä frontend-kirjastoa seuraavan kerran, kun käynnistät verkkosivun, jolla on yksi konkreettinen tarkoitus: aloitussivu, tuotedemo, mobiilisovellussivusto jne.

liittyvät:

• aloittaminen Twitter Bootstrap
• Bootstrap 201: Modaalinen Ikkunaliitännäinen

8. HTML5 Kickstart

useimmat web-kehittäjät eivät ole vielä kuulleet 99LIMEN luomasta HTML5 Kickstartista. Tämä on toinen frontend UI kirjasto, joka keskittyy enemmän mukava design estetiikka kuin yhteinen HTML5 asetteluja. Mutta on olemassa koodinäytteitä, jotka tuottavat molemmat padassa. Voit valita ennalta määrätyistä elementeistä, kuten liukuväripainikkeista ja pudotusvalikoista. En sanoisi, että tämä on yhtä suosittu kuin Bootstrap, mutta toisaalta mikä?

jos sinulla on aikaa ja kärsivällisyyttä, suosittelisin vain tämän kirjaston pikatestausta. Rakenna pieni hiekkalaatikko asettelu ja katso, jos nautit oletuksena tunne pois kunkin UI Elementti. Kickstart ei varmasti sovi jokaiseen projektiin, mutta se voi olla pulaan joutuessaan merkittävä ajansäästäjä.

9. jQuery UI

animaatiot ja liukusäätimet ja haalistuvat elementit ovat yleensä käynnissä jQueryn kirjastosta. Tämä on yleisin avoimen lähdekoodin JavaScript-kirjasto frontend-kehittäjille, mutta sillä on myös kumppanikirjasto jQuery UI. Kehittäjät unohtaa tämän, ajattelu se ei voi tarjota kovin paljon vastineeksi ylimääräistä KB.

, mutta UI-kirjasto mukaan lukien voit päivittää easing – kutsun mille tahansa dynaamiselle sivuanimaatiolle. Tämä tarkoittaa, että voit muokata jQuery animaatio tyyppi tahansa pudotusvalikoista, häipyminen kohteita, vieritys diaesityksiä, ja kaikki muu dynaaminen.

jQueryUI-sivustolla on helpottava demosivu, jossa voi kokeilla erilaisia variaatioita ja katsoa, pidätkö jostain tietystä animaatiotyypistä.

liittyvät:

• jQuery UI Harmonikka
• äänenvoimakkuuden säädin jQuery UI Slider
• räätälöinti ja Teemoitus jQuery UI Datepicker
• vedä ja pudota jQuery UI Sortable

10. Ylelliset bg-kuvat

nykyään on olemassa lukemattomia verkkosivustoja, joissa on hyödynnetty fullscreen-taustakuvaefektiä. Jos löydät korkean resoluution valokuvanäytteen, joka näyttäisi hyvältä taustakuvana, tämä tekniikka voi olla syytä lisätä asetteluun. Suuret taustat tekevät erinomaista työtä kiinni käyttäjän huomiota samalla vihjaamalla genre sivustosi.

jos etsit nopeaa ratkaisua, tutustu jQuery Backstretch-liitännäiseen. Tämä vaatii vain yhden rivin koodia, jotta uudet taustasi skaalautuvat oikein ja reagoivasti käyttäen mitä tahansa resoluutiota. Mutta kehittäjille, jotka vastustavat JavaScript menetelmiä suosittelen CSS3 fullpage kuva tekniikka lähetetty CSS-temppuja.

11. Valikkokuvakkeet

herättääksesi enemmän huomiota vierailijoilta voi olla hyödyllistä sisällyttää pieni kuvakekokonaisuus verkkosivullesi. Tavalliset valikkolinkit riittävät usein toimimaan oikein ja auttamaan käyttäjiä navigoimaan sivujen välillä.

olen kuitenkin usein vaikuttunut nähdessäni räätälöityjä kuvakkeita, jotka on suunniteltu jokaiselle valikon Linkille. Löydät tonnia ilmaisia kuvakkeita, jotka näyttäisivät täydellisiltä top navigointi, sivupalkki, tai alatunnisteen alueella.

12. Päivitetty värimaailma

en oikeastaan tarkoita yleisen värimaailman muuttamista, vaan enemmänkin uusien värien liittämistä siihen. Kun olet jatkanut samaa asettelua kuukausia toisensa jälkeen, on mukava päivittää pienempiä alueita ja yllättää toistuvat kävijät.

joitakin kiinnostavia kohteita voivat olla ankkurilinkit, otsakkeet, taustat ja työkalupalkit. Harkitse online-työkaluja, kuten värimaailman suunnittelija parantaa lentoradan.

13. Parannettu Selaintuki

on vaikea rakentaa verkkosivustoa, joka on täysin kaikkien tärkeimpien vanhojen selainten tukema. Vaikka hyvin harvat ihmiset ovat käynnissä Internet Explorer 6 se silti näkyy muutaman Google Analytics raportit. Ideoita etsivät kehittäjät voivat harkita pienen kokeilun tekemistä selaintesteissä.

tärkeimpiin valtavirran selaimiin kuuluvat IE9: n uusin julkaisu, Mozilla Firefox, Opera, Chrome, Safari ja mahdollisesti Camino/SeaMonkey. Mutta Internet Explorer 6-8 ovat myös edelleen laajalti käytössä yritysten ja vanhempien tietokonelaboratorioiden keskuudessa. Voit suorittaa nopeita renderöintitestejä IETester-ohjelmiston avulla. Samoin IE8: ssa on kehittäjien työkalutila, jossa voit siirtyä vanhempiin renderöintimoottoreihin virheenkorjausta varten.

14. Sovitetussa typografiassa

saatat huomata, että vanhat ulkoasusi hyödyntävät edelleen tehokkaasti tekstityylejä, mutta näin ei aina ole. Koen, että suuri typografia sopii ulkoasuihin paljon helpommin. Puhumattakaan siitä, että se on helpompi lukea ja vie enemmän tilaa suuremmilla näytön resoluutioilla.

”sovitettavan typografian” idea on muotoiluteksti niin, että se sopii näppärästi verkkosivuillesi. Voit käydä läpi muutaman sivun ja päivittää nämä tyylit 10-15 minuutissa.

15. Sosiaalisen median jakaminen

nyt olen varma, että useimmat kehittäjät tuntevat suosittujen sosiaalisen verkostoitumisen verkkosivustojen jakamismerkit. Facebook, Twitter, Reddit, Pinterest, Dzone ja monet muut ulkoiset verkot tarjoavat koodit, jotka voit upottaa verkkosivustoosi. Sitten kävijät voivat jakaa linkin näihin verkkoihin tarvitsematta poistua sivustoltasi.

joissakin blogeissa tai verkkolehdissä huomaat, että nämä merkit seuraavat sinua vierittämällä sivua. Tämä on erinomainen tekniikka, koska voit usein olla niitä leijuu aivan kehon alueella, jossa ne eivät estä mitään tärkeää sisältöä. Suosittelen myös selaamaan postauksemme sosiaalisen median työkaluriveillä, joilla voi olla samanlainen vaikutus.

16. Käyttäjäkeskustelu

jos käytät CMS: ää, kuten WordPress tai Drupal, sinulla on mahdollisuus sisällyttää kommenttilomakkeita oletusarvoisesti. Kuitenkin luotaessa staattisia verkkosivuja sinun täytyy setup oman tietokantajärjestelmän matkia tätä toimintoa. Mutta kasvu avoimen lähdekoodin teknologian kehittäjät voivat nyt toteuttaa parempia ratkaisuja, kuten Disqus.

tällä menetelmällä et ole jatkuvasti tekemisissä roskapostin ja roskan siivoamisen kanssa keskustelualueelta. Käyttäjät, joilla ei vielä ole Disqus-tiliä, voivat nopeasti muodostaa yhteyden suosittujen sosiaalisen verkostoitumisen profiilien avulla tai kirjautua suoraan sivultasi. Jopa WordPress käyttäjät, jotka ovat kyllästyneet Akismet voi vaihtaa käyttämällä Disqus Comment System plugin.

17. Laajenna Alatunnistealuetta

useimmat pienemmät verkkosivujen ulkoasut ovat hyvin konservatiivisia alatunnisteosiolla. Tämä voi sisältää joitakin perus copyright info ja muutamia pääsivun linkkejä. Mutta moderni web design trendit tukevat ajatusta iso footers paljon meta linkkejä.

näitä näkee yleisesti startup-yrityksiltä ja suuryritysten verkkosivuilta, joissa on paljon lisätietoa. Varmasti älä yritä pakottaa tätä layout, jossa se ei kuulu, mutta se on syytä harkita, jos avaaminen isompi alatunnisteen alue voi parantaa sivuston kokemus.

18. Responsifioivat kuvat

dynaamiset fluidit ja responsiiviset verkkosivukuvat ovat jo itsessään trendi. Nyt on lähes naurettavaa, että kuvat on asetettu kiinteille leveyksille, jolloin ne murtautuvat ulos konttien kääreestä ikkunoiden koon muuttuessa. Yleisin tekniikka on soveltaa width: 100% käyttäen CSS: ää kaikkiin img-elementteihin.

, mutta voit myös harkita joitakin muita avoimen lähdekoodin menetelmiä, jotka voivat osoittautua hyödyllisiksi sidonnassa. ResponsiveImg on yksi tällainen jQuery plugin hyvin pieni tiedostokoko. Vain sisällyttää tämän sivullesi ja suorita yhden rivin koodi kohdistamalla kaikki kuvat sivulla. Tämä on erinomainen lisä mobiiliasetuksiin, jotka käyttävät edelleen työpöytäpohjaista sisältöä.

19. Valikon saavutettavuus

en sanoisi, että tämä on jotain, jota sinun pitäisi jatkuvasti yrittää päivittää ulkoasuissasi, mutta se on jotain, mitä kehittäjät ja suunnittelijat eivät saa oikein ensimmäisellä kerralla. Mielestäni kannattaa katsoa taaksepäin navigointijärjestelmiä ja ideointi, jos on olemassa parempia tapoja toteuttaa alivalikon linkkejä.

Sidebaareissa ja sisältöalueilla on usein harmonikkavalikot, koska tilaa on riittävästi pystysuunnassa. Mutta ajattele horisontaalisia navigointipalkkeja, joissa on pudotusvalikot tai liukuvat alivalikot. Niin kauan kuin valikon linkit ovat nopeita ja helppoja käyttää, ei pitäisi olla mitään ongelmia keskuudessa userbase.

20. Semanttisia Mikroformaatteja / Microdata

Mikromuotoja ja uudempaa Microdata-spesifikaatiota käytetään metatiedon laajentamiseen HTML-koodin sisällä. Nämä attribuutit antavat lisätietoa sisällöstäsi ja siitä, miten se liittyy sivun muuhun sisältöön. Ja lopulta nämä tulokset auttavat Googlea määrittämään verkkosivustosi sijoituksen yksittäisten avainsanojen ja muiden moottoreiden, kuten kuva-ja videohaun, osalta.

merkittävimmin tuettua dokumentoitua versiota Mikrotiedoista kutsutaan Schema.org. niiden verkkosivuilla on kaikki tiedot, joita tarvitset palata ja muokata HTML-sisältöä semanttinen skeema markup. Tämä skeema syntaksi tukee ja tukee kaikki tärkeimmät hakukoneet, ja todennäköisesti kehittyä tulevaisuudessa semanttisen metadatan suunnittelu.

21. Nav-linkkien uudelleenjärjestely

joillekin verkkosivustoille kiinteän sisällön navigointi ei välttämättä ole todellinen ongelma. Mutta olen löytänyt joitakin suurempia liiketoiminnan sivustoja tai salkkuja, että tietyt navigointi linkit annetaan liikaa etusijalla. Ja samoin on joitakin kohteita, joita harvoin löytyy! Ota aikaa selata sivustosi ja käyttäytyä kuin olisit jokin muu kävijä.

mieti, mitkä linkit sinua eniten kiinnostavat, ja mahdollisesti kaikki linkit, jotka haluaisit lisätä. Näitä voivat olla lyhyt historia sivuston, tiedot joukkue, yhteystiedot, yksityisyyden huolenaiheet, lehdistötiedotteet, jne. Se voi myös auttaa keräämään käyttäjäpalautetta ja näkemään, onko korrelaatioita heidän toiveidensa ja uusien tai päivitettyjen sivujen kysynnän välillä.

22. Takaisin alkuun linkki

jos sivustosi julkaisee hyvin pitkiä sivuja sisältöä, tämä on pakko saada Elementti ulkoasu. Vieritys takaisin alkuun linkkejä löytyy lähes kaikkialla näinä päivinä. Käyttäjät eivät ajattele lyödä Koti-näppäintä ja se voi olla ärsyttävää vieritys aina takaisin ylös. Paras paikka tälle Linkille on kellua kontin vieressä tai istua aivan alatunnisteessa, kuten olemme toteuttaneet Hongkiatissa.

23. Muokkaa code / pre tageja

kun luodaan ensin verkkosivuston tyylisivua, monet kehittäjät unohtavat tyypilliset sivuelementit. Otsakkeet ja kappaleet ovat hyvin yleisiä, mutta entä pre-tagit tai inline-kooditagit? Näitä käytetään esimuotoillun lähdekoodin syntaksin kapselointiin, kuten näkisit text/NFO-tiedostossa. Jotkut sivustot eivät tarvitse näitä elementtejä, mutta pidetään silti hyvänä käytäntönä, että ne stailataan varmuuden vuoksi.

24. Kuvan leveys / korkeus attribuuttien lisääminen

nyt tämä tehtävä voi helposti kestää jonkin aikaa riippuen siitä, kuinka monta kuvaa sinun pitäisi käydä läpi. Mutta jos löydät kuvia sivuiltasi ilman määriteltyä leveys / korkeus voi olla syytä päivittää niitä.

tyypillisesti kuvat, joilta nämä ominaisuudet puuttuvat, näkyvät 1×1 px-neliönä ennen kuin ne ladataan kokonaisuudessaan. Tämä saa verkkosivut ja vierityspalkin hyppäämään, kun uusia kuvia ladataan. Jälleen tämä ei ole hyödyllistä kaikille, mutta se on syytä huomata nopea korjaaja joissakin tapauksissa. Ja on vielä CSS tekniikoita reagoiva kuvia käyttäen kiinteitä attribuutteja.

25. JavaScript-ilmoitukset

jokainen Javascriptissä työskennellyt kehittäjä tietää tyypillisistä valintaikkunoista. Voit asettaa hälytysruudun, joka tarjoaa käyttäjälle OK-painikkeen, vain tietojen näyttämisen. Mutta on myös vahvistushälytyksiä kyllä / ei-painikkeilla sekä kehote-ruutu, joka kysyy käyttäjän syötettä.

kaikki nämä voidaan räätälöidä alertify-ohjelmalla.js. Tämä on hyvin pieni avoimen lähdekoodin kirjasto omien frontend – hälytysruutujen suunnitteluun. Se on erittäin nopea asennus ja helppo muokata, jos haluat sovittaa oman CSS tyylejä.

26. Responsiiviset mediakyselyt

tämä ei välttämättä tunnu nopealta koodinpätkältä lisättäväksi, mutta se ei todellakaan vie paljon aikaa ollenkaan. Responsiiviset kyselyt voidaan lisätä olemassa olevaan tyylisivuun tai lisätä uuteen reagoivaan.CSS-asiakirja. Joko niin voit nopeasti setup toistuvia tyylejä käsitellä eri näyttökokoja näytöt, tabletit, ja älypuhelimet.

responsible queries do not always need to full responsify your layout. Joskus nämä saattavat vain piilottaa sisällön palasia, kuten pitkänomaisen sivupalkin tai suuremman alatunnisteen. Voit sitten näyttää täysin reagoiva mini alatunnisteen, joka on alun perin piilotettu työpöydän asettelu. Voit oppia lisää median kyselyt meidän kokoelma reagoiva web tutorials.

27. Affiliate-linkit

alaasi liittyvää rakennussisältöä tulee aina olemaan verkossa vastaavanlaisia sivustoja. Uusia ideoita syntyy hyvin harvoin; useimmat niistä ovat sivuhahmoja ja parodioita olemassa olevasta sisällöstä. Mutta sen sijaan, että web muuttuu kilpailu miksi ei luoda ystävällinen ilmapiiri? Jos sinulla on ylimääräistä tilaa layout lähettää muutamia sähköpostiviestejä liittyvät sivustot omalla kapealla (haku Google) pyytää affiliate.

voit vaihtaa linkkejä ja auttaa tuomaan toisilleen liikennettä. Tämä avaa ovia uusille käyttäjille löytää sivuston paljon nopeammin, ja nähdä, että olet mukana yhteisössä muiden sivustojen samoin. Plus saamalla käänteisiä sivustoja viranomaisen Google voi vain auttaa verkkotunnuksen uskottavuutta.

28. Kuvakepohjaiset fontit

luin äskettäin 24ways-sivustolla artikkelia, jossa käsiteltiin kuvakefontteja ja tietojen attribuutteja. Tämä sai minut ajattelemaan tulevaisuutta web design ja miten HTML / CSS on dramaattisesti vaikuttanut frontend koodaus. Kuvakepohjaiset fontit ovat täydellisiä useista syistä, kuten navigointivalikoista, tilatuista/järjestämättömistä luetteloista ja jopa perussivujen sisällöstä.

monet näistä fonteista voidaan nopeasti lisätä sivustoosi käyttämällä @font-face. Tämä tarkoittaa, että sinun ei tarvitse luottaa 3.osapuolen palveluun, kuten Typekit, fonttien hostaamiseen. Se tarkoittaa myös semanttisempaa suunnittelutyyliä pelkän PNG-kuvakkeiden käytön sijaan.

29. Image Box Shadows

jos haluat pitää kävijät sivullasi pidempään, sinun on tarjottava todellista laadukasta sisältöä. Tämä voi jo olla asia sivustosi, mutta jos tyylit ovat mitäänsanomaton sitten ihmiset etsivät muualta. Tunnelma ja estetiikka ovat huikeita hyvässä web-suunnittelussa.

suosittelen rakentamaan pikakuvan luokan, joka kietoo reunuksen sivukuvien ympärille. Tämä voi sisältää pieni laatikko varjo sekä rajojen ja pehmuste, liian. Mitä tahansa, joka auttaa kuviasi hyppäämään ruudulta ja erottumaan tekstin kohdissa.

30. Vaihtoehtoiset tyylisivut

tarkastelevat kaikkia eri mediatyylejä, jotka sinun on sisällytettävä yhden verkkosivuston ulkoasuun. Tämän pitäisi näyttää hyvältä työpöytämonitoreissa, kannettavissa tietokoneissa, tableteissa ja mahdollisesti jopa älypuhelimissa. Äläkä unohda projektiota ja printtimediaa, jota ei aina tueta.

jos sinulla on suuri yleisö, joka käyttää näitä epämääräisiä mediatyyppejä, suosittelen stailaamaan omia vaihtoehtoisia tyylilajeja. Nämä voidaan merkitä mediatyypin kuten Printin perusteella.css, tai lisätty olemassa oleviin tyylisivuihin. Jos kysyntää riittää, vieraasi ovat ikuisesti kiitollisia. Ja se rehellisesti ei vie paljon aikaa muokata oletussivuston asettelu yhteisiä tulostimia.

Final Thoughts

luovat suunnittelijat ja erityisesti frontend web developers löytävät toivottavasti joitakin hyödyllisiä tekniikoita tämän listan joukosta. Useimmat näistä ideoista ei pitäisi kestää yli 1-2 tuntia toteuttaa, kun taas monet voidaan toteuttaa niin vähän kuin 15-30 minuuttia.

sivustosi ulkoasujen uudelleenarviointi ja päivittäminen uusilla trendeillä aika ajoin on usein hyvä idea erityisesti CSS3-ominaisuuksien uudempien julkaisujen kanssa, jotka mahdollistavat natiivit selaimen varjot, animaatiot ja pyöristetyt kulmat. Tämä on erinomainen kokoelma ideoita kannattaa vilkaista, jos olet tarvitsevat joitakin nopeita päivityksiä.

Lisäksi, jos sinulla on kysymyksiä tai ajatuksia artikkelista, voit vapaasti jakaa kanssamme post-keskustelualueella.