Creating Website Part II
Tuesday, November 11, 2008
Learn the Code (But Only What You Must)
Don’t skip this step!
We know. When you see words like “code,” mysterious acronyms like “HTML” or phrases like “Hypertext Markup Language,” your brain starts to buzz, little red warning flags start to wave and you turn away saying, “Yeeee … not interested.”
It’s a natural reaction if you’re poking into new territory. But you’ll be surprised how easy it is to sort out and understand high-tech alphabet soup with a little plain talk and clear explanation.
Even if you’ve decided to let a pro take over your business Web site design, you’ll have more control over the look, content and function of your site with a basic knowledge of HTML.
26
What is Hypertext Markup Language?
Yes, it’s a new language to learn. But HTML has been the basic framework of all Web design for as long as it’s existed, largely because it’s easy to understand.
It’s just words. Plain text, common words mixed with some special but simple “punctuation” marks.
You may be surprised to learn that every Web page, no matter how many slick tricks and graphics it has, is built on nothing but text. It’s like that old wizard behind the curtain: You don’t see him – unless you know where to look.
Go to a Web page you like and right-click your mouse on an empty space. When a menu appears, look for “View Source” or “View Page Source” and left-click it.
A new screen appears, filled with plain English text and familiar punctuation marks – but arranged in a different way. (If it’s one long unbroken block of gobbledygook, pick another page. Whoever wrote the code didn’t bother to break the text into lines and sections for easy reading.)
This is HTML and it controls everything on that page – every sentence, every graphic, every link and form, every sound, all of it. Your Web browser reads this text and translates it into the visual, functional Web page.
It’s as user-friendly as code gets, and you don’t need anything more than a word processor or simple text editor – like Notepad – to write or manipulate it. And it works on any kind of computer with any operating system.
27
Tip
Customize your Office Live Small Business Web site with sample HTML
Even though you can rely on professional templates with Office Live without having to know any HTML, you still may want to spruce up your site with a little HTML. Given the ability to insert HTML code in your pages using the Office Live HTML module, you can inform, entertain, and get your visitors' attention in an engaging way. For example, you can insert the code to add a video, a scrolling marquee, or a stock ticker to your page. Inserting HTML code into your Web page can be as simple as copy and paste.
• Add a PayPal Button: You can insert simple HTML code to display PayPal “BuyNow” buttons directly into our Web pages. To offer credit card or direct PayPal payments, you must sign up for PayPal Express.
�� Add an embedded video player to your site: You can embed one of several different video players in your Web page including Mydeo, YouTube, or Google video.
�� Let site visitors open a new browser window from a link: By adding a link on your Web site that opens another browser window, you can point your site visitors to other Web content without having them leave your Web site.
�� Add maps and directions to your site: Want to make it easy for customers to find your business? Add a map or driving directions to your business or other location on your Web site using the Map & Directions module.
�� Add a hit counter to your Web page: Hit counters keep a running total of the number of times that your page is viewed. They don't distinguish between the number of times that you look at your page and when a customer looks at your page. However, they do give a visual clue about the pages most used pages on your site.
�� Add a scrolling marquee to your Web page: Use scrolling marquees to highlight new products, post breaking news about an award that your company received, or let customers know that a special offer is about to end.
�� Add a slide show to your site: Use a slide show to emphasize new products, to highlight products on sale, or even to display products that your customers might not usually find. You can create your own slide show with our tool or leverage your photos that you may already have on Flickr.
28
How Does It Work?
Text alone is just a collection of words. Once strung together in a sentence or paragraph, punctuation makes them understandable and gives them meaning.
In HTML, the punctuation marks are called “tags.” Here’s a simple example:
Say you want to add the line, “Is HTML really so easy?” as its own paragraph on your Web page. In Hypertext Markup Language, it looks like this:
You’ll notice that for every tag, like for the start of a paragraph, there is also a closing tag – in this case
HTMLGoodies.com
Web siteTips.com
PageResource.com
EchoEcho.com
Jukka Korpela’s HTML Primer
Is HTML really so easy?
>To give emphasis to a word using italics – “Is HTML really so easy?” – add another pair of tags:
Is HTML really so easy?
Now, to put the same word in boldface, add another pair of tags:
Is HTML reallyso easy?
When a Web browser reads that code, this will appear on your page:
Is HTML really so easy?
29
Understanding HTML Tools
As we mentioned earlier, you really don’t need any special software or programs to work with HTML. Plenty of Web designers use nothing more than Microsoft Word to create HTML content.
Let’s decipher one more techie acronym here in case you run across it:
ASCII – say “ask-ee” – stands for American Standard Code for Information Interchange, the most common standard for handling text on computers. ASCII documents are basically text files, easily viewed and managed.
Because HTML works with any operating system – Windows, Mac, Linux – saving your HTML files in ASCII text format is the easiest and most effective way to go. In Microsoft Word, just choose “Simple Text,” “Text” or “Text Only” when it’s time to close and save your file.
Text editors are simpler than word processing programs, but cover your same needs for writing HTML. On PCs running the Windows or Vista operating system (or OS), you’ll find Notepad or WordPad built into all but the oldest versions; on Macs, it’s SimpleText.
There’s a big advantage, however, to getting an inexpensive program like the CoffeeCup HTML Editor, because it lets you easily switch between a text screen and a visual editor so you can see how your HTML looks on a Web page.
Hope we’ve taken the mystery out of this universal code.
It’s a language anybody can learn, there’s no secret handshake to join the worldwide society that uses it, and “speaking” even a little will give you more power over your new business Web site.
Maybe more than the competition.
n this step we’ll cover:
• Wysiwig vs. HTML Software
Best Values
Some Tips on ‘Deals’ to Avoid
Top-of-the-Line Design Software
6: Identify the Best Software for Words & Images
During the previous steps in this series, we’ve walked you through the information you need to decide you’ll take on the work of building your own Web site and be the true master of your domain.
Now it’s time to decide what design software and other tools you’ll use to take your vision live on the Web, whatever the size of your business, and whether or not you want to handle retail transactions online.
31
WYSIWYG vs. HTML Software
The two most common types of design software are WYSIWYG and HTML, which is used to build a Web site with Hypertext Markup Language (see Step 5). Better software combines both, automatically converting your visual design to HTML.
WYSIWYG (say “wiziwig”) makes Web-building a lot easier for those of you new to the whole thing. It’s an acronym for What You See is What You Get –you watch your site come together on the screen while dragging and dropping its pieces into place.
But if you’re building anything more than a basic Web site with limited functions, HTML is the way to go.
The code isn’t hard to learn, if you have the time, and gives you endless flexibility and options, and better control over every element of your new site and how it looks online.
A blend of both is best and usually offered in higher end – more expensive – design software.
Best Values
But cost is a serious factor, you say. You don’t have thousands or even hundreds of dollars to plunk down for software, and can do fine without all the tasty functions of sites like Yahoo, MSN or Amazon – although taking some pointers from Amazon’s site is a good idea for any level Web designer (see Step 7).
Here are some well-regarded, solid, meat-and-potatoes software choices. All get the job done and, with one exception, for less than $50. You can download the software from their Web sites, where you should look for more detail:
Microsoft Office Live Small Business Basics. If a simple, straightforward Web presence is all you need, you can’t beat the price – free. That includes a domain name and hosting (including 500 MB of space), basic Web design tools, 25 e-mail accounts for your company, and a $50 credit toward search engine advertising.
Tip
What’s the buzz about AJAX?
AJAX (Asynchronous JavaScript and XML) technology is the new buzzword in Web site design. So what is it and what makes it so cool. Simply put, AJAX is a Web development technique used for creating interactive Web pages and applications.
The intent is to make Web pages feel more responsive by exchanging small amounts of data with the server behind the scenes, so that the entire Web page does not have to be reloaded each time the user requests a change (e.g., changes the font or inserts a block of text).
This is intended to increase the Web page's interactivity, speed, functionality, and usability. AJAX has been incorporated into Office Live Small Business Small Business’s Site Designer tool to gives users immediate, or dynamic, feedback as they develop their Web site pages.
32
CoffeeCup HTML Editor. Both WYSIWYG and HTML, as well as more advanced options like DHTML scripting, live chat, blogging and loads of graphics. Buy add-ons for more functions. Free to try, $49 to buy.
Web Easy Professional. WYSIWIG/HTML. Flash animation; SEO; real-time visitor analytics; RSS; e-Commerce functions; Web color selector; fades, wipes and other special effects; 85,000 images and lots more. Free to try, $49.95 to buy.
Web Studio. WYSIWYG/HTML, flash animation, video, music, full-featured shopping cart, HTML e-mail, large graphics library, comprehensive user manual and two hours of video tutorials. Free to try, $169.99 to buy.
WYSIWYG Web Builder. WYSIWYG/HTML, image maps, photo and graphics libraries; ready-to-use Java scripts; ActiveX; flash animation; Windows Media player, Quicktime, Real Audio and other plug-in support; PayPal shopping cart; online tutorials. Free to try, $34.95 to buy.
Some Tips on ‘Deals’ to Avoid
As you shop around online for business Web design software, be careful about certain great looking “deals.” Here are some to avoid:
Software that allows you to use both WYSIWYG and HTML, but not at the same time. While you can switch between them, you can’t use them simultaneously. That’s a big disadvantage if you’re managing your own Web site, want to do it right and are pressed for time.
Packages that play up design templates, graphics elements and images, but downplay functionality – because there isn’t much.
WYSIWYG software with little or no HTML editing ability.
Many ISPs – internet service providers – like Verizon, Quest and Earthlink, and giants Yahoo, AOL and Google, offer free tools and server space for personal Web sites – but not enough for even basic small-business needs.
Avoid programs that aren’t aimed at small business owners.
Avoid software that doesn’t let you make easy changes quickly and easily.
Top-of-the-Line Design Software
As you might expect, top-tier Web design software is much more sophisticated – and costly. It’s harder for novices to control, and even if you learn to use their professional design tools, you may still need a pro to put it all together, make it work and maintain it.
But it will serve you well as your business grows, and your Web design needs grow with it. Here are some of the most popular examples:
Microsoft Expression Web, $299, free trial
Adobe Dreamweaver, $399, free trial
NetObjects Fusion 10.0, $199
Microsoft.com/SilverLight, free download
33
Even at this level, the software doesn’t include hosting or advertising services, your domain name or Web address.
For More Information
The following sites offer a wealth of design tips and strategies:
Web siteTips.com
WebReference.com
WebDevelopersJournal.com
CoffeeCup.com
34
e cover what you need to know in:
1. Storefront Software Packages
. Shopping Cart 101
. Amazon.com: The Gold Standard
. When to Hire a Pro
7: Take Control Over the Look, Feel and Function
If you’re building an e-commerce Web site, your ability to control how it looks, the way it feels to the user, and how it works can be limited by your choice of “storefront” or “shopping cart” software.
These are the most important elements of an online retail site. They provide customers with a secure environment where they can load up their electronic shopping cart with your products, then pay for them at “checkout” without fear that their privacy and personal information – especially credit card numbers and other financial data – are at risk.
Even if you’re not planning retail capabilities on your business Web site, we highly recommend going through this step and reconsidering. It can give you a big edge over competitors with an information-only Web presence.
35
Storefront Software Packages
Many providers offer all-in-one “turnkey” storefront software that promises to handle all of your business Web site needs, and it probably does – to a point.
While it may include a variety of design templates and other graphics to give your site its look (some free, some for added cost), you’re limited to what’s offered unless you know enough about writing code to alter the templates.
It might not include all the functions you want, and may even be written in the provider’s own combination of codes, again making it tough to customize without technical expertise.
Besides flexibility in design and function, these are some other important features to look for:
Growth Potential. Can the software grow with your business? Does it limit the number of products you can add to your Web site?
Special Offers. Just like brick-and-mortar stores, will it allow you to offer easy-to-use coupons, gift certificates, gift wrapping and other customer incentives?
Cross-selling. Does it include an option to automatically show products that are related to those already in your customer’s cart, and make it easy to add them to their purchase? This can be a significant boost to your sales.
Marketing. Does it include newsletter, e-mail, guestbook, blogging, affiliates linking and other marketing tools?
Top Sellers. Is it easy to highlight top-selling products on the home page, and allow shoppers to buy from there?
Track Sales. The best storefront and shopping cart designs include analytics for tracking sales, customer behavior and other vital data.
Volumes Sales/Wholesale. Does it allow you to offer volume pricing and/or wholesaling?
Tip
3 Ways to start selling online
1. You can start by simply adding a PayPal button to your existing site so customers can pay you directly. PayPal can also help you build a basic order form to integrate into your site.
2. You can list and sell your products on one (or more) of the big marketplace sites like eBay and Amazon.com. Using one of these online marketplaces can be a good way to gauge demand, pricing and competition for your products.
3. You can start from scratch and build an e-commerce site at your own domain name using either a Web designer or a template-based Web store building tool.
rticle: 8 Steps for Choosing E-Tail Storefront Software
SEO. Be sure it can optimize your site for search engines. The best packages include a function that generates search keywords and meta tags based on your content.
Feedback. Encouraging customers to write reviews and comments is good for business, as are their testimonials about your excellent service, prices and quality.
Shopping Cart 101
Most of a business Web site is defined by style – how it looks and feels. Your shopping cart is different: It’s defined by functionality.
In e-commerce, function trumps glitzy graphics, flash and bold color palettes every time. The best storefront Web designs are glam-free and built with service and simplicity in mind.
The purpose of Web site shopping carts is straightforward: to collect a customer’s payment easily, accurately and securely.
There are two primary types of software: those you buy and install, or those leased from your Web site host for a monthly or annual fee.
Hosts who offer this service will design and manage your cart, keep it secure and add new features as they become available. One of our recent favorites is an audio component that walks tech-challenged customers through the checkout process.
Here are some good places to start your search:
Nexternal Solutions
3dCart
Volusion
MonsterCommerce
1ShoppingCart
Amazon.com: The Gold Standard
Amazon has one of the most widely admired – and imitated – storefronts and shopping carts on the Web. Among its best features:
An “Add to Shopping Cart” button on every product page
Online bridal and baby gift registries
A “Tell a Friend” button for to e-mailing the page to others
Password-protected personal contact and financial information, with the ability to save your address and those of gift recipients
“One-click” completion of your order form
37
A “Wish List” for saving products you might decide to buy later
Intuitive customer relationship management (CRM) that remembers your previous purchases, then automatically offers recommendations for similar products
Customer product reviews
If you decide to add a shopping cart to your business site, study Amazon.com for guidance and cues. One of the best: It is low-key, flash-free and doesn’t bombard you with jarring, annoying audio pitches or distracting visual gimmicks.
When to Hire a Pro
Shopping cart/storefront software can be very complicated, and most small business owners don’t have the expertise or ability to create their own. If you do decide to try this yourself, make sure to choose a named provider that has a solid reputation. If you’re unable to find software with the features you must have, hire a professional to develop your own. He or she should have both the technical skill to make it work reliably, and the design sensibilities to make it look good.
Be sure a design mock-up is part of the deal, so you can test the shopping cart before your customer does. The process, including testing, shouldn’t take more than a month. But don’t rush it. You’ll need some time to catch and fix any bugs that show up or design elements you don’t like.
And include site management in your deal, at least for the first few critical months. You might have to pay more, but will rest easier knowing your online storefront is in capable hands.
Posted bySumedh at 4:07 AM
Labels: Creating Website, Internet