I had the good fortune of being able to attend An Event Apart in Washington D.C. this past week. An Event Apart is a web design conference by the same people behind A List Apart and A Book apart, both of which were important resources to me when I was taking my first steps into web development, so I was pretty excited to attend.
It was a whirlwind three days of best practices, new features, and helpful tricks. I could probably write a novella about Websites just based on what I learned, but in the interest of brevity (and getting back to the stuff I’ve missed over the past few days) I’m going to focus in on a few of my favorite things I’ve learned that were common themes in the talks.
The first web pages were basically just text documents, like you might create in a word processor. For a while that was mostly fine, web pages were basically just containers for text information. We’re entering a new era, however, in which we are asking more and more of web pages, and the tricks we’ve used to hide that text document pedigree are starting to fray as we develop applications that have to work on a myriad of screen sizes, input types, and usage situations.
You can look on pretty much any page on NC State’s website and it will look like there are things lined up in a grid, and while that is sort of true, it’s mostly a trick, we just decide that we are going to use the same size for block so that they line up and look like a grid. Enter CSS Grid, now we can have real grids that respond to content and can easily rearrange content based on screen size.
So what does this mean? It means better layouts. How will that look? It’s hard to say; CSS Grid gives us another tool to allow us to more easily do more interesting things. You may notice that a lot of layouts of sites look very similar, especially compared to the variety of layouts you might see in books and magazines. It used to be that you had to sacrifice usability, or performance if you wanted to do interesting things. Now we can make fewer trade offs for those more interesting layouts.
CSS Grid still doesn’t have 100% support across browsers, and older browsers can’t display it, so it will only be slowly adopted as browsers advance and people upgrade. Only after we’ve been living with Grid for a while will be begin to branch out and see exactly how powerful it is and what exactly we can do with it; but I’m sure that whatever we come up with, it will be very exciting.
This is a big one for us. Our web interfaces are no longer a fancy alternative to other methods. In many instances our web sites are the only options for people to get information. So it is very important that we design our sites to be accessible from the start so that anyone, no matter what device they access the site with, no matter their background, no matter their level of ability or technical proficiency.
Another side to this is the fact that as a Public University, we have to adhere to certain regulations. A lawsuit over inaccessible content is a real possibility, and while our motivation should be to simple to the right thing, avoiding a costly lawsuit is another motivation.
Accessibility doesn’t need to be perfect, it just needs to be better, every time you edit your site, think about how you can make it more accessible. A lot of accessibility rests on developers, but also a lot rests on content creators.
Here are a few things that can be done to improve the accessibility of content.
- Text should be text: Do not use text inside of images for content, this basically renders that content invisible for anyone who is not able to visually see the page. It also hurts your search results as search engines cannot process the text.
- Good Alt Tags: When you use images in your content, use descriptive alt text. The alt text on your images should allow someone who cannot see the image to get the same information that someone looking at the image would. This also improves search results.
- Front load content: Put the most important information up front in your content. Various assistive technologies like screen readers, braille displays, and screen magnification limit the amount and speed of content consumption. By putting the important information up front you make it clear to users what the section is about and allow them to continue or skip ahead. This is also important for mobile users whose screens may only display a small amount of information.
- Proper heading tags: Many assistive technologies use the heading tags (<h1> <h2> <h3> etc.) as an outline for the document for users to jump around in. If you treat your content like a bulleted outline and the heading tags as levels of indentation you can have much better structure to your information and allow much easier consumption of the content.
- Proper tags: This is related to the above point but make sure to use the proper tag for the content inside of it. the <table> tag should only contain tabular data. Put paragraphs of text inside of <p> tags. This is also important for search engines to be able to understand content.
- Color Contrast: Make sure that text contrasts significantly from the background. Colors that are too close together can be difficult for people with low vision, or people using a mobile device in the sunlight. Fonts that are too thin can also cause a problem.
The above list is certainly not exhaustive, just a few tips for creating more accessible content. It may change the way you write things, but it will be a change for the better. Accessibility doesn’t just improve things for users who may be blind or deaf, but for people of all abilities and skill levels. You’ll also note that by writing content that is better able to be read by assistive technologies you’re also writing content that is better understood by other technologies like search engines. Writing content and building sites the right way now gives greater longevity to content. Web content that was well built in 1997 still works fine on a mobile device, it’s only when people started to break convention and best practices that we started to get problems displaying on phones. Proper content now is more likely to be proper content on whatever unforeseen devices the future holds.
Some other Miscellaneous Stuff
Just some things to keep in mind
- Optimize your images: the ideal page load is under 1 megabyte, optimizing your images can help you get there.
- User testing: It doesn’t have to be complicated, you can learn a lot from recording someone on skype using your site.
- Use HTTPS, Most ncsu.edu domain sites are already doing this, but sites not using HTTPS are beginning to appear lower in search results.
Conferences like these are a great opportunity to get a better idea of how people in many different environments are solving problems we all face and moving modern technology forward. It is a great way to pick up new skills and keep a tab on what is going on and I’m very grateful to have had to opportunity to go.