Archive for Web Design

Responsive Web Design – HTML5+CSS3 or XHTML+RDFa?

Posted on 21 May 2012 by John Britsios

Responsive web design (RWD) is not a new concept, but it is finally receiving the attention it deserves due to the increasing number of handheld devices in use today. With the many different display sizes in use today, every website needs to cater to each specific device, in order to optimize the user experience.

Users of handheld devices such as tablets and iPhones are quickly frustrated by the necessity to continually pan and scroll in order to view content. RWD greatly improves the user experience by tailoring the viewable content to each individual device’s viewport.

The methodology is simple: the site uses media queries to determine each device’s parameters, and then serves the page using a customized style sheet (CSS) file specifically designed for that device type. This is totally transparent to the user, allowing for a fluid layout that fills the available viewport.


You need Flash player 8+ and JavaScript enabled to view this video.

One of the most publicized methods of implementation of RWD is via the use of HTML5+CSS3. However, this isn’t the only viable alternative. XHTML+RDFa is also equally effective, and actually can convey additional benefits.

Implementing HTML5+CSS3:

  • First, the header, content, widgets and footer on the page should be encapsulated in a page-wrap container. This allows the container size to be customized by the style sheet to fit different viewports;
  • Next, the HTML5 elements should be reset to block, identifying the block of elements to be addressed;
  • The main CSS structure should be developed, establishing the width and float for the various elements in the block;
  • Media queries will need to be set up, in order to identify which CSS should be followed in order to suit the device characteristics of the target device;
  • The fluid layout needs to be established, as well, as this allows the setting of the percentage of width (of the main CSS structure) at which elements should be displayed;
  • Finally, the percentage of width at which the display needs to be set for all images and embedded videos.

By following the above steps, a page which might display four columns on a 2560px PC display can fluidly adapt to a three, two or even one column display on smaller devices.

Implementing XHTML+RDFa:

For this approach, the basic steps are the same as above in order to achieve a fluid design that provides a quality user experience for any size device. This option, however, provides additional benefits worthy of consideration for any business website.

Implementing RDFa in a site’s design provides a great deal of semantic data to the search engines, which can greatly augment the site’s relevancy to the search queries for which it is returned. It also can result in more highly customized rich snippets to improve the click-through-rate (CTR).

That means the site will receive more targeted visitors, and provide them with a better shopping experience… critical elements for improving any business site’s conversion rate.

Using schema.org property settings to convey semantic relationships enables one to establish item properties that enable the search engine to better understand what the page ‘s primary focus is. This can have a tremendous bearing on ranking for specific search terms.

Either of these two methods can yield a significant edge.

As with any recent technology, the earliest adopters are those that will realize the greatest benefits as a result of implementation before their competitors.

Tags: , , , ,


Comments (4)

Webnauts Launches New ThinkTank Community

Posted on 25 June 2010 by John Britsios

Webnauts, known to some as John Britsios, has launched an innovative community forum.

After much preparation, and the considerable expertise of the SEO Workers staff, the community was opened two weeks ago, billing itself as the ideal venue for the who’s-who of web technology and internet marketing.

Its focus is to provide a secure, productive place for high level experts to get together and share ideas, analyzes, and recent developments. No more waiting for the next conference date to roll around.

John promises, “zero-tolerance for spammers, link-droppers and nonsense posts.”

This is a community for advance SEO, web development and internet marketing,” says John, “and my team and I are going to be sure to give these guys the kind of atmosphere where they can interact and enjoy it.

Britsios calls it a high-level, no-nonsense professional community. He knows, from experience, that web experts are pressed for time, and don’t want to waste what little they have, wading through senseless posts on a typical forum. That’s why he’s designed this one especially for them.

It will be tightly managed, as a resource, so that they can run their ideas by other professionals, discuss recent industry developments and share opinions. Whether it’s coding, advanced optimization techniques or marketing styles, they’ll find someone else there, capable of discussing it at their level.

Britsios says there are no ads on the community forum, and he expects his staff to be very strict about keeping the atmosphere professional. “This community,” he says, “is for the people, after all, that LEAD the industry, not follow it.

He says his members have begun to form working relationships, and have already achieved some innovative solutions to some thorny problems.

If you’re an internet professional, and are accustomed to working at an advanced, cutting-edge level, then you need to check out the SEO Workers Web Technologies and Internet Marketing Forums.


Tags: , , ,


Comments (0)

Can You Use PSD To XHTML Conversion When Building Your Site?

Posted on 07 December 2009 by John Britsios

There are a few facts about the World Wide Web which are indisputable. One is that there are literally millions of websites out there and thousands more are launched every day. Another is that there are far fewer web developers than there are website owners.

Of course, there are a lot of people who learn just enough HTML (or increasingly, the newer standard of XHTML) to get some sort of site up – but these do it yourself designs often leave you feeling as if there is a lot of room for improvement.

It isn’t that XHTML is so mind-bendingly hard that it can’t be learned; in fact almost anyone can learn it, provided that they have enough time to dedicate to what is essentially learning a new language.

Time, however, is what most of us have far too little of these days.

Other solutions for those building a website without the help of a professional web designer include blogs and other content management systems which allow them to have a functional website in a very short time.

There’s another problem with these sites, however: they tend to look very much the same, which if you’re starting a website for your business can be a fatal flaw.

However, just like a regular XHTML site, you can create a custom look for these sorts of sites with a little work; but just as most people aren’t skilled with XHTML, they’re also not conversant with CSS code which is also usually a part of these and other modern website designs.

Now we get to another one of those indisputable facts about the web and web design: just as there’s a lot more website owners than there are designers, there’s a lot of people who know how to use Photoshop than there are web designers.

If you can create a design for your site in Photoshop, you can use it for your website – once you’ve taken care of the necessary PSD to XHTML conversion, that is.

You really can use Photoshop to design your website, as long as you have a way to turn those Photoshop PSD files into the XHTML code needed for your site.

Again, it’s not something everyone knows how to do, but there are services out there who can perform PSD to XHTML conversion for you, taking your Photoshop designs and turning them into functional code which you can then take live and have your website, your way.

A lot better than using a template which looks like everyone else’s for sure. It’s also much better than feeling your way through XHTML and CSS code yourself and it definitely beats paying for the cost of a full suite of web design services if you’re on a budget.

If you’re building a new website or looking for a new design for your existing site, think about using Photoshop to design your site this time around. With PSD to XHTML conversion, you can make your site a one of a kind destination which will keep visitors coming back for more.


Tags: , ,


Comments (0)