websites met Cross-Browser compatibel Maken
geplaatst in Performance by WP Engine
laatst bijgewerkt op 30 Mei, 2019
hoewel de meeste mensen vasthouden aan het gebruik van een enkele browser, heb je tientallen opties voor zowel desktop en mobiele apparaten. Idealiter, websites zou perfect weer te geven, ongeacht welke browser u gebruikt. Echter, dat is niet altijd het geval, dat is waar cross-browser testen komt in.
met grondige cross-browser testen, kunt u ervoor zorgen dat uw website er perfect uitziet en zich gedraagt bij alle populaire opties. Op die manier zullen uw bezoekers een even geweldige ervaring hebben, of ze nu Chrome, Firefox, Opera of minder bekende opties zoals SeaMonkey gebruiken.
in dit artikel gaan we iets meer vertellen over het belang van cross-browser testen. Dan zullen we gaan over een aantal stappen om u te helpen een cross-browser compatibele website te maken. Aan het werk!
Waarom Is Compatibiliteit Tussen Browsers Belangrijk?
de meeste mensen gebruiken bekende browsers, zoals Google Chrome, Safari, Firefox en Opera. Echter, het zijn veel meer opties beschikbaar dan je zou denken. Dit is goed voor de consument, maar het probleem voor u is dat elke browser anders is gebouwd. Dat betekent dat uw website perfect werkt op Chrome, maar ervaar problemen op Firefox (om maar een voorbeeld te geven).
in onze ervaring zijn de meeste fouten die u ziet in de ene browser maar niet in de andere relatief kleine problemen. Een specifiek element van uw site kan niet kijken naar het zou moeten, of een bepaalde functie kan niet correct werken. Hoewel deze problemen klein kunnen zijn, moeten ze worden aangepakt als u dezelfde ervaring wilt bieden aan alle bezoekers van uw site.
idealiter wilt u uw website vanaf het begin cross-browser compatibel maken. Op die manier, zult u niet het risico vervreemden van de gebruikers van een bepaalde browser. In de volgende secties laten we je zien hoe je dat moet doen.
Hoe maak je een Cross-Browser compatibele Website
het idee om een cross-browser compatibele website te maken kan ontmoedigend klinken. Echter, een paar eenvoudige stappen kunnen een lange weg te gaan in de richting van ervoor te zorgen dat uw site werkt perfect op de meeste browsers. Laten we praten over wat dat zijn!
Stap 1: Stel een ‘Doctype’ in voor uw HTML-bestanden
wanneer een browser uw website laadt, moet deze uitzoeken welke HTML-versie u gebruikt. Dit is belangrijk, omdat verschillende versies van HTML verschillende regels bevatten.
een ‘doctype’ is een statement dat browsers vertelt: “Hey, dit is de versie van HTML die we gaan gebruiken!”Op die manier hoeven browsers geen gissingen te maken, wat het aantal fouten dat uw gebruikers tegenkomen kan verminderen.
gelukkig is deze stap opmerkelijk eenvoudig. Het enige wat u hoeft te doen is het volgende fragment van code toe te voegen aan uw HTML-documenten:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
zoals u zult merken, dit fragment is voor versie 4.01 van HTML. Als u in plaats daarvan HTML5 wilt gebruiken, kunt u deze code gebruiken:
<!DOCTYPE html>
het probleem is dat sommige browsers nog steeds niet goed spelen met HTML5. Ondanks de vele verbeteringen, het gebruik ervan kan van invloed zijn cross-browser compatibiliteit, dus je nodig hebt om dat feit af te wegen naast de voordelen.
Stap 2: Gebruik de CSS-Resetregels
meestal is CSS de belangrijkste boosdoener achter browsercompatibiliteitsfouten. Dat komt omdat elke browser zijn eigen set van CSS-regels heeft. Om het anders te zeggen, CSS van uw site kan anders maken, afhankelijk van welke browser uw bezoekers gebruiken.
een manier om dit probleem op te lossen is door een ‘CSS reset’te gebruiken. Dit zijn sets van regels die u kunt toevoegen aan uw website, die een basislijn voor de manier waarop CSS werkt in alle browsers.
er zijn verschillende opties als het gaat om CSS resets, maar een van onze favorieten heet normaliseren.css, vanwege hoe uitgebreid het is:
u kunt de normaliseren downloaden.css bestand uit de GitHub bibliotheek en gebruik het als een startpunt voor uw website CSS. Dit zal u helpen maximaliseren cross-browser compatibiliteit op uw site.
Stap 3: Gebruik Cross-Browser compatibele Bibliotheken en Frameworks
JavaScript-bibliotheken en brede frameworks zoals Foundation en Bootstrap zijn ongelooflijk populair deze dagen. Als je gaat om dergelijke elementen te gebruiken om uw website te bouwen, kunt u bespaart jezelf een hoop hoofdpijn door het gebruik van cross-browser vriendelijke opties.
sommige bibliotheken en frameworks werden vanaf de basis ontwikkeld om met zoveel mogelijk browsers te werken. In het algemeen, de meest populaire frameworks – met inbegrip van de twee die we net genoemd – zijn gebouwd om compatibel te zijn met zo veel browsers mogelijk.
controleer voor de zekerheid de documentatie voor elke bibliotheek of framework die u wilt gebruiken. In de meeste gevallen, vindt u informatie over cross-browser compatibiliteit vrij gemakkelijk. Hier is bijvoorbeeld de compatibiliteitspagina van de Stichting uit de documentatie:
een beetje onderzoek zal u helpen een geweldige ervaring te bieden voor al uw bezoekers, niet alleen degenen die een bepaalde browser gebruiken.
Cross-Browser Testing
zelfs als u een poging hebt gedaan om een cross-browser compatibele website te maken, is het nog steeds een goed idee om te controleren en te zien of alles werkt zoals het zou moeten. Dat proces is relatief eenvoudig – alles wat je hoeft te doen is het laden van uw website met behulp van meerdere browsers en controleren op fouten.
het probleem is dat er veel browsers zijn. Om uw bases te dekken, raden wij u aan zich te concentreren op de top vijf opties op basis van marktaandeel, die zijn:
- Google Chrome
- Safari
- Firefox
- UC Browser
- Opera
het is mogelijk dat Microsoft Edge de lijst niet heeft gemaakt. Het marktaandeel is vrij klein deze dagen, maar het is nog steeds een goede praktijk om ervoor te zorgen dat uw site werkt met het ook.
natuurlijk kan het installeren van vijf of zes verschillende browsers op uw computer lastig zijn. Dat is de reden waarom er een heleboel diensten die u in staat stellen om cross-browser testen online uit te voeren. Dit vereenvoudigt het proces aanzienlijk, en de kosten zijn meestal gering.
offer uw digitale ervaring niet op
niet alle bezoekers van uw website zullen dezelfde browser gebruiken. Dit betekent dat als u wilt dat elke gebruiker krijgt om te genieten van uw website, je nodig hebt om een aantal cross-browser testen te doen.
Houd er echter rekening mee-zelfs als uw site perfect werkt in alle browsers, moet u nog steeds een webhost van topkwaliteit gebruiken als u de best mogelijke digitale ervaring wilt bieden. Met WP Engine krijg je geweldige prestaties en toegang tot ondersteuning op expertniveau, dus Bekijk onze plannen!