Code

Waarom maakt markup materie schoon in webdesign?

Omdat het web een veranderend en steeds evoluerend organisme is, is het belangrijk om sites te bouwen die ermee kunnen groeien en eenvoudig de stroom kunnen berijden in plaats van te verdrinken wanneer een nieuwe golf nadert.

Opschonen en opmaken met webstandaarden helpt u niet alleen om dit te doen, maar bespaart u op den duur ook tijd en geld.

Naarmate het web uitbreidt, groeien ook de technologieën die ermee worden gebruikt mee. Hoewel HTML al heel lang bestaat, heeft het onderweg nogal wat sidekicks opgeleverd.

Eerst Javascript, vervolgens CSS, XML en later AJAX. De brede acceptatie van HTML 5 is net om de hoek, Firefox, Safari, Opera en Chrome genieten al van bijna volledige HTML 5-ondersteuning (de trage jongen in het blok, Internet Explorer, blijft zoals gewoonlijk achter).

In dit artikel bespreken we de basisprincipes van webstandaarden, wat ze zijn, wat ze voor u betekenen en enkele belangrijke tips om u te helpen omgaan met dit belangrijke en vaak verwaarloosde probleem.

Wat betekent het om opmaak te "opruimen"?

Simpel gezegd, het betekent vrij van rommel, voldoet aan standaarden en gebruikt de tags en structuren van elke taal voor het beoogde doel.

Clutter-vrije HTML maakt dun gebruik van tags, elimineert de externe en volbrengt zijn taak met zo weinig markup als nodig is . Het vermijdt onnodige attributen, zoals inline CSS, en laat elk document gestructureerd en georganiseerd.

Op dezelfde manier moet clutter-free CSS voorkomen zichzelf te herhalen, voordeel te halen uit erfenis (denk eraan, CSS staat voor Cascading Style Sheet) en hergebruik klassen waar mogelijk.

Voldoet aan standaarden betekent dat uw pagina's worden gevalideerd volgens de normen die zijn opgesteld door de W3C voor HTML, CSS en XML. Dit betekent dat u de gratis W3C-validators gebruikt om fouten te controleren, te corrigeren en opnieuw te testen totdat u zo dicht mogelijk bij 100% geldig bent .

Waarom zou ik erom geven? Het werkt, is dat niet genoeg?

Elk project heeft een agressieve deadline en elke klant wil dat zijn site gisteren wordt gelanceerd. Dus als webontwikkelaars en ontwerpers staan ​​we onder constante druk om sneller en efficiënter te werken.

Het is gemakkelijk om in de val te trappen dat snel denken slordig moet zijn en dat schone, op standaarden gebaseerde markup meer tijd in beslag neemt. Het is gemakkelijk om gewoon te zeggen "het werkt en dat is het enige dat telt."

Natuurlijk werkt het ... voor nu, voor jou. Hoe zit het met volgend jaar, of over drie jaar? Hoe zit het met nieuwe browsers? Hoe zit het met de bereikbaarheid?

Denkt u echt dat de belangrijkste zoekmachines zich zullen houden aan speciale, slordige codeermethoden? Ze zijn kieskeurig en als je niet voldoet aan de standaarden, schop je je zoekresultaten in het gezicht .

Hoe zit het met het volgende slechte sap dat deze pagina's moet bewerken die je hebt gemaakt? Wat gebeurt er als je door een bus wordt geraakt, stop met backpacken in Alaska of wordt ontvoerd door buitenaardse wezens? Iemand anders moet verder gaan waar je was gebleven en hij zal naar je code kijken en proberen hem te begrijpen. Zal het gemakkelijk zijn, of geeft het hem hoofdpijn en laat hij je naam vervloeken?

Doe het de eerste keer goed. Dit is niet zomaar een vervelende, vaderlijke levensles. Het bespaart je zowel tijd als geld en zorgt ervoor dat degenen die je volgen gemakkelijker dingen kunnen doen.

Je denkt misschien dat het sneller is om gewoon de inline CSS in te voegen in plaats van een nieuwe klasse correct toe te voegen aan je stylesheet. En je denkt misschien dat het sneller is om alle HTML die je kunt uitspugen weg te gooien zonder rekening te houden met de algehele documentstructuur.

Als het tijd is om dat document later bij te werken of de hele site opnieuw te ontwerpen, besteedt u veel meer tijd aan het goedmaken van slordige code dan u ooit hebt opgeslagen door er als eerste doorheen te slepen. Wanneer je een nieuw stijlblad aanmaakt, komen die vervelende inline stijlen die je haastig hebt toegevoegd terug naar je te spoken en je zult uren spenderen om ze op te sporen en uit te schakelen.

Uitbreidbaarheid, toegankelijkheid, vertaling en toekomstbestendigheid

Mobiel browsen groeit als Godzilla op atomaire steroïden. In plaats van te worden verbannen naar de jetsetterende Blackberry-verslaafden van 5 jaar geleden, gebruikt iedereen tegenwoordig zijn telefoon om op internet te surfen.

Hulptechnologie -schermlezers voor blinde en alternatieve interface-apparaten voor gehandicapten- is gebruikelijk en u wilt geen verkoop verliezen of verkeer vervreemden alleen omdat u hiermee geen rekening hebt gehouden.

Uw site zal waarschijnlijk in een half dozijn talen worden vertaald, aangezien lezers van over de hele wereld uw inhoud vinden. Dankzij de Internetarchief , De cache van Google en anderen, pagina's die u vandaag publiceert, blijven er lang, zelfs nadat ze zijn verwijderd van uw live site.

Schone opmaak en naleving van standaarden zullen een lange weg banen om ervoor te zorgen dat uw sites in elk van deze scenario's werken.

Do's en Don'ts:

  • Gebruik de tags zoals ze zijn bedoeld. Bijvoorbeeld: h1 is het eerste element op het hoogste niveau op de pagina, dan h2, h3 enzovoort. Er mag slechts één h1-tag per pagina zijn.
  • Geef uw CSS-klassen en ID's een naam met behulp van betekenisvolle termen en vraag uzelf af of iemand anders weet wat een klasse / ID alleen al doet. Welke naamgevingsconventie is logischer: # box12 of # comment-footer?
  • Maak goed gebruik van CSS-overerving. Bijvoorbeeld: als u een lettertype op een container instelt, hoeft u dit niet opnieuw op elk onderliggende element op te geven, tenzij dat onderliggende element een ander lettertype moet gebruiken. Dit zorgt ervoor dat uw stylesheets slank blijven en snel worden geladen.
  • DOE valideer uw HTML, CSS en XML en corrigeer zoveel mogelijk fouten. Let ook op de gegenereerde waarschuwingen.
  • DOE dubbel te controleren WYSIWYG gegenereerde code en opruimen indien nodig. Ze zijn berucht voor het uitspuwen van grote, opgeblazen markeringen met veel onnodige, ongeldige rommel.
  • Injecteer GEEN inline-stijlen of externe tags en attributen alleen maar omdat je haast hebt.
  • Neem geen genoegen met "het werkt." Alleen al omdat een pagina dit weergeeft betekent dit niet dat de opmaak onder de motorkap voldoet aan de standaarden, probleemloos of zoekmachine vriendelijk is.

Verder lezen & bronnen


Exclusief geschreven voor WDD door Jeff Couturier.

Volgt u webstandaarden op uw websites? Waarom of waarom niet? Deel alstublieft uw opmerkingen met ons.

ontwerp webstandaarden schoon markeren