I love when conferences give me the opportunity to travel around the world.
I love it even more when conferences go beyond the web to find inspiration from
other fields. Beyond Tellerand (Düsseldorf, Germany) was the best possible
combination.
Amazing talk by Miriam Suzanne at the Beyond Tellerand conference
about the benefits of using plain CSS
instead of heavy library for your grid!
Very useful and inspiring. Thanks!
Right from the start, Beyond Tellerand was unlike other conferences.
Rather than hearing familiar talks about familiar technology, the first
day took us on a journey through web annotations, intricate
illustrations, design for non-designers, robots with personality,
stop-motion tinkering, and programatically-generated art.
I spoke on day two, followed by “bleeding edge” accessibility,
large-scale projection-mapping, the women who built the internet, and a
lesson on ethics in tech. How could I even begin to match the
inspirational scope of these other presenters, while talking about
layout?
I couldn’t – but I did have some fun. Inspired by the generated art from
Jared Tarbell and the Levitated Toy Factory, I picked one of his art
pieces to recreate with CSS variables (aka custom properties) and CSS
grid layouts.
I spent that evening studying his image, and translating it into HTML
and CSS. My first draft relied heavily on :nth-child() selectors,
leading to an absurd 3MBCSS file. By adding custom properties in the
HTML, I was able to streamline things dramatically. This second draft
relies on HAML to generate the required HTML for a static (but
responsive) result.
That went over well at the conference, but I decided to improve it after
the conference was over. By moving the component logic into Vue, I
could interact with the controls dynamically – and animate the changes:
shuffling, resizing, and more. Finally, I pulled in an
Asteroids-inspired browser snippet so you can destroy your creation.
Enjoy the invasion!
There’s been a recent flurry of articles about web components, with advice on how to shape them as extensions of HTML. I decided to dig in, and see how these ‘HTML web components’ could become a part of my own workflow. Despite a few rough edges, I’m excited to see…
Do you want to make your website or web app more intuitive for the people who visit? If so, I’d like to introduce you to the world of Object-Oriented UX. As a UX designer at OddBird, using OOUX strategies to identify and avoid unintuitive objects has been key to…
Part 3 – Responsive Web App vs Native Mobile App vs Progressive Web App
bySondra Ebyon
If you’re weighing the performance optimization and device integration opportunities of a native mobile app against the broad reach and lower cost of a responsive web app – and can’t decide which is a higher priority for your digital product – don’t despair. A progressive web app may be just…