Responsive Web Design koodaten

Responsive Web Design on ollut tekniikkana ja toteutustapana olemassa jo joitain vuosia. Sinä aikana on havaittu teknologian puutteet hyvään ja tehokkaaseen toteutukseen. Näitä tekniikoita on kehitetty pyrkien löytämään tarkoituksenmukaisia keinoja toteuttaa responsiiviset sivustot siten, että mm. minimoidaan http-kutsut ja  siirrettävän datan määrä. Sivuston latautumisen nopeuttaminen onkin yksi tärkeimpiä tavoitteita myös hakukoneoptimoinnin (SEO) näkökulmasta.

Responsiivinen toteutus hyötyy erityisesti uusista tekniikoista.

Tällä kurssilla opit mm.:

  • Tehostamaan sivujen latautumista
  • Käyttämään vaihtoehtoisia kuvia eri kokoisilla näytöillä
  • Asemoimaan elementtejä tehokkaasti Flexbox tekniikalla
  • Vaikuttamaan skriptien latautumiseen ja suorittamiseen
  • Ymmärtämään CSS calc funktion käyttöä asemoinnissa
  • Käyttämään uusia CSS mittayksiköitä
Responsive Web Design

Edistynyt

Kesto: 1 pv
Hinta: 1 150 €
hinnat ALV 0%

Valitse kurssitoteutus

Responsive design tekniikat

Responsive design on edellytys modernien sivustojen toteuttamiseen. Vaikka perusteet ovatkin teknisesti helpot, on responsiivisten toteutusten koodaaminen haastavaa, mikäli sen tekee oikein. Käytettävissä olevat tekniikat ovat uusia ja jopa niiden tuki selaimissa edellyttää kaikkein uusimpien selainten käyttöä. Näihin tekniikoihin on silti oikeasti syytä perehtyä jo nyt.

Modernit tekniikat ovat oikein käytettynä hyödynnettävissä jo nyt.

Kurssi on tarkoitettu HTML ja CSS koodin kanssa työskenteleville. Tämä kurssi on tarkoitettu sivuja tekeville henkilöille, jotka haluavat päivittää osaamisensa tekniikan eturintamaan.

Kurssille saavuttaessa tulisi hallita HTML ja CSS syntaksi ja verkkosivujen toiminta. Koodin kirjoittamisen tulee olla tuttua, muuten ei pysy tahdissa, sillä kurssi perustuu vahvasti käytännön harjoituksiin.

Koska kurssilla käsitellään tekniikoiden uusimpia piirteitä voi kurssin aiheluettelo päivittyä uusilla aiheilla. Myös toiveita ja ehdotuksia käsiteltäviksi aiheiksi voi lähettää kurssin kouluttajalle.


Responsive design tekniikat

  • sivujen rakenne-elementit
  • CSS asemointi
  • Media Queryt
  • Selaintuki

Sivujen latautuminen

  • Nopeuteen vaikuttavat tekijät
  • Miksi nopeus on tärkeää
  • http -pyyntöjen vähentäminen
  • Optimointitekniikoita

Flexbox asemointi

  • Flexbox elementit
  • Asemointi flex -elementeillä
  • Missä käyttää
  • Selaintuki

Responsive images

  • Uudet elementit
  • picture, source, srcset, sizes
  • Syntaksi

JavaScript optimointi

  • Skriptien lataus
  • defer, async, viivästetty lataus
  • CDN -palvelut
  • Minify

CSS responsiivisissa toteutuksissa

  • calc -funktio mitoituksessa
  • uudet suhteelliset mittayksiköt
  • Media Queryjen käyttö
  • layout asemoinnin tekniikoita

CSS tekniikoita

  • CSS Shapes
  • CSS tekniikoiden tila

Kurssin kouluttajat


Responsiiviset toteutukset ovat oikein tehtynä teknisesti haastavia – paljon enemmän kuin layoutin muokkausta