Friday Favorites: 1/8/2016

Most Interesting Article I Read This Week

File this under “I wish I’d written that…” You never learned to code? Start here. is a great overview article for beginning web designers and web developers. Don’t be intimidated by the title, it’s not just about “coding” but about building web pages and more. I love that it starts out by figuring out what language you should learn first. And it goes well beyond just HTML, so for those of you who don’t think writing HTML is programming, you’re covered.

The article is long, but worth it if you’re struggling with what language to learn or how to break into programming. Even if you just want to decide what to learn next, this is a great overview of some good choices.

Git Is My New Favorite Tool

I’m currently moving most of my projects into Git using BitBucket. It’s been really great for both collaboration with other designers abut also just keeping track of changes to everything from my latest book project to the WordPress themes I’ve been working on.

I was using a GUI to interface with Git, but I’ve found that I like the command line interface better. I’m so much faster just typing than I am with the mouse.

Quote of the Week

“Begin at once to live, and count each separate day as a separate life.”
— Seneca

What Are You Working On?

I’m working on:

  • A new book on Cool CSS
  • A video course covering HTML, CSS, JavaScript, jQuery, and Git
  • Three different WordPress themes
  • Four different websites

Do you consider yourself a designer?

When I first started working on the web, I did not consider myself a designer. I took programming classes and learned how to make web pages do things. I was less concerned with how they looked than with how they worked.

But as I got more involved in web development, I realized something.

Design matters.

This may not seem like a surprise to any designers reading this, but it was huge for me.

Do you consider yourself a designer?

View Results

Loading ... Loading ...

Are You a Designer? Why or Why Not?

Do you consider yourself a designer? A developer? A website owner? Do you think design is important in your role?

These days I do consider myself a designer. I may not be as good at it as I want to be, but I can recognize what is wrong with my designs and work on improving them. I also know how to make things look better and more aesthetically pleasing. This benefits both me and my clients.

So, yes, I am a designer. And I work every day to become a better designer.

 

Learn Design: 3 Reasons for Non-Designers

Even if you don’t think of yourself as a designer, learning how to design websites can be a valuable part of your web content creation process. And when I say learn design, I don’t mean just learning HTML and CSS. I mean you should learn design techniques and the principles of good design.

It is very common for business owners and developers to think that they don’t have the skills to design their own websites. Business owners might think they don’t have the technical know-how and developers might feel intimidated by the design aspects of the work. But it’s possible to get a handle on web design even if you don’t know the technology or don’t know design, or both!

Knowing Design Helps You Focus Your Content

learn design to focus on content
Your design should focus on your content

One of the key things about good design is that it centers on the message. A well designed book is easy to read. A well designed brochure gets the call to action right out in front of customers. And a well designed website lets the customer see the content first.

Once you know a few design techniques such as line work or flow, you will start to understand how your content can be improved (or ruined) through design. I recommend learning the basics of design even if you’re going to hire a professional web designer to do the work. That way you’ll be able to articulate what you’d like changed more effectively and you’ll understand what the designer means when she tells you the reason behind the font choice or the shading or colors.

Design Knowledge Helps You Refine the Styles You Already Like

learn design to refine your styles
A fractal is constantly being refined

If you know that you like bright colors with lots of vibrant images to go along with them, having some knowledge of the design tenets that support those choices will make your choices that much better. Without knowing design, you might just think “I like reds” and leave it at that. But after studying design, you might discover that red colors have specific meanings to certain cultures or that warm colors (like reds and oranges) convey a sense of warmth to the entire site. And once you understand the meanings behind colors, you might decide to increase that feeling on your site with similar colors or you might try to tone it down with complementary colors in the cooler side of the spectrum.

One design aesthetic that many designers learn is how many, or really how few fonts they should use on a page. A website that has been designed will typically only have one or two different font faces (font families in CSS) on the page. But many web designers start out with dozens of different font faces. As they learn more about effective design, they reduce the fonts until they have a workable amount that enhances rather than detracts from the page content.

You Will Become More Discerning by Learning Design

learn design and abandon broken things
Abandon the old and broken designs

Once you start learning how to do design well, you’ll start noticing all the places where it’s done poorly. You’ll notice signs with too many fonts, ebooks with too much white space, and websites that aren’t balanced. This might seem like a bad thing, but as you’re noticing the flaws in designs you’ll also start to notice the sites that are designed well. You’ll start admiring typography and want to learn how to add more contrast to your pages. Your images will get better as you start to recognize well designed photos alongside the web design.

But because of this improved discernment, your entire website will improve. Spacing issues that might have gone unnoticed will start to bug you. And every time an image is resized incorrectly you’ll cringe. If you’re a developer, you’ll want to learn how to fix those things yourself. And if you’re a site owner, you’ll have your list of improvements for your design team.

Do You Agree? Do You Want to Learn Design?

Do you think it will add value? Why or why not? If you don’t already know design, are you going to go out and try to learn more?

How much do you know about mobile design?

Mobile design is important because more and more people are moving from computers to mobile devices. It seems like every year heralds the announcement of the demise of computers and the increase in the use of mobile devices. And while that growth has been happening for a while, it really is starting to seem true. But even though we’ve been warned for years about the growth of mobile, many web designers are still reluctant to design for mobile simply because it’s a change, and change is hard.

In my latest project, the 7th edition of HTML, CSS & JavaScript Web Publishing in One Hour a Day, I give the book a focus on mobile design that it didn’t have before. I believe that responsive web design is an important, if not critical, design focus, and being responsive means being mobile friendly. So there is an entire new chapter focused on mobile design.

This lesson covers:

  • How browsing habits on mobile differs from desktop
  • Standards for writing mobile web pages
  • How to write for mobile and online customers
  • Designing pages and layout for mobile
  • Optimizing your content
  • Other habits you should get into for mobile web design

My Bootstrap Book is Now Available

I’m excited to announce that my Bootstrap book Sams Teach Yourself Bootstrap in 24 Hours is available in stores. You can order it online from Amazon and Barnes and Noble or buy it from your local bookstore.

It’s available as a Kindle eBook from Amazon or as a Nook eBook from Barnes and Noble. You can also get it in paperback as well as ePub, mobi, and PDF from InformIT directly.

This Bootstrap Book Makes Bootstrap Easy

Sams Teach Yourself Bootstrap in 24 Hours - my Bootstrap Book
Sams Teach Yourself Bootstrap in 24 Hours

If you’ve been considering moving to a CSS framework, Bootstrap is a good option. Bootstrap 3, which this book covers, offers a lot of useful features that customers and designers have come to expect from websites. Bootstrap makes things like grids, typography, and responsive design quick and easy. Now I find myself getting frustrated by sites that don’t use Bootstrap as I often have to reinvent the wheel just to get features that are standard in Bootstrap.

This Bootstrap book covers all the basics of Bootstrap including the CSS, components, and JavaScript libraries you can use to improve your site. You will also learn how to customize your Bootstrap website so that it doesn’t look like every other Bootstrap website out there. I even included a few example sites of some Bootstrap sites that really impressed me. You might be surprised at the sites that do use Bootstrap. There are a lot more than you might realize.

Please Consider Reviewing My Books

If you get a copy of my Bootstrap book or any of my other books, please let me know. I’d love to hear what you think. And if you have a chance, please leave a review on Amazon. If you like any of my books, the best thing you can do to help is to write a positive review on Amazon. And even if you don’t like them, I want to know, so I can improve them.

Laugh of the Day: Prime Ranking in SERP, but No Content

Getting high ranking on search engines is usually pretty hard. But if you have invented something new or have a revolutionary product or service, your website might rank well for those search terms just because you’re the only one doing it. This is a really good thing. After all, if you’re the first, it is nice to be recognized for that. But be careful, as if you’re not ready, this can end up as bad SEO, not good.

If you’re not ready for recognition, prime placement can end up backfiring.

Today, I was thinking how nice it would be if the Apple Watch or other smart watches didn’t have to be worn on your wrist. My husband joked “an Apple Pocket Watch” and I thought “what about a necklace?”

So I did a search on Bing for Apple Watch Necklace. I was surprised and excited to see a listing (after all the ads for the Apple Watch, a Samsung smart watch, and plain watches) titled “Apple Watch Pendants | The Premier Site For Apple Watch …” I didn’t read any further, I just clicked through.

At first glance, it looked pretty good. No pictures, but a nice clean template with the headline “The #1 Most Trusted Apple Watch Pendant Store.” I scrolled quickly to see if there were any pictures, and didn’ see any so I started to read:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In in risus eget lectus suscipit malesuada. Maecenas ut urna mollis, aliquam eros at, laoreet metus.

Shop Now

I thought “Number one? Yeah, because they got the domain name!” I don’t think that’s what the site owners wanted me to think. Sure, the domain name helped their search engine optimization, but having no content is just bad SEO. But since all they have put up so far is a template and some placeholder text I’m not going to stick around long enough to do anything other than laugh. Instead of being impressed by their cool idea or new concept I was reduced to tears laughing at their complete fail of a website. (See the screen shot of the entire page.)

If It’s Live—It’s Live

It’s easy to forget that if you build a web page and put it live on the Web that people other than yourself and your company may see it. But you should consider that a rule of thumb. If a page is live on the Web, anyone can see it. And if anyone can see it, search engines can see it. And if search engines can see it, they will rank it in their results. And once you’re in their results people can find you.

And if people find your page and then can only read “lorem ipsum…” they won’t be impressed. Not even if you have ebullient phrases adorning the page like “#1 most trusted” and “Holiday Sale.”

In fact, by rushing your website out the door without all the content you need, you risk alienating some customers. I don’t recognize the company Divi, but I will remember them in the future. I don’t know if I would be willing to buy a pendant holder from them. And that’s too bad. As they might actually be a really great company for this type of accessory. I’ll never know now.

Apple Watch Pendants Do Exist

There was a Kickstarter campaign that ended on September 5, 2015, to create both a pocket watch and pendant style holder for the Apple Watch. You can pre-order them from the Bucardo website and they will start shipping in January 2016. Too late for a birthday present for me for this year, but maybe next year! Of course, first I’d need to get an Apple Watch.

Security Through Obscurity is Not Secure It’s Just Bad SEO

The moral of this story is that you shouldn’t assume that a page you haven’t promoted won’t be seen. Security through obscurity is really just wishful thinking. If your content isn’t ready, then don’t put up a page.

High ranking site with placeholder text - Bad SEO
Full website – it’s not ready for prime time (click to view full size)

Adobe: What’s New and What’s Not

I had the opportunity to learn more about what Adobe is releasing this week at Adobe MAX. One of the things I like best is the new Capture CC app for iOS. I have used the older capture apps like Shape CC and Brush CC, but it’s nice to have all of them in one place.

Capture CC
Brushes, shapes, and colors all in one app

Adobe Capture CC combines four previous apps in one: Shape, Brush, Color and Hue. This makes it so much easier to create custom shapes and vector line drawings from items in your environment. You can also create custom brushes and lines to decorate your sites. Color and hue help you to grab colors and then apply them as a palette. I spent several hours just taking random shots of my desk and the plants outside my office to create some silly drawings and brushes. I even came up with a monochromatic color scheme based on the color of my desk and some ink that spilled on it.

Photoshop and Lightroom

I’ve been playing a bit with the Photoshop CC artboards. These are really interesting, but I’m not sure I understand them yet. I do like the way you can create multiple views of the same document all in the same Photoshop document. So I can create a small, medium, and large mockup of a web page and keep them all together.

I have also started using Lightroom CC to attempt to put some order to my photos. This is taking a lot of time, and I think I’ll be working on it for years, but it does make me feel better to think that I’m getting my photos categorized and thus more usable.

There are other updates to these apps, but I haven’t really used them much because I was busy playing with other new toys.

My Dreamweaver and Muse Doubts

At Adobe’s MAX keynote this week they talked about the idea of “to code or not to code.” The speaker said that Adobe doesn’t believe that there is a right or a wrong answer to this question. I must say that I am skeptical of this.

Adobe had a great coding product for web designers (do any of you even remember Homesite?), and instead of developing it they killed it. They still have and promote Dreamweaver, but it is getting older and older feeling without any significant upgrade in how it works or feels. Instead, they have added a few new, minor feature upgrades. Bootstrap templates—featuring Bootstrap 3—doesn’t impress me a lot. And if they follow with their past iterations, it will be difficult or impossible to customize Dreamweaver with Bootstrap 4 updates, even though that version is due to be released any day now.

Bootstrap 4 is coming
Bootstrap 4 is coming, Aww yeah!

But I can’t complain about Bootstrap too much, after all, my book is about version 3, and version 4 is coming, so I should cut them some slack. Then the speaker tells me, as a coder, that “[I’m] gonna love the new 64-bit version of Dreamweaver.” Um. No. Okay, yes I would like to see a 64-bit version of Dreamweaver, but I’ve been waiting since Snow Leopard came out! For those without a Macintosh, that’s 2009. Six years is a long time to wait for something that you have found on tablets since 2013 and on Macs since, as I said, 2009!

Apparently the way Dreamweaver looks is considered innovative and new, but it doesn’t look all that different to my copy of Macromedia Dreamweaver 4. Part of me then thinks, sure don’t mess with something that’s working. But I’ve had the opportunity to work with modern web editors like Coda and Pinegrow and Dreamweaver is severely lacking compared to them. Coda is far superior in how it handles databases, connecting to Git and other source control systems, you can even edit directly on the server!

Coda Creating a New Site
Panic Coda

Pinegrow offers a very easy to read and understand visual CSS and DOM viewer, responsive design features, as well as support for Bootstrap, Foundation, AngularJS and WordPress right inside their visual editor. Yes, Dreamweaver CC 2015 has Live View, but that was interesting four years ago, not now.

Edit responsively in Pinegrow
Pinegrow

The MAX keynote said that “millions of websites have been created in Adobe Muse.” But my question is this: how many tens or even hundreds of millions of websites have been created with Dreamweaver? And yet, instead of crowing about how popular it is or giving it some big useful updates, Dreamweaver gets one minute of the keynote (maybe one and a half minutes) and the big news is 64-bit, which it should have had five years ago. Instead, the web design tool Adobe wants us all to focus on is Muse.

The big news in Muse is that you can now create responsive websites in it. Okay, that’s great. Adobe would probably argue that Muse is their product that competes with Pinegrow and Dreamweaver competes with Coda. But I would argue that if that’s the case, neither does so very well. I use both Coda and Pinegrow and I like them both. And in both of them I can preview my sites and edit the HTML code. Granted, I can’t grab an object and move it around in Coda, and the code editor is a bit low-fi in Pinegrow, but they both do all the things that Muse and Dreamweaver do, and they do them better. The MAX speaker states that “never before has there been a custom free-form design tool that would allow you to output a responsive website.” Um, WRONG! I was using Macaw in January 2014. That’s almost two years ago now. I’ve been using Pinegrow for almost a year now too. So that’s two software programs that do “custom, free-form” designs to generate a responsive website. Muse was definitely not the first, and it’s not even the best. It’s just another one. Do your homework, Adobe!

Project Comet – or How Adobe Psychs Me Out… Again

One thing you’re going to hear more and more about if you follow Adobe news is Project Comet. Adobe wants to create an end-to-end project development platform, and Project Comet seems to be how they’re going to do it. The idea is that instead of having an app for wireframing, another for visual design, a third for prototyping, and a fourth for previewing, you do it all in one system or tool—Project Comet.

It is a new desktop application to let UX and UI designers create and prototype their designs in the vector design environment. Some of the cool things they demoed included:

  • She created a results screen with one result, and then collected that result

    Project Comet Visual Repeat
    Repeating the results object in Project Comet
  • You can then adjust the margins and padding for all the results by grabbing and dragging again.
  • Your prototypes don’t have to have blank spaces for images, you can drag images into shape elements and they will be non-destructively resized, cropped, and masked to fit in the shape.
  • She just dragged the images straight from Finder (Windows explorer for you MS types) into Comet and they scaled and masked and so on like magic.
  • She also the view to show her full artboard layout with hundreds of artboards, and Comet was very fast, even with all those assets.

I’m just afraid that it’s going to be like some of the previous things Adobe has demoed—they look great in the demo and then are hard to get to work with real-world scenarios. Or it will only create prototypes, and we won’t be able to design full apps or websites with it. Fingers crossed! Because Comet looks really cool! I could use it right now. But I have to wait for the public preview coming “early next year.” So, May or June? 😉 You can find out more about Comet from Adobe and even sign up to get email notifications. I have.

So even though I’m still disappointed at the lack of any substantive change or update to Dreamweaver, I am looking forward to Comet and hoping that I’ll be pleasantly surprised.

A Busy Week

I spent the last week working on two projects: the “Learning HTML and CSS Livelessons” and editing the Sams Teach Yourself Bootstrap in 24 Hours book.

It was both one of the most fun weeks I’ve ever spent and also one of the scariest (at least at first). I have never been in front of a camera before, and I spent 6-8 hours a day on Monday through Wednesday right there. Luckily Pete and his dog Shorty were there to put me at ease. It ended up being a lot of fun.

Now, of course, I have a bunch more work to both catch up from being gone for several days and some update work to get the website ready for the videos. This LiveLessons series is intended to help people learn enough HTML and CSS to get a website up and running and looking good. I’m hoping that if this project does well, I can do another on something like CSS to go into more depth on how to use CSS and style really fancy pages.

Sams Teach Yourself Bootstrap in 24 Hours
Sams Teach Yourself Bootstrap in 24 Hours

And I also got the first 50% of the technical and copy edits for the Bootstrap book. And I got the second 50% right after I got back. I’m hoping the second half is fairly error free (as far as we have found) like the first half. And as always, any errors that make it into the final book are my fault not my copy editor or tech editor (thanks Jon!)

One of the biggest challenges of writing a book about Bootstrap is that I find myself wanting to convert every site I look at to Bootstrap. I finally upgraded this site to Bootstrap just this week. And I’ve converted a couple of other sites I manage as well. But let me tell you, even as the author of the book, my clients don’t all want to do a huge redesign just because Bootstrap rocks. Oh well, their loss.

What’s Next?

My next project is finishing up a book on web publishing. That should be fun, and hopefully pretty quick. After that, who knows? If you have any ideas, let me know!


HTML5 Cheat Sheet

I built an HTML5 cheat sheet for myself, so that I could make sure that my tag libraries were up-to-date and so on. And then when I finished, I realized that this might be something you would like too.

It is a PDF file listing all the HTML5 elements, what they are and whether they are new, changed, the same as HTML 4 or gone from the specification (and what you should use instead). I hope you like it!

HTML5 Cheat Sheet PDF

Stop Optimizing and Add Content Instead

So, you’ve built your website, and focused on SEO (search engine optimization) enough to start getting some traffic to it. You’re watching your stats grow week over week and month over month. It’s exciting. Your SEO efforts are working!

But what happens when you hit a plateau? And believe me, even the best sites plateau after time. If you have been focused on SEO it can be tempting to continue optimizing your home page and other pages on your site, but that can be a mistake. And with new search rules that Google continues to add, it can be a very big mistake.

Google Over-Optimization Penalties

Google has never been a fan of SEO. In fact, I would be willing to bet that if you cornered some of the search engine experts at Google, they would admit that they consider SEO to be a form of gaming of their system. And Google has always penalized gaming. So the fact that Google has announced that they will be adding additional penalties for sites they consider to be “over-optimized” should not be a big surprise.

How Can You Tell If a Page (or Your Whole Site) is Over-Optimized?

This is a legitimate, but tough question. Google doesn’t release their algorithms for us to see (as that would make it child’s play to game). But that means that most of the following suggestions are just that—suggestions. You might be able to continue to do these things without any penalty, while another site might be apparently penalized for much less.
Here are some clues to help you determine if your page or site may be over-optimized:

  • Too much repetition of the keyword phrase
    This is the most common signal of over-optimization. If your keyword phrase occurs more than 10-15 times in your article, you might be over-optimized. One way to check this is to ask someone who doesn’t know your site to read the article and tell you what they think is the phrase you are optimizing for. If they can tell the exact phrase, with little or no prompting, you probably over-optimized.
  • Titles that are stilted and repetitive
    One strategy that was very common (in fact I’ve even recommended it) was to write your title in the format keyword phrase - something else keyword phrase e.g. “Meta Keywords – Using Meta Keywords.”
  • Multiple headlines using the keyword phrase
    While you do want your keyword phrase to be included in your main H1 headline, repeating it in every subsequent subheading can be too much and look like over-optimization. Strive to create headlines, headings, subheadings, and text that is natural sounding and only uses the keyword phrase where appropriate.
  • Including the keyword phrase in additional, less visible, locations
    This is the first place to look for keyword stuffing. If all of your image alt text, noscript elements, and other elements that don’t display on the page include some version (or worse, multiple versions) of your keyword phrase, you should change them to make them more natural.

What to Do When Your Site Plateaus or Falls in Search Results

The first inclination of most beginning and intermediate web designers when they see a plateau or drop in search referrals is to immediately go in and re-optimize pages. While there is some benefit from fixing the problems I listed above and editing content to keep it fresh and up-to-date, most of the time, your inclination to edit files is going to result in more over-optimization penalties, not less.

Instead, do what the most successful sites on the web do: write more content.

Adding new content to your website has a lot of SEO advantages:

  • Search engines see that your site is still relevant and focused on delivering content to customers. Since a search engine is useless without something to search on, by providing more content, you are providing the chance for more results.
  • More content means you will have expanded content. Once you’ve written about one aspect of a topic, you can then expand on it and write about other aspects. And after a while, if you continue to regularly add content on that topic, your site will be more and more valued as a place to find information on the topic.
  • More pages of content provides more pages to be found in search. This is simple math. If I have a 10 page site and you have a 1000 page site, you have 100 times as many chances as I do to get a page view or search referral.
  • New pages provide more linking opportunities. And every time you link to your older content, that sends a signal to Google and the other search engines that that content is still relevant as well.
  • Regularly added content tells the search engine that your site is still maintained. And if you keep to a schedule, the search robots will figure that out and start spidering your site more often.

Remember, too, that adding more content doesn’t have to be long. While longer articles might do better in Google, just adding a 2-paragraph blog post every day is enough to show that you’re paying attention to the site. In fact, it’s best to come up with a schedule that you can stick to, whether it’s once a day, once a week or once a month. More is better, but staying consistent is important too.

By regularly adding new content to your site, and doing basic maintenance on your older pages (but not worrying about re-optimizing for search on those pages) you can get better search engine placement than you can by just fiddling with the same 100 pages over and over.

Remember, write more content!