Breakpoint eli katkaisupiste on määrätty pikselimäärä näytön leveydessä, jossa verkkosivuston layout vaihtaa muotoaan responsiivisessa suunnittelussa. Esimerkiksi 768 pikselin breakpointissa kolmen sarakkeen layout voi muuttua yhden sarakkeen layoutiksi, jotta sisältö toimii paremmin kapeammalla tabletin tai älypuhelimen näytöllä.
Miten breakpointit toimivat
Breakpointit toteutetaan CSS:n media queryillä. Kun selaimen ikkunan leveys ylittää tai alittaa määritellyn katkaisupisteen, sovelletaan eri CSS-sääntöjä. Tämä mahdollistaa täysin erilaisen asettelun eri laitteilla käyttämällä samaa HTML-rakennetta.
Esimerkki: Desktop-näkymässä (1024px+) hinnoittelukortit voivat olla kolmessa sarakkeessa vierekkäin. Tabletin näkymässä (768px–1023px) niitä voi olla kaksi rinnakkain. Mobiilissa (alle 768px) ne pinotaan yhdeksi sarakkeeksi tälle leveydelle. Jokainen vaihdos tapahtuu breakpointissa.
Pk-yrityksen verkkosivustolla tyypilliset breakpointit ovat: 480px (pienet älypuhelimet), 768px (tabletit), 1024px (pienet kannettavat / isot tabletit) ja 1280px tai 1440px (suuret näytöt). Nämä eivät ole ehdottomia standardeja, vaan ne valitaan sisällön ja designin tarpeiden mukaan.
Mobile-first vs. desktop-first
Breakpointtien suunnittelu lähtee joko mobile-first tai desktop-first -lähestymistavasta. Mobile-first tarkoittaa, että perustyyli on optimoitu mobiilille ja breakpointeissa lisätään tyylejä isommille näytöille. Desktop-first on päinvastainen: perustyylit ovat desktop-näkymälle ja breakpointeissa yksinkertaistetaan pienemmille ruuduille.
Nykysuositus on mobile-first, koska se pakottaa priorisoimaan tärkeimmän sisällön ja toiminnallisuuden. Mobiilissa ei ole tilaa turhalle, joten suunnittelija joutuu tekemään tietoiset valinnat siitä, mikä on olennaista. Tämä johtaa yleensä selkeämpään ja tehokkaampaan suunnitteluun kaikille laitteille.
Common pitfalls eli yleisiä sudenkuoppia
Liian monta breakpointia voi tehdä suunnittelusta ja ylläpidosta monimutkaista. Jokainen breakpoint on ylimääräinen testausympäristö ja ylläpidon kohde. Useimmiten 3–4 hyvin valittua breakpointia riittää kattamaan yleisimmät laiteryhmät.
Toinen virhe on suunnitella breakpointit tiettyjen laitteiden mukaan sen sijaan, että katsottaisiin, missä kohdassa oma design “hajoaa”. Laitemallit vaihtuvat, mutta hyvä design mukautuu sisällön tarpeiden mukaan. Testaa eri leveyksillä ja aseta breakpoint sinne, missä sisältö alkaa näyttää huonolta.
Yhteenveto
Breakpointit ovat responsiivisen suunnittelun selkäranka. Ne mahdollistavat saman verkkosivuston muuntautumisen saumattomasti pöytäkoneelta mobiiliin tarjoten optimaalisen käyttökokemuksen jokaisella laitteella. Pk-yritykselle hyvin suunnitellut breakpointit tarkoittavat, että asiakas saa saman laadukkaan kokemuksen riippumatta siitä, millä laitteella hän sivuston avaa. Tämä taas johtaa parempaan sitoutumiseen, pidempiin vierailuihin ja korkeampaan konversioon.