The Visual Element Blog

Learn Web Standards with Opera and Yahoo!

noreply@blogger.com (Anonymous) — Wed, 23 Jul 2008 21:53:00 +0000

The people over at Opera Software (the Opera browser developers) and the Yahoo! Developer Network have released the Web Standards Curriculum to teach people how to use web standards when developing web sites. Right now it consists of 23 articles that discuss many topics including an introduction to web standards, design concepts, and HTML development. More to come in September...

I think that it's a great idea, and I've already taken a look at the Intro to Web Standards and Web Design Concepts articles. They are written in a clear non-jargon style that is easy to understand and remember.

This curriculum is supported by the Web Standards Project (WaSP) and many other organizations and universities, and it continues to gain support.

Find the curriculum here: http://www.opera.com/wsc/

Code it Right: XML Naming Conventions

noreply@blogger.com (Anonymous) — Thu, 03 Jul 2008 03:56:00 +0000

Name Your XML Elements Correctly!

Two blog posts ago I mentioned what XML was and why should you use it. In this post I'll discuss the naming conventions that you should follow when writing XML element names.

There are no reserved words that you need to avoid, as in JavaScript or programming languages.
Names can start with letters of the alphabet or non-Latin characters, upper case or lower case, or a dash. You can't start names with numbers or punctuation marks.
After the first character of the name only numbers, hyphens and periods are allowed.
Names can't have any spaces. For example:
```
<my   tag>
```
Don't use the letters "XML" as the beginning of a name - neither lower, upper or mixed case.
Don't use colons ( : )
Don't place a space after the opening <
```
<   this>
```
is not allowed. However, you can place a space before the closing >

It's important to know that XML tags are case sensitive. So you can't start an element like this: <Mytag> and close it with </mytag> You'll get an error. I would recommend you stick with only using lowercase, or your own style that you use consistently.

XML and Whitespace

If you add space in your element data (called PCDATA) then that space will not be stripped out. For example:

<mytag>This space           will not be stripped out, as it would be in HTML</mytag>

Stay tuned for more posts on well-formed XML.

Firefox 3 World Record Update

noreply@blogger.com (Anonymous) — Thu, 03 Jul 2008 02:48:00 +0000

I just got an email from SpreadFirefox.com stating that the official number of Firefox 3 downloads on Download day (June 17, 2008) was 8,002,530 downloads! That's going to be a tough record to beat!

What is XML and Why Should You Use It?

noreply@blogger.com (Anonymous) — Sun, 29 Jun 2008 18:52:00 +0000

What is XML?

Have you ever heard of XML and wondered what it is and how you could use it in web projects?

XML stands for Extensible Markup Language and has to do with the description and structuring of data. Basically, it's a set of rules for describing a syntax (language structure) that you can use to define data, exchange it with computer programs, and publish it to the Web or elsewhere.

XML is "extensible" because you can shape the way data is defined. Here's an example:

<full-name>
     <first-name>Sabrina</first-name>
     <last-name>Curzi</last-name>
</full-name>

If you know how to write HTML tags, then you probably recognize the tag syntax. In XML, you make up the tag names that describe the data. HTML is different because you use a predefined set of tags. It's also different because HTML is used to describe the presentation of data, not define it like XML does.

So Why Should You Use It?

One of the advantages of using XML is that you can separate the data from the display of it. This means that if you need to add or edit some data, you don't need to also change the code that displays it. The data is organized and structured so that finding information is easy. If you need to hand off your work to someone else, XML makes it easy for that other person to learn the structure of the data.

In my Five-Cities.com website, the Flash-based photo galleries use an XML document to list the photos and captions. In this document the location of the photo file is defined and I can type the caption directly into the document. This makes it very easy and quick to add and edit the contents of the photo gallery since I don't even need to touch the Flash file. Check it out here: www.five-cities.com

If you'd like to learn more about XML, here's a tutorial by the W3Schools: www.w3schools.com/xml/default.asp

Help Set the Firefox World Record!

noreply@blogger.com (Anonymous) — Sat, 14 Jun 2008 16:54:00 +0000

Be a part of Guinness Book world record breaking history! On Tuesday June 17, 2008, join thousands of other web users by downloading Firefox 3 - the newest version of the popular browser. By providing this download, Mozilla is attempting to set the record for the software with the most downloads in a single day.

I use Firefox very often and I find that the Web Developer, IE Tab, and Search Status plugins to be very useful. The Web Developer plugin helps you check for validation, outline page elements like tables and block elements, and view the CSS among many other features. The IE Tab lets you browse the Web in Internet Explorer by clicking on an IE tab in the tab bar (it would be nice to also have a Safari and Opera tab, too). And the Search Status plugin lets you view the Google PageRank, Google Category, Alexa popularity ranking, incoming links, related links and backward links from Google. All of these are very useful if you are concerned about search engine optimization.

Find out more about the world record for downloading Firefox 3 here.

Download Firefox plugins here.

Your Website Design Makes an Impression in the Blink of an Eye

noreply@blogger.com (Anonymous) — Sat, 07 Jun 2008 04:39:00 +0000

Just how fast do your website visitors make an opinion of your page's design? Researchers say that it takes less than a second - about 1/20th of a second to be more exact - for the brain to make an aesthetic judgement of a web page design. And if visitors like your overall design right off the bat, then they are more likely to stay on your page and read your content.

Whew! Talk about pressure! As a web designer this behavioral information is important to keep in mind. A customer's first impression of a business is often made on the web, so if this impression is negative you may have lost a potential sale. Another study found that a clean, professional look increases the credibility of a site.

If you'd like to read more, here is a link to a related article.

Dreamweaver CS4 Beta Release!

noreply@blogger.com (Anonymous) — Fri, 30 May 2008 03:58:00 +0000

Adobe released Dreamweaver CS4 Beta version last Tuesday for public download. The most noticeable feature is the interface makeover. You can choose to have more preset workspaces, such as app developer. Another noticeable (and nice) feature is the related files toolbar that shows the all files related to the opened file and lets you navigate among all of them.

The properties inspector also handles CSS development better than the previous version. There is the code navigator that works similarly to the CSS styles palette that shows the style rules of certain elements.

Live View is a new feature that allows you to display dynamic data without having to open a browser. And you can also "freeze" the JavaScript which helps when debugging.

Use your Dreamweaver CS3 serial number to use the beta until the full version is shipped, or use it for 48 hours if you don't have the previous version. Here's the link to the Adobe Labs download to try it out: http://www.adobe.com/cfusion/entitlement/index.cfm?e=labs_dreamweavercs4

Boring Headlines = Lost Visitors

noreply@blogger.com (Anonymous) — Wed, 21 May 2008 00:19:00 +0000

It's true, if your Web site's headlines are dull then you can be assured that you will lose many visitors' attention and they will eventually leave - usually right away. As I mentioned in my previous post, visitors quickly scan the page to find the elements that stick out the most, and headlines are probably the first they look at. If these headlines are not compelling, the visitor will most likely not be motivated enough to read on.

Here are some tips to make sure your headlines have punch:

Be bold and compelling - make sure that they grab your visitor's attention ASAP.

Include keywords that your target audience is mostly likely to use while searching for your site.

Be clear and concise.

Write them with the target audience's needs in mind, not yours.

Always keep your target audience's needs in mind when writing headlines and other content. It's helpful to make up personas (fictitious people that represent your target audience) when planning out the Web site. They help to keep you on track.

Web Readers Don't Read - They Scan

noreply@blogger.com (Anonymous) — Tue, 13 May 2008 18:25:00 +0000

It has been proven that the majority of Web site visitors don't read each and every single paragraph put in a Web page. Rather, they scan it looking for information that they want. They'll look at the elements that stand out the most, such as headlines, subtitles, links, lists, images, and bold or different color text. Visitors do this quickly, and they'll usually only stay on a page for less than a minute and leave if they don't find what they are looking for.

I'm sure that you yourself do this without thinking about it. It's true that reading on screen makes it tiring for eyes and slows down the reading process.

Here are some tips in improving the effectiveness of writing Web text:

Write concisely - make your text short and to the point.
Add an appropriate amount of whitespace between paragraphs.
Use bulleted lists this this one.
Add headings and bold or different color keywords that stand out from the rest of the text.
Place the most important and relevant keywords near the top of the page where readers tend to begin scanning.

Using these tips will greatly increase the readability of Web site text. It's important to understand how people use the Web and then design pages accordingly. After all, without visitors a Web site is useless.

Get to Know Your Target Audience

noreply@blogger.com (Anonymous) — Wed, 07 May 2008 00:34:00 +0000

When beginning the Web design process it is important to find out who the target audience is. Who will most likely come to your site and why? The answer to this question will greatly increase your chance of building a successful and highly usable Web site.

In the planning phase of the project, a designer should try to find out as much as s/he can about the target audience demographics:

age
gender
income/occupation
how they connect to the Internet (bandwidth)
screen resolutions
browsers used
other technical capabilities

This is just a short list and there will be other aspects to discover depending on the type of Web site project. This information will keep the designer(s) focused on who they are designing for.

It is also very helpful to create a scenario of what a visitor will want to do when they visit the site. What are the main reasons the visitor will visit your site? Is it because they want to learn more about your product or service? Or do they want to contact your customer service department for help with their purchase? Planning for these events will greatly increase site usability - which ultimately means happy (and returning) customers.

Don't Make Your Email Newsletter look like Spam

noreply@blogger.com (Anonymous) — Sun, 04 May 2008 16:49:00 +0000

Email maketing is an important way to connect with your customers. If you're familiar with the ROI of email marketing, then you know that sending email is a very good investment. But one of the obstacles of getting your email received, opened, and responded to is to make sure your email does not look like spam.

One of the ways to make your email look less like spam is to come up with an effective subject line. Don't make it look like an ad - people usually start deleting ads when they first open up their email program. Put keywords that highlight the most important information of your email in your subject line, but avoid using spam words and symbols that spam blockers usually look out for such as:
FREE
Saving
Guaranteed
$

Use a spam checker before sending out email. Some sites on the Web offer this as a free service. When you send your email message to this kind of service, it will be analyzed and then a score will be sent back to you. Depending on which service you choose, you may be sent recommedations on how to improve your score. Spam checkers are usually included in mail list software programs, so you may want to invest in one.

Make sure you personalize the "To" and "From" headings in your email. This gives your email a more personal impression. People are less likely to delete email that has a "From" heading with an email address they don't recognize. Use your name instead.

If you are interested in sending email for your business, I offer an Internet Marketing consultation service and I will be happy to assist you in creating a successful email campaign. Visit my Web site at: http://www.the-visual-element.com/ for more information.

Web Design Contracts

noreply@blogger.com (Anonymous) — Tue, 29 Apr 2008 18:27:00 +0000

If you have ever hired a Web designer/developer or other type of independent contractor, or if you have done work as a freelance designer/developer then chances are you have had to sign a contract. In this post I want to briefly go over the most important clauses that need to be included in a Web design contract between a client and an independent contractor.

Warranties and Indemnification: The designer needs to warrant (promise) that any of the content or other page elements that he/she designs will not infringe on any copyright laws. In return, the client needs to assure that any content he/she gives to the designer for placement in the site doesn't infringe on any copyrights as well.
Payment Terms: The designer should describe how he/she will bill the client for services, as well as how any defaults will be dealt with. Personally, I also put in a Late Payment clause in my contracts.
Limitation of Liability: If something were to go wrong with the Web site, the designer can limit his/her responsibility to the client. This clause should make clear that the designer won't be liable for any damages (such as a lawsuit brought by a 3rd party). And, the designer's total liability should not be more than the total amount of the project.

There will be many other clauses to put in the contract that will also be important, but you should especially look out for the 3 I mentioned above if you decide to have someone else (like a lawyer if you can afford it) draft it or buy one. I know that all this legal stuff may be confusing, but it's important to understand what you might be getting into if anything ever goes wrong.

A great place to start if you are looking for contracts is the Nolo Web site
I also found a great book if you are interested in copyright law: Legal Guide to Web & Software Development by Attorney Stephen Fishman

Disclaimer: please note that I am not a lawyer. If you have any concerns about the issues mentioned in this post, then please contact a lawyer. By providing the link above, I do not guarantee, approve, or endorse the information or products available at the site, nor does a link indicate any association by the linked site to myself.

Do You Know the Copyright Law?

noreply@blogger.com (Anonymous) — Fri, 25 Apr 2008 18:10:00 +0000

Do you know what is copyrightable and what isn't? The Copyright Law of 1976 protects original works such as written and musical works, dramatic works, movies, photos, graphics, and sculptural works. Things that aren't copyrightable (but some of these may be able to be patented or trademarked) include facts, ideas, government works, titles, names, slogans, symbols, designs, and lists.
In a Web site, content such as the text, images, video and animations are protected, and if the site is database driven the database is also protected. According to the copyright law, the creator of the work (the designer) is the copyright owner unless the contract with the client specifies otherwise. That means that the designer grants the client with a license to use the Web site design. And that also means that even though the Web site may bear the copyright symbol, the year and the client's name, that copyright only covers the content that the client provided.

Regarding Web Site Redesigns
If the designer is the copyright owner, then he/she has certain rights under the Copyright Act. Some of these are the right to reproduce the site and the right to make derivative works. So if a site needs to be redesigned by the original designer who created it, then there would be no infringement of the copyright. But if the client hires a different designer to redesign the site, and the other designer uses some of the graphics that the original designer created without permission, then there may be an infringement of the original designer's copyright. It is important to understand what the contract stipulates about copyright ownership.

Please note that I am not a lawyer and that laws may vary within different jurisdictions. It's best to discuss these issues with a lawyer if you have questions or concerns.

IE8 Beta 1 Released!

noreply@blogger.com (Anonymous) — Fri, 18 Apr 2008 20:21:00 +0000

I have an answer for my question in my Jan. 4, 2008 posting - when will IE8 be released? Well, it has been (at least the public beta version 1 for Windows) and I have downloaded it to check it out. You can download it here: http://www.microsoft.com/windows/products/winfamily/ie/ie8/readiness/Install.htm You can also check out the toolkit that describes features, tools and resources that Web developers will find useful. Some new features for end-users will include "Activites" where users can look up information quickly on a page or send info (such as posting info into their blog), "Webslices" which is like subscribing to RSS feeds, a made-over Favorites bar, automatic crash recovery to help prevent loss (Firefox and other browsers have this already), and improved security features.

I've installed the beta version and I noticed that you can emulate IE7 (which is nice for testing) if you want to browse in version 7. The look of the browser itself - the chrome- looks very similar to IE7. I'm going to check it out more to see if it does really live up to the improved Web standards support that MS claims it has.

Why I Like the Opera Browser

noreply@blogger.com (Anonymous) — Sun, 13 Apr 2008 16:01:00 +0000

I've been using Opera for quite some time now, and I have to say that I prefer it over the other major browsers. The first and foremost reason is that it supports Web standards. It was the second browser to pass the Acid 2 test: http://www.webstandards.org/files/acid2/test.html (check to see if the browser you're using is standards compliant.) The development team for Opera proudly announced that it has passed the new Acid 3 test ( http://www.sitepoint.com/blogs/2008/04/01/opera-and-safari-pass-acid3-test/ ) Opera is one of the browsers I use to test pages.
It is also very user-friendly. The features I like best are the magic wand tool that automatically enters your username and password for sites that require them and then proceeds to the next page without you having to press enter or the "login" button. I also like the fact that it remembers the last page that you visited and asks if you want to open it again or go to your home page when you open the browser. The transfers page shows the progress of files being downloaded, and the Speed Dial page helps you jump quickly to your favorite Web pages. I think that users will also appreciate the security and speed. You can also have an Opera email account, blog, download cool widgets, and photosharing. And, it's free!
I know that this post is starting to sound like an advertisement for Opera, but like everything else there are drawbacks (but they are small). Unfortunately not all Web page designers/developers write code to support the browser (probably because the majority of Web users use IE). Despite this, I will still continue to use it.

The Visual Element Web Site Launch!

noreply@blogger.com (Anonymous) — Tue, 08 Apr 2008 22:56:00 +0000

It's official! My Web design business Web site has launched! In it you will find important information about the services I offer as well as my Web design, photography and graphics portfolio. Check it out here: www.the-visual-element.com

I'm also excited to announce that I am one class away from getting my Web Technologies certificate from IWA! I'll let you know when I get it...

Earth Hour - Lights out!

noreply@blogger.com (Anonymous) — Sun, 30 Mar 2008 04:58:00 +0000

Did you participate in Earth Hour? We did! My family and I played Monopoly in candlelight for the hour. It was great to feel like we're doing our small (but significant) part to help reduce carbon dioxide emissions that fuel climate change. And it was a great way to spend time together. We already use compact flourescent bulbs and we don't drive in our car 2-3 days a week. Earth Hour should be weekly!
I think that there should have been more publicity about Earth Hour because I hadn't seen anything in the local news about it. Hopefully next time more people around here will take part. I have signed up The Visual Element as a supporter for the 2009 event.

Web Standards and IE8 - A "Milestone"

noreply@blogger.com (Anonymous) — Sat, 05 Jan 2008 00:44:00 +0000

According to the IE Blog on December 19, 2007, IE8 renders the WaSP Acid2 test correctly! For those of you who may not know what WaSP is or the Acid2 test (sounds like a chemistry experiment), the Web Standards Project (WaSP) has created a test (Acid2) to see how modern web browsers render certain features of web standards that web designers/developers have wanted the browsers to have. If the browser passes the test, an image of a smiley face appears. If the browsers fails, the smiley face is distorted and/or appears red.
I tested all 4 of the browsers I have installed and I found that IE7 and Firefox2 both show distorted smiley images, while Safari (for Windows) and Opera 9 both pass the test. Here's the test: http://www.webstandards.org/files/acid2/test.html
But going back to IE8, I think that this is great news for the world of web design/development because it means that there will be less late night hair pulling from trying to use hacks just because IE won't play nice. But when will IE8 be available...?

Vector Magic

noreply@blogger.com (Anonymous) — Fri, 16 Nov 2007 02:14:00 +0000

Standford's bitmap to vector project that is mentioned in my previous post is called Vector Magic and can be found here: http://vectormagic.stanford.edu/ It's still in beta but it works great. Take a look at the samples and you'll see how well it converts graphics and even photos to vectors. I'm planning to turn my bitmap logo to vector by using this project. I tried to do it in Illustrator CS3 by using the auto trace but I was not impressed.

Online auto-tracing tool (converts bitmaps to vector art)

noreply@blogger.com (Anonymous) — Fri, 16 Nov 2007 02:12:00 +0000

Stanford University research project on converting bitmap images to vector art, aka "auto tracing" or "automatic vectorization". Similar to Adobe Illustrator's Live Trace and CorelDRAW's PowerTRACE but works better in many cases. Upload image and get a converted result (EPS/SVG) in a few moments.

read more | digg story

Web Site Redesign-O-Rama

noreply@blogger.com (Anonymous) — Fri, 09 Nov 2007 05:36:00 +0000

Shame on me for not blogging for over a month! :)
I have been noticing lately that the web sites of many major businesses have been redesigned, especially the sites of financial institutions, credit card companies, and even eBay and Amazon.com. It seems like these businesses are jumping on the bandwagon and changing their sites so that they will be more fresh/accessible/usable.
For example, eBay's new home page interface is noticeably less cluttered. The most important elements (search bar, categories list) now have more breathing room and are quickly found. There is also a customized "My eBay at a glance" section that remembers your recent activities.
No matter how well the site is redesigned the home page should always contain the most important aspects of the client's business or organization, and they should be made to be easily noticed. That way, the user knows whose site it is and what it's all about within seconds.

Web Sites & Blogs I Visit Daily

noreply@blogger.com (Anonymous) — Mon, 01 Oct 2007 00:29:00 +0000

I am usually on the Web daily and I have a sort of ritual of which sites and blogs I visit. First I check out Scott Kelby's blog The Photoshop Insider. Mr. Kelby posts tips and tricks, advice, and news about (you guessed it) Photoshop. In a recent post he discusses the new Nikon D3 that he got to shoot. He says that the quality is great - low noise and he noticed no loss of quality around the edges. This model is only available for pre-order at the moment.
I also visit Dave Cross's blog where he talks about news and gives advice about Adobe software.

Next I like to check out Matt Kloskowski's Lightroom Killer Tips. I recently started to use Lightroom to organize and process my photos, and it works hand-in-hand with Photoshop. I can open the photos in Photoshop easily to do editing that I can't do in Lightroom. Matt gives some some valuable advice on how to use this software in the form of written and video tutorials.

Did you notice that the authors I mentioned are the Photoshop Guys on Photoshop User TV? I always check out their video podcast every Monday. I was lucky enough to be the winner of Episode 98's contest!

I also check out A List Apart for web design news. I find the articles to be very informative. Some articles are written by experts like Eric Meyer and Aaron Gustafson.

Until next time...

Gift Idea for Gardeners

noreply@blogger.com (Anonymous) — Sun, 16 Sep 2007 01:45:00 +0000

I came up with a great gift idea for people who have gardens or grow flowers - take photos of their flowers and frame them. I did this for my mom who grows roses and she really appreciated them. Here's an example.

I took the photos of the roses, and then in Photoshop I added a subtle diffuse glow filter to soften the image. I made duplicate layers with different effects and then used blend modes to bring out the colors. After getting the right effect I printed them on glossy paper and put them in nice wooden frames.

This "personalized" gift allows the person to enjoy the fruit of their labor all year long (and show off their green thumb!)

There are great tutorials for enhancing photos at the Planet Photoshop website, the Tutorialized website, and at the Photoshop Cafe website.

Welcome to The Visual Element Blog!

noreply@blogger.com (Anonymous) — Sun, 16 Sep 2007 01:02:00 +0000

Greetings! My name is Sabrina Curzi and I am the creator of The Visual Element - design services for web and print. Every week in this blog you will find design and photography news, tips, ideas and anything of interest that I may come across and would like to share with you. I hope that you find it interesting, and please feel free to make comments. I appreciate your feedback.

A little about me: I'm a wife and mother of 2 beautiful daughters - Isis age 4 and Aubriella age 3 months. I've been been studying and designing web sites and graphics for over 5 years. I have an AA in Liberal Arts from Allan Hancock College in Santa Maria, CA and a BA in Visual Communication from the American Intercontinental University (AIU). I am a member of the International Webmasters Association and the National Association of Photoshop Professionals. My hobbies include digital photography (see my photography portfolio here ) and sewing. I love to watch comedy, suspense, and horror films.