Tag / css
Quick wins to make your designs more inclusiveWhat is Accessibility?When was the last time you visited a website and got frustrated because you had trouble using it? Maybe the site was using Web GL technology that your browser didn’t support, you couldn’t read it’s text due to it being so small, or the mobile experience simply wouldn’t load on your iPhone. If you think back to these annoying experiences where you functionally could not navigate a site, chances are you’ve experienced inaccessibility in one form or another.
This is not to say that all frustrating experiences are inaccessible, but there are definitely overlaps between bad UX and inaccessibility. An easy way to think of this is that a bad experience for the general public is usually much worse for a disabled or impaired individual.
If you find yourself squinting to read small text on a site, for example, chances are a visually impaired person wouldn’t be able to read it at all. If you make this small text size larger, you’..
Once upon a time, there lived a web developer who successfully convinced his customers that sites should not look the same in all browsers, cared about accessibility, and was an early adopter of CSS grids. But deep down in his heart it was performance that was his true passion: He constantly optimized, minified, monitored, and even employed psychological tricks in his projects. Then, one day, he learned about lazy-loading images and other assets that are not immediately visible to users and are not essential for rendering meaningful content on the screen.
I hope you had a great start into the new year. And while it’s quite an arbitrary date, many of us take the start of the year as an opportunity to try to change something in their lives. I think it’s well worth doing so, and I wish you the best of luck for accomplishing your realistic goals. I for my part want to start working on my mindfulness, on being able to focus, and on pursuing my dream of building an ethically correct, human company with Colloq that provides real value to users and is profitable by its users.
A key feature of Flexbox and Grid Layout is that they can deal with distributing available space between, around and inside grid and flex items. Quite often this just works, and we get the result we were hoping for without trying very hard. This is because the specifications attempt to default to the most likely use cases. Sometimes, however, you might wonder why something ends up the size that it is.
Websites are looking more and more like mobile apps. Users are also increasingly expecting a more app-like experience. From push notifications to offline mode, native web apps are getting there. Once web apps function like native apps, the design interactions would also change to address the use case — namely, the ubiquity of animations. Animations drive interactions in all of our favourite apps, from Uber to Lyft and Snapchat to Instagram.
There are a few concepts in CSS layout that can really enhance your CSS game once you understand them. This article is about the Block Formatting Context (BFC). You may never have heard of this term, but if you have ever made a layout with CSS, you probably know what it is. Understanding what a BFC is, why it works, and how to create one is useful and can help you to understand how layout works in CSS.
You may have heard quite a bit of talk about a CSS feature called “Grid” this year. If you are someone who cringes when you hear the words “CSS” and “grid” in the same sentence, then I highly suggest you check out this new CSS module called CSS Grid. Browsers render HTML elements as boxes according to the CSS box model, and CSS Grid is a new layout model that provides authors the ability to control the size and position of these boxes and their contents.
I have some things I need to get off my chest. This is a ramble, but I’m in too much pain to tidy it up. If it’s too rambly, go to the final section about naming names at least, please.
Not Here was written in 2014, the year of #YesAllWomen. I might call it the moment I “woke” up, but like nested nightmares in which you wake up just to find yourself in another nightmare, I keep waking up and it doesn’t look to be stopping soon.
Shortly after I wrote Not Here, I wrote “Tweaking the Moral UI” for A List Apart. I went through rounds and rounds with my editor. If we were going to write this for a very male developer-heavy audience, we were going to have an article that was airtight. The only time I’ve come even close to that degree of editing was when I wrote for a peer-reviewed journal and a panel tore apart every sentence. For the Moral UI, every sentence got torn apart twice.
Potentially angering men is a dangerous business if you are a woman.
A woman’s worst nightmare? That’s prett..
Editor’s Note: Welcome to this month’s web development update. Anselm has summarized the most important happenings in the web community that have taken place over the past few weeks in one handy list for you. Enjoy!
As web developers, we’re working in a very diverse environment: We have countless options to specialize in, but it’s impossible to keep up with everything. This week I read an article from a developer who realized that even though he has been building stuff for the web for over seven years, sometimes he just doesn’t understand what’s going on: “I’m slamming my keyboard in frustration as another mysterious error appears in my build script,” he writes.
The post Monthly Web Development Update 10/2017: CSS Grid, CAA Pitfalls, And Image Optimization appeared first on Smashing Magazine.
- Free Sketch Template for building a meaningful “Affinity Diagram” during the UX Process
- Why the discovery phase is the most important web design step
- 20 Free iPhone X Mockups [PSD, Sketch]
- How to design Mobile Push Notifications that Don’t Suck
- Checklist for effective logo design
- Why Focusing Too Much on App User Acquisition is Not Right