EARTH MOVIN' MEDIA

Web Design Blog

Category: Web Development

Top 5 Best Payment Gateways for an Online Entrepreneur

The online entrepreneur is the term which could make any talented single to attain the highest position irrespective of any dependent jobs or dependent help from anyone. The startup may lead a single project to the extreme if the basic and the real strategy rules get involved into the entrepreneur’s mind. The small business owners are very much energetic and happy with the growth part as the online exposure made dramatic changes in the standard of the output in every aspect.

The online entrepreneur must have some essential tools and factors for their business such as a good domain, core theme, SEO, irresistible hosting packages, branding, influence, advertising campaign, help from venture capitals, appealing web design, targeted e-mail marketing campaign, tax liabilities, legal acts, and other major factors.

Continue reading

Web Design – A Look Back At Big Tech Stories OF 2012

Looking at web industry from a business angle, Ars Technica muses upon six big stories that stood out last year. Of those six, we’ll peg BitCoins as the story we’re most likely to look back on in a decade and wonder “what were they thinking?” Like Microsoft Bob, Pets.com, and the CueCat, BitCoins still have that cachet of “naive pre-web-bubble idea”. The article goes into several ways where BitCoin has had trouble already, which we predict is the shape of its doom, arrising like a Grim Reaper in the West.

Web Design – Explore How The Web Has Formed

A must for anybody interested in business and eCommerce on the World Wide Web, we hope none of you missed this site on how the web evolved. The interactive timeline, itself a gilded dragon of a web design, takes you through the various tools and tech of the web. Hover over one aspect to see info boxes pop up explaining different key stepping stones in that aspect’s development. Through this, you can see that the WWW proper got off to a start in 1991 (though BBSs still dominated on the home front for a number of years), that Netscape (grandfather to Firefox) and Opera both predate Internet Explorer, and that AJAX actually came to the fore in 1999 – so why did the inductry not discover it until circa 2004?

Website Security Has Five New Threats You Never Thought Of

Just saw this insightful post at PC Pro, about five new hidden security threats. These are all based on (relatively) recent developments in tech, like QR codes and SMS. Even the URL obfuscation, one of the oldest phishing tricks in the book, takes on a new form when modern handheld devices and Twitter feeds rely so heavily on URL-shortening services or just abbreviating the URL.

It’s important for webmasters to remember that if you own a website, you are always an attack vector. Others can be targeted by compromising your site. And with the profusion of new gadgets cropping up, new vulnerabilities in them come up before half of us even get around to learning how to use one…

Web Design – This Is Why People Don’t Join Your Site

Possibly the most excellent post we’ve read this year: 8 Reasons Users Don’t Fill Out Sign Up Forms. Every website owner or maintainer ought to be required to read it and pass a comprehension test afterwards.

Newsletter-iconBriefly, the point is that users avoid signing up to become a member of a site unless they absolutely have to. Call it, if you will, “social media fatigue“. Ten years ago, the web was yours just like your TV set, and the only time you had to sign up for anything was if you were buying something. Now you can’t click a mouse button without logging in with a nick and password. Who can remember them all? Why does it feel like getting married every time you just want to leave a quick note somewhere?

Maybe Web Designers Are Just Hard For Everybody To Understand?

We were amused by Why Adobe Doesn’t Understand Web Designers, a post ruminating on the failings of Adobe to woo the web design crowd, provoked by its latest controversial ‘Muse’ product.

web-design-bannerYou’ll notice that the latest “easy enough for a caveman!” web design product always draws the same discussion online: First somebody moans how this is really a toy, no good for professionals. Then somebody always counters (in a snide tone) “Well this isn’t for you elitist professionals, this is so mom and dad can design web pages for their cookie business!” Yeah… but we’ve been hearing this since 1998 with Microsoft’s FrontPage Express. You know how it goes: The easiest-to-learn tool (which always has the least features) soon becomes an industry standard, at which point its user base demands more features. Then it isn’t easy to use anymore, and somebody makes another alternative… the cycle repeats.

The money quote from the article: “WYSIWYG’s shouldn’t be a way to avoid learning code, they should be a way to teach it.” Yeah, but that only makes sense on non-Earth planets. If it were as simple as “learn to code“, we wouldn’t have invented any of these tools. Humans and code appear to be mostly incompatible.

 

Make A Magnetic Design Portfolio

If you’re like most web designers, you let your portfolio get stagnant after awhile. Are you feeling a pang of guilt while reading this? Sure, we know how it goes. At first, you pour all of your creative energy into your portfolio, taking a whole week or two getting it just right. Then, when the work pours in, you get so busy with clients that you forget the portfolio exists. Then one day you take a look at it, and it’s outdated.

electronic-portfolioRule of thumb: Anything you design in the tech world will always appear, in retrospect, to have the shelf life of a banana.

Mashable offers 10 Ways to Make Your Design Portfolio More Appealing to Employers. While the advice seems pretty basic (“Choose the Right Hosting” – What were we doing before, spray-painting it on the wall?), it’s a good refresher course in connecting with potential clients – and of course, Mashable picks examples of cutting-edge designs.

A bonus buck while we’re on Mashable: 17 Web Resources for Improving Your Design Skills. Continue reading

Which Hack Will Break Your Website? The One You Didn’t Think Of!

You might have heard that, amid the recent rash of cyber-attacks on high-profile institutions, that Citicorp got hacked. Details of some 200,000 bank accounts got compromised. But the news gets weirder when you consider how it was done, in the most blazingly obvious way.

misc_hackBriefly, credit card customers noticed that their credit card account number showed up in the URL of any given page when they were on the Citigroup website. Well, what happens when we substitute another credit card number? Oops, that shows you the page for that card! Great, let’s write a script to have wget or lynx or something run through all the 16-digit combinations and save whatever pages it finds for later phishing.

Yeah, it was that simple.

The lesson we can all take away: Think of everything! While it may seem blindingly obvious now that not hashing the account number in the user’s visible URL was a bad idea, would you have thought of a similar hole that large on your own site? One expert is quoted in that article that he: “…wondered how the hackers could have known to breach security by focusing on the vulnerability in the browser.”

It just goes to show, anybody can be caught off-guard. Continue reading

Web Design – Amazing Things in SVG

It’s good to keep your thumb on the pulse of some web design aspects, even if you don’t use it directly yet. The World Wide Web is far away from an SVG standard… but maybe some day it will come true. When it does, we’re thinking of the possibilities…First off, here’s an SVG editor at googlecode.com. Right out of the blue, if you couldn’t edit SVG before, you can now, for free. Speaking of free, for desktop SVG editors you can’t beat Inkscape, one of the best SVG editors out there, for any price.Here’s a jigsaw puzzle done with SVG and JQuery. Check the code, it’s remarkably simple to implement. Ajaxian finds many more SVG demos in the SVG category.

An amazing charts demo, done without canvas! It’s live (try editing the code in options), has dozens of different features and modes, and we find it to be snappy-responsive, even on a battered old laptop.

A bit old, but if you haven’t seen it yet, SVG Tetris.

SVGWow has many SVG demos, including this colorful bokeh effect.

Finally, here’s a paper on SVG vs. Canvas on Trivial Drawing Application. Along the way, it sets up demos and links to them, going concept by concept, and explains the code to do so. A must-see for tutorial purposes.

Web Design Case Study: Laneway Music Festival Website

Melbourne, Australia hosts the annual Laneway Music Festival, and they’ve got a website that’s been attracting attention in web-design circles. For those not in the know, Laneway is the premiere event for the Indie music scene, hosting such headline acts as The Hold Steady, Echo & The Bunnymen, Midnight Juggernauts, and too many more famous acts to list here.

designers-instrumentary_512The site attracts attention for its unusually clean design. One really odd quirk that we don’t like, though, is that it has to build a different page for each major city, forcing you to a landing page that makes you select a city – why? The content looks identical regardless which city you selected. You can also change the city from the drop-down menu after you get to the main page anyway, so that’s pointless all over again! Here, the festivals’ in Melbourne, we gave you the Melbourne link.

After that, the site’s a treat. A hip graphic header, easy navigation, splashy photos, and piped-in multimedia content from Twitter, Flickr, and forums make for a site that gets you where you want to go and tells you what you want to know with efficiency and taste.

It just bears pointing out because… hey, have you seen most music-related websites?

Internet Explorer’s Test Drive Site

Wow! For all the derision and loathing we pour on Microsoft and its village-idiot web browser, every now and then you see some engineer project from a back room on the Redmond campus that makes you think that somewhere in the steamrolling bureaucracy, somehow, there are fun, creative minds just trying to claw their way out.

Witness the IE Test Drive Site. It’s a place to test out demos relating to HTML5 and other web technologies, which Microsoft is trying to keep on track for preview editions of Internet Explorer. But there’s lots of fun, fun stuff here, including a pinball game, a Sudoku generator, an asteroid field simulator, and tons more stuff. Just be advised that it’s meant to be cutting-edge, so if you’re not updated to full-modern standards, you won’t be able to run this stuff.

We have just one question: Why aren’t the people behind this demo site running the whole dang company? It’s this thrilling attitude towards playing with technology and making it do gee-whiz stuff that Microsoft had in spades in its early days and so grimly lacks now.

Can Web Software Be Successful Without Being Open Source?

We were reminded of this factor when we saw Tech Drive-In’s list of 11 Biggest Open Source Success Stories That Are Changing The World As We Know It. And all of them are tied to web and Internet business in one way or another.

fxosWe have Linux in general and Red Hat Enterprise Linux in particular (Linux is dominating the web server market and Red Hat is one of the chief vendors), Ubuntu (the most successful user-level Linux distro, distributed mostly over the web), WordPress and Drupal (there’s your whole CMS management system for websites), MySQL and Apache (the web server that ties it all together), Firefox and Google Chrome (two of the most popular web browsers), and of course Android (bringing mobile phones into the market). That leaves Open Office as the only desktop-related, non-web technology… although it’s a standard fixture on Linux.

Where’s the competition? Microsoft is still pushing against the web browsers with Internet Explorer, now at version 9, so they’re still alive there. Granted, MS web servers do make a dent in the market. Oracle competes with MySQL… But really, when you look at the whole ecommerce world, it seems like open source software has completely skunked the competition. We can think of no widely-adopted proprietary blog software or CMS.

It kind of tells you that the open web and open source software go hand in hand.

Why It’s Time For Everybody To Start Hyping HTML5

We work in the web development industry, and so we love our shiny new stuff! Don’t we? We love our chrome-plated glowy neon high-tech toys, because they make us feel like the hero in a Tron movie.

web-developmentOhhh, it’s exhausting keeping that up. But anyway, as painful as it will be to live through, we’re starting to see lots of enthusiastic hype for HTML5, which means that it will come to pass. It works this way because the life-cycle of all new web tech runs like this:

  • Initial spec. Somebody like Tim Berners-Lee or Paul Graham makes a blog post about it; everybody laughs.
  • First implementation. Some bright little start-up implements it before its time and it falls over. All the big companies sniff over it and turn their nose up at it.
  • A handful of bright bloggers keep yammering about it and why we should give it a chance.
  • A few more take up the march, but now they’re posting demos with amazing things happening. Start-ups form. The first dollar is earned from it.
  • Suddenly the whole tech world goes crazy for it! People can’t hype hype hype it enough! The buzz becomes buzzwords, hype, overkill, and burnout. An investor bubble forms around it and bursts.

Yeah, think it over. Look at past examples. Cloud computing, Web 2.0, text messaging, RSS, SaaS… isn’t it always in that pattern?

Web Designers Bandy About NoSQL, Everyone Else Baffled

The least sexy word in the English language is “database.” You could just have the wildest party in the world happening, and run in and yell “database!” and it would take the fizz out of the champagne, make the DJ pack up his rig and go home, stop the dancing cold, and make everybody run away. Databases are the exact point where a CS major quits studying to be a web developer and decides to become a web designer instead. It’s still used in Catholic school to punish unruly students.

SQLSo everybody’s supposed to be very excited about this new NoSQL thing. Now we have to pretend to be excited too. We also have to pretend to understand what NoSQL is all about. Yes, horizontal scaling!

And we’ll also nod along with the important-sounding acronym ACID, which stands for “A Completely Important-sounding Designation,” and something about what databases should do. Of course, all this is drawing fresh ink because Oracle bought out Sun, and… wait a minute, what does Oracle make again?

Join us next time for the thrilling conclusion, when the backlash movement “YesSQL” makes an even more obscure ripple of hype!

Web Design – What Is Flash?

Apple says Adobe is working to sabotage HTML5. Adobe says HTML5 is no threat to Flash. Everybody’s watching the fight, and we love the six-fingered tattooed fist in the image, guys!

While we’re all bickering, could we help by pointing out what Flash is?

folder-adobe-flashIn the first place, Flash is not an Adobe innovation. Flash was originally developed in 1992 by a company called Macromedia, when it created a browser plug-in originally for Netscape Navigator. Life went on this way for 13 years, all the way up until Adobe bought out Macromedia in 2005, in a hostile takeover which also acquired Dreamweaver. Since 2005, Flash has gone from being a relatively controversy-free plug-in to being a hotbed of drama and turmoil.

But here’s all Flash is: a way to script actions and animate images in a web browser. That’s it. It is made out of just three things: SVG (Scalable Vector Graphics), XML (actually just the SMIL-type functions, for multimedia markup), and a scripting language called Actionscript (which, as is plainly evident to anyone who’s coded in it, is just an ECMAScript implementation nearly identical to Javascript).

It is very difficult to justify this plug-in in the year 2010, when it can very easily be mimicked with open standards that have existed for years. In fact, that’s exactly the case with what we’re seeing now:

  • “All major desktop browsers, and many minor browsers, have some level of SVG support, except for Internet Explorer.” No less than Tim Berners-Lee has criticized Microsoft for failing to implement SVG browser support.
  • Then we have AJAX. For basic user interface controls AJAX blows Flash away. There’s even the AJAX Animator project.
  • And then there’s Java. Java is open-source now. The Java plug-in still works, and it does much more than Flash can do anyway.

So it isn’t a case of Adobe having to defend its turf. Its turf has already been invaded, occupied, settled, and homesteaded. It lost its last leg to stand on as early as 1998, when Netscape spawned the Mozilla browser by releasing their code under the Netscape Public License.

 

Web Designers – Know the Web Audience – Age Demographics

Every web designer should at least save a copy of this chart listing social media use by age. It’s a gold mine of information in a small image. Charting age brackets for young teens, young adults, Generation Y, Generation X, Baby Boomers, Older Boomers, and Seniors, it shows who’s using the features of the modern web, from creators to spectators.

Obviously, you can see the age range from 12 to 40 doing all of the web activity to speak of. After age 40, the dip falls off dramatically until you get to seniors whose extent of web use is email. One interesting exception: RSS usage is flat all the way across the age groups! As surprising as it may seem to those of us who simply can’t start our day without our news feed, syndication just may not be taking off like everybody expected it to.

Web Design – The Ten-Minute .htaccess Guide

On any website using Linux website hosting, chances are good that you have the Apache web server software at your command, which puts you in charge of the most useful file on the Internet, the .htaccess file.

If you haven’t peeked into this file and learned what’s going on in there, you’re missing out on a powerful tool for disciplining your website (and unruly users!). You can edit it with any text editor – even Notepad! Below, a hint list:

Block directory listing:

“Options -Indexes”
What it does: Stops visitors from being able to view a directory in raw form. You might do this to prevent paid content being viewable for free, or for security reasons.

Block referrers:

After the line that says “RewriteEngine on” put:
“RewriteCond %{HTTP_REFERER} badplace\.com
RewriteRule .* – [F]”
What it does: Stops visitors who follow a link from a specific site. Usually you’ll want to do this to stop a referrer spammer.

Have a custom 404 page:

tb_sign1“ErrorDocument 404 /my404.html”
What it does: Lets you override the default ‘file not found’ page built into the web browser with your own custom page. This is great for catching the visitor so they don’t go away discouraged. Explain the error, and offer them a link to your home page, a directory listing, a search box, or even just a silly picture so at least they smiled.

Redirect URLs:

“Redirect permanent /oldfolder http://www.yoursite.com/newfolder”
What it does: Makes all calls to http://www.yoursite.com/oldfolder/index.html go to http://www.yoursite.com/newfolder/index.html instead. This is a common problem if, say, you changed a major part of your site and will have a bunch of incoming links getting lost if you don’t redirect them. This is also called a 301 redirect and can be set up the same way as the above,
ie: redirect 301 /oldfolder/index.html http://www.yoursite.com/newfolder/index.html


Stop image hotlinking:

After the line that says “RewriteEngine on” put:
“RewriteCond %{HTTP_REFERER} !^http://(www.)?your-domain.com/.*$ [NC]
RewriteRule \.(gifjpgpng)$ – [F]”
What it does: Prevents outside websites from embedding your images in their webpages. Stealing other people’s bandwidth is a huge Internet etiquette no-no, but some idiot out there never gets it. What this string actually says is: If the file is an image (ending in gif, jpg, png) and the link is not from my site, deny it.”

Block bad bots:

Again after the line that says “RewriteEngine on” put:
“RewriteCond %{HTTP_USER_AGENT} ^BadBot
RewriteRule ^.* – [F,L]”
What it does: Prevents visitors based on the user agent (the identifying string) instead of where they came from. You would only want to do this if you think some sort of automated program is crawling your site for some nefarious purpose, such as harvesting email, downloading content to steal, or just plain being a nuisance. You *don’t* want to do this to a legitimate site crawler like googlebot! That’s Google’s own site indexer.

Make PHP executable from any file:

“?AddType application/x-httpd-php .html .htm”
What it does: Allows you to include PHP in a file with any extension, not just .php. By default, Apache only calls the PHP engine for files ending in .php. A warning: You want to think twice about doing this with some forms – For instance, if you have a blog running PHP and a comment form on that blog, a scripting attack could be initiated by typing PHP code (along with other code, such as Javascript), into the comment form.

Webcomics That Web Designers Will Appreciate

Thank Heavens for web comics! Before them, comics were doomed to die a horrible death in the newspapers, where 75-year-old franchise-zombies hold on forever, getting moldier every year.

The web saved comics, end-of-story. For the web designer and developer audience, here are the essential web comics:

  • comic-lifeXKCD – The webcomic that made webcomics famous. Also spawned 1000 stick-figure comic imitators. Which is silly, because the point of XKCD isn’t the drawing, but the brilliant scientist creator who thinks up those impossibly geeky jokes!
  • Dilbert – The only newspaper comic to survive its time in print to be reborn online as fresh as ever. It helps that creator Scott Adams is still alive and well, unlike the creators of the franchise-zombies.
  • Penny Arcade – Well, sometimes you have to take a break and not think about work! This comic is focused entirely on gaming and video game culture. It’s what web designers do in their off time anyway.
  • User-Friendly – Founded in 1997! It can be said to be the oldest surviving web comic, and from day one it was about tech, geeks, “hackers” (it meant something else in the old days!) and development.
  • Doomed to Obscurity – A new up-and-comer, but definitely worth watching. It’s been called both a modern successor to User-Friendly and “Dilbert without the dog,” but its humor is blaringly original, while having a focus sort of like the above four comics combined!

 

 

A Web-Designer Shares their Toolchain

It’s always nice when web designers share their tools of the trade, especially when it’s a mom-and-pop outfit.

This designer lists a lot of free and open source tools which they use to build a pretty impressive portfolio. Fancy IDE? Nah, Notepad++! And a freebie FavIcon generator. Open-source Firebug, the Firefox extension that turns Firefox into a power development tool. And of course, for graphics… Gimp.

People are always astonished when you say you use Gimp for production work. Bad press from Adobe and a legion of elitist Photoshop users have given people the false impression that Gimp can’t do anything, like it’s not even as functional as Microsoft Paint. No, Gimp is really all you need for basic web graphics. It’s just doomed to live in the shadow of everyone who doesn’t want a Gimp, but instead wants an open-source Photoshop.

Your Buzzword For The Day: UX

“UX” stands for “user experience”, and a blogger over at Mashable talks about 10 Most Common Misconceptions About User Experience Design.

The article does cover some good ground on the whole subject of interface – whoops – experience design, and is worth a look just for the thought it provokes. I like #4: It’s not “just about usability”. No, it actually has to do something worthwhile, is the point that needs emphasizing.

While I agree that experience design is important, and there are designs that are better than others, I have noticed in the past few years amongst the professionals with “nebulous titles” (see #9) is that they try to hard to justify their profession and end up over-thinking the whole thing. The best intentions and all that, you know. But have you ever seen something designed by a committee? Say, a government committee? Then you know what I’m talking about.

It’s good to be aware of the need to design the user experience, but at some point we also need to quit making up six-syllable words, get out of our academic ivory towers, and just say “It’s a button and a menu! Leave it alone!”

 

Web Geeks – Meet Your Idols!

We missed this a while back with all the pre-Holiday rush, but IT-News Australia published the list of the top ten geeks of all time. And yes, it is an article which uses the word ‘geek’ in the positive sense, the way we used to use the word ‘hacker’.

The list is worth pursuing, because it reminds us of all the people without whom we web developers wouldn’t have a job today:

ComputerLinus Torvalds – Maybe you don’t use Linux on your desktop (yet), but it is certainly on the job every time you use the Internet. After all, every time you use Google, you’re using Linux.

Sir Tim Berners-Lee – Made the World Wide Web. ‘Nuff said.

Marc Andreessen – Made the first WWW browser. Also ’nuff said.

Jack Kilby and Robert Noyce – Invented the integrated circuit. Well, yeah, there’s that.

Richard Stallman – Together with Torvalds, has basically single-handedly kept the flame of intelligent computer use and computing freedom alive. Chances are some of your favorite tools exist under the banner of the GPL license.

There’s many more who deserve mention, but I have to admit that of all the top ten lists of influential people in computing, this one is the most accurate.

 

Hollywood Hates Web Designers

I say that because nearly every film and TV program that comes out, when it shows a computer screen, has some fantastically unrealistic magic going on. So the expectation is set high, and when clients come to you to design their website, they wonder why you can’t make it work like that.

From the orchestra-conductor interface in Minority Report to the fantasy computers on the Starship Enterprise from Star Trek (you like how Captain Picard can talk to the computer, but the bridge crew still has to push a million buttons to drive the ship?), the film and TV industries are acting like they’ve never seen a computer in their entire lives.

Here’s the specs for the Hollywood Operating System.
You’ll recognize it all.

And here’s some more dumb Hollywood hacking cliches.
You’ve seen them all, too.

And for you hardcore programmers, here’s the list of all the ways Hollywood misrepresents code.

Really, we need a Hollywood webkit. They’ve come close to that a few times already! There’s the LCARS interface from the Starship Enterprise, recreated as a theme for the Enlightenment window manager. Hey, if you can’t beat-em, join-em, right?

But even better, we need to encourage Hollywood to represent our profession more realistically. One flick that got it right was 2001’s Hannibal. Notice how the characters use technology in this movie? A character looks up Hannibal Lecter using something that looks a lot like Google, and gets to something that looks a lot like the FBI’s most wanted list, all while using an ordinary operating system on an ordinary computer.

See? It can be done!

 

What Are Your Web Developer Peers Thinking?

AJAXian has released the results of their 2008 State-of-the-Web survey, and the one glaring thing that stands out is that the people surveyed (“as many web designers and developers from around the world as possible”) seem to be losing touch with their audience.

A minority using Windows, a minority using IE, and a minority using mobile devices. That makes huge sense for web developers.

firefoxBut that’s a sharp contrast to the web audience, where the most common visitor is still running IE6 on Windows XP, with the second place going to IE7 on Windows Vista and the third going to a smartphone running Windows Mobile.

This is a generalization derived from many survey sources, but it’s close enough to make the point.

The thing is, the farther apart web developers and web users drift, the farther the designs of the former will meet the expectations of the latter. True, we all test our websites on several platforms (I hope we do, at least!), but that’s still different from using the same thing your users use, day in and day out.

Yet, to a web developer, the thought of using Internet Explorer on a Windows system fills them with dread and horror. And justifiably so – the people who know more about how the web works are unable to tolerate the sloppy calamity that is the Microsoft web experience. It’s hard to look at Microsoft’s behavior and not think that they just plain hate the Internet!

So we try it the other way: convince users to switch. And after almost 15 years of trying, it’s time to give up. We can’t get users to stop opening viral attachments in their email; how are we supposed to make them believe that the web isn’t supposed to look this way?

Oh, and the other glaring thing we can tell from the survey: Perl is dead.

 

Layout and navigation–Critical to website success

Layout and navigation are the key for attracting attention to a website. On a well designed website, individual elements, be it graphics or text, appear to be in harmony with and complimentary to each other. The quality of the layout dependents on the right mix of placing of objects, font size, empty spaces, and background.

Use background colour that enhances the look of the text or graphic on the foreground. Lighter shades are generally preferred and practically found to be useful. Avoid adding colours just to create shock value or add an element of surprise. In addition, the background has to be appropriate keeping in mind the focus of the site. A site dedicated for a medical facility may have white or light blue as the background giving an impression of purity, cleanliness, healing etc., while darker colours may not be suitable.

Placing of the text and the spaces in between may also give different impressions about the website. A website for a media company may display text and graphics in a random manner which may not be appropriate for, say a charitable organisation.

Use font size of 11 or 12 and a pleasant font type – I like Georgia, and avoid Arial type fonts.

Avoid the use of video clips and graphics that take an eternity to load and play. Be sure to add an option tab to skip the video or flash graphics if it is the first thing anyone encounters while entering your website. People would not want to go all over the show every time they visit the site. Do not use animations in the background that run without end, as they may prove to be a distraction in reading the text in the foreground.

Another important feature of a website is the navigation system. A good navigation system can be somewhat compared to finding one’s way using a map. If the clues and directions are foolproof the going gets easier, and more importantly, interesting. Keeping the user interested is the purpose of a good navigation tool. Imagine you have a site dedicated to provide information about all the ways and means for people to travel to exotic places and tips to find cheaper means of transport and low-cost lodging. A well-designed navigation tool will make it easier to gather information, as well as explore deeper and wider, for the possibilities of adding various places on to the tour itinerary. A link attached with each location name could lead the user to a page dedicated to photographs or video clips of each location.

A good navigation tool helps in moving from one page to another with minimum effort. It is generally advised that the navigation system be planned and finalised well before the website is developed. Many a times it so happens that a user does not find specific information on a site, in spite of it being shown consistently when a Google search is made using the keyword.

The importance of navigation can be well appreciated when accessing data from websites of popular organizations. Adding a navigation chart that can be accessed from the home page is advisable. A user may find it easier to find his way using the chart rather than exploring all options available.


Fixing Validation Problems Effectively

It is very important that you have a valid HTML document.

A valid document is important so that your page displays correctly on all browsers. You can use different validations that are available for the purpose. By using these validators you can understand the various errors that exist in your document and easily make sure that you remove these errors to make your page W3C compliant. These validators can provide you with a detailed description of errors that you can read out and eliminate.

When you submit a page for validating you generally get a window or an email that will explain the errors. You cannot have a perfectly valid page the first time so it is important that you validate your page. Moreover, with validation, you ensure that your page can load properly even when HTML versions improve. To effectively fix validation problems you can undertake the following measures:

• Read the full text of each error:
When you submit your page for validation, these validators provide you with a lot of information on errors. Though it seems like a lot of information, you should read through it thoroughly. It gives you many important information for elimination.

• Fix errors in order:
The validators read the HTML code sequentially. It is better to start fixing the problems in the same sequence. You may find yourself spending more time on fixing errors if you go from the last error to the first error.

• Re-validate after every fix:
Typically for errors of any kind a single error at the top can generate other errors after it. If you eliminate the errors in a sequence and validate them after each fix, you may find that some of the errors get eliminated without having to work on them.

• Go to line number and start reading up:
From the list of errors provided, you would know the line number for the error. Go to the line and find the error if it exists on that line or before that line.

• Line and column number are not necessarily accurate:
Though the validators give you a near accurate idea as to where the problem starts, it is not always perfect. You can take the information provided as a guideline and check the code around that line to find the problem area. Move up from that line if you do not find the error on that line itself.

• Warnings may be ignored:
There are some warnings that these validators sometimes provide you with if it is not sure about something in the code. You can remove the errors and have a fully valid page with the warnings. They are simply shown to indicate that there may be problems for some browsers or user agents. If you want, you may choose to correct those.

There are various validators available like HTML validators, XHTML validators and CSS validators. They validate what their names suggest and are easy to use. They use W3C to validate your HTML, XHTML and CSS specifications.

You may also make use of the Link Checker that can help you to find if the link is working or broken. There are accessibility validators also which can check your document.

Fixing validation issues is not difficult and makes your page compliant with most of the browsers.

 

More technical tips for increasing your website loading time

Website design and page loading speeds

The total number of HTML files on each page should be as low as possible although most browsers can multithread. Minimizing HTTP requests is a key to web page loading.

The total number of objects & images should be a reasonable number. Combine, refine, and optimize your external objects. Replace graphic rollovers with CSS rollovers to speed display and minimize HTTP requests.

Keep external CSS files per page to a low number and should be in the HEAD of your HTML document. They must load first before any BODY content displays. Although they are cached, CSS files slow down the initial display of your page.

Consider reducing total page size of your web page to less than 30K to achieve sub eight second response times on 56K connections. Pages over 100K exceed most attention thresholds at 56Kbps, even with feedback. Remember you still need to cater to dial-up connections.

Make sure external script files are either one or two. Combine, refine, and optimise your external script files.

Total size of your pages HTML file should be less than 20K which will allow your page to display content in less than 8 seconds, which is the average time users are willing to wait for a page to display without feedback.

Some More Tips For How To Avoid Costly Mistakes When Designing Your Website

Simple rather than flashy:
The use of multimedia can help you provide all kinds of features making your web pages lifelike and interesting. However, it is advisable to avoid its use if you really want your prospective visitors to gain quick access to your website and obtain the relevant information. It is a good idea to limit flash navigation, which can confuse users if over used. Always make access to your Home page direct from any page.

Focus on speed:
Files with graphic formats should never give users long download times or they will be driven away. Remember search engines find it hard to decipher text embedded in graphics and these features take longer to download. Avoid such things as far as possible. Have a look here for more technical tips on website loading and page design.

Headings are important:
While surfing the Net do you enjoy reading a huge passage without headings and sub-headings? Not really! Therefore use catchy headings and sub-headings (the juice) to help your website visitors go around your site freely without getting lost in the mass of words. Use bullets to give quick indicators to simple-worded detailed information. In your headings, choose key terms that can be easily indexed by search engines.

Finally, remember that your prospective clients and customers are your target. Put yourself in their place and ask yourself if your website will be able to live up to their expectation. Also, regularly revise and update your website keeping up with the changing technology and needs of the time.

 

Firefox 3 – What a nightmare

When Firefox announced a new version for their excellent web browser a couple of weeks ago – Version 3 – I wasted no time in down loading the latest version. Full of excitement.

I have been a massive Firefox fan (along with every other tech geek around) for a long time now.

What an absolute disappointment.

Along with the fact that half my add-ons were unsupported (such as RoboForm), it has an unbelievable amount of bugs, clashes with Norton 360 – and is just a massive let down.

After using the new version of Firefox for a couple of hours I actually changed my default browser back to IE7 (which I hate with a passion). Not for long however, because when you’re used to using Firefox – IE just doesn’t cut it.

So, IE goes back to being used only as the test browser for new web development – that’s about the extent of it’s use.

Yesterday, I uninstalled it and reinstalled Version 2.0.0.1.6 – and it’s back to it’s brilliant best! I love Firefox again.

Some technical tips for increasing your website loading time

Coding should be clean as possible, free of structure and CSS files should be off page where possible.

HTTP compression, otherwise called content encoding using gzip should be considered.

Consider compressing your textual content ie javascript etc with mod gzip or similar products.

CSS alternate style sheets should be referenced in the HTML but are not actually downloaded until they are needed and therefore reduce the total page size.

 

Advanced tech tips for web page loading

The total size of your images should be under 30K. Consider optimising your images for size, combining them, and replacing graphic rollovers with CSS.

The total size of external scripts ideally should not be over 8K. Consider optimising your scripts for size, combining them, and using compression where appropriate for any scripts placed in the HEAD of your documents.

The total size of your external CSS should be under 8K. Optimise your CSS for size by eliminating white space in the code, using shorthand notation, and combining multiple CSS files where appropriate.

 

Designing Websites For Web Browsers

While designing your Website, you should understand the fact that your visitors might try to get access by using one of the many different browsers used throughout the globe. Hence, a vital part of your effort focuses on ensuring that your Website performs satisfactorily when accessed by any browser. If your Website is not accessible or does not run smoothly with certain browsers, then you might lose those visitors and potential clients to your competitors.

Various operating systems use different browsers. Therefore, even as Windows users prefer to use Internet Explorer, Firefox, or even Opera – Linux users could be accessing your site by using Konqueror while Mac users could visit via Safari.

The best way to design and test your Website would be to design it for use with Internet Explorer and then test it with the other browsers.

Use HTML 4.01 or even XHTML as your code.

Another simple point that results in irritating errors is the proper encoding of specific characters. While some browsers can automatically correct character errors, other browsers that understand only encoding might result in display or execution problems. Thus, it is important to encode all characters other than alphabets or numbers in their hexadecimal forms.

 

 

More on Designing Websites For Web Browsers

Another common problem that afflicts some visitors is the incorrect use of colours on the Website.

Your images, graphics, animations, and text especially should be viewable and readable by all users irrespective of the browser or resolution setting.

Many visitors would enter your Website with high colour settings; there are still quite a few web users whose computers have a setting of 256 colors.

Ensure that your Website does not have any dithering issues for visitors whose monitors have different colour settings. Thus, your font and background colours should be in sufficient contrast so that all your visitors can easily read your web pages irrespective of their browser or colour settings.

Instead of directly using the colour names, ensure that you use the matching hexadecimal codes to allocate the colours on your site.

 

Designing Websites For Web Browsers part 3

Your graphic format should also be easily accessible by different browsers. Images can be stored and transported under various formats. The more common ones are JPEG, GIF, and PNG.

Some GIF users have run into patent problems and have thus shifted to PNG or JPEG formats. There are various other graphic formats but since most work only with a limited number of browsers, it is better to stick to a format that the maximum number of browsers can access.

If possible, try to ensure that all the browsers load the text on your Website so that your visitors can browse over the content of your site as your graphics load on to the page. This will prevent your visitors from leaving your site if the graphics or animations take a longer time in loading.

Thus, in order to cater to a wide variety of visitors from various corners of the world, it is necessary to design your Website in a format that can satisfy the maximum number of visitors irrespective of their operating systems or their browsers.

By designing and testing your Website with various browsers, you can detect and remove any flaws and thus ensure that your Website loads smoothly on to your visitor’s machine.

 

 

A Few Web Layout Tips

• Navigation should always be simple and easy. Websites with unfriendly navigation miss the traffic. A navigation key should help you easily browse through web pages without any difficulty. If your navigation system is vague, the visitor will get frustrated and leaves the site never to come back. All successful websites use simple navigation keys.

• A web layout helps you decide what content comes from the first page until the end page. It lets you know where exactly you want to use graphics and where and how many pictures you want to insert. It will also help you decide on which font color, background color and the text color to use.

• You can make use of templates as well, and edit it to upload on your website. However if you do not wish to be a part of the herd make sure you go for less popular templates.

• There are many layout tools that help you look at the website before you can upload it, so that you can amend the required things.

More Web Layout Tips

• There has to be a flow in your website. You just cannot place any content or text anywhere. The content and the graphics used should have a meaning and it should in connection to the previous content.

• Make sure that the content you use is correct and beneficial to the readers. The language should be simple and words easily understood. Always use pleasing fonts and colors.

• Always use limited file size that makes the website easy to be viewed.

A well-planned layout is a foundation of every website and thus should be careful in drafting it. A simple and easy to understand layout will help you generate a better website. Seek a professional web design help so you know you are on the right track.

 


Css And Your Web Design

Web-designers use CSS or Cascading Style Sheets for separating page content like paragraphs or images from the stylistic elements of the page. These stylistic elements may comprise of colour, fonts, layout etc.

The term generally used for this is ‘Separation of Content from presentation.’

CSS represents a breakthrough in web designing as it equips web developers with the ability to control styling and layout of multiple pages all at once. Web designers can choose a style for every HTML element and apply it to multiple web pages at per their requirement. To effect changes globally, the style needs to automatically update all elements in the web.

However, many people refrain from using CSS just because they lack a proper understanding of it. It nevertheless is worth investing time to learn CSS, as the advantages gained through its use are tremendous.

More On Css And Your Web Design

Some of the major advantages of CSS are

• Creation of smaller file sizes
• Greater control over page structure

Smaller size files and CSS: you can reduce the overall code-amount present in your web pages. This is possible by taking out styles from an HTML page and putting it a standalone style sheet or .css file. Pages containing less code make for smaller file sizes that are preferred by all search engines. The SEO community generally considers page sizes up to 100KB as good.

Better control over page structuring: When using CSS, you can structure your pages as per HTML standards with no compromise on the appearance and feel of the a page. CSS caters to well-structured pages allowing designers to create pages that are attractive and have great flair.

It is best to use CSS in Website design and write one or more than one .css file to house all the style codes and then apply it to the relevant pages with the HTML link tag. Adopting this approach will allow everything related to the look of your web site to be found at a single location and not have it jumbled up with the site’s contents. This will allow you to change your site’s content without affecting its.

Advantages of CSS

Another major advantages of CSS are that it allows being picked up by search engines better, because of clearer code

CSS allows getting picked up by search engines:
When you use CSS to structure your pages, it is possible for you to hide content from specific browsers in certain situations. For example, you may want certain content to appear only in print or you would like some content such as page navigation only to get displayed on the screen and not in print.

Using CSS gives you the advantage of getting content indexed along with the benefit that content brings. Assuming you are new to CSS, you must understand that many browsers still interpret CSS standards in their own ways. Some of the archaic browsers do not read CSS at all.

While structuring your pages using CSS, you must ensure that that they have the maximum cross browser compatibility and that HTML pages appear acceptable even without CSS.