Educating the user
By Nick Fassolas
I firmly believe that one of my jobs is to try to “educate” users, in things that web designers take for granted, for instance:
a good web designer knows that IE6 is an out dated browser, full of bugs and flaws. That’s the reason why most web designers choose to develop and design websites for modern browsers.
Users don’t know about these problems, they don’t understand CSS conflicts or other cross browser incompatibilities and even if they know or have heard about them… they just don’t care!
So what is there for a web designer to do?
Seriously now…education people, education. That’s what makes us better in all matters, why should it be any different in this case.
A couple of years ago when I decided to redesign my website I didn’t want to make it easy on ie6 users, I decided to get them involved and help them realize that, everything gets better, evolves into something new, it’s safer, more trustworthy and more functional, uses better technology and is faster than the one before, examples of that progress you can find anywhere and in anything! (Cars, computers, mobile phones, toys, sound systems etc).
For some one that visits my site with a modern browser (you know who you are) everything will look fine (unless green is not a color you like). On the other hand is some one visits my site with ie6 he will see it in black and white! (Like viewing an old television) No transparency, no colors or any other effects.
Why did you do such a thing? You might ask.
My answer is simple and it’s the truth, because it’s time for ie6 users to move into the 21st century.
I could have used a script of some sort, but doing that would be against my personal ethics, preventing the user to see things completely is like turning someone blind against his own will (and I’m not here to torture people), changing the colors and making it look slightly…grey, is my way of trying to educate the user.
Of course using a code to prevent ie6 from interpreting the html code that makes the site visible is something that could be done, but only as an extreme measure taken against Microsoft’s
Browserosaurus! (Info: Internet Explorer 6 has been with us since August 27, 2001)
Hopefully in a couple of years (sooner I hope), by helping users see that things change in the world wide web, by showing them the way to a better browsing experience and informing them in a way that does not offend them, we might see a browser statistic that does not include an ie6 25% market share in it!
PS: And also save web designers a lot of time…we have kids too you know.
Labels: browsers, education, web design, web standards
Notice! The Survey, 2008
Calling all designers, developers, information architects, project managers, writers, editors, marketers, and everyone else who makes websites. It is time once again to pool our information so as to begin sketching a true picture of the way our profession is practiced worldwide.
Possibly the most important invention of the past century, the web is undeniably one of the most robust engines of knowledge transfer, political and social change, artistic endeavor, and economic growth the world has seen.
Remove the web, and billions in trade disappear. Websites enable people who can’t walk to run to the store. They bring knowledge and freedom of thought to places where such things are scarce; make every person with a connection a citizen of the world; and allow every citizen to be heard.
http://www.alistapart.com/articles/survey2008
Labels: web design, web standards
The difference between Web Designers and Real users
By Nick Fassolas
Web designers have a naturally, distorted view of how people see and understand websites.
The way we look at the web pages given the fact that we design them is very different from they way they are used in the real world by real users.
To create projects that will operate in the real world, we first must understand how they will actually be used.
How designers consider and view the websites:
- We appreciate the balance, depth, abundance, and surprises.
- We enjoy the designs, the graphic part of the site and general design.
- We appreciate the original presentation even if it differs from our own design style.
- We persistently look with intensity on the screen for some time.
How users use web pages:
- Users move quickly because they do not want to look at the screen for a long time.
- They are impatient - tend to click on the first promising link, and often do not wait for pages to appear before they decide to go elsewhere.
- They don’t want to read the entire text; they just scan around looking for indications on what they want.
- They look for things that will help them do what they want to do!
These are fundamental and massive differences!
The way in which we as designers approach websites is almost alien, if not weird, next to how a common user does.
This is probably the main reason why there are so many poorly designed web sites.
Whenever a web designer looks at a design his mind and opinion about it changes. In addition, we look! we really look, like we would look at a work of art.
We begin to observe the subtle differences that we had not seen at first glance and then we begin to appreciate the game played between different colors, materials and layers of which a design is made of.
If we stay there for quite some time (which usually happens) we will virtually stop looking at the websites content and to what it offers to the user and dive deeper and further into the design details of the project.
Here goes the classic saying, “I saw the tree but missed the forest!”.
The Impact of the “deeper viewing style” of the designers:
- The user can’t navigate easily in this website
- The user can’t get the information that they are looking for
- The user gets dizzy and disorientated from to much movement and special FX!
- fled from the site with a sense of low self-esteem because they failed to find the contact page…thus felt stupid!
What should we do?
To create more effective web designs, friendly to the public eye; we should become more sympathetic towards the World Wide Web users who see our designs.
To do so we must start to behave intelligently in three main points of planning:
- We must understand the environment of the actual use of a Web page (who will want to see it, what they like to do, etc.
- We must take into account the habits that users adopt in order to see and use the websites we design.
- We must ensure that users leave a website we have designed satisfied! That they were able to successfully navigate it with smoothness and ease and were able to find all the information they came here for.
These three points are essential and summarize what we as designers and developers need to do to users.
How to design for the World Wide Web:
We should design according to how users really see and use the pages we create and not the way we would want them to see and use them.
The essence of design should not be to turn users into designers but to help them find what they are looking for and by doing so we may succeed into educating them user on modern design.
Of course if a web designer does not want to accept this, I recommend that he creates what ever design he wants and present it in a personal portfolio! So the rest of us designers can check it out with our “deeper viewing style”, and be amazed for hours and hours on how wonderful and innovative this design is! And worry not for trivial things such us text and contact links.
www.buildupper.com [ For designers only: Great flash site in foreign language, amazing concept, excellent work! couldn't find the contact button though! ]www.elf.od.ua [ For designers and users: Great CSS site in foreign language, easy to navigate, I could have easily bought something discarding the fact that I didn't know the language ] Labels: concepts, web design
Firefox 3 is here!
The development name for Mozilla Firefox 3.0 was
Gran Paradiso. "
Gran Paradiso", like other Firefox development names, is an actual place; in this case the second-highest mountain group in the
Graian Alps.
In 2006, the development team asked users to submit feature requests that they wish to be included in Firefox 3.
Download Day is here!
Set a Guinness World Record
Enjoy a Better Web
Sounds like a good deal, right? All you have to do to help us set the record for the most software downloaded in 24 hours is get Firefox 3 now – it’s that easy. We're not asking you to swallow a sword or to balance 30 spoons on your face, although that would be kind of awesome.
http://www.spreadfirefox.com/en-US/worldrecord
Labels: web design, web standards
What Everybody Ought to Know About Usability and Web Design
Below is a great article from blogdesignblog that is a guide for and about Usability and design in a website.
Even people who have no idea about usability feel the need to write articles about it to tell other people what they themselves should be doing. Usability has become a hot topic and everyone wants a piece of it by writing their own list of guidelines. Most of which end up just repeating what the other guy said. Yet even with the endless amount of articles on usability, there are still a lot of web designs that overlook easy ways to improve the usability of their design.
While there are many worthwhile guidelines to follow about usability, it really boils down to only two rule of thumbs. Those two are to make it easy to read and make it easy to find stuff. No matter what you do with your design, as long as you follow those two rule of thumbs then your design will be usable. Don’t stop there though and be satisfied. Take it to the next step and make it as aesthetic as possible and make it better all while still making sure your design follows the two guidelines.
Read the full post here: Blogdesignblog
Labels: web design, web standards
Keeping it simple ( CSS for starters )
Many designers have pointed out on many occasions that keeping it simple in css matters.
When you create a website design in a graphics platform the first thing you do is try to separate it in divs, but most of us end up creating too many of them. Think about it. Do you really need all this wrappers and content divs?
In my experience sometimes you do in other case you don’t, but let’s us focus in the case that you don’t.
We want to create a simple fixed 800px width layout that has a header, content, a sidebar and footer. In most cases the markup would look like this:
<body>
<div id="wrapper">
<div id="header">hello I am the header</div>
<div id="content">hi I am the content</div>
<div id="sidebar">hi I am the sidebar</div>
<div id="footer">don’t forget me I am the footer</div>
</div>
</body>
And the css would look like this:
body {
Text-align: center; /*centers everything on the page*/
Margin: 0; /*removes default browser margins*/
Padding: 0; /*removes default browser paddings*/
Color: #fff; /*sets all text color on page to black*/
}
#wrapper {
Width: 800px; /*declares the fixed width*/
Margin: 0 auto; /*sets all of the margins */
Text-align: left; /*aligns everything inside the wrapper*/
background-color:#999; /*sets the background color*/
}
#header {
background-color:#555; /*sets the background color*/
Padding: 10px; /*adds some interior spacing*/
}
#content {
Float: left; /*floats the content on the left*/
Width: 560px; /*sets its width*/
Padding: 10px; /*adds some interior spacing*/
background-color:#ccc; /*sets the background color*/
}
#sidebar {
Float: right; /*floats the sidebar to the right*/
Width: 200px; /*sets its width*/
Padding: 10px; /*adds some interior spacing*/
background-color:#777; /*sets the background color*/
}
#footer {
Clear: both; /*clears all floats*/
background-color:#555; /*sets the background color*/
Padding: 10px; /*adds some interior spacing*/
}
Well, this does make sense! We have the body declaring that everything will be centered and then we have the wrapper aligning everything inside it on the left.
Everything is aligned and the layout sits graciously in the middle of your screen.
But is there another way?
What happens if we loose the wrapper, won't everything fall apart?
By removing the wrapper and giving attributes to our html in the markup, we can do this:
html {
Text-align: center; /*centers everything on the page*/
Color: #fff; /*sets all text color on page to white*/
}
body {
width:800px; /*declares the fixed width*/
Text-align: left; /*aligns everything left on the page*/
Margin: 0 auto; /*removes default browser margins*/
Padding: 0; /*removes default browser paddings*/
}
#header, #footer, #content, #sidebar {
padding:10px; /*adds some interior spacing*/
}
#header, #footer {
background-color:#555; /*sets the background color*/
}
#content {
width:560px; /*declares the fixed width*/
background-color:#ccc; /*sets the background color*/
}
#sidebar {
width:200px; /*declares the fixed width*/
background-color:#777; /*sets the background color*/
}
We can give our divs not only an id but a class also. We can create these additional classes and use them in the markup when we need them:
.left_float {
Float: left;
}
.right_float {
Float: right
}
.clear_all {
Clear: both;
}
In this case we need them here:
<div id="content" class="left_float">hi I am the content</div>
<div id="sidebar" class="right_float">hi I am the sidebar</div>
<div id="footer" class="clear_all">don’t forget me I am the footer</div>
By doing this we get the same result in our layout as before. Combining ids and classes may some times come in handy.
When we want more complex layouts and many different pages it might also be wise to give our body an id so we can manipulate its ancestors according to their parent body.
We could also go with positioning our divs, but that’s an entire different ball game in which I will write about soon.
In conclusion which is the easiest way to do it it’s totally up to you. This technique will work in other kinds of layouts other than a fixed width one.
Labels: css techniques, layouts, web design
Choosing between Flash & CSS
By Nick Fassolas When Macromedia acquired Future Splash Animator from FutureWave Software back in 1996 and renamed it to Macromedia Flash their focus shifted from marketing it as a graphics and media tool to promoting it as a Web application platform, adding scripting and data access capabilities to the player while attempting to retain its small footprint. Flash originally was made to animate graphics and to be used in movie or cartoon production.Web designers adopted the Flash technology mainly for 3 reasons: Freedom, Interactivity and no cross browser conflicts, of course by doing so they neglected other aspects that involve web development, such as: Accessibility, Usability and Search engine friendliness.Now let us get down to the facts. Which is good and for what purpose.Flash pros:Freedom: It provides designers an easy and creative way to create and manipulate graphics in any way they want, that power is unmatched. The ability to design without limitations that has been placed on designers by browsers or programming languages is a huge advantage. The handling of fonts is also something designers favour when choosing flash. It gives them the ability to embed any font they wish and have it display in any client browser regardless of whether they have the font installed on their machine.Interactivity: By empowering designers to use their imagination and creativity, flash driven sites can become more interactive in ways that other technologies only dream of. Innovative navigation menus, extreme multimedia capabilities and optical effects, video and audio integration, are some of the ways to provide a far more interactive environment for users. Greater Control:By implementing the use of vector graphics, flash gives designers the ability to create new - non rasterized - graphics that can be moved, morphed, bounce, slide and transform into anything, depending on the designers skill. Another thing to include in the greater control of flash is the ability to create a good looking web site faster than normal.Improved Integration:Flash allows you to integrate any multimedia file format into your site. For example, bitmap image formats (such as, GIF, JPEG, PNG, PCT, TIF), vector image formats (including FreeHand files, EPS, Illustrator files), and of course sound formats (WAV, AIF, MP3) can all be imported into a Flash movie.Flash cons:Usability: Users prefer not to “re-invent the wheel” when it comes to navigating a site. They prefer simple user interfaces that will smoothly and accurately lead them to what their looking for. Unfortunately designers that use flash most of the time neglect that parameter and create user interfaces that sometimes confuse even themselves. Other problems are: No back button support, No downloading of images, no control over the text size and no right click functions. There is also another problem that designers should consider; printing and selecting text in Flash movies is often not as simple (or familiar) to users as that on HTML sites. Search engine friendliness:Search engines use software robots (crawlers) to scan through a page and then index it on their database and although large search engines like Google now have some Flash indexing capabilities, these are still very limited which means that it will be nearly impossible to achieve high rankings with a Flash site. There are ways to show crawlers what the content of the page is but most of them are considered bad and in most cases they can get your site to be banned. (read more) Accessibility:Flash was designed for animation and other multimedia purposes, therefore it’s just not good for the blind and otherwise impaired. Ask yourself: Would you ban those people from entering your shop, institution or building? So why would you want to do it with your web site where it’s even easier to make your service available for everyone.Bandwidth and Load Time Constrains: The Creation of a flash site ends up - in most cases – being large in size and this leads into slower download times. As an example imagine a website that has a lot of images. All these images embed into the final flash movie and the truth is that users can interact with them, only by viewing them!Plug-In Required:Flash movies still require a separate plug-in installation in order to run in most browsers. Many companies do not allow their employees to install applications on their computers, which automatically denies some Flash site owners access to a portion of their potential user base.Powerful Hardware:Needless to say, that you need a powerful machine to be awarded by the animation capabilities of flash. This means, strong graphic card and powerful CPU running on your system. In a lot of cases people that use notebooks have a hard time using flash sites. Another problem is that flash can’t be viewed by mobile phones.What are the good uses of flash then?Flash is great when it’s used wisely in web sites. Flash is also great when you need to show a presentation, for example a demo of your product or to develop interactive games, like those found on sites for kids like Sesame Street, Nickelodeon, or Yahoo! Games. A typical good use of flash in a web site would be to dress it up using a small animation movie, or by limiting Flash to on-page accents and rich media. Finally flash is good for experimental web design, UI and artistic endeavours as well as rich multimedia content sites like you tube.What are the bad uses of flash then?The most common bad use of flash is the “splash or intro” screen. The flash intro screen in most cases discourages potential visitors from entering your site. Flash is not good for creating text–rich sites, e-shops or sites that showcase a large amount of products and need to use a lot of images to do so. Another bad use of flash would be the presentation of tubular data such as catalogues and schedule lists.Now let’s check out HTML/CSS technology.What’s HTML? : HTML, an initialism of Hyper Text Markup Language, is the predominant markup language for web pages. It provides a means to describe the structure of text-based information in a document — by denoting certain text as links, headings, paragraphs, lists, and so on — and to supplement that text with interactive forms, embedded images, and other objects. (Read more) What’s CSS? : Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML. (Read more) HTML/CSS pros:Separating design from content:HTML, as we know, was never meant to be a tool for page design, this is where stylesheets kick in.Cascading Styles sheets define HOW HTML elements are to be displayed! Allows you to create the look and format of a Website without affecting your content. This benefits both the developer as well as the user in many ways.Usability: This technology gives users exactly what they came looking for. Fast loading times, text-resizing flexibility, printer friendliness, easy link access, right click interactivity (ex: saving images), easy and smooth navigation, browser back button usage and good looks!Accessibility:By designing a web site using (X)HTML/CSS you can create an environment where all the information provided on it will be accessible to people with or without disabilities like low vision, colour blindness, other visual impairments etc. To ensure the accessibility of a website, use headings, links, bold text and bullet points and make sure they contain descriptive text. By giving the user the ability to change the colour of the web page you design, in his/her local machine, or changing the text size, you’re actually not only helping them but you re also getting your clients site more visitors. An example of accessibility in the world, other than the World Wide Web, is your television screen! Ever wondered why you have the option to change the colour, brightness and contrast of your screen? Imagine that… ten times better!Search engine friendliness:CSS has the ability to serve up content in its purest form, which makes it the best-suited technology for delivering pure content to search engines and legible text to text-only readers. Crawlers only read text! And text in a web page, except from delivering the information needed by users, also delivers the keywords that search engines need to find each web site. Easy maintenance & Flexibility:As Greg Rewis describes in Adobe Developer Center, "every web designer and developer has experienced that moment of panic when, after meticulously laying out a page—complete with numerous nested tables—the client requests a "small" change. This could be something as simple as "can you move that image a little to the left," or as dramatic as "I'm not happy with those headers, can you make their font larger—and while you're at it, how about changing their colour too?" If you're dealing with a limited number of pages, you can take a deep breath and spend the better part of an hour making those irritating changes. But when you are dealing with the larger sites, which have become the norm, a simple change is suddenly anything but simple."
By implementing CSS in your HTML page, changing font colours, background colours or images is much easier than before. Also by keeping the original markup of the page as clean as possible and semantically meaningful you can create multiple styles and even different layouts for a web site, as well as other devices such as mobile phones faster than ever. In the old days having to maintain a large web site was a developer’s nightmare. Developers can make modifications across an entire site by changing just a single file.HTML/CSS cons:Inconsistent browser support: This is the only main problem when designing using CSS.Different browsers will render CSS layout differently as a result of browser bugs or lack of support for CSS features. For example Microsoft Internet Explorer, whose older versions, as IE 6.0, lacked many CSS 2.0 properties, misinterpreted a significant number of important properties, such as width, height, and float. Numerous so-called CSS "hacks" must be implemented to achieve consistent layout among the most popular or commonly used user agents (browsers). Pixel precise layouts can sometimes be impossible to achieve across browsers. But things are looking better since the arrival of Modern browsers such as Firefox 2, IE7 and Opera.Lack of multiple backgrounds per element: Highly graphical designs require several background images for every element, and CSS can support only one. Therefore, developers have to choose between adding redundant wrappers around document elements, or dropping the visual effect. This is partially addressed in the working draft of the CSS3 backgrounds module, which is already supported in Safari and Konqueror.Programming language knowledge:Everybody can design using CSS, but in order to do this he/she must first learn the basic programming languages needed to write in (X)HTML and CSS.When should a designer use CSS?You can choose to use style sheets in any occasion when designing a web site. When should a designer not use CSS?When you want to show a presentation or rich multimedia format content, it is recommended to use Flash.HTML/CSS vs. FLASH: The bottom line.The bottom line is that there is no real debate to whether you choose the one technology over the other. As I said above, using both technologies at some level can do wonders. Since its arrival Flash has matured a lot. Its Action Script has evolved and who knows maybe in the future it will be Search engine friendly. Flash still remains the best choice to create multimedia interactivity, presentations, e-learning activities and web games. As for entire web sites created solely with Flash I would recommend otherwise. HTML in combination with CSS has brought web design and development back to what it was supposed to do in the first place. And that is to create flexible, easy to use and understand beautiful web sites that everybody and I mean EVERYBODY! can use.Labels: web design
My 3 Steps of web design
The Idea.
A unique idea is the first step that needs to be taken. This first step in the web design process requires, clear mind, talent, inspiration, attention to detail and a combination of web technologies mastering as well as a clear idea on who is going to be the one that visits your site.
The Creation.
After the process of gathering information about the project ends, putting it all together begins. First the Creation of the layout design in paper. The second step is about structuring and organizing the projects' material, then I move forward to the creation of the graphics, then the markup, then the styling and browser testing and last but not least the S.E.O.
The Solution.
Your website is ready, created according to the latest web standards to be accessible and user friendly so that all your visitors can find what they came here for...and guess what? it looks teriffic, and when you look at it, or show it to your friends or colleagues, a feeling of pride feels your heart.
Labels: web design
