Why isn’t the main element in Dreamweaver CC’s Insert panel?

One of the arguments Adobe uses to convince all of us that we want to fork over a monthly subscription fee for Adobe products is that we get all the latest updates.

So why isn’t the main element among the choices in the Insert panel?

The main element represents the main content of the body of a document or application. By definition, the main element is for grouping content; it is not considered sectioning content. (Sectioning content includes elements such as article, aside, and section which are expected to have headings and possibly navs and footers. Sectioning content shows up in the document outline. The main element does not show up in the document outline.)

Where would Dreamweaver put main?

Is main a structural element in the Dreamweaver menu system? It seems to me that when you are building a page in Dreamweaver by inserting structural elements one by one, the main element should be one of your choices.

Here’s what Dreamweaver CC currently has in the Structure category of the Insert menu.

The Structure category of DW's Insert panel
The Structure category of DW’s Insert panel

There are some helpful HTML5  choices in that menu such as article, section, header, and footer. Why not main? Aren’t we paying the big bucks every month to have the latest goodies at our fingertips? All the new HTML5 elements should be available to Dreamweaver CC users.

Tips on using the main element

The main element can only be used once on a page. The ARIA role="main" is implicit where the main element is used.

Contrast Ratio: A New Color Contrast Tool

Here’s a very nice new tool for checking color contrast against WCAG 2.0 standards for accessibility. It was created by Lea Verou and is called Contrast Ratio.

The tool allows you to swap text color and background color. It permits the use of transparency in both text color and background color. If your color choices fail to meet the WCAG 2.0 standards, the ratio button in the middle of the page turns red. Hovering over the button tells you how many, if any, of the WCAG 2.0 standards your colors meet.

Hover over the middle button to see how you're doing
Hover over the middle button to see how you’re doing

Bump up the level of opacity a bit on this color scheme and it passes.

A passing color ratio
A passing color ratio

Directions on the page explain some fancy ways to change the values for text and background colors. These are fun and time saving, but the real value in the tool comes from the clear and obvious way it reports on how the colors test out against WCAG 2.0 standards.

Improve Your SEO with the WordPress SEO by Yoast Plugin

WordPress SEO by Yoast is one of the most useful WordPress plugins available. It’s been downloaded by millions of WordPress users. At the WordPress plugin review page, there are almost 1000 reviews, with a rating of 4.7 out of 5 stars. If you are like me and always check reviews before you download a plugin, you will agree that those are some impressive stats.

Improve Your SEO with the WordPress SEO by Yoast Plugin

WordPress SEO by Yoast does several things that make it so helpful.

  • It analyzes your post based on a focus keyword of your choice. It checks on your use of the focus keyword in the title, headings, and text.
  • It looks at your title and lets you write a meta description of the post that appears on sites where you might promote your post such as Google+.
  • It comes with Twitter card implementation, which means when you post to Twitter a description of the post appears in the tweet.
  • It gives your post a rating of good, okay, or bad and teaches you how to improve your score if it isn’t as good as you want.

Let’s look at how it does the things I mentioned in more detail.

WordPress SEO by Yoast Analyzes Your Post with a Focus on Your Keywords

When the plugin is installed, a panel appears directly under your post. This is where you enter focus keywords and meta descriptions as well as learn how to improve your post and create meta descriptions targeted for particular social media if desired.

Improve Your SEO with the WordPress SEO by Yoast Plugin

The snippet preview shows you how the post will look to the search engines. You enter the focus keyword and the meta description. As you enter the meta description, it tracks your characters and tells you how many are left. Save the draft of your post to see how SEO Yoast graded what you’ve done.

Your rating appears in the Publish panel.

Improve Your SEO with the WordPress SEO by Yoast Plugin

The green disc next to SEO in the publish panel indicates that I’m doing pretty well with things. Yellow indicates okay and red is bad. If you click the “Check” link next to the colored disc, you are returned to the WordPress SEO by Yoast control panel, where the second tab gives you Page Analysis. You see the same info by selecting the Page Analysis tab.

Improve Your SEO with the WordPress SEO by Yoast Plugin

By looking at the page analysis, I can see what I need to change. I changed one of my H2 headings after checking this. I appreciate getting the reading level analyzed, because I tend to write long convoluted sentences, rather like this one, that decrease readability.

Customize the Meta Description for Different Sites

If you select the Social tab in the control panel, you can customize the meta description for specific sites.

Improve Your SEO with the WordPress SEO by Yoast Plugin

Twitter Card Implementation with WordPress SEO by Yoast

Using Twitter cards makes a big difference in how your tweets display. The heading, the description, and a photo all show up on Twitter if you use a Twitter card. Here’s an example of how a tweet with a Twitter card looks:

Improve Your SEO with the WordPress SEO by Yoast Plugin

With the plugin installed, an SEO category appears in your WordPress Dashboard menu sidebar. Clicking anything in this menu takes you to the Yoast WordPress SEO dashboard, so I always make sure I’ve saved my draft before I use this menu.

Improve Your SEO with the WordPress SEO by Yoast Plugin

Select Social and then select the tab for Twitter.

Improve Your SEO with the WordPress SEO by Yoast Plugin

Select the Twitter card meta data checkbox and supply your Twitter Username. Save. Follow the link to the Twitter Card Validator, where you’ll pick a card type, grab some embed code to add to the document HEAD of your page, and apply for Twitter card approval.

A Few Final Options

The screen shots above show a number of options and settings I didn’t have the space to get into in this post. On the Advanced tab, there are options for redirects, Canonical URLs and more. Options in the sidebar SEO category will take you to the Yoast WordPress SEO dashboard where you can set up your site with Google and Bing webmaster tools, make choices about titles and meta settings, enable an XML sitemap, make choices about permalinks, internal links, breadcrumb settings, RSS feeds, import settings from other plugins, and edit your robots.txt and .htaccess files.

I’m not a heavy user of plugins, but this one provides a lot of benefits. I think you’ll find it helpful. You can download the plugin from the developer’s site at yoast.com or from the WordPress plugin directory.

GoDaddy Managed WordPress is built from the ground up for maximum performance, security and ease of use. Click here to experience the difference.

How FitBit Fascinates

Yesterday I attended a very classy luncheon with a bunch of very classy women. As the meal ended, over pistachio cookies and sorbet, two of the women started talking about their FitBit gadgets.

FitBit One and FitBit Flex.
FitBit One and FitBit Flex. Image from http://www.fitbit.com.

One woman dug her FitBit One out of her bra – yes, she carries it in her bra – and explained all that it did with great enthusiasm. The other woman wore a Flex bracelet. She confessed to being a technology dinosaur, but she was fascinated and obsessed with the data that she got from her FitBit.

They didn’t realize as they talked that they were describing how game theory has affected wearable technology. Nevertheless, that was how FitBit had hooked them both: rewards, feedback, realtime tracking, notifications, nags, acknowledgement. They were both dedicated to making those 10,000 steps per day, to getting quality sleep, to watching their calorie intake. They knew the FitBit was tracking them and they had such easy access to the information, they felt the gadgets had made them healthier people.

If the definition of creating a successful design is making a product that works, then FitBit has taken high tech and game theory and created a great product.

Google recently announced Android Wear, an operating system for smart watches. I wouldn’t be surprised to see FitBit and other technologies like it move into watches soon.

Struggles with Dreamweaver CC’s Grid Layout System

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.

Control Issues

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.

Control icons for the element selected.
Control icons for the element selected will move it up or down, hide it, move it up a row, duplicate it, or trash it.

Other controls for elements include the set zero margin.

The set zero margin control
The set zero margin control must be used so that all the list items in the nav will fit in the assigned space.

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.

Tutorial Issues

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.

Nesting Issues

Several times I had a mysteriously misplaced closing </ul> tag on the nav list.

The mysteriously misplaced closing </ul> tag
The mysteriously misplaced closing ul tag

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.

Seeing Double

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.

The control to zero the margin is there, even though it's already been applied
The control to zero the margin is there, even though it’s already been applied

Styling Issues

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.

Just Annoying

You must assign either an ID or a class to every item you put in the grid layout.

You must use an ID or class for everything you insert
You must use an ID or class for everything you insert

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.

What I Want

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.

Something Good

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.

It's easy to insert ARIA roles in code view.
Happy Thought: It’s easy to insert ARIA roles in code view.

Review: The Design Method: A Philosophy and Process for Functional Visual Communication

Affiliate link to Amazon

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.

7 Ways to Use Instagram Direct To Market Your Business

Is your marketing campaign growing rather stale? A little “ho hum?” If your social media marketing mix is becoming a little too predictable, you may need to shake things up a bit. The perfect way to add a excitement and catch your audience off-guard may be to adopt a hip new social media tool.


This is a sign that your current campaign is not working.

Don’t worry if you are currently scratching your head asking yourself, “What hip, new marketing tool have I missed?” The answer is Instagram Direct. Yes, there’s a new tool in town and it is changing the way businesses market through social media.

What is it?

Instagram Direct introduces new features to the Instagram repertoire of tools by enabling you to select who you share your photos, messages, and videos with. And, after you have sent your message to this “select” group of followers, you can actually keep tabs on who has seen it. Furthermore, said followers will be able to respond in real time–triggering conversation.

How can you put it to work for you?

Here are 7 ways for your business to put this platform to work.

1. Attract the early adopters

Let’s face it. Early adopters and the cool, young crowd don’t want to hang out in the same place as their parents. That’s why Instagram Direct is a great way appeal to this desirable demographic. It’s new and it has not yet been populated by the supposed “past their prime” audience.

2. Showcase a new product

Creating a buzz about your company’s latest offering is the best way to ensure its success. Instagram Direct’s visual format is the perfect way to foster this. By sending your best customers and most avid followers an attractive image of your newest product, you will generate interest–especially if you encourage them to share it.

3. Run a contest

Everyone loves the chance to win and Instagram Direct is a great venue for running a contest. Ask participants to take funny snapshots of themselves with your product, ask them to come up with quirky advertisements, or create a new slogan. Not only will this generate a buzz and goodwill, but it will also provide your business with some great material to showcase on your website and other social media platforms.

4. Offer loyalty rewards

We all like to feel special. And we are more likely to frequent a business that makes us feel exactly that–special. Foster loyalty among your followers by sending them exclusive coupons, discount codes, or a special in-store deal.

5. Share special content

Offering your most avid followers access to special content is another great way to make them feel valued. You can share “behind the scenes” images, funny or touching customer testimonials, employee stories, product tips, and any other exclusive content that you think will best showcase your products and services.

6. Excel at customer service

Customers feel an affinity with businesses that provide them with personalized service. Instagram Direct will better enable you to do exactly that. If a client posts a photo or complaint about one of your products, you can respond to them on a one-on-one basis. Besides handling customer concerns and queries, you can also send thank you messages to your most active followers.

7. Glean Information

By following your followers, you will be able to see, firsthand, what they are saying about your business and your products. This will offer valuable insight into what is working and what is not.

Silence those yawns. Abolish those “ho hums.” By introducing Instagram Direct to your social media marketing mix, you can step out of the doldrums and experience renewed customer enthusiasm. Now that’s something to applaud.

Does your business make use of Instagram Direct? How?

Guest Author Kimberley Laws is a freelance writer and avid blogger. She is a unrelenting social media junkie who has written a bevy of articles on social media marketing, online reputation management, and pretty much every social media platform known to man. You can follow her neurotic and OCD ramblings at The Embiggens Project and Searching for Barry Weiss.

Image courtesy of photos.com