Responsiivinen ulkoasu

EsittelyKäyttöohjeet › Responsiivinen ulkoasu

Ohjelmistolla toteutettu verkkokauppa on responsiivinen verkkokauppa, joka toimii kaikilla päätelaitteilla. Verkkokaupan asiakkaan ei tarvitse asentaa mobiilisovellusta eikä valita erikseen mobiilisivuja. Responsiivisuus on Googlen suositus ↗. Ohjelmistolla toteutetut verkkokaupat läpäisevät Googlen mobiililaitesoveltuvuustestin ↗.

Responsiivinen ulkoasu on tässä ohjelmistossa lähes portaatonta. Erillisiä mobiili- ja tietokoneversioita ei ole olemassa, koska jako kahteen ei ole järkevää. Jako kahteen pudottaisi muun muassa tabletit pois pelistä. Portaaton responsio toimii parhaiten kaikenkokoisilla päätelaitteilla kännyköistä taulutelevisioihin.

Tekninen toteutus

Responsiivinen ulkoasu on toteutettu CSS3:n ominaisuuksiin kuuluvilla mediakyselyillä (media queries). Jokaisen mediakyselyn sisällä on päätelaitteen koolle sopivat CSS-tyylit.

@media (max-width: 1099px) {
    div.tb_cart_columns {}
}
@media (min-width: 1100px) {
  div.tb_cart_columns {
    display: table;
    width: 100%;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
  }
}

Verkkokauppias voi halutessaan lisätä ja muokata mediakyselyjä verkkokaupan ulkoasun suunnittelun yhteydessä. Mediakyselyjä ei ole lukittu millään tavalla tiettyihin mittoihin eikä ohjelmiston ytimeen. Tämän ansiosta ohjelmisto on myös yhteensopiva responsiivisen tulevaisuuden kanssa.

asetukset / koodit ja ulkoasu
Scroll to Top