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)

Not all design testing tools are created equal

I’ve noticed lately a proliferation of websites like Responsive Design Testing Tool which claim to offer a way to test your responsive web designs in different browser or device widths. I happily began testing some of the pages I design and noticed that they didn’t look right—the designs weren’t responding to the width. After checking my CSS @media queries for errors I had an idea. Check the page on my iPhone.

A bad way to test responsive designs
Do you notice anything interesting about these four renderings?

If you go to the Responsive Design Testing Tool and put in a web page you know is responsive, you might notice something like what I saw in the screen shot above. What you’re seeing is the About.com home page rendered in four iframes at the four listed dimensions. If you look closely, you’ll notice that all four images in the frames are exactly the same size. This is because while the iframes loading the page are set to the width and height of the devices, the pages are rendering based on the browser window itself, not the iframe widths.

When I viewed the page on my iPhone the responsive features kicked in as they were supposed to and I saw the page as it was supposed to look.

Testing on the Device Gives Better Results
Here’s what the page looks like on a real iPhone

As you can see, on a real iPhone the About.com logo is smaller and on the black background. The navigation has been reduced down to the navigation icon example icon. The headline and image are both fully visible. And there is no horizontal scrolling required. In other words, About.com modified the layout responsively based on the viewport of the iPhone.

Be Wary of Online Emulators

There are a number of sites like the Responsive Design Testing Tool that claim to be RWD testing tools, but in reality they are just iframe page loaders. And because most pages take their cue from the device window rather than a width set on an HTML element like an iframe, they just show the page as it would look on the browser it’s in.

I decided for the hell of it to see how About.com’s page would render in the iframes of the Responsive Testing Tool on my iPhone. Below is the result:

How it renders on an iPhone
The Responsive Design Testing Tool on an iPhone

The immediate red flag for me when viewing this site on my iPhone was that the testing tool page itself made no effort to be responsive. You could argue that that’s because it really needs to be viewed on a desktop browser, but it was very difficult to scroll horizontally to see any of the iframes other than the 240×320 (small phone) frame. Other things I noticed were that the URL field did not use the URL input field, which made it slightly tougher to type in on my iPhone and it cut off the iframe completely on the right as you can see in the screen shot on the left.

All in all I wouldn’t trust this tool to do any testing on my websites. I’d be better off doing only testing on my browser and not worrying about mobile devices.

What Can You Use?

While online emulators might not be the best solution for testing responsive websites, you can use them to test non-responsive sites to see how your pages might render on a smaller screen device.

Another option you have for testing is to use an emulator. You can get an iPhone emulator from Apple and an Android emulator from Android.

Want to Learn more about Responsive Web Design?

Sams Teach Yourself Responsive Web Design with HTML5 and CSS3 in 24 Hours
Available Oct 2014

I am writing a book on responsive web design Responsive Web Design with HTML5 and CSS3 in 24 Hours, Sams Teach Yourself. It is available now for pre-order on Amazon and other places where books are sold.

I’m loving SVG

One of the great things about HTML5 is that there is a proposal in the W3C  to allow HTML5 and XHTML to include SVG inline in the documents. But what’s especially great is that if you’re using a modern browser (IE 9+, Firefox, Safari, Chrome, or Opera) you can embed SVG graphics in your HTML5 documents quickly and painlessly.

I am loving SVG because I don’t have to learn anything new. I can simply create vector graphics in Adobe Illustrator and then embed the SVG code into my HTML like I would any other image or embedded element. I don’t even have to use any special tags to call it out, I just paste everything from the starting <svg> tag to the closing </svg> tag.

Here’s an example. Note, I have added a <switch> tag to call a fallback image if your browser doesn’t support inline SVG. This might result in you seeing the image twice, but I hope not. 🙂 If, when you right-click on this graph, you see a PNG image, then you’re seeing the fallback image.

If you look at the HTML for that image, you’ll see a lot of <g> and <path fill="#FED7B8" d="M149.878,150.489l52.584,112.768c-62.28,29.041-136.311,2.097-165.353-60.184 c-14.521-31.14-15.905-62.854-4.154-95.141L149.878,150.489z"/> and other stuff that might look like gobbledygook, but it’s all SVG, and I didn’t have to come up with any of it. My program, Illustrator, did all the heavy lifting.

The ability to add smooth, crisp vector images to my HTML pages is a huge benefit to using HTML5. I hope that we see more of this type of graphics in the future.

What is ugly HTML?

Yesterday, someone asked me the question:

“What is ugly HTML?”

And I realized that this isn’t necessarily an obvious thing. HTML is often ugly simply because of how it looks, this mostly centers around readability for me:

  • All one line and/or minified
    This is very popular with minimalists and people who are very concerned with the speed of their pages. Minifying the code is a technique to remove all extraneous spaces, new lines, and characters to keep the HTML as small and streamlined as possible. Yes, this does speed up the pages, and I even recommend that you do it, but I really hate looking at it. It’s ugly.
  • Too little formatting (and too much)
    By formatting, I mean the tabs and new lines that make the HTML easier to read. This is similar to the first item in this list, but I think we should take this further and include too much formatting as well. I have seen pages where there are two or three nested tables, and every single table row and column is indented from the container. This can get insanely hard to read after a while. e.g.

<table>
  <tr>
    <td>
      <table>
        <tr>
          <td>
            <table>
              <tr>
                <td>
                  …

  • All caps HTML
    Yes, this is valid in HTML5 (and HTML 4), but it’s ugly and hard to read. I think some people do it so that they can see the tags more quickly, but although you can see the tags, it’s hard to differentiate them at times. I recommend avoiding all caps for headlines because they are hard to read, and the same goes for HTML tags. If you need to edit the HTML later, it can be that much harder to find the problem if they are all in capital letters. 
  • Invalid HTML
    This is the ugliest HTML of all because it can make a page show up incorrectly at the most inopportune times. It’s not a difficult thing to validate your HTML (I like the W3C validator, myself) and this can save you so much time in the future. 

Then there is the ugly HTML because it’s using old-fashioned methods:

  • Too many DIVs
    It’s like when people learned CSS for layout they only learned to put the CSS on one tag — the DIV element. So every block of text, every image, everything on the page is surrounded by one or more DIVs. Yes, this is technically correct. Yes, it works. But man, it’s ugly. It provides no extra information about the content beyond that it’s a block that might have some styles applied to it. I particularly hate when they add the styles to a DIV that is surrounding another, perfectly functional block-level element like a UL element. Why not style the UL? Save yourself a few characters!
  • I hate it when people add spaces using&nbsp;
    Just like the above, it works, and it makes the page look like you want, but really, that’s what CSS is for. There is this wonderful property: margin, that you can use to set the margins around any element — and rather than relying on the space set by a paragraph tag, you can define it to exactly the size you want.
  • I hate it even more when people use tons of <BR> elements in a row

    Yes, it shoves things down, but just like the above item, the margin property works better and takes up less download time.

  • Hiding content in strange places
    One site I visited once used the title attribute as a way to hide content. When you moused over certain sections of the page, the title content would show up. But the browser I was using showed the title content in a little yellow box as well, often covering the very content that the designer was trying to place. Use JavaScript and place the content in the page. HTML5 even offers a hidden attribute that you can toggle on and off if you want the content to appear and disappear.

What do you think makes ugly HTML? Or does the HTML not matter as long as the page looks good?

Drag and Drop upload–the final step

Many tutorials on drag and drop with HTML5 do everything but e actual upload step. This is because that step requires server interaction and scripting–you can’t just use JavaScript. But the HTML5 Doctors have a way to use XHR2 (xmlHttpRequest) to get the upload done too! Drag and Drop and Automatically Send to Server

Do you want to solve an HTML5 puzzle?

HTML5 Drag and Drop PuzzleI’ve been working on HTML5 drag and drop this week, and I’ve created a simple puzzle that you can play with in any HTML5 browser:
HTML5 Drag and Drop Puzzle

Yes, it’s a pretty easy puzzle, but I do like this photo of my dogs. And it shows you how you can implement HTML5 drag and drop. The full instructions will be in Hour 16 of the book

The start of a simple online HTML editor with HTML5

I’ve been playing with contenteditable all day today, and let me tell you it’s been fun.

I now have the workings of a simple HTML editor using contenteditable. Just type in your text in the left side, format it with the buttons and see the HTML on the right.

This editor is still in progress, but I was pleased by how its coming along, so I thought I’d share it with you.

If you’re wondering, this editor will be included in Hour 14 of the book.