When coming into the world of online marketing and web design there is a fine line that must be walked. That line is working with the rendering of text. Text is an important aspect to design as well as a page’s ranking so a site simply cannot be designed for one or the other— you have to find the right balance.
The tricky part is trying to keep page content coded in the proper HTML tags (h1, p, strong) for search engine and accessibility purposes, but not to limit the designer. Different operating systems, browsers, screens, and settings can all alter the way a web page is displayed. For example some users will have different fonts on their computers leading to the site appearing differently for different users. Consequently, choosing a particular font does not guarantee that your text will actually display in this font to all of your users and back up fonts will are necessary.
You might ask, what’s the big deal if text shows up in Times New Roman instead of Monotype Corsiva? Well, it doesn’t affect your SEO, but it will effect your user experience in two primary ways. First is stylistically— the fonts you use emphasize important text, help develop your site’s branding, and play a huge role in design. The second is more function than form. A change in font can make content more or less legible and even cause layout issues stemming from variations in font spacing and sizes. A change like that can play a huge role in if a visitor stays on your site and where they navigate. These two factors alone can drastically hurt your conversion rate. This leads us to the question, what is the best way to display the fonts you want across multiple platforms and still remain search engine friendly?
While there is no perfect solution there are a few options for the designer to navigate while adapting their design to the needs of the user.
CSS
Most sites today are going to be largely designed based on some form of CSS. However, like the other options straight CSS does have a downfall. If the font you desire to use is not something that comes standard on most computers there is a large chance that the average user will not see the full potential of your site as previously mentioned. You have the ability to select your primary and alternative fonts, and even a font family that allows the closest option if your specified choices are not available.
Image Replacement
Web designers can cope with font issues by using images of the text exactly how they want it to appear instead of coded text. But like I said, none of these options are perfect. The use of image replacement limits you to the use of “alt” tags for SEO purposes. Alt tags are meant to represent the image using text, however they are considered less relevant when compared to properly coded content. There are black hat techniques such as hiding your text and primarily displaying your images, however Google does warn that “Hiding text or links in your content can cause your site to be perceived as untrustworthy since it presents information to search engines differently than to visitors.” It can be interpreted that “untrustworthy” feelings can lead to negative repercussions within your rankings— leading back to the ideal motto, do it right the first time.
FLIR
Face Lift Image Replacement, or FLIR, plays off of the concept of image replacement using PHP. Text can still be coded correctly in HTML for search engines, but be swapped out with an image for the viewer ensuring consistency across users. Sounds like we have found the best solution right? Well as FLIR is reliant on PHP’s dynamic interface the text cannot be selected, which decreases site usability. Again close, but still a considerable downside.
sIFR 2.0
Our last option is Scalable Inman Flash Replacement, or sIFR. sIFR combines Flash, Javascript, and CSS to create the text replacement. Just like when using FLIR, you still get the SEO benefits, however instead of an image your end result is a Flash file. sIFR still has some major drawbacks including the dependance of Flash (which with the development of HTML 5 may be on the way out), increased load times, and difficult to predict changes in CSS layouts.
With the development of new technologies every day we may have a solution to this problem right around the corner— but for now, when choosing a web designer make sure you are both on the same page of how you would like your site for both form and function.
The tricky part is trying to keep page content coded in the proper HTML tags (h1, p, strong) for search engine and accessibility purposes, but not to limit the designer. Different operating systems, browsers, screens, and settings can all alter the way a web page is displayed. For example some users will have different fonts on their computers leading to the site appearing differently for different users. Consequently, choosing a particular font does not guarantee that your text will actually display in this font to all of your users and back up fonts will are necessary.
You might ask, what’s the big deal if text shows up in Times New Roman instead of Monotype Corsiva? Well, it doesn’t affect your SEO, but it will effect your user experience in two primary ways. First is stylistically— the fonts you use emphasize important text, help develop your site’s branding, and play a huge role in design. The second is more function than form. A change in font can make content more or less legible and even cause layout issues stemming from variations in font spacing and sizes. A change like that can play a huge role in if a visitor stays on your site and where they navigate. These two factors alone can drastically hurt your conversion rate. This leads us to the question, what is the best way to display the fonts you want across multiple platforms and still remain search engine friendly?
While there is no perfect solution there are a few options for the designer to navigate while adapting their design to the needs of the user.
CSS
Most sites today are going to be largely designed based on some form of CSS. However, like the other options straight CSS does have a downfall. If the font you desire to use is not something that comes standard on most computers there is a large chance that the average user will not see the full potential of your site as previously mentioned. You have the ability to select your primary and alternative fonts, and even a font family that allows the closest option if your specified choices are not available.
Image Replacement
Web designers can cope with font issues by using images of the text exactly how they want it to appear instead of coded text. But like I said, none of these options are perfect. The use of image replacement limits you to the use of “alt” tags for SEO purposes. Alt tags are meant to represent the image using text, however they are considered less relevant when compared to properly coded content. There are black hat techniques such as hiding your text and primarily displaying your images, however Google does warn that “Hiding text or links in your content can cause your site to be perceived as untrustworthy since it presents information to search engines differently than to visitors.” It can be interpreted that “untrustworthy” feelings can lead to negative repercussions within your rankings— leading back to the ideal motto, do it right the first time.
FLIR
Face Lift Image Replacement, or FLIR, plays off of the concept of image replacement using PHP. Text can still be coded correctly in HTML for search engines, but be swapped out with an image for the viewer ensuring consistency across users. Sounds like we have found the best solution right? Well as FLIR is reliant on PHP’s dynamic interface the text cannot be selected, which decreases site usability. Again close, but still a considerable downside.
sIFR 2.0
Our last option is Scalable Inman Flash Replacement, or sIFR. sIFR combines Flash, Javascript, and CSS to create the text replacement. Just like when using FLIR, you still get the SEO benefits, however instead of an image your end result is a Flash file. sIFR still has some major drawbacks including the dependance of Flash (which with the development of HTML 5 may be on the way out), increased load times, and difficult to predict changes in CSS layouts.
With the development of new technologies every day we may have a solution to this problem right around the corner— but for now, when choosing a web designer make sure you are both on the same page of how you would like your site for both form and function.
0 comments:
Post a Comment