Code: CSS3

This is an sample chapter from Josh Clark’s book Designing for Touch. 2015, A Book Apart.

Chapter 4: Gestures

Hands are wonderfully expressive. We talk with our hands all the time: they ask questions, show intent, command attention, reveal emotion. A backhanded wave dismisses an idea; a jab of the finger accuses; a thumbs-up enthuses. If hands are excellent at communicating with people, they’re even more effective at communicating with objects. From the delicate operation of tying a shoelace to the blunt-force strength of opening a pickle jar, our hands and fingers constantly improvise in grip, pressure, position, and sensitivity.

How can we bring similar expression to manipulating digital information? Touchscreens put data literally in the user’s hands, and it’s the designer’s job to enable and interpret that interaction. Unfortunately, while our hands have a robust vocabulary for speaking to people and objects, we’re still in the grammar-school stages of a gestural language for touchscreens. A richer lexicon lies ahead, but it will take time for a more sophisticated range of touchscreen gestures to become common knowledge. Read More

This is a sample chapter from the Second Edition of Chris Ward’s book Jump Start Responsive Web Design. 2017 SitePoint.

Chapter 4: Responsive Text

If Web pages are to be truly responsive, then the content of pages should also flow and change to suit the dimensions of the device a user is viewing it on. While Web pages are becoming more image and media heavy, text is still a crucial component, and there are numerous techniques to help make it as readable as possible, no matter the current device.

To understand better the ways you can represent text on a Web page, it’s best to take a trip into the long history of text. Read More

This is a sample chapter from Ben Coleman and Dan Goodwin’s new book Designing UX: Prototyping. 2017 SitePoint.

Chapter 7: Building HTML Prototypes

When we say HTML prototypes, we mean a Web site comprising HTML markup, CSS for presentation, and JavaScript for additional interactivity. It may be a simple HTML Web site, or a Web site that runs on a framework or content management system (CMS).

This chapter is not a detailed step-by-step guide, nor will it teach you how to use HTML, CSS, JavaScript, or frameworks. It aims to help you understand all the options for creating HTML prototypes and their benefits. You’ll find out what’s needed to get started, and gain some guidance on how to approach creating an HTML prototype. We’ll also include some real-life prototyping case studies from some of the projects we’ve worked on at fffunction.

After reading this chapter, you should be able to make an informed decision as to what approach will suit you and your project. Read More