A presentation at Frontend United in in Utrecht, Netherlands by Peter van Grieken
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
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
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
Producing a full page of semantic HTML with Gutenberg
Getting around WordPress…
“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
Last year we won Best Site at the Automattic Design Awards. In this talk we go into the decisions we made throughout the project, both from a design as a development perspective. We take look at how we used WordPress’ Gutenberg editor on a large-scale website while ensuring usability and accessibility on the front end and how we collaborated as a designer and a developer.
Here’s what was said about this presentation on social media.
for free. You
can too.