This is the third part of the new Drupal for Web Designers series written by Idan Arbel of Arbel Designs. The first two segments discussed the design and functionality of website, now we’re moving into the content.

You’ve spent many hours designing your website, and configuring it to do exactly what you want, it works and looks amazing but there’s one thing you mustn’t forget: SEO – Search Engine Optimization. In order for you website to be a success you need people to actually see it. One of the most effective ways of doing this is by allowing people to find your websites through search engines, and the big one everyone is focusing on is Google of course. SEO deals with making you website easier for Google to understand, read, remember, and get direct user who search to it.

When I think of SEO I usually split it into three parts:

1. Content is king! The goal of a search engine is to find you what you’re looking for. You’re looking for content so when you type in a search phrase in google, you want Google to find the most relevant page for your search. The better and more relevant the content on your website to the search phrase the higher you should rank in the results. The best way to drive users to your website is to have interesting unique content – This is something Drupal can’t help you with, so let’s move on.
2. Link Building. Google’s algorithms are pretty complex but what is easy to understand is the “Recommendation” system Google uses. If a very popular websites that has a million visitors a day “recommends” your site, then your website must have relevant, unique, quality content that might interested those million visitors. Google takes this into account and places your website higher up in the search results. The way websites “recommend” other websites is simply by linking to them. The more incoming links from high quality websites you have, the higher you will appear in Google’s search results. Again this is something Drupal can’t really help you with….moving on.
3. The last part is the structure and meta data of your website. This is the more technical aspect and this is where Drupal does all the heavy lifting and pretty much makes this a non-issue for you. I’ll go over a few critical modules that help you out with this part.

Node Words

You’ve probably heard of meta tags, these are html tags that hold Meta Data. I like to think of meta data as more information about a certain item, in our case a webpage. The easiest example of meta data I can think of is information that is stored on a digital photo you take. The main item is the Photo, but attached to that photo there is additional information – what camera was used, the date it was taken, shutter speed, apature, location etc.. these bits of information add more info and help categorize the photo, the same applies for web pages. Webpage meta data is added to the website inside the <META> tag, and can include:

1. Keywords – words or phrases that describe the page.
2. Description – a short paragraph that summarizes the content.
3. Abstract – short sentence describing the page.
4. Copyright – copyright statement
5. There are more but we won’t get into them…

The Nodewords module allows you to automatically insert meta tags onto your site, taking content from predefined settings, or based on the content of the page.

Page Titles

The page titles that I’m referring to here are those placed between the <TITLE> tags. These appear in the “top blue bar” in the browser on the tab. This is one of the key factors in your ranking in the search engine results, as search engines rely a lot on the title in order to understand if the page is relevant to the key words.

This module allows you to set the html page titles independently from the actual title displayed to the user, great for optimizing the html page titles specifically for search engines while keeping the actual titles optimized and clear for users.

Clear URLs + Path + Pathauto

Have you ever seen sites with urls like this http://www.mysite.com?q=page1;b=3432432; ?
Well using clear urls which is actually a core drupal setting and not a module you get nice urls that look something like: http://www.mysite.com/articles/drupal/idan-arbel/introduction-to-web-design – isn’t this much more clearer? In addition to being very clear it can contain keywords that help search engines identify and categorize your webpage in order to fit well with the keyword search. So If I have a Webdesign website with a url like this: http://www.mydesignsite.com/website-design/chicago/e-commerce/website-name then I can include a ton of relevant keywords in the url and they actually make sense. When someone will search for E-commerce web design in Chicago, having a url like that will surely help. The Path core module allows you to set custom urls for any page. Let take it up a notch with the Pathauto module – this module allows you to define URL templates to user for different pages. So if I create a new “Portfolio Website” item in my website, and give it the E-commerce category, and Chicago, I can have an automatic URL  generated like so: [my-website-base-path]/[content-type]/[category]/[location]/[title]. That’s it, don’t have to write any custom URLs anymore because Pathauto does all the work for me.

Global Redirect

This is a really technical module which deals with how other sites or pages in your own site link to other pages in your site. Making all the links end up the same so search engines doesn’t think that there is any duplicate content – which is a big no no. So what does it do you ask…a few things:

1. Removes trailing slashes – change www.mysite.com/ to www.mysite.com
2. Redirects drupal URLs like node/213 to the alias set using the path module category/title..etc

Path Redirect

If you’re in the process of redesigning a website, and you’re don’t really want to keep the old URL structure, path redirect allows you to redirect old pages to the new ones using 301 code which means this is a permanent redirect and search engines should use the new path from now on. Very useful in preventing broken links when rebuilding websites.

XML Sitemap

In order to have good ranking in search engines, you first need the search engine to actually find your webpages. XML sitemaps are files that include the structure of your site and are used by search engines to find and index all the pages on your site.

Google Analytics

Integration with great Google Analytics service. The module allows you to track different users, roles, file downloads, site search and simply the easiest way to add the Google Analytics code to your site.

There are many more modules but these are the basic modules, to get the job done, and done right.

That’s it for the introduction, the next article in the Drupal for webdesigner series will be “Drupal Terminology”

Ensure your 100% success by using our incredible 642-654 study packages. We are providing the best 642-975 and 642-072 training solutions for final exam preparations of CCIE-LAB. You can also get 646-204 free if you download all the dumps.

This is a post from Inspired Magazine. If you like it, you may want to subscribe to our RSS full feed to be updated on every article we're publishing. Also, it's highly recommended to follow us on Twitter!

Drupal for Web Designers – Part III SEO

This is a guest post from Maurice Kindermann, a web developer and designer from Kintek.com.au.

I think we can all agree Amazon.com is a pretty uninspiring website, no revelation there. They were once known for pioneering much of what is now referred to as ‘standards’ in ecommerce. These days, the online giant is looking a little worse for wear. Personally, I’ve been avoiding the website for years because of how unappealing I find it, so when I recently went to buy a Kindle I was not surprised to learn of some major fragmentation and usability problems.

View original Kindle page   |   Original Post

Brief History

Let me back up a bit, back in the 90′s US websites were notorious for providing very limited or no shipping options to international customers. Even today, American websites that do offer international shipping generally have bloated or unreasonable pricing. Take one look at eBay and you’ll see what I mean. I’m a massive eBay user, and if you live outside of America you may have noticed other countries (especially the UK) are offering very cheap or even free shipping. Given America’s current economic climate, I think it’s extremely important that large corporations like Amazon don’t shaft their international buyers by treating them like second class citizens. If they keep doing an average job, someone will come along with an above average solution and Amazon will be the next Yahoo… There, I said it!

Before I started scrutinizing the Amazon website, I did some research and found a couple of interesting articles. Econsultancy wrote Amazon relying on brand creditibilty instead of good usability. It compares some key usability aspects between Amazon.co.uk and The Book Repository UK. SlashDot also recently reported that Amazon has Tonnes of Fake Reviews.

Amazon’s current design

I own two 22″ monitors that sit side by side. Although I’m not the norm, this makes reading any content on Amazon (or any fluid website, WordPress admin panel included!) a painful experience. Widescreen cinema was invented for the film industry because our eyes move left to right faster than they do up and down, and this causes less eye strain. With this sort of logic you might think wider websites would be easier to read. Well, books are vertical for a reason, and it’s been shown that the ideal paragraph length is between 40 and 60 characters (depending on where you look).

With that in mind you can see what Amazon.com looks like on my monitor followed by what it would look like with two lines of code to give it a max width.

The Code:

body{ max-width:1200px; margin:auto;}

Before:

After:

Fragmentation

Nothing is worse. The only discernible difference between the Australian (international) and US version of the Kindle product page is the shipping options and the URL. Technically speaking, there’s no reason why these pages couldn’t be combined to give customers a streamlined buying experience. This was one of the main inspirations behind my redesign and what I tried to illustrate. You’ll see below the steps involved in adding a product to your cart. Personally I think this is unacceptable.

Content is king, right?

Content certainly is king, but it’s important to restrict the amount of content per page. I did a quick test by copying and pasting the entire Kindle product page into Microsoft Word, and you might fall off your chair at the results. 62 pages, 11,832 words. Obviously Amazon want to make sure you know exactly what you’re buying, but it needs a bit more management. This is what I’ve demonstrated in my design with the “Reviews” section. I’ve turned two massive sections on the page into a humble slideshow. Here is the before and after:

Ending thoughts

The current Amazon design was implemented back in September of 2007. A lot has happened in the design industry since then, and it’s about time Amazon picked up its game. I’d love to hear what other people think of the Amazon website, especially regular and international buyers.

If you’re interested in reading the full article which details the process and terrible international usability I documented when buying the Kindle, it can be found here.

Copyright © 2010 Maurice Kindermann

This is a post from Inspired Magazine. If you like it, you may want to subscribe to our RSS full feed to be updated on every article we're publishing. Also, it's highly recommended to follow us on Twitter!

Redesigning Amazon

Jason Amunwa is a marketing Macgyver, with experience creating innovative campaign strategies, designing creative executions across multiple channels, and most of the stuff that happens in-between, for brands big and small.

It’s probably safe to say that touchscreens as a method of interacting with the web aren’t going away. In fact, it appears quite the opposite: most new smartphones have one now, Google’s making their own tablet, and I think ol’ Steve Jobs has managed to shift a couple…million.

Therefore I think now is a good time for us designers to take a step back from all the glassy smoothness of these devices and ponder the implications of this radically new way of interacting with our online environment. Below, I’ve jotted down a few thoughts on design practices that we’ll likely be seeing a lot more of as site owners begin reorganizing and redesigning to welcome our touchy-feely visitors. You’re welcome!

Things are going to get bigger

Unless you're like this guy, you probably can't press just one pixel

Imagine for a minute how many pixels you could fit on the tip of your fingers – that’s approximately the number of times less accurate touchscreen users are, compared with the single-pixel precision of mice. This is one of the fundamental differences between these two input methods that radically affects how we must design our user interfaces.

Buttons, links and other interactive elements must now be large enough to be easily pressed on the first try. Typography will therefore also need to expand in line with the rest of the interface, or else look dwarvish by comparison. The spread of copy & paste functions among smartphones (starting with Android, and recently arriving at some of the lesser known handsets) will also require larger typography, in order to be comfortable.

“But what about fixed widths and the fold?” echoes your agonized cry. “All these supersized elements and text will push everything down!”. Well, a peculiar quirk of touchscreens’ very nature means bye bye worrying about these – but we’ll get to that in a minute.

Dropdown and gimme 20

Breaking News: In touchscreen-land, the “hover” state doesn’t exist – there is either no contact at all, or contact with a fingertip. Some more advanced touchscreens register variable amounts of pressure from a finger, but these are far from being in widespread use for the time being. The primary triggering mechanism for that staple navigation element – the dropdown menu – is simply not viable for touchscreen users, meaning that for all its ‘magical’-ness, you can’t easily navigate many websites’ content on the iPad or indeed any other touchscreen device. How, then, can we compensate for this in our UI designs? Some ideas:

• “Pop-opens“: hidden menus that appear after a long press on a UI element – kind of like a ‘sticky’ dropdown menu
• “Drag-opens”: sliding menus that the user manually pulls open like a drawer, to access the info or elements within. These are nice, because return users can drag it partially open to only reveal the info/element that is needed, thus saving screen space overall.
• More focused navigational structure: the spread of touchscreen devices may force website owners to ask themselves what’s really important to have in their top-level navigation, and which pages can be consolidated, to trim down the number of sub-pages they need to cram into hidden menu tabs
• Drag & drop, and easing behaviors: since we’re increasingly able to manipulate digital objects in much the same way as physical ones, users will expect them to behave similarly in the digital space - our hunter-gatherer instinct is in full effect as we physically sift through objects that have either been read or are not relevant, in order to reveal the valuable info.
• Contextual navigation: do all your users really need the ability to jump from one end of your website to the other at all times? Perhaps a more dynamic navigation element that adapts to suit the context of their location within your website is a better use of the screen real-estate, instead of inflexibly offering the same static set of choices regardless of their current page.

I multitouch myself

Multitouch is truly a fork in the road for website owners that won’t happen for a while, but will happen eventually as the technology becomes more pervasive. Consider this: mouse users have just a single point of interaction, whereas touchscreen users can have between 1 and 21 points of contact with the screen, depending on their flexibility (and degree of perversion).

Apple is forging ahead with user interfaces for octopi - can YOU afford to be left behind?

Granted, until multitouch becomes a standard feature across all touchscreen devices, any UI functions that take advantage of it will have to be luxuries, but it’s worth considering how much it potentially speeds up a user’s interactions with your website, and the interesting possibilities it opens up to designers.

Interaction via gestures is also an avenue to be aware of, e.g. flipping through a series of consecutive pages using a swipe of the hand. We see these types of gestures built into the operating systems of touchscreen devices, but how long before websites begin to take advantage of them?

The fold, and liquid vs fixed widths

Remember when I said forget about the fold and fixed widths? If you replied ‘yes’, then you’re obviously ignoring me. Forget about them. Mice were built for the vertically-emphasized nature of the web – scroll wheels and the pushing/pulling action of vertical scrolling were more natural with mice, therefore web interfaces evolved to emphasize vertical movement. In addition, the web was primarily consumed by desktop PCs and laptops, with their comparably standardized screen resolutions.

Bruce once said about liquid web layouts "Be formless. Shapeless, like water. If you put water into a cup, it becomes the cup."He also beat wholesale ass.

Things are different now – with the rapid rise of web-capable smartphones, it’s like the wild west out there. Not only do the screen sizes differ across each handset manufacturer, but recent phones can display in either portrait or landscape modes! The upshot is that there are now too many possible screen resolutions for us to feasibly pick a reliable fixed width, and one solution is to adopt liquid layouts that conform to whatever sized screen the user is viewing our pages with.

An alternative is to start using *gasp* horizontal scrolling in web design, allowing touchscreen users to flip through information from left-to-right in much the same way as with a book. Heresy, I know, but hey, it’s a new world we’re living in, folks.

You put your right hand in, your right hand out…

Between 70 and 90% of the world’s population is right-handed, meaning that those with tablet computers are likely going to be holding the device with their left hand. It’s therefore entirely possible that we will see a shift in sidebar navigation placement from the left to the right, for quicker access than reaching all the way across the screen. Just sayin’.

In Conclusion

Touchscreens and the mobile web just made designers’ lives a lot more complicated, BUT it’ll be our creativity and ingenuity that sets the standards of the next generation of touchscreen and gesture-driven user interfaces. That’s like, some crazy Minority Report stuff – how cool is that?

Get on time success in 642-617 & 642-681 exams by using our latest and high quality 350-029 and other superb 650-296 exam pass resources of 642-067.

This is a post from Inspired Magazine. If you like it, you may want to subscribe to our RSS full feed to be updated on every article we're publishing. Also, it's highly recommended to follow us on Twitter!

The Tangible Web: Thoughts on Designing Websites for Touchscreens

The iPad has received mixed reviews. While the geeks (people like you and me) have looked at it with disdain for being “just” what we expected, the media publishing industry (read print media) has seen it as the salvation they had been waiting for. Whether the iPad is able to change the world or not, is not the issue of this article. But the fact of the matter is that it is here and sooner or later we need to learn to design the web keeping it in our minds. So what are the things we need to consider?

Fluid Width Design

The iPad has no RIGHT way of viewing websites. That means you can view it either in landscape or in the portrait mode. But for the designer that means two completely different layouts for which to design. It is for this specific reason that the iPad highlights the need for smart fluid width design. Using a smart combination of CSS and Javascript the User Experience can be made to improve drastically.

Resources:

• Smashing Magazine talks of Fluid vs Elastic vs Fixed Layouts
• Smashing Magazine gives smart fixes for Fluid Layouts

Adaptive CSS

It is time for designers to get their skills together for designing for the iPad is going to be a roller coaster. While Fluid layouts are the best bet, but there are many instances where we just cannot use them. In such cases, we need to look beyond them to the basic styling.

A prominent option would be to use multiple CSS styles for different configurations and devices. Another is going for an adaptive content that changes according to the screen resolution.

Resources:

• A List Apart talks of Progressive Enhancement with CSS

There is NO Fold: Vertical or Horizontal

The iPad establishes one thing for certain. The website need not look the same on every platform. We have gone on to include Style Sheets for iPhone to include mobile devices, now we need to include them for iPad to keep in view the No Fold Policy.

In Portrait mode a very good portion of the website can be seen at one go. At the same time in the landscape mode the touch interface makes it very natural to browse sites that display content horizontally.

Further Reading:

• A look at 5 websites design styles that would benefit on the iPad
• Life below 600px

Links and Hover Effects

Primary method of user interaction with the iPad is and will be the fingers. The users will interact with our websites using fingers. So all those brilliant hover effects that were favorable for pointer-based devices, will be a hurdle in user experience on the iPad.

Also the links can no longer be concealed in a text and left for the user to dexterously click upon it. We might want to resize the links so that the user experience does not suffer.

Flash & HTML5

While the world has been divided over Apple’s stand on doing away with Flash, we need to understand that the step in the direction has already been taken. With Google openly adopting HTML5 for Youtube, it is only a beginning of the things to come with HTML5.

As designers we need to understand this paradigm shift and devote our efforts in not only learning about HTML5 but at the same time doing away with Flash. I understand that is a bold statement to make. But answer this:

“Would you rather have a Blue Lego?”

Further Reading:

• Can Flash be saved?
• Apple’s iPad — a broken link?

Conclusion

While a lot of hidden points can be further raised 9 (Issues like typography, and webkit) I think the article serves as a good and sufficient point for the discussion to begin. I would love to hear your views on how exactly Apple’s iPad changes the way we design websites.

About Inspiring Pixel (Author’s Blog)

Inspiring Pixel is, as they like to call it, a design steroid that boosts your creativity and gives you inspiration besides removing the inhibitions and ignorance that cloud your true art. For those looking for a more traditional approach, it’s a web design and inspiration blog that aims to give your daily needed dose of creativity. IP aims to be a leading pioneer of web and graphic design in times to come, but more than anything they wish to make it matter while they’re out there. So follow Inspiring Pixel on Twitter and subscribe to the RSS feed

photos credited by Prakash Muniandy & sunuq | supported by the excellent catalog printing services at PsPrint

This is a post from Inspired Magazine. If you like it, you may want to subscribe to our RSS full feed to be updated on every article we're publishing. Also, it's highly recommended to follow us on Twitter!

How iPad Affects the Way we Design Websites?

Now if you want to start a new business these days you sure have a few good examples on how your website should look like. Here is a roundup with our favorite small biz web designs. Have fun!

Mail Chimp

We Make Email Marketing Easy & Fun For Over 80,000 Users

Coda

Text editor + file transfer + svn + CSS + Terminal + Books + More = Whoah.  Welcome to Coda. Grow beautiful code

Skype

Free calls, video calls and instant messaging over the internet. Plus great value calls to phones anywhere in the world

37 Signals

A Better Way To Work.  Over 3 million people use our web-based apps to get things done the simple way

Wistia

Wistia is a platform for video marketing, sales, and collaboration.  Share and track video with prospects, customers, and employees

Sugar Sync

Get all of your files on-the-go, instantly and securely from any Mac, PC, or mobile device.  No extra effort. No extra baggage

The Invoice Machine

It’s beautiful and simple-to-use interface makes producing professional looking invoices a very pleasant experience

Mint

Mint is an extensible, self-hosted web site analytics program. Its interface is an exercise in simplicity

Get Satisfaction

Get Satisfaction brings customers and company employees together to make things better for everyone

Buy Sell Ads

Serving 1 billion + impressions across 1,000 websites per month

This is a post from Inspired Magazine. If you like it, you may want to subscribe to our RSS full feed to be updated on every article we're publishing. Also, it's highly recommended to follow us on Twitter!

10 Inspiring Small Business Websites That Set New Webdesign Standards