National Braille Press Releases Redesigned Website

2019-08-28T00:00:00+00:00

End Point congratulates National Braille Press on the recent release of their redesigned website, launched earlier this week! National Braille Press (NBP) supports the blind and low-vision community with events, initiatives, resources, children’s programs, and a bookstore. NBP has been working with End Point since 2002 and hosts and maintains their website, which is based on the Interchange open-source ecommerce platform.

Project Phases

End Point started working with NBP on this redesign project in late 2017. We began with a user experience (UX) review & content strategy project which resulted in design directives for our in-house team. Design and plans were completed in mid-2018 and implementation began then. End Point built a new, more powerful search feature and developed a number of ‘cornerstone’ pages while NBP staff worked tirelessly in-house to convert the rest of the pages on their website to the new designs.

Leveraging NBP In-House Resources

NBP’s wide reach in their community and long history means their website has hundreds of content pages. This can be costly to convert, and for some non-profits, can make a redesign project cost-prohibitive. End Point engineers Greg Davidson and Marco Pessotto worked alongside NBP staff helping them learn the Bootstrap web development toolkit and the steps they needed to take to integrate each page into the new designs. Using these in-house resources dramatically reduced the overall project cost while allowing the content to be converted carefully by hand with accuracy and care.

WCAG 2.0, AA Standard

NBP’s user base is heavily centered in the low-vision community, so compliance with user accessibility standards was a main focus of the redesign effort. End Point worked with NBP to make sure all of the engineers on the project were trained in the Web Content Accessibility Guidelines (WCAG 2.0) AA standards and guidelines. Testing for compliance was done with AXE and WAVE Chrome accessibility plugins. NBP also completed direct user testing with screen readers and devices.

Congrats again to NBP on completing this project with us!

CSSConf US 2016 — Day One

2016-10-07T00:00:00+00:00

Boston Common

I attended CSSConf US 2016 last week in Boston, MA. Having been to the 2013 and 2014 (part one, part two) events in Florida then missing it in NYC last year, I was looking forward to seeing what it would be like in a new location. It was fun to see some familiar faces including Eiríkur (congrats on organizing a very successful JSConf Iceland conference earlier this year!) and to meet many new folks in the CSS community. Claudina Sarahe was our MC for two days of talks and she did a great job. After each talk she took a few minutes to interview the speaker—asking them questions from the audience and some of her own. The chats were candid and interesting on their own and gave the next speaker time to set up.

Below are my notes and some observations on the talks from Day One. Be sure to check out the videos, slides and transcripts at the CSSConf site. Many of the videos are there now and they are adding more as they become available.

Sarah Drasner — Creativity in Programming for Fun and Profit

Sarah started off the day with an inspiring keynote about creativity. She explained how writing code is a creative endeavor by showing us several drastically different solutions to the classic FizzBuzz problem in computer science. She shared some stats and survey results which documented excellent, tangible results companies saw when they invested in R&D and fostering creativity. Sarah demoed some really cool creative projects she had built—many of them just for fun. She encouraged us to work on creative projects on the side to enter into flow while designing, coding and building things. Time devoted to purely creative and fun projects can makes less interesting day-to-day tasks more bearable. It was amazing to see some of the animation work she’s done and her passion for art and programming was palpable throughout the talk.

Brian Jordan — No Bugs in Sight: Continuous Visual Tesing at Code.org

Brian works for code.org which is the organization behind the Hour of Code and other initiatives promoting computer science education in schools. His work on apps that teach kids to code is used on a vast variety of hardware (tablets, old underpowered school computers etc.). Testing became a challenge early for them so Brian began to incorporate testing with Selenium into their development workflow. They use Cucumber to write their tests. They use Sauce Labs to run the tests and circleCI to integrate it with their source code control system. When code is committed, the tests are run which ensures broken code does not get merged in. They also use applitools eyes for visual diffing which looked very interesting. They keep a wiki of the larger and more interesting issues that it catches to help everyone remember them (and sometimes recall why they still need to keep a particular test). Brian showed us several screenshots of visual problems caught by their system including one that was a single pixel showing up in a strange (unwanted) location on the screen.

Jessica Lord — Nativize is the new Normalize

Jessica works at GitHub on the Electron project. Her talk was about Electron and how you can use it to build cross-platform (Windows/Linux/Mac) desktop apps using web technologies. Electron is used to power Atom, Slack and many other interesting apps. It uses V8 as its JavaScript runtime which allows you to use Node.js in your apps. Chromium is used for the all the DOM and rendering bits. She showed off the Electron example app and talked about some tips and tricks to building apps with Electron. Jessica stressed that you have to think about apps differently than web sites. You want your app to feel like an app not a website. She pointed out several good resources for learning more about it. Electron can also be used to build menubar apps for OS X.

Jen Kramer — CSS4 Grid: True Layout Finally Arrives

Jen is a professor at Harvard teaching web development. She talked about CSS grid and how it will make laying out sites much better than the current hacks techniques we have been using up to this point (tables, floats, flexbox). She explained how flexbox was designed to only work in a single dimension (grids need to work in two for both rows & columns) and showed some example layouts built with CSS grid. Jen’s examples showed how many CSS design challenges (e.g.: equal height columns) are easily solved with grid. The only thing holding it back is browser support. Today it’s available in Chrome and Firefox behind a configuration flag. Jen was really funny and engaging and drew everyone in with her presentation skills and passion for web development in general (grid too!).

Pete Hunt — Component-Based Style Reuse

Pete talked about React and how it can be used to create components (e.g.: a piece of UI that can be re-used in different contexts). He shared how OOCSS was a foundational concept and inspiration to him and walked through the process of building a React component that implemented an OOCSS “media block” component. Having previously worked at FaceBook, Pete discussed the issues that arise when developing many UI components at scale—especially CSS class conflicts and the resulting style pollution. Pete used jsxstyle (developed by his current team at Smyte) in his React component to keep the styles scoped to the component and avoid using descendent selectors. It was very interesting talk and I recommend watching the video of Pete’s talk to get the full effect.

Keith J. Grant — Stop Thinking in Pixels

Keith works for the company behind the NYSE website. He thoroughly explained how to effectively use em and rem units for font-size and other properties and how he recommends avoiding using pixels for font sizes altogether. Keith showed many examples using rem to set the font size for a container element and then use ems for all of its children. This had the benefit of flexibility and made is possible to adjust the sizes of all of the child elements by simply changing the size on the parent/container. He covered several formulas which can be used to determine the em values you will need for approximate pixel sizes. He shared type-scale.com as a web app that can help with these calculations. Once you understand the formulas, you can add mixins in Sass to perform the calculations for you. Near the end of his talk Keith showed us an example using rems for the parent, ems for the child elements and then combining calc() with viewport units (vh, vw) to smoothly scale the size of a component as the viewport changes. This was really neat to see and avoided the clunky switch between sizes that happens when the viewport changes between media queries. With the technique Keith demonstrated, the scaling was completely fluid—very impressive. Keith wrapped up by explaining that these techniques require a little work up front and often educating other developers on the team but the benefits are immediate.

Will Boyd — Silky Smooth Animation with CSS

Will talked about the deep dive he took into how browsers handle rendering and animation. He demoed how we can look into the process for our own performance debugging with tools like Chrome DevTools. To illustrate some of the performance wins Will had discovered in his own projects, he loaded up an animation he’d built for the talk and compared the performance before and after he used CSS properties that could be handled by the GPU. The performance improvement using transform, filter and opacity (all hardware-accelerated and rendered by the GPU) was drastic and impressive.

Lea Verou — CSS Variables var(–subtitle);

Lea’s talk was about CSS variables (aka custom properties). I admit to being surprised when I looked it up recently and found that they were already quite widely supported. The syntax looks little odd at first but it made sense when Lea explained it was intentional that they look different than preprocessor variables. I found it interesting that CSS variables are expected to be used alongside preprocessor variables rather than replacing them. Lea explained how they work, how they can be accessed by JavaScript and demonstrated several things CSS variables can do that preprocessor variables can not! Make sure to check out the video of her talk when you get the chance.

CSS Conf US 2014 — Part Two

2014-06-04T00:00:00+00:00

More Thoughts on Getting Vertical, Testing and Icon Fonts

Without further ado I’ve written up another batch of my notes about three more great talks at CSS Conf US in Amelia Island, Florida last week.

Antoine Butler — Embrace the Vertical

Antoine shared his observation that vertical media queries are available to CSS developers but not often used. With the vast array of devices accessing the web today vertical media queries can be a useful tool to adapt your content effectively. Antoine walked us through a couple examples of how he applied this technique in a couple of his projects. The first was a prototype of WikiPedia. While they have gone with a separated mobile site (e.g. en.m.wikipedia.org/), he started with the HTML from the desktop site and applied some vertical media queries to make the content much more digestible. Take a look at his code to see how it works.

The second example Antoine demonstrated was for the navigation at Volkswagen. The client wanted to display an unlimited number of items in the secondary navigation. Once again Antoine applied vertical media queries to handle the varying number of navigation elements based on the device height. Check out his adaptive sticky vertical navigation code for a closer look.

Slides from this talk are available here: Embrace the Vertical.

Christophe Burgmer — If your CSS is happy and you know it…

This was a really interesting talk about testing your CSS visually with a tool Christophe has been developing called CSS Critic. Christophe covered some of the existing CSS/HTML testing tools like Selenium and found that while they worked well they didn’t meet his needs entirely. He wanted a way to visually diff the changes that were made and to be able to write tests for his UI code. For example, when the “accepted” version of the page changed visually, he wanted to be notified and decide whether or not to accept the proposed change.

Christophe demoed the tool for us and it was really cool to see a visual diff in the browser. For a change that was introduced, screenshots of the old, new and difference were displayed. The user then has the ability to accept / OK the change or reject it. You can view the tool in action on the CSS Critic site. Under the hood, CSS Critic uses some other nifty projects including Wraith, PhantomCSS, CasperJS and Hardy. Christophe also mentioned csste.st as a site which curates information on all of these topics and projects.

Slides from this talk are available here: If you CSS is happy and you know it…

Zach Leatherman — Bulletproof Icon Fonts

Zach wrote a great article on Bulletproof Accessible Icon Fonts earlier this year and his talk was along similar lines. He chronicled some of the challenges and pitfalls worth knowing about in order to support icon fonts in your sites and applications. Browser support varies a great deal and Zach cited John Holt Ripley’s Unify unicode support charts as a helpful reference. He works on the a-font-garde project which documents best (er. bulletproof) practices for working with icon fonts today.

Stay Tuned

Watch for one more post later this week with the last batch of talks from the conf!

WAVE: Evaluating Web Accessibility

2013-07-01T00:00:00+00:00

It’s been far too long since I wrote a blog article! I’ve been a bit preoccupied:

My [cute] preoccupation.

I thought I’d start with a short blog article to get back into it. Recently, the H2O project has been keeping me busy. One interesting resource I’ve been using for the project is WAVE. WAVE is a free web accessibility evaluation tool, which in our case helps us evaluate the H2O web application for it’s use in an academic setting for those users with disabilities. The tool helps to evaluate accessibility against Section 508, WCAG, and more.

To use the tool, you simply visit https://wave.webaim.org/ and type in the URL that you want evaluated:

WAVE homepage

The results show warnings and alerts, as well as feedback regarding other structural markup overlayed on the page. The results are meant to serve as a resource to make decisions regarding accessibility. Some web application developers may be more inclined to follow the guidelines than others.

Example WAVE output, analysis of End Point’s home page.