Tips, web design book reviews, resources and observations for teaching and learning web development.
Myths about Low Vision: Nose to the Page is an important post from Knowbility.
The Difference Between Web Site Usability and Accessibility. Succinct and useful.
Adaptive & Mobile Design with CSS3 Media Queries. Nice demo and downloadable example files. Speaking of media queries, here’s a very good tutorial by Steven Bradley: How to Use Media Queries for Device Targeting.
Great explanation of Document Outlines at HTML5 Doctor. Perfect resource link if you’re teaching an HTML5 class.
Google is listening to the feedback on Google+.
Google isn’t the only company listening to what users want. Sarah Kimmel is on her way to Austin to talk with Dell. If there’s something you want Dell to know, get word to Sarah.
It’s easy peasy to create a table in Dreamweaver. It’s not so easy to create a table in Dreamweaver that sticks to the ideal of separation of content from presentation and uses CSS rather than HTML to determine presentation.
If you want to build a table for your web page that does use best practice rules and will be responsive to every potential situation, there are a lot of things in Dreamweaver that you should not do. I’m going to show you what not to do, explain why, and give you a best practice alternative.
Do not put anything in the table width, border thickness, cell padding, or cell spacing boxes. Do select the appropriate heading type for your table, and do enter a caption and summary if needed.
I added an X to the boxes that you should leave empty. Table width, border thickness, cell padding, and cell spacing options are all used to add HTML presentation to the table. You want to keep the width, border, and padding presentation rules in the CSS. It’s best to use percentage widths for the various table rules rather than pixels. (See Adding borders to data tables with CSS for information about adding border with CSS.)
When you create a table the way I just described, you see something like this in your Dreamweaver document.
Insert the cursor in the first table cell so you can enter text and Tab your way into the next table cell. As you enter text, the table expands to fit the text you’ve entered. Padding for the td cells and other width and spacing rules to make the table more attractive go in the CSS.
It’s possible to drag the borders of the table around in the document window. This is another thing you should not do. As you can see in the image below, when you drag the table borders to resize it, absolute pixel values appear and are written into the HTML. In your stylesheet, use the width property for selectors like table, th, and td to set widths in percentages or ems for your table.
While you’re entering data in the table, you see table properties in the Properties panel. This is another set of options that you should not touch.
Do not enter pixel values in the width or height boxes. Do not select a background color for the table or for individual table cells. I’ve put an X in the forbidden fields in the image above. All of these options add HTML presentation to the table. You want to set these presentation values in the CSS. The image above shows the Properties panel with the HTML toggle selected. When the CSS toggle is selected, entering values into the width and height boxes also results in values coded into the HTML, not added to the style sheet as you might expect when the CSS toggle is active.
That’s it. Most of what Dreamweaver offers as table controls need to be left alone, and the majority of your work needs to happen in the stylesheet, not in the Document window. You can create a table that will work for all your users on just about any device if you learn what not to touch.
Don’t think I’ve linked to Web Standards Sherpa before – how remiss of me. But here’s a good post to remedy that oversight. Designing for Content: Creating a Message Hierarchy.
HTML5 Accessibility Chops: ARIA landmark support from the Paciello Group Blog show test results for landmark roles.
Are You Going To Adopt Google+ for Professional Learning/Networking? Why or Why Not? Beth is one of many reflecting on Google+, as I did here the other day, and on Twitter.
I’m edging close to 500 posts on BlogHer, and none have had traffic like http://bit.ly/iTQgy1. Which means Google+ will rule the world.
Virginia DeBolt
vdebolt
Back when I lived in Austin, the live music capital of the world, I was doing some freelance web design. I made a number of sites for musicians. Among them was Mady Kaye, a jazz vocalist.
Mady has a solo career with 3 CDs under her own name. She’s part of a group called The Austin Carolers who wander Austin like minstrels during the Christmas holidays and sing carols. Mady is part of a trio called The Beat Divas, three fantastic singers who love to sing jazz and pop tunes, write original music, and cook.
Several months ago I told Mady I wanted to stop doing the maintenance on her web site, and asked her if she’d be willing to take over doing it herself if I switched her into a blog platform and taught her how to use WordPress. She said yes, and after a few tutoring sessions, she was running the blog like a pro.
One of the things The Beat Divas have been doing for years is teaching cooking classes at Austin’s Central Market cooking school. But they don’t just teach, they sing while they cook. They write their own songs about food and cooking. The Divas have 2 CDs, one of which is called “Dishin’ with the Divas: Songs of Food, Love & Mayhem.” Here’s one of the songs:
Here’s their first video, several years old and a clear demonstration of how much fun they have cooking and singing.
As you can see, the jazz and the food are whisked together a bit.
Since taking over the site herself, Mady and her various musical endeavors have really shown a burst of creativity. She’s always been creative, don’t misunderstand. But the Internet, social media, Facebook, YouTube, and a blog are types of creativity she’s never explored before. She used to say to me, “I’m a musician, I don’t want to know all that web stuff.” She learned, and she learned magnificently.
Give a woman a blog and just stand back and watch what happens, is what I say. She sings, she cooks, she blogs. It’s inspiring.
Hell, they are even selling Beat Divas aprons now.
Google+ has been more popular as a topic of discussion this week than cute cat tricks. And that’s saying a lot. Most people are writing enthusiastic blog posts about how much they like Google+. See Bloggers React to Google Plus. A few folks are trying to point out the good and the bad.
And, of course, there has been a lot of talk about what this means to Facebook: Facebook Announces Video Calling, Why Mark Zuckerberg’s First Public Response to Google+ is the Right One, and many more.
I’m drawn to the parts of the story that are getting less attention right now. EXCLUSIVE: Google To Retire Blogger & Picasa Brands in Google+ Push being one. Blogger will be rebranded Google Blogs and Picasa will be rebranded Google Photos, according to Mashable. This brings Google’s blogging and the photo sharing services under Google+ social media control.
Mashable also reports that Google To Retire Private Google+ Profiles On July 31. Or as The Register puts it, Google: Go public on Profiles or we’ll delete you.
This prompted Shelley Powers to tweet:
This is so unsurprising of Google http://t.co/prG1Ogc – make your profiles public or they’ll get deleted. And why expose a person’s gender?
Shelley Powers
shelleypowers
The initial reaction of many bloggers was that they like Google+ Circles because it allowed more privacy choices than Facebook. But having your Google profile made public whether you want it that way or not isn’t in keeping with that early reaction. Granted, most people have a public profile already, but some do not.
Shelley’s comment about gender was interesting too. We had a bit of back and forth about that on Twitter. @epersonae joined in to say that “other” was an option on gender in a Google Profile.
@shelleypowers @vdebolt @Oakwright went & checked; yes, “other” is an option. (wish it were free-form box like on @mefi!)
Elaine Nelson
epersonae
The gender issue may not interest you, but I’ve been thinking about it for a while: Have you thought about the gender choices on web forms? The mere fact that all-powerful Google includes ‘other’ as a gender option could have far-reaching implications in the world outside Google.
Developers are busy responding to Google+ with browser add-ons. Google has changed the Google bar. Google+ apps may proliferate the way Twitter apps have.
The point I’m trying to make is that something as significant as Google+ carries with it many ripple effects. Right now, people just want to get an invitation so they can try it out. But what will it mean in 6 months or a year? That’s what I’m wondering.
Google Web Fonts, V2. Now out. I tried out one the of fantasy fonts called Swanky on vdebolt.com.
Scientific American has 60 new blogs under its umbrella.
28 Creative Ways Teachers are Using Twitter. Some of them are indeed creative.
Hat tip to Spydergrrl for finding this climate change rap.