There are some things we know and like about SVGs. First, SVGs have smooth, clean edges on any display, so using SVGs can reduce the number of HTTP requests for image replacement. Second, it’s easy to make an SVG scalable to its container for responsive development.
In this article we’ll cover a few ways of using SVG sprites to describe motion on the web. I’ll show some techniques for using SVG sprites in complex animation that takes advantage of these factors. All examples shown will assume the use of an auto-prefixer and some basic knowledge of CSS animations.
Web accessibility is about people. Successful web accessibility is about anticipating the different needs of all sorts of people, understanding your fellow web users and the different ways they consume information, empathizing with them and their sense of what is convenient and what frustratingly unnecessary barriers you could help them to avoid.
Armed with this understanding, accessibility becomes a cold, hard technical challenge. A firm grasp of the technology is paramount to making informed decisions about accessible design. How do assistive technologies present a web application to make it accessible for their users? Where do they get the information they need? One of the keys is a technology known as the accessibility API (or accessibility application programming interface, to use its full formal title).
Following a recent economic windfall, Brazilians are faced with more choices of how to spend their money. This provides a situation for good UX to make a huge impact and sway customers to buy new products or services. Companies inside and outside Brazil are interested in capturing a part of this new market.
My company, Blink UX, had the opportunity to conduct in-home user interviews in São Paulo on behalf of a Brazilian real estate company called Zap Imóveis. This project provided me with invaluable insider knowledge on how to best conduct in-home user interviews in Brazil and, more broadly, how to conduct field research in foreign countries using the same underlying principles.
The navigation system is often the most important and complex user interface component of modern websites. In recent years, small screens, responsive website techniques and ever-evolving hardware and software have only added to this complexity.
A quick query of “mobile navigation” returns thousands of opinions on navigation patterns, including the “hamburger” menu, front-end plugins, frameworks and plenty of other tools. Despite this changing landscape of tools and design trends, a successful navigation system sends users on the path to the exact content they need at the right time.
Working with text has long been the domain of desktops and notebooks. Yet the screen size, resolution and software of mobile devices have improved in recent years, which has made typing a fairly large amount of text quite achievable.
A number of apps and techniques are intended to make this task easier, thus increasing productivity and increasing the amount of text that can be comfortably created or edited on a mobile device.
Data visualization is on the rise. Publishers around the world — individual bloggers and major online publications alike — are realizing that charts, maps and combinations of the two can convey a message far more effectively than plain numbers can.
From simple charts to fancy infographics to complex timeline animations, data visualizations are popping up all over the Internet. However, as in any other area, once everyone gets on the train, distinguishing yourself from the pack becomes hard.
“By playing in a band,” was my answer. Now, I am not suggesting that all web designers should run out and join a rock and roll band (although there is a glaring shortage of songs about the CSS box model). I do know, however, that many of the skills I honed while playing in a band have contributed to my success as a web designer — as much as, if not more than, my ability to write clean code or design an attractive web page. In this article, I'll describe how being in a band taught me to be a better web designer.
Style guides — especially living ones — are useful in many aspects of development and maintenance, so it’s little wonder that developing them has become a highly recommended and a popular practice. But even with the clear benefits, taking the necessary steps to create and start using style guides is easier said than done, as quite often the challenge is cultural, requiring changes in people’s mindsets.
In order to make the transition as painless as possible, equipping yourself with the most helpful tools and automating as many steps as possible become important. These living style guides promote a systematic approach to composing layouts, which used to be just a task within the user interface development process. Incorporating style guides into the development process places importance on the tools used to build the component catalogue.
Slowly but surely, the official app stores of iTunes, Google Play and Windows Phone Marketplace have transformed into a digital battlefield. App developers have to fight for recognition or otherwise be drowned in an ocean of competing mobile applications.
App store optimization (ASO), a strategy similar to SEO but specifically applied to the app pages in app stores, has become a handy addition to an app developer’s marketing plan, and promises to help increase visibility – and, as a consequence, downloads – of a mobile app. ASO consists of many elements, and should be considered a key component of publishing an app in an app store of choice. It encompasses every detail of a mobile app’s page, and can be split into on-page and off-page elements.
Although the syntax might be initially confounding, flexbox lives up to its name. It creates intelligent boxes that are stretchable, squeezable and capable of changing visual order. It provides simple solutions to layout paradigms that CSS has always struggled with: vertical centering and equal heights. Flex items are truly accommodating and a pleasure to work with.
Flexbox truly shines with HTML5 web applications. Most web apps consist of a series of modular, reusable components. You can use flexbox for those bits of layout that induce headaches and that depend on brittle CSS hacks to work. Small modules work very well with flexbox, and you can use floats and other tools for broader sections of the layout.