Web Design Blog

Why is Audience Targeting so Important When it Comes to Social Media Marketing?

Social media marketing (SMM) is a relatively new form of advertising, one which can greatly improve the success of your business if used right. However, if you don’t get it right, social media marketing can end up costing you a whole lot of money for very few results.

One of the most important aspects of social media marketing is targeting the right audience. Most social media platforms allow you to set very specific adds which are delivered to a very specific audience. Doing this is very important for a number of reasons, including:

It will help you get more website views:

Once you have identified your target audience, good quality SMM ads can help drive them to your social media page or website. Targeting the right people will increase your conversion rate, and will prevent you wasting your time delivering ads to people who will simply scroll past them. After all, the whole point of marketing is to increase the amount of people engaging with you.

Continue reading

What Beginners Need To Know About Typography

If you are looking to get into Web Design, then you need to have a basic understanding of the key elements. One of course being, Typography. Typography is the art behind type. At the end of the day, it is one of the key elements that make web pages both pleasant to see, as well as a suitable container of information. Within the Designer’s skill set, it is not only necessary, but imperative, to have a good understanding of Typography.

There are thousands of different ways that type can be arranged. Typography goes far beyond simply making text readable. How you integrate type with specific layouts, and colours, speaks volumes to your skill as a Web Designer. Looking at a good or bad web page, could come down to the Designer’s Typography skills alone.

Continue reading

A Simple Introduction To CSS

Today, many people are interested in understanding CSS. Whether you aspire to get into programming, or web design for a digital agency, or you simply want to learn how to customize your own web pages, it is essential that you learn CSS. CSS often pairs with HTML, and is frequently taught at the beginning of many programming courses. Although it is a frequently debated topic of whether or not CSS and HTML qualify as programming that is a discussion to be fleshed out elsewhere. There is no doubt however, that learning CSS is advantageous for all programmers, and is certainly an in-demand skill to have for laymen as well.

Cascading Style Sheets

CSS (cascading style sheets) entails the art of displaying HTML aspects on the screen. If you decide to learn CSS, you will quickly discover that it saves an enormous amount of time. This is so, due to the fact that it allows the user to control many different layouts from various web pages. Within CSS files, many style sheets themselves exist. By toggling through various style sheets, one is able to manipulate the elements of different pages. In CSS, what are referred to as “Classes” as well as “ID’s” are frequently used to create blocks of code that can easily transition between single-use and numerous use. Essentially, you use CSS to determine and customize, all aspects of style within your web page. The design itself, and variations in display features, fall under the category of CSS.

Continue reading

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

Create a Web Design That Helps Convert Visitors to Subscribers

If a visitor sticks around your website and reads your completely reads your content, it would be pretty safe to say they like what they see. When visitors read what you have to offer they are left wondering – what’s next? There’s different things that are offered such as other related posts or ads, but if someone has stayed around long enough to read the entire content, you need to recognize that this is the perfect time to ask for their email address. Your web designer needs to create a web design that promotes subscriptions.

E-newsletters are still an excellent way to connect with potential and current customers regularly. But collecting email addresses isn’t as easy as it might seem. Even those individuals that love what your site has to offer may become hesitant when you want their email address even when you are going to be providing an e-newsletter. Let us look at ways you can convert visitors to be subscribers.

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,, 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.

Looking For An Offbeat Image Source? Look No Further

Web Designer Depot has a post up about the gems you can find in creative commons images on Flickr. “Creative Commons” basically means “free to use” – sometimes technically for non-profit purposes, but really, does the 0.0005 of a penny you get from ad clicks count as “profit” anyway? While we’re at it, here’s a bunch more royalty-free image sources every web designer should have bookmarked:

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?

Web Design – Guess What? Social Networks Haven’t Changed Since The Pleistocene Era

Oh, you think you’re pretty savvy and sophisticated, with your Twitter and Facebook and Blogger? You think we’ve gone places and done things that could never have been done before? That we’re living in the future, plugged into a worldwide hivemind that our predecessors could only dream of?

holding_big_smart_phone_icons_1600_clr_9132Nah, actually, Wired assures us that we’re not any different than prehistoric cavemen when it comes to social networks. Researchers studied a primitive tribe of hunter-gatherers and discovered that they had the same behavior patterns in socializing that our electronic socializing does. They found matches in mutual popularity, closer friends versus more remote ones, and similarity breeding friendship, among other factors. Continue reading

Web Design – A Good Tutorial on XSS Attacks – They’re Easier Than You Think!

Just in case there’s a few designers out there who still haven’t gotten the word, here’s a great, simple explanation of how web page code injection works. It’s astonishingly simple. Read through this example, then try it on your own website if you have a PHP page that takes variables as part of its URL (who doesn’t these days?). In a nutshell, code injection works when your URL ends with something like “?search=something” and then your script does not check for valid input in the variable “search” before using it.

HackerXSS vulnerabilities are also easy to discover. For instance, imagine a cURL script that runs through your bookmark file and looks for the characters ‘?’ or ‘=’ in a link. It then tries to fetch a page for each of those links with something like ‘

‘ and then checks the returned page for the text ‘EXPLOIT ME’ somewhere in the body. If it finds that, it adds the link to its list of pages with exploit potential.

You could just Google random dictionary words and find dozens of sites per day with a system like that! So don’t assume that a potential vulnerability will never be found – they get discovered and used every day. Continue reading

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.


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 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.

Tim Berners-Lee Still Knows What’s Best For The Web

Sometimes you have to wonder what it’s like to be Tim Berners-Lee. To have coded out some basic piece of Internet technology that effectively made the other pieces come together, and then to see your baby become the new media for the whole world and all of the effects it has. Is it working out the way he expected it to? Does he ever feel like Prometheus, perhaps having given us fire too soon?

Sir Tim recently gave a talk at the Nokia conference, cautioning us once again about the dangers of leaving privacy up to corporations and governments, and also about the importance of net neutrality.

Throughout the developed world we see the continued erosion of the idea that the web is a free zone for everyone. It’s starting to become a matter of where you live, what laws control the content, and from whom you buy access. Tim Berners-Lee, like Richard Stallman (founder of GNU), is one of our “Jiminy Crickets,” voices that can do little but talk, and so are out there quietly being the conscience of the tech world. The distressing thing is, their voices grow fainter as time goes on, and few are listening or taking up their cause. What that may spell for the continued level playing field of the web business market is anybody’s guess.

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?

The Web Designer’s Most Dreaded Fonts

Why do web designers get so worked up over fonts? A decision on whether to use one font or another for a logo may embroil an entire office, waging cubicle-to-cubicle warfare (imagine stapler-cannons, binder-clip mortars, and waste-paper-basket helmets here) that shoots down an entire day’s productivity. A non-designer will look on all this and wonder what on earth gets into people.

Let’s try to explain the rationale behind the most-dreaded fonts and why designers feel that way. On top of all these, the thing that makes a font the least popular is when it’s been overused.

  • banned-rubber-stamp-graphicComic Sans – The thing is, this font was only intended as a joke/ novelty font. Think “party invitations.” Instead, a whole generation of novice web users latched onto this font for dear life and use it for everything, be it funeral notices, dear John letters, or results coming back from an AIDS test. There are tombstones chiseled in Comic-Sans out there.
  • Vivaldi – If Comic Sans is in trouble for people who don’t take themselves seriously enough, Vivaldi is the font for people who take themselves too seriously. Vivaldi is appropriate for snooty French restaurants and symphony programs. Anything else just makes it scream “pretentious snob!”
  • Curlz MT – Not only is Curlz ridiculously silly for any purpose except a circus train, it’s stupidly hard to read. If this article were displayed in Curlz MT, you’d have given up by now.
  • Kristen ITC – Well, if you have to ask “What’s wrong with Kristen ITC?”, you’re probably beyond hope. It’s designed to look like it was hand-lettered by a preschooler. And that’s just how your intellect comes off when you use it. Remember, you’re inviting people to think that you’re four years old when you use this font. Don’t blame people for treating you like a four-year-old if you do.
  • Bradley Hand ITC – Bradley hand is one of the hand-written fonts that basically lacks any imagination, while still making everything illegible and pretentious all at once. It’s like making a tray of fancy hors d’ouveres out of Ritz crackers, Spam, and Velveta.
  • Papyrus – Papyrus is hated for being too dramatic. As such, it belongs on movie titles, movie posters, banners at Renaissance Faires, and nowhere else.
  • Viner Hand ITC – If Papyrus is too dramatic, Viner Hand is the cursive font that’s too campy to be dramatic. Don’t use it unless you’re a 14-year-old Goth who shops at Hot Topic and wears a razor blade on a bracelet, because that’s what you’re telling the world.

Tips For Web Designers To Reduce Stress

Hey, it’s refreshing to see somebody acknowledge that web workers have stress, isn’t it? Most of the time our acquaintances will be all, “What are you complaining about, all you do is sit around and type all day?” So this list of tips for reducing the stress of web work really hits home.

Some particularly strong points that need emphasizing here:

5005Exercise One of the things they don’t warn you about is that a life of sitting in a chair staring at a computer screen will make you fat. There’s no way around this; it doesn’t matter what you eat, if you never burn calories, you will gain weight. So yes, taking a walk will also help burn some pounds off your chunky waistline.

Socializing Those of us with families are far luckier – working from home means that we share space with the people we love instead of those annoying co-workers. If you have pets, kids, or roommates, try to learn not to shut yourself into a shell when you’re working and invite them to join you in your den or office. You can tolerate a lot more distractions than you thought you could. It really helps fight off the stress if you can carry on a casual conversation and type at the same time. Dropping by the park or coffee shop with your laptop can be a nice change of pace, too.

Non-electronic recreation It’s funny when you think of it, but you spend all day staring at a computer screen, then get off work and for recreation spend a few hours staring at the telly screen. Or you code web pages all day, and then for break time you play video games on the same computer. This is a recipe for burn-out! try recreational activities that are completely non-digital: do the crossword puzzle in the newspaper, walk your dog, play ball with the kids, work in a garden, or even just get to a park and climb a tree. We bounce around from computer to television to MP3 player to mobile phone to PDA and back to computer like there were nothing else in the world. Build a ship in a bottle or something!

Seven Outdated Web Design Concepts

I say, isn’t it about time you updated that website you had your nephew build for you back in 1998? Outdated web pages look older every year, and now that the World Wide Web is pushing on into the 2010s, even some of the hot trends of the 2000s are beginning to show their age.

If your website’s outdated, it says bad things about you. Visitors might think you must have gone out of business, have no taste, only care about an older audience, or are just too technically incompetent to keep your website up to date. If your website is sporting any of these long-gone elements, perhaps it’s time to think about an update just to keep up with the passing decades.

Vectors_Art1. Photoshop design / Image slicing – This used to be the default method of design, even by the pro shops. But not only is slicing an image to fit into tables now outdated, but the whole “design it in Photoshop” thing is an anachronism. Modern-day sites, relying more on CSS than tables, fare far better if laid out in Fireworks, Illustrator, or Inkscape.

2. Background music / autoplaying media – Probably there are no .MIDI sound files playing any more (we hope! those got old even in 1998!), but today’s equivalent is media such as video or Flash ad content that starts playing sound as soon as the visitor arrives. At least let the visitor mouse over the element or give them a way to pause it.

3. Instructions on how to view the page – “This page best viewed in Internet Explorer 6.0!” You might as well have a gravestone over the top of your site: “Rest in Peace.” Not only does the version number date you (IE6 is about a decade old!), but the whole concept of specifying the correct browser is just not washing with modern audiences. Ditto screen resolution; we have people reading web pages on everything from mobile phones to XBox consoles on wide-screen HDTVs now.

4. Javascripted links – All browsers these days have tabs, which means that your visitor wants the option of opening a link in a separate tab. Any link on your page that tries to force the visitor to do different is annoying and obtrusive. Links should be in HTML only. Note, however, that having HTML open the link in a new window is compatible, because the visitor can still force it into a tab instead.

5. Splash pages – Old, old, old. The only exception to this rule is some media-heavy website for an accomplished artist. Musicians and animators and such can get away with making a big production out of showcasing their website. Everybody else has visitors who are there to grab that thing they need and be on their way, preferably in one minute.

6. One-page sales letters – We’ve all seen them. They looked tacky and gaudy when they were first being made back in 1996. In addition, there’s something about the way a lo-o-o-ong, hard-selling page that scrolls and scrolls, which is just kind of ranty – it reminds you of the TimeCube guy. In this day, visitors are so turned off that they’re likely to ban your domain just for seeing a sales letter on it.

7. Background images – The exception is if the image is small, minimal, unobtrusive, and the content still has a solid box behind it so you don’t have contrasting background. Even then, it’s a risky design. The rue is, if the background image is one of the first three things you notice about the page, you’re doing it wrong.

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: 53 CSS Tricks In One Place

A nice little round-up of 53 CSS-Techniques You Couldn’t Live Without, over at 9tricks. These represent the leading edge in everything CSS is capable of lately. It’s surprising that we don’t have more of it deployed.

A few observations on the list:

  • CSSWe’ve seen 1001 rounded corners tutorials, but none of them will compare with the one-line ‘border-radius’ feature… when all web browsers support them.
  • Wrapping text around an image – every hack for this we’ve seen deployed so far works in two browsers and breaks in all the others.
  • The dynamic piechart looks like one of those painfully-obvious image-sprite hacks, but you have to admit you never thought of it until you saw it.
  • The adaptive layout technique – this is the next feature we’re going to be crying for better solutions for, in HTML6 and CSS4. The massive array of screen widths we now have to deal with, from pocket-mobile devices to ridiculous monitors the size of a swimming pool, is a mark that it’s high time the device took care of more of this for us.


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”
What it does: Makes all calls to go to 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

Stop image hotlinking:

After the line that says “RewriteEngine on” put:
“RewriteCond %{HTTP_REFERER} !^http://(www.)?*$ [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.

Websites: The Big Five Web Hosting Backend Tools

When picking your web hosting company for the first time, it’s easy to get overwhelmed when you look through the options for what the host offers. Here, we present the top five most-used back-end technologies – and what they are good for!

1. PHP

The number-one server-side scripting language. Probably 90% of all the web applications you’ll find on the Internet are written in PHP, from blogs to bulletin boards to galleries to shopping cart applications. PHP is designed with the web enterprise in mind. In the case of Linux website hosting, it’s a lead-pipe certainty that this will be included.

Continue reading

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.

YouTube: What really is the bandwidth Bill?

A great new insightful article over at suggests that YouTube may pay less to be online than you do.

The story goes on to say that “the extraordinary fact that a website serving nearly 100 billion videos a year has no bandwidth bill means the net isn’t the network it used to be”

A Piece of Web History – The Very First Banner Ad

SCTimes brought up the very first web banner ad, created by none other than – AT&T! The American telecommunications company (and father of Unix and the C programming language, to boot) launched this ad in 1994.

For those of you who don’t remember, the banner ad’s phrase “you will” was the catch-phrase for AT&T’s early-’90s marketing campaign. TV commercials featured voice-overs asking “Have you ever…” followed by some Utopian visions of futuristic tech usage, and then closing with “you will! And the company that will bring it to you… AT&T!” It was so saturated that numerous parodies sprung up in computing culture. Some original AT&T ads on YouTube.


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!”


Our Favorite CSS Showcases

For everybody who doesn’t use Internet Explorer, CSS is the gift from the gods that made the web more beautiful. Galleries of CSS magic, then, basically boil down to “porn for web designers”.

While your day-to-day reality will more likely involve getting a shopping cart application to check credit card numbers correctly on a client’s ASP-powered site, you can always dream of a world where Microsoft is shelled into the ground and we can all use the modern, 21st-century web.

CSS Play – Stu Nicholls is nothing less than the wizard of CSS. Is there anything he can’t do with it? He can draw Christmas trees, make maze games, animate sprites, create fly-out and pop-out menus, and tell you ten ways to make an interactive image gallery.

Web Designer Wall – When you land at this page, the startling design tells you right away that you’re at the site of a true artist. Chock-full of inspiration.

25 Hot Female Designers – It’s a common complaint that females in tech careers are sorely underrepresented, so here’s a list of 25 of them and screenshots of their site. At least the design field gets to have a balanced male/female ratio!

CSS Vault – Very complete collection of CSS designs, all organized by layout.

CSS3 Preview – You’ll be sick with desire when you see some of the things we could have in CSS3. For instance, how many lines of Javascript are you using to get rounded corners on your boxes? CSS3 gives you one short line.

CSS Zen Garden – We couldn’t leave this out or everybody would say, “Hey, you forgot Zen Garden!” So here’s the most famous of them all – a single page of XHTML which users can then customize by submitting CSS designs. The gallery has expanded over the years, so there’s a lot to see now.

Five Predictions For The Social Web for the Next Five Years

Since other bloggers are jumping on the band wagon and making predictions for 2009 (because that’s what bloggers do!), I’ll go one better, and also delay the time before anybody can prove me wrong: I’ll predict through 2014! OK, crystal ball/ on the table/ tell all the future/ that you’re able. Something’s coming in…

Yahoo still won’t get bought. – Did that get your attention? We spent the better part of 2008 gossiping about Yahoo and Microsoft and their expected tryst. Never happened. Microsoft is too greedy to pay through the nose and Yahoo is too full of pride to offer lower. And Yahoo is actually still more profitable than some 90% of web-based businesses. They still made $7.22 billion in 2008 and they’re still a Fortune 500 company, OK?

Google will launch their own stand-alone operating system. – They kind of have that already – Android on the phone, Chrome for a web browser, Gears for widgets, Google Docs for office tools, SketchUp for a graphics editor. Put all the pieces together and make a boot-loader, that’s all they have to do. Microsoft is literally shaking in its shoes at this one.

More astroturf. – “Astroturf” is where a professional hired by a corporation poses as your friend in a social site, then tries to sell you something. Worse, ten of them band together to mod you down if you have anything bad to say about their product, and up if you cheer for their product. They’ll also troll and badger you to change your opinion. It’s fake grassroots support, so they call it “astroturfing”. Expect tons more. We already saw it online this year with the United States presidential election and candidate Ron Paul’s fake support, the fake hype over movies such as “The Dark Knight” and “Iron Man”, and the usual dirty tricks by big corporations everywhere. Expect to see jobs hiring professional commenters.

Sun Microsystems is going down. – Open-sourcing Solaris and Java was their last gasp. Even that hasn’t helped either of these limping technologies pick up new supporters. Without Solaris and Java, Sun has some nice servers to sell, and that’s it.

Twitter will get bought. – Most likely buyer: Google.


Free (or Cheap) Graphic Design Tools

Colour us “jumping to conclusions”, but we’d have to guess that Photoshop is the best-known graphic design tool out there. but it’s not an optimal solution for everybody – the price tag is high, it has a steep learning curve such that you could spend years studying it and not know all of it, and it’s also aimed more for print graphics than web graphics.

For those of you looking for a more compact and economical solution, here’s a list of tools you might want to look into. These are all less costly (all but one is free!) to download and use, and are geared more towards smaller solution sets as well.

  • GimpShop – As the name suggests, this is the version of the open source G.I.M.P. program geared to Photoshop users. G.I.M.P. stands for “GNU Image Manipulation Program”, after the general public license. It’s about 90% feature-compatible with Photoshop, and is a much smaller, cheaper, and easier-to-learn program.
  • Paint.NET – This is the free graphics program using Microsoft’s .NET 2.0 framework. It’s come a long way since its origins as a better alternative to Windows’ Paint program (the one that comes with all copies of Windows). Now it’s a nice half-step between a Paint-level application and a Photoshop. Just right for slapping together a quick design.
  • PIXEL editor – This is the non-free one – but it’s only US $32! For that price, it’s barely paying for more than the bandwidth to download it. PIXEL is highly-praised by many users, citing it’s vast features, light-weight system demands, and easy-to-navigate interface.
  • Inkscape – Another GNU-licensed free program, Inkscape produces vector graphics that are right up to par with Adobe Photoshop. Even more so than other GNU competitors, Inkscape is simple enough that a child can use it, yet can produce professional results. It’s actually the one that’s fun to just sit and play with!
  • Google’s Picasa – While Picasa isn’t a full-featured web graphics workshop, it is a very handy photo tool. It’s geared more towards home users who want to organize and post a web photo album, with some common photo-editing tools built-in such as cropping, rotating, and colour-correction. It can still be useful for working with stock photos before posting them in your blog.



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.


What web designers must know

If you are a web designer, then there are scores of things that you need to know, so that your websites will be successful. The website that you design must be able to create a rapport between the site and the visitor for a common good. This is one of the many definitions of a successful website.

In addition, your website must be interesting enough to gain the attention of a visitor who may or may not continue on to your site. Thus, there are many things that you need to take heed of in order to achieve a successful website. Here are some useful tips that can help you to become a better web designer.

website1. You must be very patient in order to be successful as a web designer. One of the greatest problems that web designers face is the fact that many web designers will try to rush through their work and thus they will often make mistakes. Don’t forget that your website will serve millions of people on the Internet and you need to be patient and meticulous in your efforts, so that you can satisfy a majority of them.

2. Make sure that you spend ample time planning for your website. This is important, as your plan will create the main layout for the website and thus this is the only way in which you can make sure that all needed elements are there. Think about the expectations from that particular website and then plan for all the elements that need to be there.

3. It is important for the web designer to be aware of the prospective audience for that particular website. Thus the design of the website must reflect the needs and the expectations of this prospective audience.

4. Make sure that you are up to date on various new techniques and tools on the Internet. It is very important for the web designer to be armed with the latest technologies in order to create a more competitive design. If you need to improve yourself then take some time off to learn about these new technologies


More on what web designers must know

5. A good web designer must be able to balance the use of graphics and Audio – Video files with website viewing efficiency. Using graphics can make your website interesting and pleasing to look at; but overdoing it can cause your web viewing times to slow down. Thus as a website designer, you will have to balance this equation for that particular website.

6. A good web designer must be able to balance out the content of the web site into numerous web pages. This will be better for the visitors and it will also be better for SEO purposes.

7. It is essential for a web designer to know the driving force behind SEO (Search Engine Optimization). It is important for the web designer to be familiar with Search Engine algorithms. This way the web designer will be able to adjust keyword densities and other relevant SEO related criteria.

8. A good web designer will seek professional help and opinion whenever needed.

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.

« Older posts