How to design an award-winning website

How to Design an Award-Winning Website* * We can’t guarantee that this will actually win you an award.

(WordPress)

How to Design an Award-Winning Website* * We can’t guarantee that this will actually win you an award.

How to Design an Award-Winning Website

How to Design an 1. Gutenberg Ready Award-Winning 2. Accessibility Enabled Website

”We especially want to honor work that shows that strong accessibility and strong design can go hand in hand.”

”What went wrong?”

KIT.nl Health SED Gender IP Conferences & Events

PROJECT SERVICE PUBLICATION EXPERT EVENT TOPIC

(Content)

Design the content first

Backend Development

WordPress

Trigger warning

Gutenberg

Modularity means finding overlap

“How much editorial control do you need?”

Text inside the <button> tag 😉

Custom components & blocks HIGHLIGHT BLOCK ICONS LINK INPUT FIND POST SORTABLE SORT & DRAG LAYOUT-AREA CONTAINER INTRO LINKS HERO SUBTITLE READ-MORE RELATED COLLECTION STAFF-COLLECTION STAFF-PUBLICATIONS PUBLICATIONS COLLECTION-FILTER STUDIES-COLLECTION VACANCIESCOLLECTION EXPERT SERVICE PUBLICATION CONTACT PARTNERS TESTIMONIALS MEDIA CHECKLIST ROOM-LAYOUT ROOM-SPECS POSSIBILITY-BLOCK BANNER FAQ-LIST TAXONOMY-MENU SIDEBAR TEXT-BUTTON CALL TO ACTION

Test everything.

Frontend Development

Accessibility

Keyboard Accessibility

Tip! Disconnect your mouse and only use your keyboard for an hour. . s d n e i r f r u o y e r a e p a c s E d n a e c a p S , r e t n E , Tab

Color Accessibility

Semantics

Accessibility

Frontend Development

No project manager will ever ask you to use a <div> instead of a <button>

Bringing it all together

<!— wp:heading {“text”: “Our Services”, “weight”: “h2”} —> <h2>Our Services</h2> <!— /wp:heading —>

Producing a full page of semantic HTML with Gutenberg

Getting around WordPress…

<HEADER ROLE=”BANNER”> <HEADER> TITEL + INTRO <ARTICLE> CONTENT <SECTION> TEKST <ASIDE> SIDEBAR <SECTION> <SECTION> <ASIDE> RELATED + FURTHER LINKS <SECTION> <SECTION> <FOOTER> (PAGE)

“That seems like a lot of work…”

Let’s talk about what a ‘user’ is…

Slow incremental changes in every step

Let’s change 34% of the web today.

How to Design an Award-Winning Website?

All designed and developed in Gutenberg, having inclusive design incorporated in every step, the jury was unanimous about this being the winner in the category best site.

Conclusion

Thanks! Talk to us @LucP @petervangrieken