Share
En gang i webdesign var alt du måtte gjøre for å gjøre nettstedene dine kors kompatible, satt til å være 960px brede og fikse problemene som dukket opp i IE6. Ah, gamle dager ...
I dag består internett av så mange bevegelige deler som det er nesten sikkert, i hvert fall noen av dine sluttbrukere har mindre enn perfekte opplevelser, på grunn av problemer du sikkert ikke hadde anelse om, skjedde.
Vi har nettopp åpnet dørene på et helt nytt kurs med tittelen Bombproof Web Design som vil hjelpe deg med å avlaste eventuelle lure gremlins som kan skjule seg i hjørnene på internett, blåse opp sidene dine når du ikke ser.
I denne artikkelen vil vi løpe gjennom 7 måter du kanskje ikke vet at nettstedene dine eksploderer, som hver håndteres håndtert i Bombproof Web Design kurset.
Hvis du kan gå gjennom alle syv av disse punktene og si at nettstedene dine er solide på alle teller, vil jeg bli super imponert, og du får en stor stor gullstjerne!
Den første måten du kanskje ikke vet at nettstedene dine eksploderer, er:
Du kan kanskje ikke skjønne det, men webfonene dine kan faktisk se spesielt forskjellig fra ett operativsystem til det neste, selv i samme nettleser. For eksempel er følgende tre skjermbilder alle nøyaktig samme nettsted, med nøyaktig samme skrifttypeinnstillinger og kode.
Den første er tatt i Chrome på en Mac:
Ok, alt ser ut til å være bra der. La oss sjekke ut det samme nettstedet på Chrome igjen, denne gangen gjennom Ubuntu:
Hmm, det er en ganske ubehagelig titt i overskriftene der. Du kan knapt få fram bokstaven "s" og bokstavene "A" og "e" er nesten lukket solid. Hva med Chrome på Windows?
Gah, se på disse artefakter! Hver bokstavskurve har en liten tag som henger av den, og samlet sett er den pixelert og stygg.
Det finnes flere forskjellige måter du kan bli fanget ut med inkonsekvent gjengitte eller til og med helt fraværende skrifttyper, med mindre du har en plan for å evaluere og distribuere typografivalgene dine.
Selv den verste web skrifttypen gjengivelsen vil fortsatt gjøre nettstedene dine ser bra ut i forhold til nettlesere som ikke gjengir webfonter i det hele tatt, for eksempel Opera Mini. Og webfonter er ikke det eneste Opera Mini ikke gir. Dette er samme nettsted som du ser over, denne gangen i Opera Mini:
Som du kan se, feilet stort sett alt, kort av grunnleggende farger og tekst. Opera Mini er en mobilbrowser designet for å håndtere nettsteder på en veldig lett måte, slik at den kan brukes på lavere spec-enheter og for de som prøver å spare båndbredde eller systemressurser. Dessverre, en del av måten det gjør, er at du ikke støtter en rekke CSS-egenskaper, spesielt CSS3.
Opera Mini har en liten, men betydelig brukerbase. For å si det i perspektiv, viser statistikker jeg har sett på Opera Mini på rundt en tredjedel av totalt IE-brukere, og høyere enn for Android Browser og Opera Desktop. Det er ganske sannsynligvis den vanskeligste nettleseren å rive i dag, men en eller annen måte vil du ha en slags plan for det.
På Firefox, når du går til Innstillinger> Innhold du ser dette:
På Chrome, når du går til Innstillinger> Vis avanserte innstillinger> Nettinnhold du ser dette:
Begge disse innstillingspanelene er laget for å tillate brukere å justere skriftstørrelsen til nettleseren for å dekke deres behov. Personer med synshemming vil vanligvis bruke disse innstillingene for å hjelpe dem med å lese lettere. De er også nyttige for folk som bruker sin TV-stue for å surfe, noe som blir stadig mer populært.
Det er en veldig vanlig praksis å sette en grunn skriftstørrelse for et nettsted som 14 piksler eller 16px mot html og kropp elementer. Dette forhindrer imidlertid at brukerens skriftstørrelsesinnstillinger trer i kraft. Hvis en bruker er synshemmede, kan det være vanskeligere å være i stand til å forstørre tekst, eller om skriftstørrelsen er endret for å passe til en bestemt skjermstørrelse, kan det hende at teksten er svært vanskelig å lese.
På toppen av det, hvis en bruker har en ikke-standard skriftstørrelse valgt, er det viktig at hele layoutet skal kunne skaleres sammen med det. Du ønsker ikke å ende opp med et oppsett som ikke er helt slått fordi det bare passer til en tekststørrelse.
For eksempel, her er vår samme demo side igjen, men bygget uten evne til å skalere og basen skriftstørrelsen satt til 22px:
Likevel med scaling innebygd i koden, ser det samme stedet med en skriftstørrelse satt av brukeren av 22px slik ut:
Du kan kanskje ikke se hva som foregår i skjermbildet ovenfor, ettersom bildet har blitt krympet for å passe inn i denne kolonnen. Ved første øyekast kan det se ut som det aller første skjermbildet i artikkelen, men det er bare fordi det har oppskalert proporsjonalt med brukerens skriftstørrelsesinnstillinger.
For å gi deg en bedre ide, her er en del av nettstedet med sin faktiske størrelse:
Å bygge nettsteder på denne måten betyr at du gir brukeren den samme visningsopplevelsen, uansett hvilke preferanser de har satt i nettleseren sin.
Nesten alle webdesignere har allerede gjort overgangen fra oppsett på skrivebordet til å inkludere støtte for vanlige tabeller og telefonoppløsninger, men det er fortsatt bare en del av bildet.
Listen over mulige oppløsninger i dag er lengre enn armen, og da må vi også faktor i pixel tetthet, delen av skjermen viser visningsporten og den faktiske fysiske størrelsen på skjermen.
For øyeblikket kan nettstedene dine besøkes av brukere på displayene både miniscule og gigantiske, og det er nesten umulig å forutsi hvilken kombinasjon av oppløsning, pixeldensitet, visningsstørrelse og fysisk størrelse de besøkende vil ha. En 5-tommers smart telefon kan ha nøyaktig samme oppløsning som en 65-tommers TV, men det er svært forskjellig fra brukerens synsvinkel, men det er fortsatt et nettsted på hver enhet..
Når det er sagt, er det egentlig ikke vanskelig å lage oppsett som er helt fleksible for alle skjermer. Med det riktige settet med prinsipper som ligger til grunn for layoutkoden, vil alle dine nettsteder være like hjemme på alle skjermer, fra TVer i den ene enden av spekteret:
Min egen 40-tommers TV viser vår demo side i en størrelse som er helt behagelig for å lese fra sofaen.Til små små smarte klokker i den andre enden av spekteret, for eksempel gjennom WebBrowser-appen for Sony SmartWatch 2:
Nettstedet vises ved den faktiske visningsstørrelsen for WebBrowser-appen på Sony Smartwatch 2Det er lett å anta at alle brukere vil ha funksjonell JavaScript som vi kan stole på absolutt. JavaScript har en tendens til å spille en rolle i nesten alle nettsteder, og i noen tilfeller driver det helt innhold gjennom ting som webkomponenter og klientside gjengivelse.
Men hva om JavaScript ikke er som alltid tilstede som vi kanskje tror?
Det er faktisk mange grunner til at en besøkende kanskje ikke ser et JavaScript-avhengig nettsted som du hadde tenkt det skulle vises.
Bunnlinjen er at selv om prosentandelen brukere som ikke har fullt funksjonell JavaScript, er liten, er den fortsatt til stede og blir stadig viktigere, jo mer vellykkede og velhandlede nettsteder er.
Hvis du ikke har en plan, i stedet for ditt ellers kjempebra, raske, klient-side gjengitte nettsted, kan dine besøkende bare se en masse uendret HTML:
Eller i stedet for dine fantastiske webkomponenter, kan de besøkende se et sammenfallende layout:
I lang tid var samspillet med nettsteder nesten helt avhengig av en mus, men du kan ikke lenger anta at en bruker enten har en mus eller kan bruke musen komfortabelt. Folk er svært ofte ikke på et skrivebord når de besøker nettstedene dine, i stedet ser gjennom en berøringsbasert enhet eller fra sofaen.
Dette betyr at hvis nettstedet ditt krever musekoblinger, kan du finne at noen av de besøkende aldri kan få tilgang til bestemte deler av nettstedet ditt.
Ideelt sett bør nettsteder være navigere ikke bare uten mus, men også spesielt tastaturvennlig. Hvis nettstedet ditt kan navigeres via et tastatur, kan det meget sannsynlig navigeres via andre inngangsenheter som TV-fjernkontroller eller konsollkontroller.
I tillegg kan folk med nedsatt funksjonsevne, for eksempel pasienter med leddgikt eller slagtilfelle, foretrekke å navigere via en hjelpemodul, for eksempel et stort tastatur.
Hjelpende tastatur. Bilde med rett til https://www.flickr.com/photos/oregondot/6235420475Og snakker om nettstedene dine som arbeider med hjelpemidler ...
Ikke misforstå, jeg vet at du sannsynligvis allerede gjør det riktige og inkorporerer WAI-ARIA-roller i nettstedene dine og prøver å gjøre dem så tilgjengelige som mulig.
Men det jeg fant i min egen erfaring er at du kanskje tror du har gjort nettsteder tilgjengelige, til du faktisk prøver å adgang dem på samme måte som en person med nedsatt funksjonsevne må.
Innenfor øyeblikk for å prøve å navigere på nettet via skjermleser og tastatur for første gang, følte jeg meg ganske dårlig om noen av nettstedene jeg hadde bygget i fortiden, ville nettsteder ærlig talt trodde jeg opprettet i henhold til tilgjengelighetsretningslinjer.
En av de viktigste problemene jeg opplevde da jeg forsøkte å skjermme seg på vei rundt på Internett, var en mangel på optimaliserte WAI-ARIA landemerke roller, som hjelper brukerne til å hoppe til de viktigste "landemerkene" på nettsteder.
Det jeg oppdaget var at mange velmeningssteder inkorporert WAI-ARIA landemerker, men på en måte som dessverre ikke ga noen informasjon til brukeren som ville hjelpe dem å finne seg rundt nettstedet:
Fem navigasjonsområder, men ingen hovedinnholdsområde for brukerne av skjermleseren å hoppe til.Noen andre kjente nettsteder brukte ikke noe tilgangskode i det hele tatt:
Inkludert WAI-ARIA landemerke roller i koden din er faktisk veldig enkelt og legger bare minutter til et prosjekt, det handler bare om å vite hvordan du legger dem på riktig måte.
Du vil bli overrasket over hvor enkelt det er samlet å ha en solid basislinje for tilgjengelighet med noen enkle teknikker, for eksempel optimalisering av overskriftsstruktur, kontroll av fargekontrast, pluss noen av punktene vi snakket om ovenfor, slik at skriftstørrelsen skaleres og støtter forskjellig inngangsenheter.
Hvis du sjekket av hvert element på listen over og sa til deg selv, "Spiker det allerede", så bra, du er fantastisk! Som jeg sa, får du en stor stor gullstjerne for å være episk.
Men hvis du fant deg selv å si "Oh, jeg skjønte ikke det" eller "Ikke sikker på om jeg er dekket på den ene", så er det ganske mulig at nettstedene dine kan eksplodere der ute på internett mens vi snakker - og ved " eksploderer "Jeg mener ikke på god måte!
Hvis det var mer enn ett av disse punktene, var du ikke klar over, ikke bekymre deg. Det er faktisk mye lettere å "Bombproof" dine nettsteder enn du kanskje tror. Det handler bare om å være fullt klar over den nødvendige informasjonen, og å rulle ut noen enkle løsninger.
Det er hva vårt nye kurs "Bombproof Web Design" vil utstyre deg til å gjøre. Gjennom femten enkle å følge video leksjoner vil jeg personlig veilede deg nøyaktig hva du skal passe på, og trinnene for å følge "Bombproof" alle dine nettsteder herfra ute.
De to første videoene er helt gratis, så fortsett og ta en snikketopp på "Bombproof Web Design" nå:
Se 2 gratis videoer fra Bombproof Web Design
jeg ser deg der!
Accentsconagua