Tips, web design book reviews, resources and observations for teaching and learning web development.
This is worth your time. It’s a talk by Monika Piotrowicz of Shopify. I like her instruction to use basic HTML whenever possible instead of putting something else in to overrule the semantics. Her explanation of ARIA is excellent.
The close captions aren’t great. They were generated automatically rather than from a transcript, but they do appear if you need them.
Hat tip to Dennis Lembree who shared this on Google+, which is where I first saw it.
On March 27 I’ll be leading an online seminar for ADA Online Learning. The topic is Introduction to ARIA.
If you’d like to join the seminar, information about the schedule, registration and more is located at the ADA Online site. It’s free and registration is easy.
The seminar will focus mainly on ARIA landmark roles and will help the people attending see how to use landmark roles in their work. It will include an explanation of how to add landmark roles to WordPress themes that don’t have them built in.
The event is sponsored by the Great Lakes ADA Center.
Getty Images announced a new embed feature that gives free, legal access to many images to bloggers for noncommercial use.
If you find an image on the Getty site, look for an embed icon(</>) from the search results or image detail page. Click that and you’ll get the HTML code to embed that image on your site.
Getty has images from news, entertainment, sports, archival and creative imagery content. This new embed tool takes the rights of its content contributors and partners into account, because images will include photographer attribution and, when clicked, will link back to gettyimages.com where the image can be licensed for commercial use.
For a look at the dark side of what this means in terms of advertising and to photographers, see Getty did what?
After building about 20 layouts, redoing a couple of sites, and starting and rejecting an uncounted number of Dreamweaver CC grid system attempts, I’m here to describe some of my issues with this tool.
Elements inserted into the fluid grid have controls that appear when the element is selected. In the image below, the div “main” is selected. (Dreamweaver CC does not have a “main” element in the Insert panel yet.) A few controls are shown that can affect the element selected.
Other controls for elements include the set zero margin.
The controls are lovely – when they appear. Sometimes they just disappear. I had to toss out layouts or parts of layouts and go back to step 1 a number of times because the controls just were not there!
The controls are touchy. Just putting the cursor near the duplicate control – without even clicking on the icon – can duplicate something.
One of the biggest problems I had with using the grid layout system was that the tutorials and videos on the Adobe site are often not applicable to the latest versions of CC. For example, the online tutorials from Adobe suggest that a nav element inserted in the smart phone sized grid will automatically adjust itself to a touch screen type drop down menu instead of a horizontal list display. This does not happen.
Several times I had a mysteriously misplaced closing </ul> tag on the nav list.
Maybe this was my own fault for inserting the list items incorrectly, but I was very careful about getting my cursor positioned in the right place before inserting anything. You have to be very careful because placing the cursor in the right spot is extremely difficult. It’s hard to move out of an inserted item and stay within the container grid. In spite of all my careful checking to be sure I was inserting things where I wanted them, I still ended up with closing </ul> tags in places where they didn’t belong.
I also had problems with the closing </nav> tag being in the wrong place.
Now, the way I think the controls are supposed to work is that you apply them and they change to indicate what you’ve done. If you move something up a row, the control changes to move it down a row. If you apply a zero margin, the option to apply it should go away. (A control to remove the zero margin choice does not appear, by the way.)
In the image below, you can see that Dreamweaver suggests that I can apply the zero margin rule to a list item that clearly already has the class applied.
One of the tutorials I watched suggested keeping the styles and media queries created for the layout in a separate stylesheet from the CSS you write to give your layout a particular appearance, color scheme, fonts, etc. I followed that advice, but found a few strange issues.
I found that doing something like inserting a 1 pixel border on an element can throw off the whole grid and destroy the layout.
You must assign either an ID or a class to every item you put in the grid layout.
Even if you know that you only want one header or footer or nav on your page, you still cannot insert one into the grid layout system without giving it either an ID or a class assignment.
I wish Adobe would do something to make the grid layout system easier to use. Expanding the outline of the container grid to make locating the cursor less exacting would be a help. The disappearing control icons seems to be a bug – I hope Adobe is working on it.
The control operation should require more of a click – a definite click – instead of being triggered by a roll over or some other accidental touch that generates an action.
It would be nice if videos and tutorials were more in your face about which version of Dreamweaver’s grid system the tutorial describes. It’s hard to know what to do when a video tells you something is going to happen and it just plain doesn’t happen.
If there is an Adobe person reading this who can tell me where to find answers to these issues, which tutorial is up to date, or anything else useful about using Dreamweaver CC’s layout grids – help a teacher out, please. Otherwise, when I teach this, my students are going to get an earful about how buggy it is instead of how wonderful it is.
Here’s one good thing. It’s really easy to type in ARIA roles as you add layout elements to a page. It has nothing to do with the grid layouts, but I wanted to end on a positive note.
The Design Method: A Philosophy and Process for Functional Visual Communication (Voices That Matter) by Eric Karjaluoto is from New Riders (2013). This book changed my impression of myself as a web designer.
Prior to reading this book, I would have told you I wasn’t a designer. My designs were super simple, even plain. There were no cute little graphics all over the place, no lush backgrounds or images, no clever metaphors. If you’re reading this on my blog, you’re looking at what I think is a good design right now. Plain, white background with black text, clear in purpose and easy to read and navigate.
Turns out that Eric Karjalouto considers my choices to be design choices. He says design isn’t about how decorated or beautiful something is, but instead is about how something does what it is meant to do. In terms of a web design, that means communicate.
It takes Karjaluoto about 10 seconds to debunk the myth that design is about visual beauty and a number of other commonly held beliefs about design. He says it’s about making things. He calls it a problem solving process that helps facilitate desired outcomes.
The book describes his problem solving process and is a practical outline of the step by step work needed to discover what outcome a design is meant to produce and then discover a way to make that happen. In that sense, his design method gives you a map that will help you create a design process that works and help you run a successful design business. There are checklists, systems thinking and steps, and details about everything from using his design method for discovery, planning, creating, and applying ideas. He also helps with ideas on how to present designs to clients.
The book would be particularly helpful to designers who are struggling to build a business that makes money. It gives steps, processes, client interview techniques, testing techniques, and all kinds of ideas that a firm can use to build designs that work, and therefore a company that works.
A review by Virginia DeBolt of The Design Method (rating: 5 stars)
Summary: Practical not precious. Advice for getting things done.
Disclosure: I received a free copy of this book from the publisher for this review. Opinions are my own. Links to Amazon are affiliate links. Here is my review policy.
What exactly is UTF-8? I’m always telling students to choose it as the character encoding for their HTML documents. It turns out that representing symbols, characters and letters that are used worldwide is not easy, but UTF-8 managed it. Tom Scott explains how the web has settled on a standard. @tomscott
