http://vandelaydesign.com/blog/tools/web-forms/
http://www.onextrapixel.com/2010/09/24/50-pattern-sets-to-spice-up-your-websites-background/
03 November 2010
61: Ego Marketing
Ego Marketing is:
1. Showing off product coolness. Splash and buzz is like a firework (short.)
2. Spends too much of early critical resources on big-bang tradeshows and ads.
Burn Rate: the rate at which a start-up company spends capital to finance operations before generating positive cash flow from operations.
Organic Marketing: Results are what matter:
1. What really matters is where the product is installed and how it's holding up.
2. First seed the market with a minimum of installations and corresponding reputable testimonials. This builds a portfolio of endorsers and testimonials.
3. Target resources for cost efficiency. "Low-fidelity" marketing communications can outperform glitz.
1. Showing off product coolness. Splash and buzz is like a firework (short.)
2. Spends too much of early critical resources on big-bang tradeshows and ads.
Burn Rate: the rate at which a start-up company spends capital to finance operations before generating positive cash flow from operations.
Organic Marketing: Results are what matter:
1. What really matters is where the product is installed and how it's holding up.
2. First seed the market with a minimum of installations and corresponding reputable testimonials. This builds a portfolio of endorsers and testimonials.
3. Target resources for cost efficiency. "Low-fidelity" marketing communications can outperform glitz.
02 November 2010
60: Tables for small sites.
Do tables fit the bill for small sites?
- Tables always work. There is less code to learn, so chances of building it wrong are reduced.
- Table code is easier to understand. Doing HTML tables is quite straightforward, you have the
tags that make things easier to follow. CSS DIVs look the same!
- Tables designs look the same in most browsers. Being a very basic code even IE6 does a decent job in displaying the content
- Table designs make no difference for the customers. Most people don’t know how the code behind a site is made.
Another good reference:
http://www.noupe.com/how-tos/better-ui-design-proper-use-of-tables.html
07 September 2010
59: Web Trends 2010 - 2011
http://ezinearticles.com/?Web-Design-in-2010-2011---Analysis&id=4315617
COMMENTARY
1. The days of static design visuals are dead
This is a gross overstatement and idiotic. This author is an Utopian Idealist. Most of the technologies spoken of are still in their infancy and even when they become mature, they will not replace static images in every case. The visual noise generated would be a "screech."
2. Grid-based designs, Mobile Designs, Retro Designs are gaining popularity as well.
Grid designs have always been important to ALL design. Mobile design from real surveys of real web designers show there is a resistance by designers to support small-screen technology. I anticipate mobile hardware developers will find workarounds to display traditional websites, not the other way around. Retro Designs could mean low-tech design or actual "vintage" theming. They aren't clear about this --but both are popular.
3. Print Design influence
This paragraph is obvious and been the goal of web designers for years. It's just now they can finally do some of those things. So it's not really a trend but a longed for goal.
I heard a good statement from a seminar on web design in 2011. The comment was that web designers are always trying to make "paper behind glass." That meaning the web is a different medium and shouldn't try into mimic another. Quit wasting time on pixel perfect design. The web was never intended for that type of perfection. Think of the web as a 1960's typewriter with the same limitations as far as design is concerned. This will prove less frustrating.
4. Faster and better Web browsers
Big deal! This is the natural progress of things.
5. Growth of community-oriented Platforms
I see these social places as approaching bloat and there has been some negative blow back of "disconnecting" as Twitter and Facebook become more "corporate big brother."
6. Interactive Designs
"Horizontal scroll bars have been out there for a decade, but today it feels that they are gaining a new context. The move to horizontal scroll bars is probably an attempt among some designers to provide a more distinct user experience."
Interestingly, "horizontal scroll" is real easy to do in Frames and I've been watching people struggle in complicated code to do something that is simple with "low-tech." I'd like to do something with this. I've experimented with it before. It's great for displaying side-by-side photos --like for portfolios or products.
7. Slab Typefaces
"These are relatively new as in the past logos and headers were smaller and more understated by web designers. However, combined with the trend toward larger headers, slab typefaces demand the reader to take notice."
I see this trend and I like it. It means using some built type for headlines.
8. Rich and strong Typography
This is "hoo-ha" fluffy stuff.
9. Recent trends
All most all of the trends they talk about in this paragraph are bloated fads. But I agree with one thing very much, "Introduction blocks (place the most important message of the website right there and thus make sure that readers get the message as quickly as possible.) will continue to grow in this year."
This is putting the "market positioning strategy" right up front. It key in my philosophy for HOME pages.
10. More Personalization
Uh. Not on small sites. Sorry.
COMMENTARY
1. The days of static design visuals are dead
This is a gross overstatement and idiotic. This author is an Utopian Idealist. Most of the technologies spoken of are still in their infancy and even when they become mature, they will not replace static images in every case. The visual noise generated would be a "screech."
2. Grid-based designs, Mobile Designs, Retro Designs are gaining popularity as well.
Grid designs have always been important to ALL design. Mobile design from real surveys of real web designers show there is a resistance by designers to support small-screen technology. I anticipate mobile hardware developers will find workarounds to display traditional websites, not the other way around. Retro Designs could mean low-tech design or actual "vintage" theming. They aren't clear about this --but both are popular.
3. Print Design influence
This paragraph is obvious and been the goal of web designers for years. It's just now they can finally do some of those things. So it's not really a trend but a longed for goal.
I heard a good statement from a seminar on web design in 2011. The comment was that web designers are always trying to make "paper behind glass." That meaning the web is a different medium and shouldn't try into mimic another. Quit wasting time on pixel perfect design. The web was never intended for that type of perfection. Think of the web as a 1960's typewriter with the same limitations as far as design is concerned. This will prove less frustrating.
4. Faster and better Web browsers
Big deal! This is the natural progress of things.
5. Growth of community-oriented Platforms
I see these social places as approaching bloat and there has been some negative blow back of "disconnecting" as Twitter and Facebook become more "corporate big brother."
6. Interactive Designs
"Horizontal scroll bars have been out there for a decade, but today it feels that they are gaining a new context. The move to horizontal scroll bars is probably an attempt among some designers to provide a more distinct user experience."
Interestingly, "horizontal scroll" is real easy to do in Frames and I've been watching people struggle in complicated code to do something that is simple with "low-tech." I'd like to do something with this. I've experimented with it before. It's great for displaying side-by-side photos --like for portfolios or products.
7. Slab Typefaces
"These are relatively new as in the past logos and headers were smaller and more understated by web designers. However, combined with the trend toward larger headers, slab typefaces demand the reader to take notice."
I see this trend and I like it. It means using some built type for headlines.
8. Rich and strong Typography
This is "hoo-ha" fluffy stuff.
9. Recent trends
All most all of the trends they talk about in this paragraph are bloated fads. But I agree with one thing very much, "Introduction blocks (place the most important message of the website right there and thus make sure that readers get the message as quickly as possible.) will continue to grow in this year."
This is putting the "market positioning strategy" right up front. It key in my philosophy for HOME pages.
10. More Personalization
Uh. Not on small sites. Sorry.
05 August 2010
58: Another lo-band website deconstructed
A 48.3K home page experiment. Here are the 39.4K of graphic components:
 |
| 7K bamboo |
 |
| 13.8K stone stack |
 |
| 3.1K logo |
 |
| 15K tile |
 |
| 307B X 4 corners |
 |
| Orange flare 3.2K |
30 July 2010
57: Minimalist web design
Beautiful but not bare.
Minimalism reduces user distraction. Too many page elements, is visual noise. A minimalist design puts the focus squarely on the content. Any splash of color on a black-and-white design, for example, is sure to get the user’s attention. The color itself becomes the focal point. The graphic element brings color, texture and/or shape. It is the most important element.
How to Minimize Content
Cut out anything that is not essential. Throw out as much as possible.
* Icons or graphics for social media, or a social media section at all
* Taglines and supplementary descriptions or introductions
* “Featured,” “Popular” and “Recent” lists (including Twitter and RSS feed lists)
* Pages with more than three major sections (e.g. “Introduction,” “About” and “Services”)
* Secondary navigation pages.
How to Simplify the Design
Minimalist designs should have little texture, color, shape, lines, content or type. Go too bare, though, and the design will be boring. Rather than dumping everything out, give the design appeal by making just one important feature the focal point. Choose what that focus will be, and keep the tips below in mind as you work through your design.
* Decide on what content you absolutely need.
* In a list, prioritize the content.
* Sketch based on your list to experiment with the best visual hierarchy.
White space is practically synonymous with minimalism.
No matter how creative you are with it, a minimalist design without plenty of white space is not really minimalist at all. So, be sure to add more white space around elements than you normally would. The space is needed to balance the few elements that will appear on the page.
Balance, Alignment, Contrast
While much of the load can be carried by white space and a good layout, special care should be taken with the fundamentals of design. The three biggest related to minimalism are balance, alignment and contrast. It does not need supplementary visuals to look “finished.”
Black and White
One trends is extensive use of black and white. This is obvious enough: color should be simplified along with texture, shape and content. But it can be overdone and look boring. Think of how to stay minimalist even with strong use of color.
Typography-based Web design is closely tied to minimalism.
When designers have very little else to excite the user, they often seize on interesting typography. You could even go so far as to use typography as the sole visual element. Look for ways to make typography enhance the design while remaining unique.
Flash
A surprising number of minimalist web designs are Flash-based. With so little else for visual stimulation, a design could benefit from subtle animation (such as text fading in and out) without being overpowering. Also, Flash removes certain limitations in the design process.
negative-effects of minimalism
It’s Just a Style
Simplifying a website is one thing, but minimalism on its own is just a style like grunge, illustrated and sleek Web 2.0 are styles. Not every design needs it.
Minimalism Is for “Artsy” Websites
Extreme minimalism is common in portfolios and other creative-type websites. Minimalist design best suits modern websites in creative industries.
The Ordinary Web User
the majority of Internet users are not creatives. Many non-designers don’t appreciate minimalist design or even find it visually appealing.
Content-Rich vs. Cluttered
We often mistake non-minimalist websites as being cluttered, and ugly. Cluttered websites are confusing and unattractive. Even experienced designers think first to remove elements when something is “missing.”
Cluttered vs. Content-Heavy
A cluttered design has little white space; its typographic styles, colors and other elements clash; it is a disorganized mess; the layout is ineffective or absent; and content is excessive, not rich.
Minimalism is undoubtedly effective. But it’s not for everyone, and some people prefer other styles.
Below are a few common mistakes made with minimalist design:
* Self-Defeating Usability
Minimalist websites should be the most usable websites, because nothing is there to confuse or get in the way; and the text is thought out extra carefully. Often though, with little on the page, visitors have difficulty figuring out where to go. So, attention to visual hierarchy is a must. Also, getting creative with the navigation is fine, but don’t get too creative.
* Minimal Design or Minimal Interest?
Beautifully minimal or just plain boring? You can make a minimalist design interesting in a number of ways, while preserving its calm and simple appeal.
* Is the Message Strong Enough?
Minimalist designs are best for adorning messages that are compelling on their own. The idea is to strip the website of any excess content or elements that would detract from the message. If the message is weak, ill-conceived or absent, then a minimalist design may not be the right choice. Brochure websites are an example of this: basic information with no distinct message.
We improve a design by simplifying it: that’s a basic design rule.
Minimalism reduces user distraction. Too many page elements, is visual noise. A minimalist design puts the focus squarely on the content. Any splash of color on a black-and-white design, for example, is sure to get the user’s attention. The color itself becomes the focal point. The graphic element brings color, texture and/or shape. It is the most important element.
How to Minimize Content
Cut out anything that is not essential. Throw out as much as possible.
* Icons or graphics for social media, or a social media section at all
* Taglines and supplementary descriptions or introductions
* “Featured,” “Popular” and “Recent” lists (including Twitter and RSS feed lists)
* Pages with more than three major sections (e.g. “Introduction,” “About” and “Services”)
* Secondary navigation pages.
How to Simplify the Design
Minimalist designs should have little texture, color, shape, lines, content or type. Go too bare, though, and the design will be boring. Rather than dumping everything out, give the design appeal by making just one important feature the focal point. Choose what that focus will be, and keep the tips below in mind as you work through your design.
* Decide on what content you absolutely need.
* In a list, prioritize the content.
* Sketch based on your list to experiment with the best visual hierarchy.
White space is practically synonymous with minimalism.
No matter how creative you are with it, a minimalist design without plenty of white space is not really minimalist at all. So, be sure to add more white space around elements than you normally would. The space is needed to balance the few elements that will appear on the page.
Balance, Alignment, Contrast
While much of the load can be carried by white space and a good layout, special care should be taken with the fundamentals of design. The three biggest related to minimalism are balance, alignment and contrast. It does not need supplementary visuals to look “finished.”
Black and White
One trends is extensive use of black and white. This is obvious enough: color should be simplified along with texture, shape and content. But it can be overdone and look boring. Think of how to stay minimalist even with strong use of color.
Typography-based Web design is closely tied to minimalism.
When designers have very little else to excite the user, they often seize on interesting typography. You could even go so far as to use typography as the sole visual element. Look for ways to make typography enhance the design while remaining unique.
Flash
A surprising number of minimalist web designs are Flash-based. With so little else for visual stimulation, a design could benefit from subtle animation (such as text fading in and out) without being overpowering. Also, Flash removes certain limitations in the design process.
negative-effects of minimalism
It’s Just a Style
Simplifying a website is one thing, but minimalism on its own is just a style like grunge, illustrated and sleek Web 2.0 are styles. Not every design needs it.
Minimalism Is for “Artsy” Websites
Extreme minimalism is common in portfolios and other creative-type websites. Minimalist design best suits modern websites in creative industries.
The Ordinary Web User
the majority of Internet users are not creatives. Many non-designers don’t appreciate minimalist design or even find it visually appealing.
Content-Rich vs. Cluttered
We often mistake non-minimalist websites as being cluttered, and ugly. Cluttered websites are confusing and unattractive. Even experienced designers think first to remove elements when something is “missing.”
Cluttered vs. Content-Heavy
A cluttered design has little white space; its typographic styles, colors and other elements clash; it is a disorganized mess; the layout is ineffective or absent; and content is excessive, not rich.
Minimalism is undoubtedly effective. But it’s not for everyone, and some people prefer other styles.
Below are a few common mistakes made with minimalist design:
* Self-Defeating Usability
Minimalist websites should be the most usable websites, because nothing is there to confuse or get in the way; and the text is thought out extra carefully. Often though, with little on the page, visitors have difficulty figuring out where to go. So, attention to visual hierarchy is a must. Also, getting creative with the navigation is fine, but don’t get too creative.
* Minimal Design or Minimal Interest?
Beautifully minimal or just plain boring? You can make a minimalist design interesting in a number of ways, while preserving its calm and simple appeal.
* Is the Message Strong Enough?
Minimalist designs are best for adorning messages that are compelling on their own. The idea is to strip the website of any excess content or elements that would detract from the message. If the message is weak, ill-conceived or absent, then a minimalist design may not be the right choice. Brochure websites are an example of this: basic information with no distinct message.
We improve a design by simplifying it: that’s a basic design rule.
24 July 2010
56: Balancing Speed and Decoration
SPEED VS DECORATION
Web design is different from print design in typography, page layout, colors, and function. One of the key diferences is "speed" (meaning browser page load time.) Speed of comprehension is important in both. But functionally, if a webpage loads too slowly, the viewer will bail out and never see the website content. This is called the "poverty of attention." Simply, if there is too much artistic detail to load or absorb the visitor must block the "noise" or move on to a less complicated site.
Thus, decoration (image files) are conterproductive to speed. The ideal site would have no images to slow it down. But it would then be very boring.
There are two worlds needing BALANCE.
1. Speed versus any decoration (complexity.)
2. Classical decoration versus ornate decoration (complexity, again.)
Complexity seems to be the enemy. Unlimited or unrestrained creativity can be a barrier to understanding.
Classical design doesn't necessarily mean the load speed is fast. But when you strip a design of decoration to enhance speed, you end up with a more classical design.
Yet, decoration is perceived at subconscious speeds and influences how a user feels about a site: The First Impression. The aesthetics (body language) then is critical after getting past the speed barrier. If having endured the load time, at this moment a visitor once again decides whether to stay or leave. They instantly "feel" they've found the solution they were searching for. A positioning statement is a shortcut to that search motive. This is also called content relevance. If there is too much "site noise" they will not recognize or percieve the answer quick enough before "attention span" runs out.
There must be a minimal aesthetic applied in a discipled fashion (aka checklist) to achieve a balance of Classical and Expressive:
1) color (theme, complement, etc)
2) organics elements like foliage, rust, texture, etc.
3) lighting like shadow, depth, gradient, etc
4) legibility of text.
5) optimization of images.
Web design is different from print design in typography, page layout, colors, and function. One of the key diferences is "speed" (meaning browser page load time.) Speed of comprehension is important in both. But functionally, if a webpage loads too slowly, the viewer will bail out and never see the website content. This is called the "poverty of attention." Simply, if there is too much artistic detail to load or absorb the visitor must block the "noise" or move on to a less complicated site.
Thus, decoration (image files) are conterproductive to speed. The ideal site would have no images to slow it down. But it would then be very boring.
There are two worlds needing BALANCE.
1. Speed versus any decoration (complexity.)
2. Classical decoration versus ornate decoration (complexity, again.)
Complexity seems to be the enemy. Unlimited or unrestrained creativity can be a barrier to understanding.
Classical design doesn't necessarily mean the load speed is fast. But when you strip a design of decoration to enhance speed, you end up with a more classical design.
Yet, decoration is perceived at subconscious speeds and influences how a user feels about a site: The First Impression. The aesthetics (body language) then is critical after getting past the speed barrier. If having endured the load time, at this moment a visitor once again decides whether to stay or leave. They instantly "feel" they've found the solution they were searching for. A positioning statement is a shortcut to that search motive. This is also called content relevance. If there is too much "site noise" they will not recognize or percieve the answer quick enough before "attention span" runs out.
There must be a minimal aesthetic applied in a discipled fashion (aka checklist) to achieve a balance of Classical and Expressive:
1) color (theme, complement, etc)
2) organics elements like foliage, rust, texture, etc.
3) lighting like shadow, depth, gradient, etc
4) legibility of text.
5) optimization of images.
23 July 2010
21 July 2010
54: Aesthetics and Web Design
Classical Aesthetics are: good taste, pleasant, clean, clear, and symmetrical. It corresponds to "visual clarity."
Expressive Aesthetics are: creative, using special effects, original, complex, and fascinating. Users perceptions of the creativity, originality, and visual richness include ornamentation, character, and theme.
Complexity without order produces confusion; order without complexity produces boredom.
Classical and Expressive Aesthetics share two qualities of landscape design --order and complexity. Order is the "lawfulness" governing the relations among the design elements. Complexity is the large number of relationships among the elements. Human preference is for landscapes that "makes sense" (i.e. is clear and legible)) and the degree where it is stimulating. Good design strives to balance their degrees given the design context.
Perceptions of aesthetics and usability are highly correlated.
Classic design is strongly connected to perceived site usability while expressive design is less so. The classical is an philosophical idea and a usability principle. Beauty is confirmed when "form follows function."
The classical aesthetic originated from antiquity until the 18th century (Greek, Roman, etc.) These notions stress orderly and clear design. The expressive aesthetics are reflected by the designers' creativity and originality and by the skill to break design conventions. While both classifications of aesthetics are drawn from a pool of aesthetic judgments, they are clearly distinguishable from each other. Each of the aesthetic is measured by a five-item scale:
Pleasant design
Clear design
Clean design
Symmetric design
Fascinating design
Use of special effects
Original design
Complex design
Easy orientation
Easy to use
Easy to navigate
Clear design
Feel pleasure
Feel gratified
Site contains no mistakes
Site provides reliable information
Expressive Aesthetics are: creative, using special effects, original, complex, and fascinating. Users perceptions of the creativity, originality, and visual richness include ornamentation, character, and theme.
Complexity without order produces confusion; order without complexity produces boredom.
Classical and Expressive Aesthetics share two qualities of landscape design --order and complexity. Order is the "lawfulness" governing the relations among the design elements. Complexity is the large number of relationships among the elements. Human preference is for landscapes that "makes sense" (i.e. is clear and legible)) and the degree where it is stimulating. Good design strives to balance their degrees given the design context.
Perceptions of aesthetics and usability are highly correlated.
Classic design is strongly connected to perceived site usability while expressive design is less so. The classical is an philosophical idea and a usability principle. Beauty is confirmed when "form follows function."
The classical aesthetic originated from antiquity until the 18th century (Greek, Roman, etc.) These notions stress orderly and clear design. The expressive aesthetics are reflected by the designers' creativity and originality and by the skill to break design conventions. While both classifications of aesthetics are drawn from a pool of aesthetic judgments, they are clearly distinguishable from each other. Each of the aesthetic is measured by a five-item scale:
Factor 1: Classic aesthetics
Good TastePleasant design
Clear design
Clean design
Symmetric design
Factor 2: Expressive aesthetics
Creative designFascinating design
Use of special effects
Original design
Complex design
Factor 3: Usability
Convenient useEasy orientation
Easy to use
Easy to navigate
Clear design
Factor 4: Pleasurable interaction (Comfort?)
Feel joyfulFeel pleasure
Feel gratified
Factor 5: Service quality
Can count on siteSite contains no mistakes
Site provides reliable information
20 July 2010
53: Website Design & Aesthetics
Every graphic you use will slow down your site for its visitors.
According to some estimates, 20 percent of your visitors leave for every 10 seconds you ask them to wait for a page to download. That means, if 100 people arrive at your slow-loading page: 80 remain after 10 seconds; 64 remain after 20 seconds; 51 remain after 30 seconds; 41 remain after 40 seconds; 33 remain after 50 seconds; and after one minute you have lost all but 26 of the original 100 visitors. Rest assured all those who left will never return.
According to some estimates, 20 percent of your visitors leave for every 10 seconds you ask them to wait for a page to download. That means, if 100 people arrive at your slow-loading page: 80 remain after 10 seconds; 64 remain after 20 seconds; 51 remain after 30 seconds; 41 remain after 40 seconds; 33 remain after 50 seconds; and after one minute you have lost all but 26 of the original 100 visitors. Rest assured all those who left will never return.
16 July 2010
52: Blogger Now Has Real Time Stat
Blogger Now Has Real Time Stats
Real time statistics are a new feature for all public Blogger blogs. There is a new “Stats” section, which displays a dashboard of web traffic and visitor activity, including most popular posts, geographic location of visitors, and from traffic referrers.
Currently, Google’s more popular web statistics tool: Google Analytics does not contain real-time data–-it updates every few hours.
Real time statistics are a new feature for all public Blogger blogs. There is a new “Stats” section, which displays a dashboard of web traffic and visitor activity, including most popular posts, geographic location of visitors, and from traffic referrers.
Currently, Google’s more popular web statistics tool: Google Analytics does not contain real-time data–-it updates every few hours.
51: Website Trends
In 2009 it became easier to design your website. Businesses had the choice of do-it-yourself website builder’ tools or open source software like WordPress etc. The open source software may require some initial setup help unless the business owner is technically savvy. In 2009 ready-to-use templates also got more sophisticated in the appearance of the finished product, i.e, the published web site, and at the same time got easier to use for the end user. Another new trend for 2009 was getting a design for your website or logo as a contest through “crowdsourcing” with sites like 99 Designs, CrowdSpring and Genius Rocket.
Highly competitive businesses use technology like websites, online marketing tools etc to succeed (Small Business Success Index June 2009). With over 47% of small business not online, 2010 is an important year to get their business online and have a web site.
Low cost or no cost ways to get a web site increase
With the enormous variety of web site tools available for small business, it may be easy to start a web presence for almost no money at all. Hosting providers offering free websites tools, blogging software providers like Blogger, Wordpress etc also let you start a web presence easily. Small businesses could try these free tools to experiment and then advance to a customized hosted option. A hosted option with your own domain name would be more credible and more brand friendly for your business.
Updating frequently.
Realizing the power of a Blog as a business tool
In the previous years, small businesses had set up websites and did not update them often. Even if they are not online businesses in 2010 businesses will pay attention and update the content of their websites more frequently.
More businesses will add Blogs to their existing websites.
This will give them an additional way to interact with customers. Customers can comment and give feedback on the blog. An added bonus is that these businesses have a better chance to be in search engine results as blogs are updated more frequently and search engines like blogs. Customers will like this as they get a chance to comment and also get to know the business in a very friendly and conversational way.
Flashy out; practical in
2010 is the year of simplicity. Information on the internet is already overwhelming for users. Websites that quickly provide the information without too many flashy promotions will get more visitors. Of course the exception is if you are in the entertainment business.
Do you know who is knocking on your web site door; Web Analytics are a crucial tool
Websites without analytics is like running a business without accounting. Websites will focus on using web analytics tools to learn which content is more popular, who is visiting and from where. Tools like Google Webmaster tools will be important to find stats for indexing.
Widgets and Apps
Widgets showing collaboration between your website and other properties will become expected for websites. Some examples of using widgets is adding your latest Twitter comments, best selling products, most popular articles. This will extend to the ability to share the content using widgets like Share This, Add this allowing the website content to be shared by the visitors to their own networks.
Can I call you now? Adding Interactivity to your website
Chat and calling buttons on your website will be back. If people find something interesting on the website, features like ‘Click to Call “and chat or send a message will reemerge. This will also be an important analytical tool so as to track where the lead came from by using different incoming phone numbers. Earlier, these tools were only affordable by large corporations in 2010 these tools will become affordable by more small businesses. More website owners will start using Skype, Google Voice or several commercially available options.
More Multi-media will be added to web sites.
Videos and photo galleries will form part of websites. Small business will use cheaper and convenient options like FLIP HD cameras to tell the behind the scenes stories of their business and products. Uploading them to video sites like YouTube, Blip.tv etc for videos, and Flickr for Photos and embedding them in their own website and will have the advantage of being seen in both the website and the photo or video network.
Highly competitive businesses use technology like websites, online marketing tools etc to succeed (Small Business Success Index June 2009). With over 47% of small business not online, 2010 is an important year to get their business online and have a web site.
Low cost or no cost ways to get a web site increase
With the enormous variety of web site tools available for small business, it may be easy to start a web presence for almost no money at all. Hosting providers offering free websites tools, blogging software providers like Blogger, Wordpress etc also let you start a web presence easily. Small businesses could try these free tools to experiment and then advance to a customized hosted option. A hosted option with your own domain name would be more credible and more brand friendly for your business.
Updating frequently.
Realizing the power of a Blog as a business tool
In the previous years, small businesses had set up websites and did not update them often. Even if they are not online businesses in 2010 businesses will pay attention and update the content of their websites more frequently.
More businesses will add Blogs to their existing websites.
This will give them an additional way to interact with customers. Customers can comment and give feedback on the blog. An added bonus is that these businesses have a better chance to be in search engine results as blogs are updated more frequently and search engines like blogs. Customers will like this as they get a chance to comment and also get to know the business in a very friendly and conversational way.
Flashy out; practical in
2010 is the year of simplicity. Information on the internet is already overwhelming for users. Websites that quickly provide the information without too many flashy promotions will get more visitors. Of course the exception is if you are in the entertainment business.
Do you know who is knocking on your web site door; Web Analytics are a crucial tool
Websites without analytics is like running a business without accounting. Websites will focus on using web analytics tools to learn which content is more popular, who is visiting and from where. Tools like Google Webmaster tools will be important to find stats for indexing.
Widgets and Apps
Widgets showing collaboration between your website and other properties will become expected for websites. Some examples of using widgets is adding your latest Twitter comments, best selling products, most popular articles. This will extend to the ability to share the content using widgets like Share This, Add this allowing the website content to be shared by the visitors to their own networks.
Can I call you now? Adding Interactivity to your website
Chat and calling buttons on your website will be back. If people find something interesting on the website, features like ‘Click to Call “and chat or send a message will reemerge. This will also be an important analytical tool so as to track where the lead came from by using different incoming phone numbers. Earlier, these tools were only affordable by large corporations in 2010 these tools will become affordable by more small businesses. More website owners will start using Skype, Google Voice or several commercially available options.
More Multi-media will be added to web sites.
Videos and photo galleries will form part of websites. Small business will use cheaper and convenient options like FLIP HD cameras to tell the behind the scenes stories of their business and products. Uploading them to video sites like YouTube, Blip.tv etc for videos, and Flickr for Photos and embedding them in their own website and will have the advantage of being seen in both the website and the photo or video network.
50: Unifying Theme
Creating a unifying theme is one of the most important steps in designing a website. Your theme should reflect the purpose of your website and provide a continuity of design elements throughout your site.
Convey your message
In other words a theme should help you to convey your message and impart a consistent look that runs throughout your website.
Your site should not attempt to be "all things to all people". Observing some limits also involves NOT using every graphic, javascript, animation, music or HTML coding trick that you have available on one web site.
Using color
When the theme is a color combination, the links, buttons and graphics should all reflect that color theme. Use this type of theme for websites that don't fit neatly into any particular category.
Logo should be incorporated on every page. A logo can be any graphic that hints at the central focus of your internet site.
What you are doing, with a theme, is providing cohesiveness to your site - letting visitors know they are still in the same place no matter what website section they are viewing. Web users don't like the feeling of being ''lost'' and will leave a site if they feel they don't know where they are or how to find information.
More importantly a theme should tell a story or convey an idea. Your theme should enhance your message. It can help to make your visitors understand what it is that you are trying to say. Picture your theme as a frame for your message.
Convey your message
In other words a theme should help you to convey your message and impart a consistent look that runs throughout your website.
Your site should not attempt to be "all things to all people". Observing some limits also involves NOT using every graphic, javascript, animation, music or HTML coding trick that you have available on one web site.
Using color
When the theme is a color combination, the links, buttons and graphics should all reflect that color theme. Use this type of theme for websites that don't fit neatly into any particular category.
Logo should be incorporated on every page. A logo can be any graphic that hints at the central focus of your internet site.
What you are doing, with a theme, is providing cohesiveness to your site - letting visitors know they are still in the same place no matter what website section they are viewing. Web users don't like the feeling of being ''lost'' and will leave a site if they feel they don't know where they are or how to find information.
More importantly a theme should tell a story or convey an idea. Your theme should enhance your message. It can help to make your visitors understand what it is that you are trying to say. Picture your theme as a frame for your message.
49: Theming, Motif, and Motive
Theming is the "the use of an overarching theme, such as western, to create a holistic and integrated spatial organization of a consumer venue." Themes are usually derived from history, or other cultures, but can also be based on fantasy. Theming can vary in intensity from just interior design, to whole architecture based on the theme, with Theme Parks being one of the largest scale applications of theming. Theming is applied to themed spaces which may include theme parks, restaurants, casinos, museums, airports, resorts and other spaces. Consumers sometimes theme their homes with specific themes and Internet spaces are also themed. Theming is widely applied in the events industry.
* Theme (arts), the unifying subject or idea of a visual work
* Theme (literature), the unifying subject or idea of a story
* Theme (music), the initial or principal melody in a musical piece
* Theme music, signature music which recurs in a film, television program or performance
Theme (computing), a custom graphical appearance for certain software, similar to a graphics skin.
Motif (visual arts), a recurring theme or pattern in artwork, a design or figure that consists of recurring shapes or colors, as in architecture or decoration.
motif = motive (French)
A recurring or dominant element; a theme; unifying idea
recurring, repeated, elaborated
In art, a motif is a repeated idea, pattern, image, or theme. Visual motifs are a language to communicate visual ideas.
Motive is an incentive to act; a reason for doing something; anything that prompted a choice of action; Alternative spelling of motif; a theme or subject, especially one that is central to the work or often repeated; To prompt or incite by a motive or motives; to move; Causing motion;
Motivation refers to the initiation, direction, intensity and persistence of behavior. Motivation, a temporal and dynamic state, consists of the desire and willingness to do something.
* Theme (arts), the unifying subject or idea of a visual work
* Theme (literature), the unifying subject or idea of a story
* Theme (music), the initial or principal melody in a musical piece
* Theme music, signature music which recurs in a film, television program or performance
Theme (computing), a custom graphical appearance for certain software, similar to a graphics skin.
Motif (visual arts), a recurring theme or pattern in artwork, a design or figure that consists of recurring shapes or colors, as in architecture or decoration.
motif = motive (French)
A recurring or dominant element; a theme; unifying idea
recurring, repeated, elaborated
In art, a motif is a repeated idea, pattern, image, or theme. Visual motifs are a language to communicate visual ideas.
Motive is an incentive to act; a reason for doing something; anything that prompted a choice of action; Alternative spelling of motif; a theme or subject, especially one that is central to the work or often repeated; To prompt or incite by a motive or motives; to move; Causing motion;
Motivation refers to the initiation, direction, intensity and persistence of behavior. Motivation, a temporal and dynamic state, consists of the desire and willingness to do something.
48: Website Decoration Themes
A style, or theme, is a consistent idea used throughout a website to create a feeling of completeness.
These themes often follow period styles. Examples of this are Louis XV, Louis XVI, Victorian, Islamic, Feng Shui, International, Mid-Century Modern, Minimalist, English Georgian, Gothic, Indian Mughal, Art Deco, and many more.
The evolution of website decoration themes has grown to include themes not necessarily consistent with a specific period style allowing the mixing of pieces from different periods. Each element should contribute to form, function, or both and maintain a consistent standard of quality and combine to create the desired design.
These themes often follow period styles. Examples of this are Louis XV, Louis XVI, Victorian, Islamic, Feng Shui, International, Mid-Century Modern, Minimalist, English Georgian, Gothic, Indian Mughal, Art Deco, and many more.
The evolution of website decoration themes has grown to include themes not necessarily consistent with a specific period style allowing the mixing of pieces from different periods. Each element should contribute to form, function, or both and maintain a consistent standard of quality and combine to create the desired design.
47: Users’ attention is a finite resource.
There are two important aspects to achieving success with simplicity:
1. Remove unnecessary components, without sacrificing effectiveness.
2. Try out alternative solutions that achieve the same result more simply.
BALANCE of Hard and Soft data
Hard data
means facts, like news, stock prices, train times, or how much money is in your bank account.
Soft information
covers the qualitative aspects of communication, like the first impression about the quality of a company, the sense of how approachable a service provider is, and whether you feel a product will be right for you.
1. Remove unnecessary components, without sacrificing effectiveness.
2. Try out alternative solutions that achieve the same result more simply.
BALANCE of Hard and Soft data
Hard data
means facts, like news, stock prices, train times, or how much money is in your bank account.
Soft information
covers the qualitative aspects of communication, like the first impression about the quality of a company, the sense of how approachable a service provider is, and whether you feel a product will be right for you.
46: Database of Intentions
As soon as a company begins an advertising campaign, it can get feedback from an online focus group and then tweak its message accordingly.
discovering what data is popular
Blackberry maker RIM warns of bandwidth crisis
http://www.moneycontrol.com/news/technology/blackberry-maker-rim-warnsbandwidth-crisis_441940.html
AT&T and worsening bandwidth crisis
http://bizanywhere.wordpress.com/2009/10/13/att-and-worsening-bandwidth-crisis/
Bandwidth Overload
http://www.speakeasy.net/speedtest/
http://www.bandwidthplace.com/test speed sites
What’s Next in Web Design?
http://informationarchitects.jp/whats-next-in-web-design/
The more advanced a design, the less it is visible, or, as Apple’s Jonathan Ive put it: "A lot of what we seem to be doing in a product like that is getting design out of the way. With that sort of reason, it feels almost inevitable, almost undesigned and it feels almost, like of course it is that way. Why would it be any other way?"
The kind of designers you want to hire
http://tagstorichness.com/post/651422566/the-kind-of-designers-you-want-to-hire
http://mashable.com/2010/01/16/united-states-internet-speed/
United States Internet Speed Is on the Decline [REPORT]
discovering what data is popular
Blackberry maker RIM warns of bandwidth crisis
http://www.moneycontrol.com/news/technology/blackberry-maker-rim-warnsbandwidth-crisis_441940.html
AT&T and worsening bandwidth crisis
http://bizanywhere.wordpress.com/2009/10/13/att-and-worsening-bandwidth-crisis/
Bandwidth Overload
http://www.speakeasy.net/speedtest/
http://www.bandwidthplace.com/test speed sites
What’s Next in Web Design?
http://informationarchitects.jp/whats-next-in-web-design/
The more advanced a design, the less it is visible, or, as Apple’s Jonathan Ive put it: "A lot of what we seem to be doing in a product like that is getting design out of the way. With that sort of reason, it feels almost inevitable, almost undesigned and it feels almost, like of course it is that way. Why would it be any other way?"
The kind of designers you want to hire
http://tagstorichness.com/post/651422566/the-kind-of-designers-you-want-to-hire
http://mashable.com/2010/01/16/united-states-internet-speed/
United States Internet Speed Is on the Decline [REPORT]
30 June 2010
45: Speed up your website and increase conversions
http://www.modernblue.com/web-design-blog/
Speed up your website and increase conversions: quotation
"Something I have been thinking a lot about lately is website speed. The load times for one of my largest clients, OverstockDrugstore, were getting worse by the day. It was due to an increased amount of traffic coming to a website that wasn’t properly tuned. After taking a very aggressive approach to decrease load times, conversions (sales) increased by 1-1.5% on days following. It blew my mind (and others at the company) that load times would have a direct impact on conversions."
"If you think about it. it makes sense. 75% of their website visitors are new. So, they are visiting and experiencing the website for the first time. Also, many of them are coming from price engines. Most likely when they do a search on an engine, they go down the list clicking on each link. If the page loads slower than the other sites, they may either loose confidence or at least get a little impatient, which would cause them to choose someone else."
Another link:
http://www.roscripts.com/How_to_speed_up_your_website-175.html
Speed up your website and increase conversions: quotation
"Something I have been thinking a lot about lately is website speed. The load times for one of my largest clients, OverstockDrugstore, were getting worse by the day. It was due to an increased amount of traffic coming to a website that wasn’t properly tuned. After taking a very aggressive approach to decrease load times, conversions (sales) increased by 1-1.5% on days following. It blew my mind (and others at the company) that load times would have a direct impact on conversions."
"If you think about it. it makes sense. 75% of their website visitors are new. So, they are visiting and experiencing the website for the first time. Also, many of them are coming from price engines. Most likely when they do a search on an engine, they go down the list clicking on each link. If the page loads slower than the other sites, they may either loose confidence or at least get a little impatient, which would cause them to choose someone else."
Another link:
http://www.roscripts.com/How_to_speed_up_your_website-175.html
25 June 2010
44: OF LATE, WE HAVE GROWN FAT
"Yet in the past few years, as wideband became the norm, every mainstream site and its brother started acting as if bandwidth didn’t matter. Why use 1K of web form when you could use 100K of inline pseudo-Ajax? Why load a new page when you could load a lightbox instead?
Instead of medium-quality JPEGs with their unimportant details painstakingly blurred to shave KB, we started sticking high-quality PNG images on our sites.
As these bandwidth-luxuriant (and not always beautiful, needed, or useful) practices became commonplace on mainstream sites, many advanced, standards-focused web designers were experimenting with web fonts, CSS3 multiple backgrounds, full-page background images, and other devices to create semantic, structurally lean sites that were as rich (and heavy) as Flash sites.
So now we face a dilemma. As we continue to seduce viewers via large, multiple background images, image replacement, web fonts or sIFR, and so on, we may find our beautiful sites losing page rank."
http://www.zeldman.com/2010/04/11/of-google-and-page-speed/
Instead of medium-quality JPEGs with their unimportant details painstakingly blurred to shave KB, we started sticking high-quality PNG images on our sites.
As these bandwidth-luxuriant (and not always beautiful, needed, or useful) practices became commonplace on mainstream sites, many advanced, standards-focused web designers were experimenting with web fonts, CSS3 multiple backgrounds, full-page background images, and other devices to create semantic, structurally lean sites that were as rich (and heavy) as Flash sites.
So now we face a dilemma. As we continue to seduce viewers via large, multiple background images, image replacement, web fonts or sIFR, and so on, we may find our beautiful sites losing page rank."
http://www.zeldman.com/2010/04/11/of-google-and-page-speed/
43: A few nice web tools online
Color contrast verification tool
Calculate a measure of readability
http://www.hp.com/hpinfo/abouthp/accessibility/webaccessibility/color_tool.html
staircase gradations generator
http://slayeroffice.com/tools/color_palette/
Page Credibility
http://www.lib.berkeley.edu/TeachingLib/Guides/Internet/Evaluate.html
Free Web Performance Assessment
http://zoompf.com/free
http://tools.pingdom.com/fpt/
The Full Page Test loads a complete HTML page including all objects (images, CSS, JavaScripts, RSS, Flash and frames/iframes). It mimics the way a page is loaded in a web browser. The load time of all objects is shown visually with time bars.
Calculate a measure of readability
http://www.hp.com/hpinfo/abouthp/accessibility/webaccessibility/color_tool.html
staircase gradations generator
http://slayeroffice.com/tools/color_palette/
Page Credibility
http://www.lib.berkeley.edu/TeachingLib/Guides/Internet/Evaluate.html
Free Web Performance Assessment
http://zoompf.com/free
http://tools.pingdom.com/fpt/
The Full Page Test loads a complete HTML page including all objects (images, CSS, JavaScripts, RSS, Flash and frames/iframes). It mimics the way a page is loaded in a web browser. The load time of all objects is shown visually with time bars.
22 June 2010
42: Expectation Threshold 2 to 3 seconds
"Today’s web applications are more content and feature rich than ever, providing an interactive user experience. In addition, users expect these applications to be delivered immediately on a variety of fixed and mobile devices and browser platforms. A recent Forrester study found that “two seconds is the new threshold in terms of an average online shopper’s expectation for a web page to load, and 40 percent of shoppers will wait no more than three seconds before abandoning a retail or travel site.” Google has publicly stated that a half second delay in load time results in a 20% drop in ad revenue, while Amazon has found that a tenth of a second delay causes a 1% drop in sales. Now more than ever, slow page load times translate into lost customers and revenue. In addition, companies can save significant hardware, software and bandwidth costs by improving application speed."
http://www.businesswire.com/portal/site/home/permalink/?ndmViewId=news_view&newsId=20100621005528&newsLang=en
http://www.businesswire.com/portal/site/home/permalink/?ndmViewId=news_view&newsId=20100621005528&newsLang=en
41: Online Button Makers
These links are helpful for when you are in a hurry or need a shortcut to produce a quick button. The output files are not optimized and can easily be reduce in half. This example was 9K after download and reduced to a 2.4K 8-bit PNG file. Creators of "microsites" have statistics showing larger "action" buttons, like "download" or "buy now," get better clickthru when they are large and use 18 point type (approx 18 px.) This example is 18 pixel font size.
http://www.buttonator.com/
http://www.lucazappa.com/brilliantMaker/buttonImage.php
http://creatr.cc/backgrounds/
http://www.buttonator.com/
http://www.lucazappa.com/brilliantMaker/buttonImage.php
http://creatr.cc/backgrounds/
40: Get To The Point
In the last entry, "Web Impatience", the quotes reinforce my philosophy of just publishing a "product or service positioning statement" on the home page and including simple navigation with minimum decoration. The user wants to know immediately what the point is of your website. "What's in it for me?" "Why should I care?" There must be instant recognition, simplicity, and clarity of why to stay or explore. Most home pages have too high of information density --aka clutter. Or in design language, "Emphasizing everything means emphasizing nothing." These bad habits slow page download time and visitor comprehension.
The more focused the site the easier to optimize. General purpose, generic, "authority" websites do NOT fill the needs of information seekers. Smaller fast sites are the solution. Distributed information prevents information overload. Don't present one bloated centralized site with 1,000 pages --rather 100 small sites that answer specific problems. It's time to break up big sites into separate URLs based on market need. This makes information easier to find. Severe self-imposed limitations are needed to avoid visitor "boredom factor", eliminate poor usability, and improve information findability.
The more focused the site the easier to optimize. General purpose, generic, "authority" websites do NOT fill the needs of information seekers. Smaller fast sites are the solution. Distributed information prevents information overload. Don't present one bloated centralized site with 1,000 pages --rather 100 small sites that answer specific problems. It's time to break up big sites into separate URLs based on market need. This makes information easier to find. Severe self-imposed limitations are needed to avoid visitor "boredom factor", eliminate poor usability, and improve information findability.
39: Web Impatience
I did some studying about "web impatience." Here are some good links:
Web Visitors vs Users, Impatient vs Bored and how they affect Website Change Management
And some quotes:
Functionality vs Visual Design
"For the most part, functionality wins over visual eye candy with users. Business users routinely put up with desktop applications that do what they need without swooping curves, dripping in glass buttons and subtle gradients. There is however a growing expectation of a minimum level of visual design on the web. Maybe this makes up for the fact that sites still rarely deliver everything a user wants."
The Impatience of Web Users
"According to the BBC, web usability guru Jakob Nielsen's latest report finds web users less tolerant and patient when it comes to web sites.
Some key quotes from Dr Nielsen in his BBC piece
"Web users have always been ruthless and now are even more so.."
"People want sites to get to the point, they have very little patience.."
"I do not think sites appreciate that yet,they still feel that their site is interesting and special and people will be happy about what they are throwing at them."
It's a big challenge for brands to get their emotions, richness and feelings across, when all a user wants to do is find out the price of a product.
I guess this is all about options and navigation, allowing the user to get to a place fast if they need to, but according to Dr Nielsen, most want to take the expressway."
Impatience rules the day online
"Few business web sites achieve this. They often provide a general summary and navigation which is difficult to penetrate. There is often some kind of company history on the front page and few obvious ways in which the visitor's issue is solved.
Nowadays, people are looking for instant solutions to specific problems. That means, for instance, that you can no longer have a web site that covers your topic of, say, marketing. Instead, you are going to need specific pages or sites that cover things like, "how to get more interest in postcard marketing in London". In other words, your web site offerings are going to have to be very, very specific.
Gone are the days of looking for millions of visitors to your web site. You now have to think of having millions of pages that target individual users. It is a complete reverse of where most businesses currently sit in terms of thinking. Most business web sites are being put together with the principles learned on the web in the late 1990s and the early years of this Century. Web users, though, have moved on. It's time for businesses to catch up."
Web Visitors vs Users, Impatient vs Bored and how they affect Website Change Management
And some quotes:
Functionality vs Visual Design
"For the most part, functionality wins over visual eye candy with users. Business users routinely put up with desktop applications that do what they need without swooping curves, dripping in glass buttons and subtle gradients. There is however a growing expectation of a minimum level of visual design on the web. Maybe this makes up for the fact that sites still rarely deliver everything a user wants."
The Impatience of Web Users
"According to the BBC, web usability guru Jakob Nielsen's latest report finds web users less tolerant and patient when it comes to web sites.
Some key quotes from Dr Nielsen in his BBC piece
"Web users have always been ruthless and now are even more so.."
"People want sites to get to the point, they have very little patience.."
"I do not think sites appreciate that yet,they still feel that their site is interesting and special and people will be happy about what they are throwing at them."
It's a big challenge for brands to get their emotions, richness and feelings across, when all a user wants to do is find out the price of a product.
I guess this is all about options and navigation, allowing the user to get to a place fast if they need to, but according to Dr Nielsen, most want to take the expressway."
Impatience rules the day online
"Few business web sites achieve this. They often provide a general summary and navigation which is difficult to penetrate. There is often some kind of company history on the front page and few obvious ways in which the visitor's issue is solved.
Nowadays, people are looking for instant solutions to specific problems. That means, for instance, that you can no longer have a web site that covers your topic of, say, marketing. Instead, you are going to need specific pages or sites that cover things like, "how to get more interest in postcard marketing in London". In other words, your web site offerings are going to have to be very, very specific.
Gone are the days of looking for millions of visitors to your web site. You now have to think of having millions of pages that target individual users. It is a complete reverse of where most businesses currently sit in terms of thinking. Most business web sites are being put together with the principles learned on the web in the late 1990s and the early years of this Century. Web users, though, have moved on. It's time for businesses to catch up."
17 June 2010
38: Image Optimization Links
Image optimization and compression: tools, tips and tricks
Web Design Tips - How to Optimize Your Website's Graphics For Speed
Online image optimization, or taming robots
25% smaller PNG files
Nicole Sullivan: "Design Fast Websites"
Note: To get it right, you have to be brutal with images. You will notice the difference but the audience only will if they are designers and even then they may not.
Web Design Tips - How to Optimize Your Website's Graphics For Speed
Online image optimization, or taming robots
25% smaller PNG files
Nicole Sullivan: "Design Fast Websites"
Note: To get it right, you have to be brutal with images. You will notice the difference but the audience only will if they are designers and even then they may not.
15 June 2010
37: Optimizing a simple Frame landing page
This project is a simple website for a local print shop. First, I've used an existing color theme based on their business identity of red, black, and white. I don't usually go for "pitch black" backgrounds. I prefer a dark gray because it's easier on the eye. But the identity IS "pitch black." This makes for a power theme and I'll stick with it.
Images
Next, a GIF logotype is Adobe Garamond and also mimics their business card. The logo in the gray column is the only image file on the page presently. My goal is to use some greenery combined with light and shadow to decorate the page without loading it down too much.
The logo started as an untrimmed 2K GIF and then was optimized using SmushIt -- an image compression tool found in YSlow for Firefox. The final was 1.7K. Not a big savings but by minifying the landing page code another 1.5K was saved. This reduced the 15K page down to 12K or less. A near 21% savings. Most pages don't matter this much --but this site is using the GoDaddy Hack which slows download loading speed --and we don't have PHP-GZIP compression. So every detail helps. No reason not to do it. Googles Firefox addon PageSpeed generates minified code for you to install in your pages.
No Positioning Statement?
Normally, I'd prefer a positioning statement to a slogan, but design is sometimes a compromise. The page is liquid and can be "squeezed" to 800x600 pixels and still be readable and show everything. If elements disappear or are covered up, then the page is considered broken. 1024 x 768 px is the minimum but I thought I'd push it one notch further. Above is shown 1220x900 px.
1) A 2K JPEG, 30Q, lens flare with glow, CSS background image in the top left corner of the main frame.
2) A 2K, 32-color depth, GIF tiling gradient, CSS background image in the NAVBAR.
3) A 5K transparent GIF, 16-color depth, CSS background image in the gray column bottom right.
And here's what the additional 9K image elements look like on the page:
The 21K results: View it live.
Postscript: I added a aerial location shot to the page. 7K JPEG 30Q. Upping the pageweight to 28K.
Images
Next, a GIF logotype is Adobe Garamond and also mimics their business card. The logo in the gray column is the only image file on the page presently. My goal is to use some greenery combined with light and shadow to decorate the page without loading it down too much.
The Logotype
No Positioning Statement?
Normally, I'd prefer a positioning statement to a slogan, but design is sometimes a compromise. The page is liquid and can be "squeezed" to 800x600 pixels and still be readable and show everything. If elements disappear or are covered up, then the page is considered broken. 1024 x 768 px is the minimum but I thought I'd push it one notch further. Above is shown 1220x900 px.
Plain Jane
So the site needs some sprucing up now. We add the following image files:1) A 2K JPEG, 30Q, lens flare with glow, CSS background image in the top left corner of the main frame.
2) A 2K, 32-color depth, GIF tiling gradient, CSS background image in the NAVBAR.
3) A 5K transparent GIF, 16-color depth, CSS background image in the gray column bottom right.
And here's what the additional 9K image elements look like on the page:
The 21K results: View it live.
Postscript: I added a aerial location shot to the page. 7K JPEG 30Q. Upping the pageweight to 28K.
36: Large Backgrounds
As a best recommended practice use CSS screen-centered large images, above 1700 pixels in width to cover almost 95% of the display sizes available today. The best solution is to blend the images’ corners into the background HTML color, so that users with larger screen resolutions won’t notice it. This eliminates the hard edge if visible. With HTML Frames, you only need to fill one frame so the image size can be reduced accordingly as a percentage of full-screen.
When I'm doing a depth of field (DOF) effect, I'll blur the background image and use a JPEG quality setting of "1." Yes. I said "one." This makes the floating images the emphasis. The top images can be sharp and in-focus --but smaller duplicates or crop of the background image. A repeated image --one fuzzy, one sharp.
How to: CSS Large Background
Backgrounds In Web Design: Examples And Best Practices
When I'm doing a depth of field (DOF) effect, I'll blur the background image and use a JPEG quality setting of "1." Yes. I said "one." This makes the floating images the emphasis. The top images can be sharp and in-focus --but smaller duplicates or crop of the background image. A repeated image --one fuzzy, one sharp.
How to: CSS Large Background
Backgrounds In Web Design: Examples And Best Practices
12 June 2010
35: light and shadow effects for websites
5 Simple Tricks To Bring Light and Shadow Into Your Designs
1. Using A Light Source
2. Gradients
3. Highlights (horizontal rules)
4. Basic Shadows
5. Advanced Shadows
16 Great Photoshop Light Effect Tutorials
Examples: the splash screens from Linux Ubuntu 9.x and 10.x. These type of abstract screens can be made to be very lightweight.
11 June 2010
34: Julia Mumford .com Continued Decorating Philosophy
In entry 15, I rebuilt Julia's site for speed making it 17K with a 50K background image = 67K.
The Original (where we left off. Boring!)
I decided to apply the "tradeshow booth" formula I described in entry 27. The simple elements are 1) color, 2) foliage, 3) lighting, and 4) legibility.
Color
The color theme was determined previously --and I wasn't going to change it but I did enhance the palette with a sampled yellow.
I then cropped and optimized the image as a 30Q 17K JPEG.
This was then placed as a HTML Table cell background image with an inline style. This allowed HTML type to float above the background.
Lighting (depth and shadow)
A 13K GIF 32-color gradated "string tile" was created to use as a CSS background image. It repeats in the x-axis at the top of the page.
BEFORE- black large type over photo
AFTER- smaller black type on yellow floating over photo
The Julia Mumford website now appears more attractive and actually weighs less than it did (46K) --a bonus. What needs changing now? Those carrots no longer seem to match the theme --a pot of steaming food would be more appropriate, Maybe next time?
The Original (where we left off. Boring!)
I decided to apply the "tradeshow booth" formula I described in entry 27. The simple elements are 1) color, 2) foliage, 3) lighting, and 4) legibility.
Color
The color theme was determined previously --and I wasn't going to change it but I did enhance the palette with a sampled yellow.
Foliage
I selected a shot by searching on "purple flower" at stock.xchng - free stock photo site. The original image is shown below and was 3.7MB. Very large!
I then cropped and optimized the image as a 30Q 17K JPEG.
Lighting (depth and shadow)
A 13K GIF 32-color gradated "string tile" was created to use as a CSS background image. It repeats in the x-axis at the top of the page.
Legibility
The HTML Times New Roman "Julia Mumford" title was black and horsey. It was hard to read. Adding a inline Style highlight with a yellow #FFCC33 sampled from the flower made it pop and allowed the type size to be reduced significantly.BEFORE- black large type over photo
AFTER- smaller black type on yellow floating over photo
The Julia Mumford website now appears more attractive and actually weighs less than it did (46K) --a bonus. What needs changing now? Those carrots no longer seem to match the theme --a pot of steaming food would be more appropriate, Maybe next time?
Stretchiness
The page is extremely liquid as shown in the image below. And the window can collapse even further and still not break. Try it live.
10 June 2010
33: Helping The Client
A significant amount of my time is spent in educating, coaching, or hand-holding the client and gleaning web content from their "on-hand resources." Building the site is the easy part. My focus is producing forms and shortcuts to help clients quickly assemble material (reduce the learning curve.)
Of a 6-week website production period, about 2 weeks is spent waiting on the client --30%! Room for improvement. Trimming decision-making is the first focus. Ultraspeed limitations help. Now my focus is helping the client make decisions on what's important and what isn't. I can produce custom sites for very little money, very fast --as long as the client stays within my self-imposed limitations. If they step out of bounds, I have to say, "Sorry. Keep shopping."
The client frequently DOESN'T know what's "good value." Or "How good is good enough?" This requires some educating and they then buy a web product based on "perceived value." Not how many hours or pages are spent. This is the secret of making money --not fluffing things up. Tell the truth instead.
I also screen my clients. 50% don't qualify. I don't do stores (well? within limits --say a dozen PayPal items), I don't do government or state or municipalities or churches or schools or non-profits. Those are monster sites and loaded with committee feature creep. Long-term slow turnaround projects.
Of a 6-week website production period, about 2 weeks is spent waiting on the client --30%! Room for improvement. Trimming decision-making is the first focus. Ultraspeed limitations help. Now my focus is helping the client make decisions on what's important and what isn't. I can produce custom sites for very little money, very fast --as long as the client stays within my self-imposed limitations. If they step out of bounds, I have to say, "Sorry. Keep shopping."
The client frequently DOESN'T know what's "good value." Or "How good is good enough?" This requires some educating and they then buy a web product based on "perceived value." Not how many hours or pages are spent. This is the secret of making money --not fluffing things up. Tell the truth instead.
I also screen my clients. 50% don't qualify. I don't do stores (well? within limits --say a dozen PayPal items), I don't do government or state or municipalities or churches or schools or non-profits. Those are monster sites and loaded with committee feature creep. Long-term slow turnaround projects.
32: HTML Frames Strength-- PRESENTATION
Molly Holzschlag's book titled "250 HTML and Web Design Secrets." She said: page 265 "Part of the problems with Frames is they go against the premise of markup --there job is presentational." (Used $0.30 on Amazon. Save your money!)
HTML Frames provide a "shell" for framing offsite additions / utilities. Visitors never feel they've left the site. Very cozy. This is "transparency and comfort."
PRESENTATION TOOL
While she was explaining why to "never use frames", she inadvertently also explained one of Frames great values --as a presentation tool.SECOND STORY
For many years, http://www.secondstory.com/ used Frames on their website. Note: I do not like the information density (aka cramming) on their new site. After 15 years, they finally switched to more of a Flash-XML solution --very heavy on transparency effects --and dropped HTML Frames entirely. So it is now very slow loading. Bloat! They have sophisticated programmers now to babysit their code --and bells and whistles. Fixed overhead (payroll) is required. My point being, for storytellers, Frames provide a lot of possibilities for visual and textual materials coexisting on the screen. And simply. No high powered technical people necessary. This thought frightens web people!HTML Frames provide a "shell" for framing offsite additions / utilities. Visitors never feel they've left the site. Very cozy. This is "transparency and comfort."
31: Quotation from Marty Neumeier about Simplification of Websites
AN INTERVIEW WITH MARTY NEUMEIER by Brian Alvey
Excerpted from Meet the Makers, April 20, 2003
http://www.meet-the-makers.com
Alvey: How does online branding differ from offline branding?
Neumeier: Online branding is still in its infancy, so practitioners are still groping for the answer to that question. Of course, the experience we have with a website will contribute to how we feel about a company. But what's missing in most web design is an understanding of the role differentiation plays in branding.
Since most web designers are throwing the kitchen sink into their sites, many sites tend to look alike. When designers start grappling with how to simplify their sites, they'll come face to face with brand. Once you simplify a design, everything that's left has to work harder.
Excerpted from Meet the Makers, April 20, 2003
http://www.meet-the-makers.com
Alvey: How does online branding differ from offline branding?
Neumeier: Online branding is still in its infancy, so practitioners are still groping for the answer to that question. Of course, the experience we have with a website will contribute to how we feel about a company. But what's missing in most web design is an understanding of the role differentiation plays in branding.
Since most web designers are throwing the kitchen sink into their sites, many sites tend to look alike. When designers start grappling with how to simplify their sites, they'll come face to face with brand. Once you simplify a design, everything that's left has to work harder.
30: Web Images: How good is "good enough?"
"Image quality" isn't even in the top 10 most important functions or features of a website. I see web design and stage set design as having a lot in common. It's the view from the back-row theater seats that count --not the up-close details.
Tools for image processing include: Adobe ImageReady --which comes with most versions of Photoshop, next is Photoshop and then Ubuntu GIMP. All of these programs have "Save for web" functions. This gives a much more compact file size than regular JPEG files. There are other programs, plugins, and online methods to improve file sizes. Note: GIMP requires a plugin to get "Save for web" features. Check your Linux "repository" for GIMP extras.
Fancy Optimization Tools
There are two tools online extremely useful for optimizing images but are only available for Firefox as addons. Yahoo!s Yslow All Smush.it
and Google PageSpeed. Both require the installation of FireBug addon first.
JPEG Compression Guidelines for Speed
Usually, for photo images, JPEG compression is best. JPEG allows you to select a setting while previewing the image. I consider 70 high and is the quality I use for "portfolio grade" images. But the standard seems to have crept up to 85 or higher settings for all images. In other words, essentially little optimization at all! Try and resist this foolishness. It just doesn't buy anything in better quality. For normal images, I use a setting of 50. Smaller, less than 100-pixel-square images, can be pushed down to a setting of 30 --or switch to GIF. And for large backgrounds, with blurry depth of field effect, I drop down between 1 and 10. This causes noticeable image degradation but is only for "effect."
Guidelines for GIF Images
GIFs are compressed using the number of color represented (color bit depth.) You can really tweak some images hard using GIF compression especially text and illustration images. Plus in ImageReady, there is a "lossy" setting that can do some "serious damage" in a positive or negative way.
How good is good enough?
The person who cares the most about image quality is the owner or designer of the website, NOT the viewers. Viewers put this at the bottom of the list. Still the image needs to be recognizable and readable! Everyone has to decide their guidelines --but here are mine: make the image file sizes as small as possible in weight. Images are the main hogs of bandwidth.Settings should not be arbitrary or rigid.
Some photos will compress tighter than others. Eventually, this become intuitive. Some images work better as GIFs than JPEGs --or better as PNG. It requires some experimentation. You soon learn the human eye is quite capable of discerning shapes and forms. The more random the image like water, soil, grass, etc, the more it can "tolerate" lossy compression.Fancy Optimization Tools
There are two tools online extremely useful for optimizing images but are only available for Firefox as addons. Yahoo!s Yslow All Smush.it
and Google PageSpeed. Both require the installation of FireBug addon first.
JPEG Compression Guidelines for Speed
Usually, for photo images, JPEG compression is best. JPEG allows you to select a setting while previewing the image. I consider 70 high and is the quality I use for "portfolio grade" images. But the standard seems to have crept up to 85 or higher settings for all images. In other words, essentially little optimization at all! Try and resist this foolishness. It just doesn't buy anything in better quality. For normal images, I use a setting of 50. Smaller, less than 100-pixel-square images, can be pushed down to a setting of 30 --or switch to GIF. And for large backgrounds, with blurry depth of field effect, I drop down between 1 and 10. This causes noticeable image degradation but is only for "effect."
Guidelines for GIF Images
GIFs are compressed using the number of color represented (color bit depth.) You can really tweak some images hard using GIF compression especially text and illustration images. Plus in ImageReady, there is a "lossy" setting that can do some "serious damage" in a positive or negative way.
All Compression Techniques Require Good Judgment
I squeeze too hard for some designers tastes. That's because I realize the visitor doesn't care much. But they care intensely about page load speed. Beautiful doesn't count as much.
29: Modifying Blogger Environmental Sections
The banners have a "cooler" color combination and I may need to warm them up to match the Landing Page. Yet to be determined.
And a common HOME button.
This isn't quite what I'd like yet for return navigation. More of a "close window" button. Blogger has limitations like this --but is free. I also learned you can't create more than 3 blogs in one sitting. You have to wait about 24 hours.28: Designing portfolio websites
A portfolio website for photography or fine art works best if it contains the following seven sections:
- Landing Page Design [branding -- theming]
- Image Gallery
- About Page [The Interview]
- The Testimonial
- The Blog
- The Process Page [how you work]
- The Call to Action [ contact page and location of Galleries]
08 June 2010
27: Respository Site continued
While working on this project, it occurred to me the simple formula of trade show booths apply well to landing pages. For a trade show booth, you must assume you'll receive the same attention span as a billboard at 55mph near a highway. Just a few seconds of decision making time. There are a few inexpensive details that can make a big difference. 1) color, 2) foliage, 3) lighting, and 4) legibility (1 inch for every foot reading distance.) In other words, 8 inch high letters at 8 feet. On a screen that would translate into a 2 to 3 inch high headline. (140px to 220px? That seems big, eh?) The SPLASH page seems to have these elements. What do you think?
The SECTIONS are Blogger pages, originally embedded in Frames. This made for clumsy bookmarking and so I made the pages standalone with a badge identity (home button) to tie back the look. This way visitors can enter from the blog or the website without confusion. Articles and downloads can be bookmarked, linked, or sent in emails.
The badge:
Also, the clients favicon.ico was added to each blog page and to the website for some additional continuity.
26: More experimental highspeed testing: Speed Strategy
Three layers deep: Speed Strategy
Screen resolution 1024 x 768 px minimum size shown.
1. SPLASH page: 10K (0.21 second load time with cached screen.)
There are only two string-background tiling GIFs on this page. One in each frame. Everything else is "pure" HTML.
2. Sectional INTRO page: Dynamic resizing image and text placeholder in a nested frame. Loads 23K in the bottom frame. 0.882 seconds buffered cache.
3. Embedded BLOGGER page for each section. Content updated by product managers. Shown here is placeholder content. 31K.
Screen resolution 1024 x 768 px minimum size shown.
1. SPLASH page: 10K (0.21 second load time with cached screen.)
There are only two string-background tiling GIFs on this page. One in each frame. Everything else is "pure" HTML.
2. Sectional INTRO page: Dynamic resizing image and text placeholder in a nested frame. Loads 23K in the bottom frame. 0.882 seconds buffered cache.
3. Embedded BLOGGER page for each section. Content updated by product managers. Shown here is placeholder content. 31K.
GOALS
Pages keep opening up with lighter space as the sequence progresses (less color coverage.) Successive pages load a little slower. We start at 10K > 20K > 30K --but the "information scent" is getting stronger. The "extra" time is tolerated better by the viewer. The header in the "blog" needs to be reduced in size. It's horsey.The finished site will have 4 embedded Blogger pages.
03 June 2010
25: How to use GZIP and PHP for speed.
GZIP is a software application used for file compression/decompression. GZIP is short for GNU zip; as the program was created as a free software replacement for the compress program used in early Unix systems, intended for use by the GNU Project. Version 0.1 was first publicly released on October 31, 1992. Version 1.0 followed in February 1993.
GZIP replaces patent-encumbered data compression algorithms.
Many client libraries, browsers, and server platforms (including Apache and Microsoft IIS) support GZIP. GZIP is often used in web applications and software such as PHP to improve speed. Hypertext PreProcessor (PHP) is a server-side HTML embedded scripting language. PHP is not always provided by a hosting server or may be a "paid" option.
Finding out how to use PHP-GZIP is a goose-chase even though the solution is really simple. PHP is something that need to be "switched on" on the server. Check your ISP for how to do this. Or assume it's on and test.
To convert an HTML file to PHP. Change the .html or .htm extension to .php. This will break your links so you'll probably have to rebuild them or use a search and replace tool in a text editor.
Add the following line of code BEFORE the opening HTML tag at the top of your code.
That's it. Simple. You can test to see if PHP is activated with YSLOW or PageSpeed tools. GZIP-PHP can compress the HTML code by 50% to 70%. It does not compress images.
Study: Web Users Prefer Speed Over Customization
The most important interface design factor is speed, according to a new HCI study. Good interface design is essential for widespread user adoption and ultimately website success.
GZIP replaces patent-encumbered data compression algorithms.
Many client libraries, browsers, and server platforms (including Apache and Microsoft IIS) support GZIP. GZIP is often used in web applications and software such as PHP to improve speed. Hypertext PreProcessor (PHP) is a server-side HTML embedded scripting language. PHP is not always provided by a hosting server or may be a "paid" option.
Finding out how to use PHP-GZIP is a goose-chase even though the solution is really simple. PHP is something that need to be "switched on" on the server. Check your ISP for how to do this. Or assume it's on and test.
To convert an HTML file to PHP. Change the .html or .htm extension to .php. This will break your links so you'll probably have to rebuild them or use a search and replace tool in a text editor.
Add the following line of code BEFORE the opening HTML tag at the top of your code.
<? ob_start("ob_gzhandler"); ?>
<HTML>
* This source code was highlighted with Source Code Highlighter.That's it. Simple. You can test to see if PHP is activated with YSLOW or PageSpeed tools. GZIP-PHP can compress the HTML code by 50% to 70%. It does not compress images.
Study: Web Users Prefer Speed Over Customization
The most important interface design factor is speed, according to a new HCI study. Good interface design is essential for widespread user adoption and ultimately website success.
01 June 2010
24: TWEAKING- what counts and what doesn't
I built this 16K test site sometime ago and was revisiting the experiment. I wanted to see if it could be optimized with Google's PageSpeed addon for Firefox. The answer is: not really. A well built page, after optimization, only yielded about a 1 or 2K gain in page weight. The page load dropped from 0.7 seconds to 0.4 seconds after buffering. The initial load was, and still is, 3.7 to 4.0 seconds.The things I did shaved about 1K from images and another 1K using GZIP-PHP compression. Was it worth the effort? No!
The page is at this link if you'd like to see it live.
Here are two screengrabs, one at 1440 x 900 px and the other at 1024 x 768 px:
The site is built using 4 HTML frames. Yes the vertical black bar is a "skinny frame." The other bar is composed of tiling string background images. And a seamless low-res 5K grunge tile at the top. The last image is a transparent 5.8K GIF with only 4 color-bit depth.
Improvements to this site "graphically" would be tighter CSS letter-spacing and line-spacing on the Courier headline and background CSS colors for link rollovers.
This is a good example of how color is critical to theme --yet costs nothing in pageweight. The theme was built from sampling the top tile and building from that using reverse-color lookup. See entry 07 for this procedure.
Four graphic image elements used are shown below:
23: LoBand landing page positioning
I'm convinced the most important and probably the only thing really needed on a LoBand landing page is your positioning statement. If you've never written a positioning statement or don't know what one is, visit this link.
29 May 2010
22: Links about downgrading bandwidth
- A recent UK survey questioned more than 2,000 people and found that 41% of respondents regarded a slow Internet connection as the most annoying part of their day.
Customization (bottom of the list of site desirables) = decoration and embellishments. It's out of vogue with viewers. The new trend in web design is simple and austere. Those features combined produce speedier page load times. "Content density" is how many pictures and words are crammed onto the page. People want low density, simple messages for faster comprehension. These desirables are the opposite of what websites production is today. This is because business owners and designers aren't listening to the audience. The audience doesn't want what's been served up for the last decade. They want change. And more than anything they want SPEED!
A year ago, enough people downgraded their highspeed bandwidth to cause ISPs to charge new "downgrade fees" (usually about $5.) Another chance to make a buck! Highspeed monthly rates are a little less than $40 --nationwide average. People feeling the pinch for dollars did NOT discontinue services generally but elected to work-and-play with less.
USA Unemployment and Penny Pinching
So will employment go up thus improving the Internet bandwidth situation. Um? I think not. We have several waves to ride out caused by changes in the GLOBAL economy. Bailout begets bailout internationally. This sounds pretty pessimistic, I know. The point I'm making is there now is a demand for unadorned and faster websites. It's driven by need and wish. People wish the web was faster. But it won't be for sometime. The solution IS leaner, smaller websites --economy of scale and less bloated gluttony of bandwidth. As one article put it, the Internet went from "Primitive to Complex and now to Simple." We're being forced to move into the "simplify stage." The Internet isn't going to collapse! It's just will be unpleasantly slow and sometimes painful to use.
ISPs Pullback Building Business
With the downturn in the economy, Internet Service Providers (ISPs) are not upgrading their capacity to match demand. In fact, they are limping along propping up an overloaded system. Internet connections are slowing down because of this delay in upgrading. Streaming video, YouTube, SPAM, and mammoth downloads are some culprits hogging bandwidth. Saturation! I think we'll be seeing more communication company mergers.
Alternative Budget
Instead of dropping highspeed, people are opting to drop cable TV and watch online. This only creates more demand for bandwidth. The pipe isn't getting bigger. Things are tightening.
What About Fiber Optics 100X Speeds?
Idealists and Utopian technocrats are preaching converting copper to glass and connecting America for higher access speeds. This conversion to fiber optics isn't happening soon. We say, "Yeah, but they did it in Japan!" Ahem. Japan is a tiny island nation -smaller than most of our states. We have a lot of mileage to cover in the USA. Is it realistic to say this "growth" will happen during bad times? Perhaps by increasing the money supply (inflation) the government can bankroll it. But how long would it still take for the conversion? Years or decades? Interestingly, Google is giving "matching-fund" grants to rural communities for installation of fiber optics. But Google alone can't bear this burden.
So grassroots innovation in website efficiency is the stopgap and edge --until better times.
http://www.recessionbudget.com/downgrade-high-speed-internet/
http://news.cnet.com/8301-1023_3-10206157-93.html
Recession forces some to downgrade to dial-up
Americans switching from broadband to dial-up
http://www.myce.com/news/Americans-switching-from-broadband-to-dial-up-15598/
DIAL-UP: RESURRECTED BY RECESSION?
http://www.populationstatistic.com/archives/2009/02/26/dial-up-resurrected-by-recession/
"As we've become a high-def, two-way, video-on-demand society, we're overloading the wires and, especially, the airwaves along which our data travels. The result is going to be a three-year slowdown of the Internet experience, with more expensive connections and innovation turning toward efficiency rather than extravagance."
http://www.pcmag.com/article2/0,2817,2344696,00.asp
"Monopoly economics on the wire-line side and inadequate networks on the wireless side means we're not going to see cheap, unlimited Internet over the next few years. The result of this mismatch between applications and infrastructure is going to hurt everyone at the start, but don't underestimate clever technologists. Bandwidth will become a currency. Web pages will get more basic; marketing bloat will decrease."
The Great Internet Slowdown
http://www.pcmag.com/article2/0,2817,2344697,00.asp
"We're entering an era of efficiency —of doing more with less bandwidth. That doesn't mean we're going to stop innovating. It just means we're going to do it with fewer bits."
Subscribe to:
Posts (Atom)