I have a bad habit of “reading with the mouse pointer” By this I mean selecting the text at the start of it and highlighting the text as I read it. I know many people have a habit of doing something similar to this. I know it looks kinda weird , but enough about that.
Today I came across a new site, and as I started reading, still doing my bad habit of highlighting the text, but instead of the text getting hihglighted I noticed I was dragging around a pretty large image. I quickly noticed what was going on, instead of writing the content of the article as text, using html and css to style it, they had used a large image (388px X 4646px in size) and put all the layout (images and text) into that image. This practice is considered a no-no in webdesign, especially for content.
Accessibility
Although most visitors can read the text without problems, people using a screen reader like JAWS or something wouldn’t be able to “see” this webpage, another concern is for visually impaired people wouldn’t be able to increase the font size as desired, I know modern web browsers now enlarge all elements of a page when you zoom, but there still is the option to only zoom text. Using a large image instead of text is also more demanding on bandwidth and would really annoy visitors sitting on slow internet connections.
Search Engine Optimization
Another important thing to consider is that search engines can’t read the text in the images, so they wont be able to index the page in the same way they would if there was lots of content there, remember that content is food for the search engine spiders, they need their feeding to be able to deliver visitors to your page. so not only is the practice of using images instead of text bad for some of your potential visitors, but also this is very bad for SEO, it’s kinda like the opposite of SEO, they got all of this yummy content, that they have but time and effort into creating, but won’t give it to the hungry spiders that comes by to index the pages. All this just because they put it into a format they can’t read.
Perfect example of how it shouldn’t be done
I started looking more closely at the page, and found several things that was out of place. The overall looks and the design of the site was ok, but I quickly noticed the width was a bit narrow, and the text for the content, or should I say image, was a bit wider than the area designed to hold the content, making it flow over to the sidebar area of the page. some elements had colors that looked weird, and some elements looked misplaced, also the sidebar items were a image utilizing image map. The list of bad practices grew fast, and this page quickly became a perfect example of how not to do web development which inspired me to write this blog post. Now I started digging a little deeper.
I’m going in!
Looking at the source code I noticed 1 css file, with only 63 lines of code, and this was not compressed in any ways, not even using short codes for any of the style definitions. So where were all the css data? Yes, inline, each element in the html file was bloated with styling, not utilizing any short-codes here either.
Looking closer at the image tags in the code I was relieved when I saw some of the elements had alt tags. Finally something SEO related I thought, until I looked closer at the content of this tags, many of the items had no context, words without meaning, at least from an SEO point of view, like “ON-ON”, not that SEO-friendly. Looking at the large image containing the content of the page I saw bits and pieces of the content text from the image as an alt-tag, it was like a short excerpt without much context.
An ironic twist
I figured the person that had designed this page wasn’t very experienced and got the task of creating this page from his employer or friend because he was over average experienced with computers. But in the footer of the page I saw the text “Website Designed & Maintained by …” Where … was the name of a design studio in India with a fancy page including a large banner about SEO, talking big words about their SEO experts and how they would like to design a website for my business.
Well that was not the impression I was left with when I came to their site following the footer link from the page I just had dissected. And I would definitely not let them do my company’s website or SEO strategy.