Mário Andrade» Web & SEO – Mário Andrade

The Gutenberg Diagram in Web Design

Mario Andrade — Sun, 07 Mar 2010 15:56:48 +0000

The Gutenberg rule points out a user behavior called reading gravity which is the western habit of reading left-to-right, top-to-bottom. It can be represented as a simple diagram that splits a page in four quadrants:

A Primary Optical Area
a strong follow area
a weak follow area
and a Terminal Area

The higher left portion of the page is the user primary focus, it’s where the eyes will automatically focus regardless if the user is searching for something, wanting to read or just doing a quick scan on the page.

The second stage of the reading habit is moving to the higher right portion of the page, you can think of it as a follow up from the left portion but less important. It’s not a good idea to break the reader’s experience created from the starting point. Meaning that if you have a call to action the user will stop at this point and act.

The lower left portion is the blind portion of the Gutenberg diagram, although readable the user will not give much importance to content in this area of the page.

When the user reaches the lower right portion of the page there is a break in the reading / page scan process and the user will need to take an action. This is the perfect spot to insert call-2-action such as buttons, links, forms, video, etc.

By understanding the reading patterns of the users who visit your website you are able to place the most important content in the areas where they will be most effective.

If you’ve read about web users reading patterns you probably read Jacob Nielsen’s report on the F-Shaped Pattern that shows the lower right area as the less important area. I wouldn’t say this theory is wrong but consider the F-Shaped pattern for users that are scanning the page and the Gutenberg Diagram for user that are reading or genuinely interested in the content.

For example, a user is searching for information about the Gutenberg Diagram and reaches this article. The user will look at the diagram image and read the lines above the image starting an inverted Gutenberg Diagram.
If the user is looking to buy a product on E-bay I believe the primary pattern on the product listing pages will be a typical Gutenberg Diagram.

On the other hand when a user is searching for information on a search engine and finds multiple articles about it, the user will engage an F-shaped pattern when visiting those pages trying to find quick and concrete references to it’s search.

Complementary readings:

What is Information Architecture

Mario Andrade — Tue, 09 Feb 2010 22:54:04 +0000

Although it may seem as a parody, and kind of is, it still passes the message.

When you speak about Information architecture (IA) regarding websites you are refering to the conceptualization the website layout. An Information Architect has the function to, just like a real architect, create the most usable environment for the users. They do not design, they do not program, they build and develop concepts.

For more about Information Architecture or IA visit Wikipedia’s page about the subject.

Referral: http://en.wikipedia.org/wiki/Information_architecture

From wireframe to design

Mario Andrade — Tue, 02 Feb 2010 22:31:55 +0000

A very important aspect when you wireframe is that the designer should feel comfortable and understand the idea you want to pass to him and not get stuck to the display of the wireframe. Meaning that a square doesn’t need to be a square, the designer should be creative.

The video was create by Michael Leis and as he describes on the youtube video page wireframing is defining a communication strategy and I have seen many wireframes that although with interesting concepts, best practices, good architecture and so on many times lacks on communication.

Increasingly, as designers of interactive systems (spaces, processes and products for people), we find ourselves stretching the limits of communication tools to explore and document what it will be like to interact with the things we design.

We describe wireframing as a form of design communication that enables stakeholders, team members, users and clients to gain first-hand appreciation of existing or future problem spaces and solutions.

We create wireframes to inform both design process and design decisions. Wireframes range from sketches and different kind of models at various levels of fidelity looks like, behaves like, works like to explore and communicate propositions about the design and its context.

We think that the wireframing strategies user experience designers use are often constrained by the tools they feel most comfortable with: problem space, domain, expertise, theme, context of problem, bias towards types of design tools and documents, timeliness of artifacts created. For this reason, a session that attacks one business problem from the perspective of four different designers will provide attendees with a unique understanding and set of strategies and tactics to improve their own practice.

Collaborative Sketching & Prototyping done right

Mario Andrade — Wed, 27 Jan 2010 09:21:01 +0000

To be honest from what I’ve seen collaborative prototyping isn’t that collaborative. Normally there’s one specialized individual making wireframes according to what they find to be best practices on the web. What happens in most cases is you talk to one maybe 2 people and say “Hey what do you think?”, when everything seems right you pass it to design and tell them to work their magic. So collaborating your work with other people that will certainly suggest something that goes against what you find to be the best practices doesn’t sound that exciting. At this point you have spent some time prototyping and decided to pass it to design and suddenly someone from marketing looks at it and understands that what the client wants from a certain part of their website is something a little different from what you prototyped. What do you do know? I’ll leave that question for you to answer.

The following video is a 24 minute presentation by Todd Zaki Warfel on Washington University where he shares his insights on collaborative web prototyping and the importance of collecting multiple insights from all the team members to help you achieve an improved result.

If you are interested in knowing more about this subject please consider visiting my article on website wireframes.

Also consider acquiring Todd Zaki Warfel book Prototyping: A Practitioner’s Guide, it’s a very interesting reading that provides you with insights on prototyping, the tools used and basic help to those getting started.

Optimizing your website for Bing

Mario Andrade — Thu, 24 Dec 2009 16:55:37 +0000

The results made me curious and this lead me to find several aspects concerning search engine optimization for different search engines. Although the basic SEO techniques are the same (backlinks, title, url, headings, bolds, etc) there are some differences on how Bing and Google interpret the same results. One way to prove this using Bingle a search engine that shows Bing and Google results side by side. You might find the first results are pretty much the same no matter what the search but from position #5 and down you’ll start noticing different results on the search engines as the following image shows:

Since Bing’s search algorithm is not for public display, some SEO experts tested several search queries in order to find possible patterns to interpret what Bing weights and doesn’t and came across the following conclusions:

Bing Search ranking factors

The following list show’s several points compared to Google seo optimization techniques

Inbound links anchor text. Bing gives more weight than Google to this so think well when linking internally. Although the quality of these inbound links can provide a good value to the page you are linking to, Bing attributes more weight to the anchor text of this link rather than the quality of the page the link is coming from.
Domain age and site authority are more important on Bing than on Google.
Bing seems to be more Flash SEO friendly.
On-page optimization matters. Bing seems to give more weight to on-page factors than Google does.
Number of backlinks is less important to Bing. It’s still in the gray zone if the nofollow attribute is or not a ranking factor
Fresh content weights less. Bing prefers older results to new fresh content

For now it is too early to say which factors are of primary importance with Bing. But the fact that their search results are relevant means that their algorithm is really precise. Well, maybe the relevant results in Bing are due to the fact that web masters were taken by surprise and they haven’t had the time to optimize for Bing. As a result, the content is authentic, there are no SEO gimmicks and artificial pumping. We’ll see if this will stay so in the future, when web masters learn how to optimize for Bing as well!

Bing Optimization – How to optimize your website for Bing

Like Google, Bing has it’s Webmaster Tools an excelent way to help improve your results and track your website performance. Bing also has several articles that might help you:

Guidelines for successful indexing
Search Engine Optimization for Bing although very useful, doesn’t add much to what I’ve said previously.

If you want good results keep creating good, original content, apply basic seo practices and techniques and after having your base ready start improving for specific search engines like Google, Bing and Yahoo but keep in mind, users come before search engines.

I’m interested in what you are thinking so consider leaving a comment

jQuery accordion

Mario Andrade — Tue, 01 Dec 2009 13:08:43 +0000

Resources

For this tutorial I will try to exclude the use of any unnecessary file and will stick to the basic, feel free to add and customize your project as you wish.

For jQuery library I used Google Code AJAX Libraries API
Text / Code editor. I used Notepad++, my personal favorite for fast editing / coding.
Some free time and curious mentality

jQuery Accordion Demo

Building the HTML Structure

I’m assuming you know HTML and CSS as I will not explain what each tag does.


  
  Item 1
 
  WordPress Themes
  This is a paragraph with some text
  
  
  
 
  My Skills
  
  HTML / XHTML, CSS
  Adobe Photoshop, Fireworks
  PHP, jQuery, Ruby on rails
  And a whole lot more
  
  
  jQuery Accordion tutorial
  
  Resources
 
  Google jQuery link
  More jQuery tutorials

As you can see I created an unordered list with the ID accordion. Inside that list I have a link that works as header to the content inside. The content is hold inside other unordered lists.

Adding the jQuery

Personally I add all javascript at the bottom of the page right after the tag due to accessibility and usability purposes.

Now you have your accordion built and functional you need to give it some visual appeal.

Adding CSS to jQuery Accordion

And there you go. This is a very simple, valid and accessible jQuery vertical accordion tutorial. Feel free to play with the CSS. It’s easily adapted to an horizontal accordion.

If you liked this tutorial please help spreading the word by sharing this tutorial with other users. Thanks in advanced.

Quickstart on prototyping with wireframes

Mario Andrade — Sun, 29 Nov 2009 12:42:25 +0000

I’ve always believed that work should be fluid. For example, when I’m looking at a visual specification I want to be able to press the title of a news and go to that news article page specification instead of having to scroll to it.
The following video shows you how to create a click-able prototype with Adobe inDesign. Basically what happens is you create buttons and behaviors on inDesign and export it as a Swift (.swf) file. You can than open the SWF file on your browser and navigate through the different pages by clicking on the buttons you created.

How Twitter and Facebook will revolutionize the mobile industry

Mario Andrade — Sat, 14 Nov 2009 00:50:20 +0000

The first website I visited was Twitter and I was excited, I logged in and I was able to tweet and see the tweets of people I follow but unfortunately I was not able to see the links they shared in conditions since they have no mobile version. It was really frustrating waiting over 5 minutes for a page to load and just to get a message saying “Memory is full” when I tried to access Abduzeedo.com

Fortunately some websites like Smashing Magazine have a mobile version of their website and I was able to read an article, many other websites have great designs, awesome content but lack on mobile support.

Twitter is already accessed via mobile by thousands of users and provides a valuable service to many businesses.
Facebook is the World most active community with a strong base to develop new applications and capitalize on their own market. Mobile applications and businesses based on mobile web design and application development are already a reality.

As the mobile web, social websites and services grow I believe that mobile versions of websites will be a must in about 5 years time, maybe less depending on technological breakthroughs. It took
It’s time for bloggers and businesses to start thinking, testing and creating mobile experiences and improving their user / customer experience when accessing their services or websites through mobile devices.

More on Mobile Web

Cameron Moll’s book Mobile Web Design is a very interesting reading and I truly recommend it to any front-end web developer. You can grab a preview sample of Mobile Web Design.

WordPress Mobile Plugins:

Joomla Mobile Extensions:

Joomla Mobile

I would like to ask you to share tools, thoughts, methodologies or tutorials you might know regarding the mobile web. What are your thoughts on the emerging trend of accessing internet with mobile devices?

photo by (bee) is too busy

Check if email domain exists with PHP

Mario Andrade — Sun, 04 Oct 2009 21:36:21 +0000

So let’s create a function to allow you to check the dns record of a full email address:

function VerifyEmailAddress($email) {
    list($user, $domain) = explode("@", $email);
    $result = checkdnsrr($domain, 'MX');
    return($result);
}

This function breaks the email string example@domain.tld giving the username the the content before @ and the domain the content after the @.
If you insert an email like example@domain.tld the user would be example and the domain would be domain.tld.

After breaking the email into user and domain the function calls checkdnsrr to check is the MX records on the $domain variable returning 1 is the domain exists or 0 if the domain does not exist.

Now you need to call it when checking an email:

if(VerifyEmailAddress($email) != 1) {
    echo "The e-mail you inserted is not valid.";
}

And here you have it. You can now check if the domain of an email exists.
For complete email verification I advise you to implement the following functions:

Check if email string inserted is a correct email for. Must have string@string.com
Check if the email domain exists. You can use this tutorial for that
Limit the amount of tries, for a determined period of time, a user can insert an email in order to stop possible spam bots

How to remove Google Maps Info Window

Mario Andrade — Wed, 30 Sep 2009 19:39:41 +0000

Fortunately I was able to easily understand that the tooltip is called by using a variable named iwloc which is used to specify where the infowindow A.K.A info bubble, info ballon or info tooltip.
You can read more about the iwloc variable and it’s properties at mapki wiki about Google Map Parameters on the Info Windows Section

Important Note:

Two days after writing this post I was unable to view the Info Window (info ballon) when the page is loaded. If you wish to know what the Info Window is, left click on top of any pinpoint and it will show.

Here is an example of what I mean:

View Larger Map

You can imagine why clients wouldn’t want this info window showing up on a map at their website. But unfortunately removing this info window is not as simple as removing the iwloc var from the code google maps gives you to embed the map on your website.

Here is the code that shows the map above:

iwloc=A&output=embed"> View Larger Map

I highlight the iwloc variable but now if I remove it. Here is what I get:

View Larger Map

Here is the code I used to show the map above:

View Larger Map

I removed the iwloc variable and I noticed this works on some maps, on others you have to endorse other strategies.

After reading the Google Map Paremeters information about the iwloc variable I started trying the different values you can apply and I found that using iwloc=near; does what I want: The map shows up with the pinpoint and no Info Window, if I click on the pinpoint the Info Windows shows up. Perfect!

View Larger Map

Here is the code I used to create the map you see above:

iwloc=near&output=embed"> View Larger Map

And voilá! Just don’t forget when applying a Map make sure on Google Maps you right click and set the map to center on that spot by clicking on Center Map Here:

The Final Result:

View Larger Map