EARTH MOVIN' MEDIA

Web Design Blog

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

Pros and Cons of Outsourcing Your Social Media Marketing

social-media-marketingSocial media marketing is something that many businesses do because they know their potential customers hang out on social media sites. In fact, social media plays a big part in how your company is perceived. However, it does take quite a lot of time and patience, something that not all business owners have a lot of.  The work can be outsourced, but there are pros and cons that you need to be aware of. Here are some of them.

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

Blowing The Dust Off Your Blog: Three Ways To Network

Hey, remember blogs? Times used to be when we talked about how blogging was the next great marketing venue of the 21st century – it’s been about ten years since then. How about we get back to basics? Blogging is still the main way to go if you want your business to get exposure on the web, but now that everybody has a blog, you have to work harder to get noticed. So here’s a refresher course in networking to promote your blog:

1. Interact with your readers. The best way to keep traffic coming in is to make them feel welcome. So when a visitor takes the time to leave a comment, thank them! If you use the Disqus plugin or similar systems, you can even rate them – just a little +1 or ‘like’ to say ‘thanks for your feedback.’ And replying just to say ‘thanks for your insight’ goes a long way. Get into an interesting discussion or two with your commenting readers sometimes, it shows that you’re not just a megaphone shooting your mouth off, but have an open mind and thoughts to consider.

Continue reading

Six Random Moments Of “Aha!” In Web Design

We thought we’d share a few silly little tricks or ideas that solve a lot of problems in a small amount of time, or just look knock-out cool for very little effort…

#1. Using a “position:relative;” div tag on the outside of a “position:absolute;” See, normally, the ‘absolute’ attribute in CSS makes the element stay stuck to a spot on the web page as if it were nailed there. And that happens no matter how many nested floating divs you stick it in. Until you make the div just outside of that one say “position:relative;”, then your absolute element finally says “Ooooh, so THAT’S what they want me to do!”

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.

7 Successful Business Blogging Tips for Boosting Brand Visibility

Blogging, especially business blogging, is the in thing these days; just about every business with an online presence is into it. It’s something that everybody is doing, and why not, after all a blog not only brings to a website an added sense of credibility, but also improves the brand awareness of your business and its products and services.

But, it must be remembered that blogging just for the heck of it, and because everybody is doing it, doesn’t work. It must be purposeful in order to succeed. To make you job a little easier, you need to keep a few business blogging tips in mind, to ensure that your blog is successful.

Continue reading

Designing A Secure Website? These Five Linux Distros Can Help.

Every now and then, perhaps we should remind each generation of web developers about Linux. Although even the staunchest Linux advocate will admit that the Linux desktop lags behind on gaming (unless you’re a Minecraft junkie!) and can’t run Photoshop for beans, Linux is a powerhouse for the average web developer. Linux is baked into the backbone of the Internet, after all. And how much flash and polish do you need to slap together Javascript, XML, and PHP?

Continue reading

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:

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?

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 – Coolest Recent CSS3 Tricks

We haven’t been showing enough love to CSS3 lately. There is a fundamental shift in web design happening right now, between the end of the Flash era, beginning of the HTML5 era, and the advent of (at last!) working CSS3. Here’s a roundup list of pretty and/or cool tricks in CSS3 that just make you go “Awsome!”

 

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.

 

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

Are You Driving Users Away? Also, What’s Up With Pop-Ups?

We loved these “8 user experience gaffs that annoy your prospective customers” – it reminds us of the old days of Vincent Flanders. But this post is just a few days old, and yet not much has changed in what not to do in the world of internet marketing.

Some things that bear analysis are asking why users can’t stand a certain element. For instance, why do users hate pop-ups? Well, it’s because you were trying to read this web page, and all of a sudden a new box appears in front of it. What it’s doing is, it’s interrupting your mind, like shouting over the top of someone who’s talking. Can you imagine if you sit down to watch television, and just then someone comes running in with a painting and sticks it between your eyes and the TV screen right when the news gets back from commercial?

Things like that – they seem to be hard to explain to some web owners. Even if that element makes some sales, you have to look at how many people are getting frustrated and going away.

 

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.

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

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

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.

YouTube: What really is the bandwidth Bill?

A great new insightful article over at wired.com 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”

Ideas For Money On The Side In Web Design

If you work for a web design firm, you might have to sign no-compete agreements (depending on the laws in your area) saying you won’t work for clients in your off-time. However, web design is a big field, and touches a lot of side enterprises. Here are some ways you can put your extra tech-savvy skill points to work doing a little moonlighting:

  • Blogging – So obvious we almost don’t have to say. Most every web designer has a blog or social media account of some kind. Toss in some ads, and you’ve got a little side money.
  • Facebook apps – Fun little side boxes you can make in Flash, AJAX, and Javascript. Can be useful or fun – most are trivial, and if it’s popular enough you can sell memberships and or licenses for revenue.
  • iPhone apps – No doubt you’re heard of some of the top-selling applications for the iPhone. Apple lets you set up a store and sell these at the iPhone apps store.
  • Twitter backgrounds – Twitter has given rise to a new cottage industry in making backgrounds for Twitter home pages. Many sites give away backgrounds, a few sell them or make them to order for a fee.

 

« Older posts