Creating Modern, Responsive Websites With Web Standards

Website Standards and Clean Code

It isn’t that difficult to create a modern website based on current web standards. If your website was built using the latest technology, your site will be super-fast, modern, clean and responsive.

Everyone wants their website to cost less, work better, and reach more people in today’s browsers, screen readers, and wireless devices. The inescapable technological advancements that are happening as we speak are breaking websites all over the internet. A modern website built using the latest coding practices ensures that your website will function properly across all devices and help individuals with disabilities who are using special devices to access and interact with the internet – and stand the test of time.

You don’t have to spend money on trendy, short-sighted, proprietary solutions that will end in disaster. No one can afford to piecemeal a website that will ultimately break sooner than later.

Coding several different stylesheets might have seemed like a great idea at the time, but it is not a rational solution to problems that are continuing to plague site owners and builders.

FORWARD COMPATIBILITY

WaSP (www.webstandards.org) advocates standards that reduce the cost and complexity of site creation and ensure simple, affordable access for all. Today, every browser supports web standards as a matter of course. They work with the designers of development tools such as Dreamweaver. You can find a myriad of web standards educational tools and this information can be found in most languages today.

Apple’s latest WebKit based Safari browser, which powers the iPhone’s web browser, Mozilla powered Firefox, Opera, the WebKit based Google Chrome, and Microsoft Internet Explorer 7+ understand and correctly support XHTML, CSS3, JavaScript, and the DOM.
*Internet Explorer 6 does not support many of the latest web standards, and we can only hope that everyone has moved passed this version of IE. Developers know that we can fix IE6 to some degree, but there comes a time when you have to move forward and not look back. We’ve stopped overkill fixes because newer phones are equipped with the latest browsers and it just doesn’t warrant the extra time and expense anymore to work out ALL the fixes needed for IE6 to view properly.

WHAT IS WEB STANDARDS COMPLIANT?

javascript

JavaScript creates action.  JavaScript is the bomb. This language has given us the ability to create action!
In a perfect world, browsers perfect their support for every single standard. Considering that most software doesn’t come out bug-free, and standards are sophisticated and complex, cross-browser support is actually pretty solid enough that we do develop using the latest standards. HTML5, more accessibility, CSS3, structured markup and deeper DOM and JavaScript function calls are becoming the progressive-enhancement that is pushing the internet into the future. All the big companies such as Apple, MSN, Wikipedia, and WordPress have embraced web standards. Of course, they don’t always achieve perfect validation or pure semantic markup, but a trained developer can make these markup fixes very quickly, and let’s face it, modern browsers are lenient.

STANDARDS ARE THE TOOLS WITH WHICH ALL OF US CAN DESIGN AND BUILD SOPHISTICATED, BEAUTIFUL SITES THAT WILL WORK TODAY AND TOMORROW.

OLD BROWSERS ARE INCOMPETENT, INCOMPLETE, AND HAZARDOUS TO THE HEALTH OF THE WEB.

GARBAGE IN, GARBAGE OUT.

More than 90% of all websites are obsolete. They might look good on desktop browsers, but outside of that, the symptoms of decay are starting to appear. Carefully constructed layouts have begun to fall apart, and expensively engineered behaviors have stopped working. As browsers evolve, site performance continues to deteriorate.

Modern browsers are not merely newer versions of the same old thing. They differ fundamentally from their predecessors, and in many cases, they’ve been rebuilt from the ground up. They have a new job: to comply as well as possible with the web standards. As the newer browsers comply with web standards, they are becoming increasingly intolerant of broken code and markup.

THE KNOWLEDGE OF WEB STANDARDS IS A NECESSITY FOR ANYONE WHO DESIGNS OR PRODUCES WEBSITES

BEST WEBSITE NOW ENSURES THAT SITES DESIGNED TODAY WILL CONTINUE TO WORK IN TOMORROW’S BROWSERS AND DEVICES – INCLUDING DEVICES NOT EVEN BUILT OR IMAGINED YET

We believe in “write once, publish everywhere”. It isn’t wishful thinking. We are proud of the fact that our mission statement is “Because it matters”. Our mission follows some basic rules:

Control layout, placement, and typography in desktop browsers while allowing users to modify the presentation to suit their needs.
Develop and support sophisticated behaviors that work across multiple browsers and platforms.
Comply with accessibility laws and guidelines without sacrificing beauty, performance, or sophistication.
Redesign quickly – reducing costs and eliminating unnecessary work.
Support emerging devices from wireless gadgets and smart phones to Braille output devices and screen readers used by those with disabilities with one website.
Offer sophisticated printed versions of any web page.
Stay educated and ahead of the curve to always use real semantic markup.

PAGE RANKING AND SEO

iStock_000022200278Large

SEO and Analytics go hand-in-hand.  Believe it or not, companies do not have to spend a lot of money for SEO or Analytics. Well thought out SEO makes your website findable. Content is king. Focus on lean, keyword-rich, buzzword-free content that’s relevant to your customers, and use semantic markup. Copy, CSS layout and HTML5’s latest coding practices are the golden keys to findability.

COMPANIES THAT KNOW THE SIMPLICITY OF GREAT SEO ARE PROSPERING. THOSE THAT DON’T ARE FALLING BEHIND.

ACCESSIBILITY – THE HEART OF WEB STANDARDS…

Accessibility makes sure your content can be read and your site can be used by everyone, no matter what device they browse with, and regardless of physical ability. Innovation is the soul of accessibility. Accessibility is legal standard for judging and enforcing the accessibility of sites. This is great news because the world is being pushed into one single standard.

If you use standards-based designing principles, you not only make your content easy for search engines to find, it will also enable visually disabled people who use screen readers to navigate your websites content.

Screen reader users navigate web pages by tabbing from h2 to h2 and from section to section, just like sighted users navigate by visually scanning. When structuring your site semantically, pay particular attention to forms and tables. Provide keyboard access for those who are unable to use a mouse. Keyboards and assistive devices are the gateway to online user experience.

WELCOME MILLIONS OF VISITORS TO YOUR SITE WHO ARE LOCKED OUT – YES – THERE ARE MILLIONS OF DISABLED PEOPLE IN THE WORLD WHO HAVE ACCESS TO THE INTERNET

iStock_000020458543XSmall
Google web crawlers look for relevancy of content when a user types in an inquiry.
Think of web crawlers as blind users – Google is the biggest blind user on the web. Dish out appropriate content, well written and well structured, and you not only serve the blind folks in your audience, you also attract millions of sighted ones.

It wouldn’t be smart to exclude disabled Americans. This demographic would take up a city the size of Los Angeles or New York City. Millions!

If you think blind people don’t buy products online is missing the point and the boat. Don’t be blind yourself to the true nature of the audience you reject – you are still reaching the non-disabled populace this way by conforming to access guidelines and many others who would have ordered your products over the phone if only your site let them.

Section 508

Section 508 requires all websites under its jurisdiction to provide “equal or equivalent access to everyone” to accommodate the visually impaired, the hearing impaired, the physically disabled, and people who have photosensitive epilepsy and it spells out what accessibility really means. This law covers computers, fax machines, copiers, telephones, transaction machines, and kiosks, as well as other equipment used for transmitting, receiving, or storing information. It also covers many websites. Section 508 became U.S. law in 2001 and applies to the following:

  • Federal departments and agencies (including the U.S. Postal Service)
  • Deliverables from contractors who serve them
  • Activities sponsored or funded by the Federal government
  • Activities sponsored by states that have adopted the regulations
  • This is just skimming the surface and you can find plenty of resources to explain what the exact standards are and how to apply them along with specific things to do to make your site 508 compliant.

The bottom line is that if you design with web standards and follow the guidelines, your site should be accessible to screen readers, Lynx, mobile devices, and old browsers as it is to modern, compliant browsers. Standards and accessibility converge in agreeing that one web document should serve all readers and users. Even Flash and PDF’s can now be made accessible.

MYTH: ACCESSIBILITY IS EXPENSIVE

Most tasks to bring a website to its best take minutes to accomplish. Simple tasks like adding a label to your web form or writing a table summary. Type a brief alt text for each image – which is a no-brainer. High level conformance is going to obviously fall under another category and will cost more. If you want to author closed captions for web videos or to caption live streaming media news feeds in real time see Joe Clark’s “Best Practices in Online Captioning” . (www.joeclark.org/access/captioning/bpoc)

I highly recommend the following cited book for anyone who builds things for the internet. Web Standards is such an exciting concept that ties us all together. Where we go from here who knows, but right now we are accomplishing a great thing using Web Standards, and this book is a must have.

You can find the latest Standards and beta versions of some brilliant new concepts existing on the W3C website. Their HTML5 Validator is a great place to find semantic errors within your page. Go to http://validator.W3.org/ for the latest information.

Jeffrey Zeldman with Ethan Marcotte (2010). Designing with Web Standards, Third Edition. Berkeley, CA. New Riders.

Advertisements

About XML Sitemaps

SITEMAPS – Google Webmaster Tools

Sitemaps are an easy way for webmasters to inform search engines about pages on their sites that are available for crawling which might have not otherwise been discovered.The Google video extension of the Sitemap protocol enables you to give Google descriptive information – such as a video’s description and duration, etc. – that makes it easier for users to find a particular piece of content.  This is an excellent way to make sure Google knows about all the video content on your site, especially content that we might not otherwise discover via our usual crawling mechanisms.

An XML Sitemap is a list of pages (URL’s) on your website which Google will recognize in its normal crawling process.    Sitemaps can also provide Google with metadata about specific types of content on your site like when it was last updated, how often it changes, and how important it is relative to other URLs in the site.  Information about video, images, mobile, News and licenses can be embedded in the code.  According to Google, they don’t guarantee that all of your URL’s will get crawled, but they can use the data in your Sitemap to learn about your site’s structure, which allows for a better crawl in the future.

Sitemaps are helpful if:
1.  Your site has dynamic content
2.  Your site has pages that aren’t easily discovered by Googlebot during the crawl process – for example, pages featuring rich AJAX or images.
3.  Your site is new and has few links to it.  (Googlebot crawls the web by following links from one page to another, so if your site isn’t well linked, it may be hard for Google to discover it.)
4.  Your site has a large archive of content pages that are not well linked to each other, or are not linked at all.

One of the best ways to improve your site’s appearance in video search results is to make sure Google knows about all your rich video content.  When you submit a Sitemap to Google that includes video information in a supported format, they make the video URL searchable on Google Video.  When a user finds your video through Google, they will be linked to your website for the full playback.  Search results will contain a thumbnail image (provided by you or auto-generated by Google) of your video content as well as information like Title contained inthe Sitemap.  In addition, your video may also appear in other Google search products.

You can create a separate Sitemap listing your video content, or you can add information about your video content to your existing Sitemap.

Google adheres to Sitemap Protocol as defined by sitemaps.org.  Sitemaps created for Google using the latest Protocol are compatible with other search engines that adopt the standards of sitemaps.org.

The Sitemap must contain a minimum information for each video:  title, description, playpage URL, thumbnail(URL and the raw video URL or URL to Flash video player).

You can also submit your RSS, mRSS, and Atom 1.0 feeds as a Sitemap.

Submit your new Sitemap file to Google.  You can submit up to 500 Sitemap index files for each site in your account.

It is recommended that you place the xml folder in the root directory of your web server so it would look like http://example.com/sitemap.xml.  When you specify your site location as http://www.yoursite.com, your URL list should not contain it.

Once you have created the Sitemap file and placed it on your web server, you need to inform the search engines that support this protocol of its location.

On the Google Webmaster Tools home page, click the site you want.  Under Site Configuration, click Sitemaps.  Click Submit a Sitemap.  In the text box, complete the path to your Sitemap.  Click Submit Sitemap.

The search engine can then retrieve your Sitemap and make the URLs available to their crawlers.

Submitting your site directly to a search engine like Google is cool because you receive status information and any processing errors.

For more information about Sitemaps, visit Google Webmaster Tools.

5 Questions to Ask Your SEO Provider

WHAT IS SEO?

Here are 5 questions to ask your SEO provider to help you get what you are paying for.  If you have a website and include your email or phone number anywhere within the site, you will receive emails and phone calls from any number of companies offering this service.  It is big business right now.  Many of them are scams.  They make it sound very intriguing and like most scammers, promise you the world.

First, let’s get some of the terminology that SEO companies are using:

COMPETITIVE ANALYSIS  – look at your competitors and where you rank on searches.
KEYWORD RESEARCH – what power words reference your business or service?
UNIQUE TITLES, DESCRIPTION, AND KEYWORD TAGS  – browsers look at titles of pages, articles, etc., description and meta tags and should have been built into the site from the beginning.
MANAGE KEYWORD DENSITY – measures the number of times a keyword or phrase appears within a page against the total number of words on that page and needs to be related to the products or services.
KEYWORD PROMINENCE – indicates how many significant keywords are used in titles, meta tags, or anywhere near the top of the page and should have been built into the site from the beginning.
KEYWORD FREQUENCY – measures the number of times a keyword or phrase appears within a web page but DENSITY matters because it also measures frequency but also as it appears within the other content on the page.
LINKING – usually links that are internal to your site like anchor tags and should have been built into the site from the beginning.  Also includes submitting your site to the browsers and perhaps some directories.

These are great terms and certainly need to be understood if you have a website.  If you built your own website, you should consider using a service or any number of optimizers that are out there.  If a professional built your site, they should already be aware of how content, meta tags, conscientious linking and keywords work, and also know that your site’s code should be validated and submitted to the browsers – then you will be truly optimized.

1.  What does the SEO package include?

Consultation:  The provider should ask you questions about your business and get to know your website.  They should ask about your target customer, target market, locations, etc.

Keyword Research:  What keywords are your target customers asking a search engine to find?  Website should contain these keywords not only in meta tags, but should be written within the content of your website.

Content:  A good SEO content writer will write content not only to appeal to search engines,  but makes sense to your visitors.

Link Building:  Your site needs to be submitted to directories and added to the growing number of business profile sites which have a description and link to your website.

Reporting and Tracking:  You should receive some kind of report where you see traffic results, search engine rankings, etc.

2.  When will I see the results?

Search engines must crawl your site – and thousands others – to determine what each site is about.  It may takes three to six months.  If someone tells you they can do this within days or weeks, this is a red flag.  They are either very inexperienced, scamming, or may be using “black hat” methods that could result in your site getting banned from the Google index and not rank at all in other search engines.    Ranking reports should be sent to you on a regular basis.

4.  What SEO techniques do you use?

Honesty is always the best policy.  SEO techniques should be transparent, focused on content that is engaging and informative to readers.

5.  What is your experience?

Websites should be designed and built with a focus on all of the above right from the beginning.  A professional Designer or Developer with a few years of experience should have a total understanding of the issues mentioned in this article.

Christina Descalzo
Web Design and Development
770-316-1654

HTML5 – Getting ready for the future of the web

HTML5 is the newest edition of the language of the web with enhancements to a wide range of features including form control, API’s (Application Programming Interface), multimedia and structure. Many key players including Apple, Mozilla, Opera and Microsoft, together with the W3C are openly developing HTML5 and encourage web authors from all over the world to partake in the fun.  Microsoft and Adobe are contributing engineers to the HTML 5 standards development process, yet both remain noncommittal about adopting HTML5, at least while it is still in development.

HTML5 is a work in progress with the official standards release in 2014. And while the competition is heating up with Flash, companies are having developers build different versions of their website. One caters to the pc community with all of Flash’s rich capabilities and another designed for the hand-held device and its mind-boggling worldwide community and applications.

While you’re at it, make your site 508 compliant, like government sites, which cater to the millions of people with certain disabilities. Two small examples would be to add captioning to your videos and adding the text equivalent of audio must be provided, if only in transcript form. These are two very small examples. Websites should be built with well coded CSS external stylesheets. The ADA (Americans with Disabilities Act) is doing a great job helping people with certain disabilities. They are being equipped with screen readers giving them the ability to change the styling of your site for larger print. You do not want to interfere with their capabilities.

The HTML5 Tracker website openly discusses the ongoing phases of the development. The HTML5 validator is working very well.

Some changes include:

HTML5 adds many new syntax features including <video>, <audio> and <canvas> elements, as well as integration of SVG (scalable vector graphics) content, which are designed to improve the inclusion and handling of multimedia and graphic content on the web. Other elements such as <section>, <article>, <header> and <nav> are designed to improve the semantic richness of documents. New attributes have also been introduced, and others removed, to improve and simplify semantic expression. Some elements, such as <a>, <cite> and <menu> have been changed, redefined or standardized. The APIs and DOMare fundamental parts of the HTML5 specification. It also defines in some detail the required processing for invalid documents, so that syntax errors will be treated uniformly by all conforming browsers and other user agents. Replacing <divs> with distinct elements actually makes the source code easier to author. The header/footer elements may contain sub-headings.  The aside element is used for sidebars.  The article element is an independent section of a document page or site suitable for news or blog articles, forums, posts or individual comments.

Benefits of using HTML 5

  • Backwards compatible with existing browsers
  • Authors are familiar with the syntax, which is lenient and case insensitive
  • Shorthand syntax, e.g., authors can omit some tags and attribute values

Benefits of using XHTML

  • Strict XML syntax encourages authors to write well-formed markup
  • Integrates with XML vocabularies by conforming to xml syntax and can support most limited devices
  • Allows the use of XML processing used in editing and publishing processes

It is conventional to use XHTML rules and use all lowercase in HTML5.

Since HTML5 is mainly a well-defined HTML4/XHTML 1.0, and because both HTML- and XHTML-style syntax is allowed, you need to do very little (maybe only a doctype change) to change current well-made pages into HTML5.  It will probably look fine in most browsers, although, it might not validate as HTML5 without some tweaking, which is a learning curve. It is advisable for current web developers to stay informed of the revisions and learn HTML5.  It is being developed to support future prospects for media accessibility options and much more. Should developers and designers invest in HTML5?  HTML5, CSS and JavaScript are going to be the “classic three” for developers and designers.  A little Flash never hurt anyone, either.  I think Flash technology is going to be further enhanced and the fact that it performs the same in most browsers right now is great.  Of course, this isn’t currently the case for hand-held devices, but you can code your way out of just about anything.

As a web designer and developer, I am very excited to be part of a community working to refine a language spoken across browsers, can be viewed in various mediums, assists the blind, and can be encoded in every language. Not so simply amazing! January 22, 2011 Christina Descalzo
770-316-1654