Design & Development

0 510

SEO can be broken into two distinct areas – “onpage” factors and “off-page” factors. On-page factors include anything that you can affect on the page itself, such as the title tag, body copy, H1 heading tags, image “alt” attributes, etc.

Off-page factors encompass things that influence rankings but are not on the page itself, such as PageRank score and anchor text, better known by the layman as link text. When you are optimizing the on-page factors, you start with keyword research to identify the keyword markets that you should go after (as discussed in my “Keyword Sleuthing” article in the November issue). You craft prose targeted at those keyword markets (see my “Writing for the Search Engines” article in the December issue).

Keyword-rich prose isn’t enough though. In order to give your content its best shot at ‘singing’ to the search engines, you’ll need to optimize your HTML templates. Of course this all presumes that your ecommerce platform is friendly to search engine spiders (my “Avoid Complex URLs” article in last month’s issue). Here’s a quick guide on how to optimize your HTML, step-by-step:

Make sure each page can sing a unique song

The worst kinds of HTML templates have title tags and Meta data (such as the meta description) hard-coded so that they are the same across all pages that use that template. Make sure that your title tag, Meta description and H1 heading tag can be assigned on a per page basis, thus unique to the specific page in question.

Strip out extraneous HTML code

Superfluous code in your HTML negatively impacts your search engine rankings by pushing your good keyword rich copy further down the page thus lowering keyword prominence. Because the search engine spider looks at the HTML code rather than the rendered page as you see it in your web browser, elements in the HTML code that bloat the page up may lower your page’s keyword prominence. In addition, this “bloat” will negatively impact the user experience as it increases download time. As you know, Internet users are notoriously impatient.

Superfluous HTML includes HTML comments, JavaScript code that is “inline”, cascading style sheets (CSS) that are “inline,” and table tags used for layout. Not only are tables inefficient for layout; they also offer poor accessibility because “screen readers” (software used by visually impaired users to read each web page aloud) will read out all that table information to the user as if it were a tabular data such as a chart. So strip out all the comments, move the JavaScript’s and style sheets into separate “include” files (in the case of JavaScript, a .js file and with style sheets it is a .css file). So in effect you replace a many-line JavaScript or cascading style sheet with a oneline reference to an external file containing all that code.

Amplify the song that your content sings

Your content, when merged in with your HTML template, is what is served to the search engine spider. Your HTML template can squelch that song or it can amplify it. Above, we have already talked about ways that your HTML code can squelch the song. Now in order to amplify it, make sure that you include heading tags on your pages and utilize text navigation whenever possible instead of graphical navigation. For example, clickable buttons can be done as text but made to look graphical. Text links are much more effective than graphical links because the search engines take the anchor text that you have used and associate the words in the anchor text with the page that you are linking to. You will get a lift in your rankings for the keywords contained within those text links.

Not to worry

The Meta keywords tag doesn’t have much of a place nowadays in SEO, so you can safely leave them out of your HTML templates (unless your own site’s search engine uses them). A Meta robots tag with instructions to index and follow is unnecessary, as that is assumed, so leave that out as well. Image “alt” attributes used to be a lot more important than they are now. It seems nowadays that only when the image is also a link that the “alt” attribute is actually paid any attention to by the search engine. Taking all the above into account, you should end up with HTML templates that really enhance your search engine positions across all pages to which they are applied.

0 497
What’s a page rank and how does it work?

PageRank is Google’s system to rank the relative popularity of a website. Developed by Larry Page and Sergey Brin, Google’s founders, the PageRank system uses the Internet’s vast linking structure to measure an individual web page. A link from one site to another is interpreted as a “vote” for the destination site. Google also examines the pages themselves to determine the importance of each, meaning that a link or “vote” from a page within itself is a high PageRank (considered “important”) will weigh more heavily than a link from a less “important” page.

The PageRank scale is between 1 and 10, and is a logrhythmic scale, much like the Richter scale used to rate earthquakes. This means that the gap between a PageRank of 3 and 4 is tiny when compared to the gap between a PageRank of 7 and 8. Generally, a PageRank of 5 is considered average, whereas achieving a PageRank of 7 indicates a popular site.

You can check the PageRank for your site by going to Mypagerank.net. There are also PageRank predictors, such as PageRankPrediction.com, that claim to predict what your site’s future PageRank will be. While these are good indicators, they are not a guarantee of what your PageRank will be the next time Google updates.

How does an SSL certificate make transactions secure?

In order to conduct transactions on the Internet, sensitive information such as credit card data must be sent securely between the user’s web browser and the server hosting the website they are trying to purchase from. This is accomplished using an SSL (“Secure Sockets Layer”) certificate. When a web browser tries to access a secure web page, the server first sends what is called a “public key” to the browser along with the SSL certificate. Using this public key, the browser then generates a “private key”, or an encryption key, which is sent back to the server with the secure URL that the browser would like to access. The server then uses this encryption key to securely encrypt all data that is subsequently sent to the browser. Because this key is generated on the fly by the browser, the encryption method is unique between each browser and the server, ensuring that only one key can encrypt the data, and only one key can decrypt the data.

This ensures that all information that is sent to the server is secured, and your customers can rest easy knowing that their personal information is safe. Most SSL certificates use 128-bit encryption keys, although more recently 256-bit encryption has become available.

How does Alexa determine traffic ratings?

Many people use Alexa to determine their websites’ traffic rankings, the reach of the website, and other information about the popularity of their web presence. But how is this determined? It’s mainly delivered via the Alexa toolbar, a downloadable browser toolbar that has been built into Netscape and Microsoft Internet Explorer. The toolbar delivers information to Alexa about what websites people are visiting. Using this method, Alexa receives data from a defined sample population of Internet users. This data is then processed to deliver a Traffic Ranking and a Daily Reach coefficient. The Traffic Ranking measures how much traffic a site receives relative to all other websites, and is delivered as a 3-month average. The Daily Reach is determined by how many people in the Alexa sample population visit a site, and is normalized to a sample size of 1 million. In this way, a Daily Reach of 4,000 means that your site probably was viewed by 4,000 out of every 1 million Internet users.

The Alexa toolbar is only available for the Windows operating system using either Internet Explorer or Netscape browsers. The toolbar is currently not available for Firefox users, although Alexa provides the option of building your own toolbar. If your site is targeted specifically at Firefox users, or Mac users, or Linux users, odds are that the data about your site in Alexa is inaccurate, due to the fact that your visitor base is excluded from Alexa’s sample population.

How can I tell if a search engine is finding content within my site?

There are a couple of ways to determine if Google, as well as other search engines, can access the content in your site that you want it to find. The first is to find a string of text on your website that will be unique, or at least relatively rare. Copy this string of text into the search box of your favorite search engine, making sure to enclose the entire search string in quotation marks. This tells the search engine to find that specific string of text. Check the results that are returned and if your site appears, the search spiders are successfully indexing your content.

A much easier, and more informative, approach is to ask the search engine what content it has found for a particular domain. To do this, you simply enter “site:www.yourwebsite.com” into the search field of your favorite search engine. This will return every page that the search engine has indexed under that domain. This is a sure fire way of determining how effectively the spiders are getting through your website. If you don’t see content or web pages that you believe should be there, perhaps the search engine spiders are unable to access your site properly. Check with your web developer as there are a myriad of reasons why this could be the case.

0 329

Google Sheets can monitor competitors’ prices, capture news headlines, and devour data from websites, CSV files, and more. The tool helps small business owners and marketers gain a competitive advantage.

Google Sheets, the search giant’s cloud-based spreadsheet service, does more than just make your financial statements legible. The service has many powerful functions and features. Three of these may even help your business collect competitor and industry data that could lead to better decisions.

IMPORTXML

The first, and most powerful, of the Google Sheets functions I will discuss is IMPORTXML.

Although its name implies that it is for importing extensible markup language (XML) documents, this Sheets feature can be used to ingest several forms of structured data, including XML, hypertext markup language (HTML), comma-separated value (CSV) files, tab-separated value (TSV) files, and RSS feeds.

As an example, imagine that you compete with a popular retailer like Zumiez. Although you don’t offer everything that Zumiez carries, you do have the same particular brand of women’s twill jogger pants.

Google Sheets IMPORTXML function can be used to capture price data from a competitor's product detail pages.

You want to make certain that your price is competitive, so you create a new Google Sheet to track Zumiez. After you have created a title section, perhaps “Zumiez Women’s Pants to Track,” and a few column headers like “Product Name,” “Product Price,” and “URL,” you are ready to start tracking Zumiez’s prices.

You can place the data that IMPORTXML retrieves almost anywhere in a sheet, including below some meaningful headers.

The IMPORTXML function takes two parameters. First it requires the URL for the resource you want to parse for your data. Next it wants an xpath query.

The IMPORTXML function requires two parameters.

To apply this function, click into a Google Sheets field. First type an equals sign and then the function name, IMPORTXML.

=IMPORTEXML

Functions in Google Sheets use parentheses to surround parameters.

=IMPORTEXML()

Next, add the target URL inside of the parentheses. This URL is treated like a quote. In this example, the URL goes directly to the first of the target product detail pages.

=IMPORTEXML( “http://www.zumiez.com/almost-famous-khaki-twill-jogger-pants.html”)

Finally, you will need to use xpath to identify just the element that you want Google Sheets to capture.

=IMPORTEXML( “http://...”, “//h1[contains(@itemprop, 'name')]” )

When you hit enter on your keyboard, Google Sheets will pull in the product name from the Zumiez product detail page.

Do the same thing for the price, and you are starting to automatically track Zumiez. In terms of structure, that is all there is to it.

For some, however, the xpath query might not be self-explanatory. Xpath (the XML path language) is a querying language used to select particular nodes within structured data.

The first part of the xpath — with the two slashes, “//” — tells Sheets to search through the document from the top down, if you will, until it finds a node similar to what we describe next.

In the example, the next description or node is “h1.” It tells Sheets to look for a heading one tag.

Finally, we don’t want just any h1 tag. We want one that contains an attribute called “itemprop,” where that attribute is equal to “name.”

//h1[contains(@itemprop, 'name')]

Finding the proper xpath can take some practice and experience with HTML. One of the easiest ways to find the xpath is to use the developer tools that are built into your web browser. In Google Chrome, as an example, right or alternate click on the product name and select “Inspect Element.”

The developer tools in Google Chrome can be helpful for defining an xpath.

Chrome’s developer tools will open, showing you the element (node) you are focused on.

Repeat this process for each product that you want to monitor.

IMPORTFEED

The IMPORTFEED function in Google Sheets is designed to parse an RSS or ATOM feed. The function has one required parameter — the URL for the feed you want to ingest — and three optional parameters.

The IMPORTFEED function only has one required parameter, but option ones help you zero in on the data you want.

Imagine, for example, that you wanted to bring in the entire Practical Ecommerce article feed. You would click into a Google Sheets field and type the following command.

=IMPORTFEED("http://www.practicalecommerce.com/feed")

When you clicked enter, Google Sheets would bring in all of the articles in the feed.

Google Sheets can act like an RSS reader, gathering all of the articles from a feed.

The second parameter, which is optional, can be used to get a feed description, a feed attribute, or even a particular node from the feed. In this example, Google Sheets will return only the article titles.

=IMPORTFEED("http://www.practicalecommerce.com/feed", "items title")

The third parameter can be used to include column headers. Simply, add “true.” Note here that the second parameter is set to an empty string, which is the default.

=IMPORTFEED("http://www.practicalecommerce.com/feed", "", "true")

The fourth parameter will limit the number of items to return. So if you only want the last five articles, your function would look like this.

=IMPORTFEED("http://www.practicalecommerce.com/feed", "", "true", 5)

IMPORTDATA

The Google Sheets IMPORTDATA function will pull in information from a CSV or TSV file. This can be helpful for absorbing data from web tools or government services.

The Sheets IMPORTDATA function has just one required parameter.

To use an example directly from the Google Sheets documentation, if you wanted to look at the U.S. 2010 census, you could pull it into a Sheet just like this.

=IMPORTDATA("http://www.census.gov/2010census/csv/pop_change.csv")

Pulling in data from a CSV or TSV file is easy with IMPORTDATA.

Summing Up

Google Sheets has some powerful tricks that will help small business owners collect actionable data. The best on this list, for me, is IMPORTXML and its ability to track competitor prices.

0 287

Apple’s August 2015 website redesign emphasizes visual communication and advances several site design trends. Large photographs, meaningful graphics, and useful video abound.

When Apple.com relaunched on August 6, 2015, many reports noted the missing “shop” link. The site’s corporate and ecommerce sections had merged. While this was noteworthy, it is not too different from many other online stores.

Rather, how the site employs several current design trends may be more interesting or more impactful. Online retailers, marketers, and designers can use similar techniques on their own sites.

Massive Photographs and Graphics

Relative to screen size, the new Apple.com uses massive photographs and graphics. On many pages, a single image dominates the screen.

Like many sites, Apple.com features large, screen edge to screen edge images.

Apple even seems to favor these graphics over text.

For example, in the Apple Watch section, one of the images makes the overlaid text unreadable. The picture shows a couple embracing, kissing. Two bright light sources in the photograph wash out the word “Notifications” and a guided tour link.

Bright lights in the photograph washout the text, making it hard to read. This may have been a design choice.

It is unlikely that this was a mistake. Legions of Apple personnel from myriad departments would have reviewed each page on the new site. Rather, there was a conscious decision to give the image priority.

Perhaps, there is even a subtle message in that choice. The female model wears an Apple Watch. Its notifications feature is for her benefit, and at the moment captured in the image, it is less important.

Large — communicative —  images have been a design trend in 2014 and 2015, and Apple is not new to the movement. The company has always emphasized the visual, albeit in a clean, sleek way. The resigned site could further fuel the trend, encouraging Apple adherents and big-picture site designers (pun intended).

Apple also does a good job delivering these screen-filling pictures. For example, the site’s music hero image weighed in at a reasonable 195 kb. It took an average of 239 milliseconds to load over a consumer broadband connection.

Thoughtful Mobile Optimization

Mobile devices far outnumber desktop and laptop computers. In the United States, Internet users are just as likely to visit a site from an iPhone as a desktop. Mobile optimization is not a competitive advantage; rather, mobile-first design is the standard.

Yet, even in this mobile-centric environment, Apple.com stands out.

A good example comes from the site’s iPad landing page. If you scroll down a bit, you’ll find a couple of promotional sections like iPad for education or iPad for business.

Viewed on a laptop or desktop computer, these sections feature a large image with overlaid copy.

Built to be responsive, Apple.com shows some titles and copy on top of images on large screens and below images on small screens.

On a mobile device, the copy moves down off of the picture. The image is still large in the context. The copy is unchanged, but now more readable on a mobile device.

Although the content, include the picture, is the small the positioning is changed to work better on a small screen.

Purposeful Parallax Scrolling

Parallax scrolling can add depth to an otherwise flat, two-dimensional scene. The technique moves foreground content, like pictures or text, faster than background content.

Some site designers believe parallax scrolling creates a more immersive user experience. Too often, however, its application is superfluous. One can even find what might be an unnecessary use of parallax scrolling on the Apple.com Music landing page. But elsewhere, Apple uses parallax scrolling with purpose.

The iMac with Retina 5K display landing page features another immense image. The picture fills your screen.

The landing page for the iMac with Retina display starts out similar to other pages on Apple.com.

As you scroll down the image shifts, and you realize that its photograph is even more expansive.

Scrolling repositions the image. You see a lot more.

As you continue to scroll, the header is static while the photograph seems to move back. It even pulls in a little from the edges of your screen. You appear to be getting farther away. The parallax scrolling, however subtle, is working.

The parallax scrolling is working. The image pulls away from the edges of the screen. There is a feeling of depth.

More scrolling reveals that the image is on an all-in-one iMac. Point made.

In this case the technique helped to communicate the product's value.

In this case, the feature — parallax scrolling — helped spotlight the product.

Useful Videos

Apple’s Macs, iPads, and iPhones are familiar products. The company’s customers know a lot about them. They know what they look like. How they work, for the most part. Even how they impact your daily routine.

The Apple Watch is a newer product. It is certainly not short of press coverage or advertising support, but it is still lesser known.

To help describe the Apple Watch, the redesigned Apple.com includes several excellent videos. These guided tour videos show shoppers how the Apple Watch works. In the end, the videos help Apple customers decide if they want to buy one.

Video content marketing is not an Apple invention. But on its new site, the company is again serving as a good example.

Apple.com uses video content to describe products to relatively unfamiliar shoppers.

Scrolling is Mandatory

The spruced up Apple.com also affirms the trend toward more scrolling.

Not so long ago, website designers crammed content above the “fold.” The idea, of course, came from newspaper publishers that put lots of content on the top of the front page to attract readers.

The Apple.com support page as navigation, one picture, and a short welcome message above the fold. To reach the meaty content, you must scroll.

Site designers adopted the concept, stuffing lots of products or information at the top of a page. Site visitors could do just about anything from above the fold.

In the mobile era, the fold is more difficult to identify. What appears on the top of an iPhone’s screen is distinct from what appears on a desktop’s screen. Shoppers have to scroll if they want content, and no one seems to mind.

0 245

Editor’s Note: Meet Armando Roggio at Ignite 2015, our conference on Sept. 16 and 17 in Dallas, where he’ll co-present three sessions: “How to Build an Ecommerce Brand (and Reduce Reliance on Paid Traffic),” “Content Marketing Essentials: Attracting and Engaging Shoppers, for Higher Conversions,” and “Ecommerce Opportunities for Brick-and-mortar Merchants.”

With some experience in HTML and CSS, you can learn to design your own responsive email templates in just about a weekend. With your fresh new skills, take control over how your email marketing messages look on nearly any device.

Email marketing messages should look good regardless of whether your customers read them on an MacBook Pro or a Samsung Galaxy S6. Your product recommendations and perfect, pithy copy has to read well in Gmail or Outlook.

The solution is to use an email-client-friendly responsive design. There are certainly plenty of good, responsive email templates available. You can find 28 suggestions right here onPractical Ecommerce. But at some point, you may want to do your own thing: Design a template perfect for your brand and your business.

Learn from Existing Templates

One of the best ways to learn to design responsive email templates is to analyze existing ones.

Take, for example, the Slate product announcement responsive email template from Litmus Software. If you download the template and open it in a browser on a desktop computer you might notice some placeholder text on the right-hand side of the header. It says, “A little text up top can be nice.”

Viewed on a relatively larger screen, the Slate template includes a text section in the header.

But when you view the template on a smaller mobile device, like an iPhone 6, that text is gone.

On a mobile device, the text on the right side of the header is not shown.

This sort of responsive behavior is easy in a modern web browser, but how is Litmus pulling this off in an email client? To find out, try using Google Chrome’s web developer tools. Open the Slate template in Chrome, right or alt click anywhere and select “Inspect Element.”

Chrome’s developer tools should open, taking up about half of your screen.

Chrome's developer tools can help you dissect responsive email templates.

On the developer tools portion of the screen, look for the mobile device icon near the top left.

Chrome's mobile emulation icon is in the upper left of the developer tools panel.

This icon will open an emulator, showing you how the page, or email template in this case, looks on various devices.

The emulator in Google Chrome's developer tools shows you how the template would look on various devices.

Now, right or alt click on the header and select “Inspect Element” again to help locate the header code in the developer tools. In this case, you’ll find that the text is, ultimately, inside of a td element with a class of “mobile-hide.”

Using Chrome it is possible to figure out what makes the text vanish.

If you look at the style declarations at the top of the template, you find that “mobile-hide” is in a media-query that is only active when the screen width falls below 525 pixels. Problem solved. You know how Litmus did it.

After you have spent some time dissecting a few responsive email templates, you will start to have an idea of how they work. Hopefully, you can build one or two of your own.

Learn from Real Emails

Using the same principles described above, you can also learn from the real emails that land in your inbox.

Litmus has a free tool called Scope, which is intended to make it easier to share emails. Scope includes a code inspection feature that allows you to see just how that email from Walmart, Amazon, or Netflix was developed.

Use a Framework

Responsive email frameworks help you design your mobile-and-desktop friendly emails more quickly. They offer a foundation from which you can add your own work. They are easier to use than starting completely from scratch, and, in some cases, they give you greater flexibility than using a template.

Here are few responsive email frameworks to try.

Zurb's Ink is one of several popular responsive email frameworks.

Ink. Zurb, a product design consultancy, created the Ink Responsive Email Framework. This is important because Zurb has been developing web tools since 1998 and is the company behind Foundation, one of the most advanced responsive frameworks for web development. Ink uses a 12-column grid for displays 580 pixels wide or wider. Below 580 pixels, each column becomes full width and stacks vertically.

Antwort. Released in October 2014, this framework has you build directly on one of several fluid templates. Like Ink, it works across many devices.

Cerberus was built because without a framework HTML email design can be a dog.

Cerberus. According to the project’s core author, Ted Goas, “Between desktop, mobile, and Outlook, HTML email is a three-headed dog from Hell.” Goas solution for slaying that dog is a series of email design patterns with or without media queries.

Email Framework. This generically-named solution provides code examples for developing your own templates, and handles many situations.

Follow Tutorials

There are hundreds of good tutorials for responsive or fluid email design. Consider following a few of these from start to finish. You will end up with a few more templates and you should have better understanding of why and how they are constructed.

Here are a few email design tutorials that you should try.

  • How to: Code a Responsive Email from Scratch, by Alex Ilhan. This tutorial walks you through the process of building the Crowder responsive email template. You’ll learn how Ilhan manages page flow across devices. You’ll also get an HTML email skeleton to use.
  • Creating a Simple Responsive HTML Email, by Nicole Merlin. In this 2013 tutorial, Merlin uses fluid design to manage the layout. Merlin writes the email much like you would a web page, with CSS at the top, then uses Premailer to move CSS inline.
  • Building Responsive Email Templates with Ink, by Nicholas Cerminara. If the “future-proof” framework suggestion above sounded interesting, read this tutorial on Scotch.io. It is one of the best tutorials you’ll find.
Take an Online Class

There are many online courses devoted to responsive email design and development. Most of these will have you creating fluid and flexible emails in just a couple of hours.

0 322

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin et velit ut mi dictum ultrices. Duis porta massa sed lorem rutrum imperdiet. Fusce nibh. Nulla blandit ornare purus. Aenean ornare porttitor ligula. Nunc mollis volutpat neque. Nullam lobortis nisi eu nunc. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus turpis mi, pharetra in, rutrum et, egestas vel, urna. Fusce tortor lorem, consequat eu, luctus nec, consectetuer ut, nunc. Suspendisse arcu sem, scelerisque adipiscing, cursus accumsan, sollicitudin at, justo. Duis pulvinar mollis ligula. Phasellus non ipsum vel justo aliquet mattis. Aenean scelerisque. Fusce accumsan. Nullam at augue mattis massa ultricies feugiat. Morbi fringilla molestie massa.

0 408

As a Web designer and developer, I have worked with graphics in a variety of formats. Anybody who uses Adobe Photoshop – the standard for design production in the interactive business – has learned his or her way around JPG, GIF, TIF, EPS, PSD, PCX and BMP files.

Those types of files signify characteristics about a given graphic, and are used for specific reasons. For example, some file types are used strictly for print purposes. Others are best used for web display. However, an analysis of graphics production and all your available options begins and ends with some basic rules of the World Wide Web and what browsers will allow.

  • No image is displayed in a browser at any higher than 72 dpi (dots per inch). Period. Save a file at 300 dpi (the most common resolution above 72), and it will still be displayed at 72 dpi. Your effort is essentially wasted.
  • Effective content display on the web depends on the site builder’s ability to keep any page’s overall file-size down. Ten years ago, many pages would top the 100kb mark; however, it’s not uncommon today to strive for pages under 30kb.

The JPG (Joint Photographic Experts Group) is the most common file type for saving graphics on the web. Most often, a savvy designer will compose his or her creation in Adobe Photoshop in what’s called a PSD file. A PSD file is nothing more than Adobe’s native Photoshop format, which allows for higher resolution, image layering and sophisticated design element organization. Unless you’re savvy enough of a developer, you won’t even be able to display them in a browser.

(Editor’s Note: You probably could display them if you’re willing to edit the file on your server that delineates mime-types. More than likely, it suffices to say that this is something most ecommerce proprietors will never even consider.)

The same goes for TIF, EPS, BMP and PCX files. These file types are used most commonly in design work for print. You can find a definition of the most common graphic file types on these pages:

According to webopedia.com, a JPG “is a lossy compression technique for color images. Although it can reduce files sizes to about 5% of their normal size, some detail is lost in the compression.”

Simply put, JPGs can be saved at a really, really small file size. While the image – typically a graphic of photo quality – does lose something in the translation between what you create and what is displayed in a browser, it typically renders an acceptable image in the eyes of most web surfers.

On the other hand, webopedia.com called GIFs a bitmapped graphics file format used by the World Wide Web, supporting color and various resolutions. It also allows for file compression, but because the GIF is limited to 256 colors, “it is more effective for scanned images such as illustrations rather than color photos.”

The rule most designers live by is:

  • If you’re working with a photo or a file so sophisticated and complex that you must minimize its file size, then save as a JPG.
  • If you’re creating a button, icon, small logo or anything without photographic-quality imagery that doesn’t require heavy color depth, then save as a GIF. Webopedia.com has a simple explanation of when to use which file type.

While that explanation includes a discussion of a PNG file, that’s an option not executed by many designers. In fact, it’s so uncommon that it doesn’t warrant discussion, much like a third-party dark horse in a presidential race. The candidate is there and might garner votes, but most pundits and even voters consider the effort a two-person affair.

As to which software to use to do design work, you have options. Besides Adobe Photoshop, you can use programs such as PaintShop Pro to create and produce Web designs. However, most folks consider the reasonable options to be limited – that’s the result of Adobe Photoshop’s dominance of the graphics production market and its saturation within the design industry. It is not an exaggeration to say that virtually every designer uses Photoshop exclusively.

On the other hand, Adobe Photoshop runs almost $700 (unless you think to buy it online, perhaps on an auction site like eBay). For the small-business owner, his or her ecommerce effort might depend on thrift. In that case, check out these Photoshop alternative discussions:

The most appealing is Adobe Photoshop Elements, a pared-down program that would allow novices to competent designers and producers to complete graphics work without providing the bells-and-whistles required for ultraserious design. It costs under $100, which isn’t half-bad when compared to $700.

However, regardless of your tools – throughout the existence of the Internet and keeping standards in mind – your choice for graphics file-type really is limited to the JPG and GIF. Always has been, and might always be. There’s nothing magical, controversial or provocative about their dominance.

The JPG compresses into really small files. The GIF does also, but can only handle a limited number of colors. In the end, your browser won’t show your graphics at any higher than 72 dpi, so you might as well shoot for the best quality you can muster at the smallest file size.

Browser technology, web standards and existing graphics products don’t really leave the site designer much choice.

0 264

Over the years in the interactive marketing business, any consultant worth his or her salt has faced the dilemma of assisting a company whose primary issue is that its “Web site broke.”

No more information than that. “It broke.”

Many a parent can identify with this description as it pertains to children who say that they “hurt,” but can’t identify from exactly where the pain originates. Fortunately for Web consultants — and for ecommerce proprietors — there are and always have been very simple, easy-to-understand error message standards for the Internet.

Those messages are your keys to resolving Web problems, for yourself and for your customers. We’ll examine the most common Web site errors, and provide easy ways to resolve them.

Let’s say you open a browser, and start surfing your site. Oh dear, you’ve encountered an error message …

If it’s:

400 Bad File Request: There is something syntactically wrong with the request from the browser to the server. Retype the URL, paying close attention to letter case and special characters.

401 Unauthorized: The request from the browser to the server requires authentication. More than likely this indicates that a username and password was required to access the page, and you didn’t enter the correct pair.

403 Forbidden: The request from the browser to the server was understood, but the server has been instructed not to respond with a Web page. More than likely, there is a server permission issue – and that can be a conundrum for the ecommerce business owner, particularly if he or she is also a novice Web server administrator.

The resolution to this problem is to go to the server, select the file in question and give global users read and execute permissions. For those of you with UNIX knowledge, you’ll want to chmod your file to 755.

404 File Not Found: The server understands what you’re requesting, but it can’t find it. It could be that you’ve mistyped the URL. It could be that you put the file in another folder on the server.

408 Request Timeout: The server got your request, but what you’ve requested is just too darned big to deliver in a timely fashion. Sometimes, this error message displays when the server itself is too busy, and unable to respond with Web pages in a timely fashion. Check the file size of your images. Check with your hosting provider to see how many sites are being served along with yours on a particular server. If the problem continues, you might want to consider a dedicated server.

500 Internal Server Error: This is the mother of all error messages. It requires a server administrator because it signifies a configuration issue between the site and server. Unfortunately, the error could signify just about anything, but if you happen to be a DIY (do-it-yourself) sort of entrepreneur, there is a way to get more details:

If you’re using Internet Explorer, open Tools → Internet Options → Advanced Options and Uncheck the “show friendly HTTP errors” setting.

One thing is for sure: This error doesn’t display because of some HTML error. This is a server problem caused by configuration and triggered by a script, application, scheduled job, process, etc.

501 Not Implemented: This signifies that a Web server doesn’t support a feature you’re trying to access or execute. Examine the page in question, and contact your Web host. Let them know what’s on the page, in terms of functionality and code, and they’ll likely be able to tell you quickly whether or not what’s on that page is supported.

502 Service Temporarily Overloaded: This error message is the equivalent to big-city traffic. The server is being hit and hit hard. It would serve the customer best to come back at a different time. If your site is not on a dedicated server, check with your host provider to determine which site on the server is getting trafficked heavily. Consider a dedicated server.

503 Service Unavailable: Could be a number of things, including a busy server. More than likely, it indicates that the user has lost his or her Web connection. Try surfing to another site to make sure you still have Web access. Visit a site you haven’t been to in some time to make sure that it’s not merely being loaded into your browser via cached memory.

Those are the most common numbered errors. Other common Internet errors include:

Connection Refused By Host: You don’t have permission to access the site. Contact a server administrator.

File Contains No Data: This is a common error, and it probably reflects something awry in your HTML. First thing to check is your table code. Have you closed all your tags? Does every <TR> have a </TR>? If you’re sure that’s not it, then look at your header code to see if anything out of the ordinary exists there.

Network Connection Refused By The Server: The server is busy. Not much you can do in the short-term except to consider more bandwidth and/or a dedicated server if you’re not hosting your business on one at this point.

0 237
Overview

Something about XML is inherently intimidating, and although we all probably hear it referred to a lot. or are aware that it exists, most people do not have any idea what it is. There is a good reason for this, since XML is a technology that is admittedly difficult to nail down, especially in the context of the web. To an online business owner XML is the driving force behind Google Sitemaps, RSS feeds, Podcasting and other emerging technologies that are proving to be valuable marketing tools. To a web application developer it facilitates the exchange of data between websites and applications and allows ecommerce sites to work every day.

Extensible Markup Language, or XML, is a type of markup language used to structure data for any number of reasons. How is that for vague and meaningless? A markup language is a system of tags that identify discreet units of information for processing. It also helps to understand that XML was created in order to allow richly ordered documents to be used on the web. HTML, which has a predefined set of tags and is primarily focused on the display of data rather than the data itself, does not have the flexibility to allow this. XML, which focuses solely on the data that it contains, allows for tags and attributes to be customized based on that data. For this reason, XML documents can range from ecommerce transactions to mathematical equations to vector graphics. The important thing is that XML describes data, and isn’t worried about displaying data.

However, since it was designed to deliver information over the web, XML can be formatted and displayed in a web browser with the use of style sheets. In fact, search engines and other automated applications can actually extract more meaning from XML documents than from HTML documents, due to their structure. So what does this all mean to you? Essentially, it means that XML is the future of HTML, and understanding a little more about it isn’t a bad idea if your business is primarily based the web.

This series of tutorials will not be a bunch of technical manuals about XML, although we have provided a link to those just in case. Our aim is to introduce XML to the beginner through some simple applications that are most relevant to online business owners. In this tutorial we will introduce the structure of XML, and create a simple XML document to hold some product information. In future tutorials we will learn how to format XML for viewing in a web browser using Cascading Style Sheets (CSS), create a Google Sitemap to inform the search engine of our web pages, create our own RSS feed to broadcast content from our website, and finally we will cover Podcasting from recording to publishing. All of which are made possible by in part by XML.

Instruction

Our goal for this first tutorial is to introduce XML by writing our first XML document. While it may not be apparent when we are finished why XML is important, the power of XML will become very apparent in future tutorials. However, before we go building Google sitemaps and RSS feeds, we need to understand how to write an XML document.

Our first step is to take a look at the data that we want to structure. In our case, it will be information about products that we sell. We will want to track the names, prices, descriptions and weight of our products. Since XML allows us to create our own tags to contain information, we aren’t constrained by a pre-defined set of tags the way we are with HTML. So let’s start by seeing how we would structure this information on our own:

<code>Product List  
Product #1  
Price: $29.99  
Weight: 5 lbs.  
Description: This is product one, and it is a beauty.

_Product #2_
Price: $35.99
Weight: 5.6 ounces
Description: Product two is smaller and weighs less, but is more expensive.
</code>

As you can see, it is common sense to group the information about each product together, creating discrete blocks of information. Using this information as a guide, let’s dive in and create our first XML document. All XML documents start with a document type declaration, just like HTML documents do. Below is the first line of our XML document, so fire up a text editor and create a text file called products.xml.

<code>&lt;?xml version="1.0" encoding="iso-8859-1"?&gt;
</code>

This line of code tells the version of XML that we are using (our examples will all use version 1.0), as well as the character encoding. For all practical purposes, this will be the first line of all the XML files you create. Now we are ready to start putting our information in. Just like HTML, pieces of information contained between starting and ending tags are grouped together. Since we want our document to describe our products, let’s start by creating a tag for that:

<code>&lt;?xml version="1.0" encoding="iso-8859-1"?&gt;
&lt;products&gt;
&lt;/products&gt;
</code>

Notice that we have created a beginning and an ending tag, and left a space between. This is because all the information about our products will go inside these tags. Look at this “product” tag as being equivalent to the title in our list above. Next we want to describe the first product, which has more information associated with it. Since all the information associated with this product needs to be grouped together, we will create another tag to hold it:

<code>&lt;?xml version="1.0" encoding="iso-8859-1"?&gt;
&lt;products&gt;
&lt;item&gt;
&lt;/item&gt;
&lt;/products&gt;
</code>

Again, we have left a space so that we can insert information inside this “item” which represents our first product. We are now down to the actual information about this product, which is separated into title, price, weight, and description. Since we need to store information about each of these things, we will now create tags for each one to hold the information. We also need to include the information inside the tags that we create:

<code>&lt;?xml version="1.0" encoding="iso-8859-1"?&gt;
&lt;products&gt;
&lt;item&gt;
&lt;title&gt;Product #1&lt;/title&gt;
&lt;price&gt;29.99&lt;/price&gt;
&lt;weight&gt;5&lt;/weight&gt;
&lt;description&gt; This is product one, and it is a beauty.&lt;/description&gt;
&lt;/item&gt;
&lt;/products&gt;
</code>

As you can see, we are naming the tags to be relevant to what our data is, which makes understanding this document pretty easy. However, the tags could be named anything since the structure of the document maintains the relationships between them. Everything between the <item></item> tags holds information about a single product. To describe our second product as well, we add another <item></item> tag below the first, and put the information about our second product inside:

<code>&lt;?xml version="1.0" encoding="iso-8859-1"?&gt;
&lt;products&gt;
&lt;item&gt;
&lt;title&gt;Product #1&lt;/title&gt;
&lt;price&gt;29.99&lt;/price&gt;
&lt;weight&gt;5&lt;/weight&gt;
&lt;description&gt;This is product one, and it is a beauty.&lt;/description&gt;
&lt;/item&gt;
&lt;item&gt;
&lt;title&gt;Product #2&lt;/title&gt;
&lt;price&gt;35.99&lt;/price&gt;
&lt;weight&gt;5.6&lt;/weight&gt;
&lt;description&gt;Product two is smaller and weighs less, but is more expensive.&lt;/description&gt;
&lt;/item&gt;
</code>

We have now created a simple XML document that describes our product list. You can see how it is organized in a hierarchical structure, and it contains most of the information that we want about our products, including the relationships between information. However, you may have noticed that there is some crucial information that has gone missing. If you noticed that our weights were in different units in the original list, then you probably noticed that the units have disappeared, which represent a big problem. Fortunately, XML tags can have attributes just like HTML tags. Rather than holding the actual data, attributes are best used to hold information needed to describe data, such as units of measure in our case. So let’s add an attribute to the weight tags to describe the units of measure that we are using:

<code>&lt;?xml version="1.0" encoding="iso-8859-1"?&gt;
&lt;products&gt;
&lt;item&gt;
&lt;title&gt;Product #1&lt;/title&gt;
&lt;price currency="USD"&gt;29.99&lt;/price&gt;
&lt;weight units=”lbs”&gt;5&lt;/weight&gt;
&lt;description&gt;This is product one, and it is a beauty.&lt;/description&gt;
&lt;/item&gt;
&lt;item&gt;
&lt;title&gt;Product #2&lt;/title&gt;
&lt;price currency="USD"&gt;35.99&lt;/price&gt;
&lt;weight units=”lbs”&gt;5.6&lt;/weight&gt;
&lt;description&gt;Product two is smaller and weighs less, but is more expensive.&lt;/description&gt;
&lt;/item&gt;
</code>

As you can see, we have now added attributes to the weight tags to show that there are different units of measure between the products. In addition, I added “currency” attributes to each of the <price> tags in order to show that the currency is in US dollars. The type of currency was also missing from our XML document, though it was present in our original list in the form of dollar signs.

We are now finished with our first XML document. By looking at our final document, we can visually see the structure of our information, as well as the relationships and grouping of the information. Hopefully you can see the power of ordering information in this way. If not, you should at least be able to imagine how structuring information like this allows data to be transported between databases, content to be shared between websites, and ecommerce transactions to be completed between completely different systems seamlessly. Being able to create our own tags and attributes relevant to our data allows us to create highly structured documents with an unprecedented amount of flexibility.

While it doesn’t seem like this is very useful at all, our next tutorial will cover how to create a CSS style sheet to format this information for display in a web browser. Then we will use our new understanding of XML to create a Google Sitemap, which is an XML document with a specific structure designed to keep the Google search spiders up-to-date about what pages are on your website.

0 347
Overview

Building HTML pages that are both search engine friendly and appealing to your users is crucial to the success of an online business. In the past, there was a give-and-take relationship between the structure and the formatting of websites. The more appealing the site was to the user, the less appealing it was to the search engines, and vice versa. The implementation of Cascading Style Sheets (CSS) has changed this paradigm, allowing designers to create HTML code that is structured in a search engine friendly way that can also be displayed in a manner that is appealing to users.

Formatting a web page with HTML means the use of tables, font tags, and other redundant code that can build up fast. More code means longer download times, and a lower ratio of content to code on a page. In addition, it means that in order to change the appearance of your website someone must edit each page individually, which can take hours, which costs you time and money. By formatting a web page using CSS, we can concentrate on structuring our HTML code around our content. Since search engines are changing to put more emphasis on content, this allows us to concentrate on search engine placement and content quality. Formatting the web page will come later by applying CSS styles to our optimized HTML code. Changing our website design can become as simple as changing our CSS code. An impressive illustration of this can be seen at cssZenGarden.com, where different designers submit various CSS formatting approaches to the same HTML code.

This tutorial will be the first in a series of tutorials at Practical eCommerce that will introduce Cascading Style Sheets (CSS) in the context of search engine optimization. In this first lesson we will build an HTML page structured around the content on that page and what we want search engines to see. Rather than relying on tables, images, font tags and other HTML formatting code, we will focus on the content of our page and how it is presented. We will then learn how to write a CSS document, learn how to link that CSS document to our HTML pages, and learn how to create CSS styles. In our example we will use CSS to change the appearance of our headers, paragraphs, and links.

Let’s get started on this first in a series of Cascading Style Sheets tutorials aimed at creating better looking, more effective web pages.

Instruction

The first thing that we need to consider before creating a webpage is what our content is going to be. For our example, we will be creating a product page to show a widget that we are selling on our website. We will want the webpage to display the following information:

Extra Large Widget (Price: $34.99)

  • Durable plastic design.
  • Fits most applications.
  • Guaranteed satisfaction.

Our extra large widgets are some of the best widgets in the world. Made in the USA, these widgets outlast all other widgets available, and are backed by our 100% satisfaction guarantee. The durable plastic design makes these lightweight widgets ideal for your next project.

Our next goal is to create an HTML document. Since the title of the product is the most important information, we will want to include that as a header by enclosing it in <h1> tags. The price of the product will need to appear in a different color, and is also important, so we will enclose the price in another header tag, the <h2> tags. Our list of product features is an unordered list, meaning that we will use the <ul> and <li> tags to display a list of items with bullets in front of them. Finally, our product description will be a paragraph, so we will enclose it in <p> tags. This is our first step into search engine optimization, as the text contained in header tags is given more importance than the text in paragraph tags. By including our keywords in the title, the header tags, and also in the paragraph tags, we are ensuring that our page relevance is ranked well by search engines. Take a look at the following HTML code that we are working with so far:

<code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Extra Large Widget&lt;/title&gt;
&lt;meta http-equiv="Content-Type" content="text/html" charset="iso-8859-1" /&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;h1&gt;Extra Large Widget&lt;/h1&gt;
&lt;h2&gt;Price: $34.99&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;Durable plastic design.&lt;li&gt;
&lt;li&gt;Fits most applications.&lt;/li&gt;
&lt;li&gt;Guaranteed satisfaction.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Our extra large widgets are some of the best widgets in the world.   Made in the USA, these widgets outlast all other widgets available, and are backed by our &lt;a href="guarantee.html"&gt;100% satisfaction guarantee&lt;/a&gt;.  The durable plastic design makes these lightweight widgets ideal for your next project.&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;
</code>

If you view this code in a browser, the result is not very appealing. As you can see, I have also added a link to information about our guarantee. Along with the other information on this page, we will be changing the appearance of this link. Now that we have our code structured, let’s take a look at how to write a CSS style sheet.

First we will create a new text file called stylesheet.css. Save this file in the same folder as our HTML file above, and open it in a text editor. CSS uses what are called selectors to determine which HTML elements to apply the styles to. Elements can be selected based on the HTML tag, a class (which can be applied to any HTML tag), or by id selectors (which apply to elements of a certain id). While we will learn about classes and id selectors in the future, our tutorial today will focus solely on applying styles to HTML tags using tag selectors. Consider the following style declaration:

<code>body { font: 11px/1.2em Arial, Helvetica, sans-serif; color: #000000; }
</code>

This is the syntax for declaring CSS styles, which you can learn more about from the resources available by the W3C. Notice the tag selector, body, which tells the browser to apply this style to everything inside the <body> tags. In this instance, we have assigned a font size of 11 pixels, a line spacing of 1.2 em, and a font style of Arial. If Arial is not available to the user, then Helvetica will be used, and if that is not available the browser is told to use a sans-serif font. With this one style declaration we can change all the fonts on the entire page in one step. This is a very powerful tool to have when your website has a lot of pages on it. Let’s move on to formatting our other elements.

We will want to make our product title contained in the <h1> tags a little bit smaller, as most browsers will display header content as larger and bold. We will retain the bold but make the text only 16 pixels tall by using the following style declaration:

<code>h1 { font-size: 16px; font-weight: bold; }
</code>

The same applies for our product price, which is enclosed in <h2> tags. By creating a style declaration for <h2> tags we can make the price appear a bit smaller than the default header tags size, and also make it red. Here is the declaration that we have prepared for that:

<code>h2 { font-size: 12px; color: #FF0000; }
</code>

Next we will want to display our product features in a smaller, italic font. Since they are contained in an HTML list, we simply need to create a style declaration that will apply to our HTML <li> tags:

<code>li { font-size: 10px; font-style: italic; }
</code>

As you can see, applying CSS styles to HTML tags is really quite simple. We have successfully created style declarations that will format our headers and our list items. The only other style that we need to apply will make our links appear different than the default blue color with an underline. We want to make our links appear red, with no underline. However, when the user puts the mouse on the link, we want it to turn gray and display an underline. In order to do this, we must apply a style to the <a> tag that creates the link in HTML, and also make use of a CSS style know as hover. Take a look at the two style declarations that we will make for links:

<code>a:link, a:visited { color: #FF0000; text-decoration: none; }

a:hover { color: #666666; text-decoration: underline; }
</code>

As you can see, these style declarations are a bit different than the others. Links have three states: normal, visited, and hover. Normal is how the link is displayed when the mouse is not over the link and it has not been visited. Visited is how the link is displayed when it has been clicked and the mouse is not over it. Hover is how the link is displayed when the mouse is over it. So what we have done above is to create first a style declaration that applies to both the normal (using the link style) and the visited (using the visited style). Notice the colon after the tag selector to denote which state we want to choose. In our first declaration, we are telling the browser to display the link in red, with no underline. Our second declaration, which will apply to the hover state of our links, we have told the browser to make the link gray with an underline. This will add a small amount of interactivity to our pages, making the user experience a little better.

Well, we have now created our stylesheet, but you may have noticed that none of the styles are actually appearing in our HTML document. Our last step is to link our style sheet to our HTML document, so that the styles will be applied. While you can declare styles inside an HTML page, that does not allow us to change the format of multiple pages and also adds to the amount of code in each page, so it is not recommended. The CSS page that we created (stylesheet.css) can be linked to our HTML document by placing the following code in the head section of our HTML:

<code>&lt;link href="stylesheet.css" rel="stylesheet" type="text/css" /&gt;
</code>

This tells the browser to ask for the file called “stylesheet.css” in the same directory as the HTML document, and apply the styles within it. Now the head section of our HTML document looks like this:

<code>&lt;head&gt;
&lt;title&gt;Extra Large Widget&lt;/title&gt;
&lt;meta http-equiv="Content-Type" content="text/html" charset="iso-8859-1" /&gt;
&lt;link href="stylesheet.css" rel="stylesheet" type="text/css" /&gt;
&lt;/head&gt;
</code>

View the file in a web browser and you will see that our styles are applied to our headers, our features list, and the link on the page appears red. Roll the mouse over the link and it will change color and show an underline. While this is a simple example, we have covered some very important points. The first is to structure your HTML code around your content, not to try and fit your content into a design. Next, by putting our CSS style declarations in an external file (stylesheet.css) and linking it to our HTML page, we have created a method of changing the formatting of as many HTML pages as we want, simply by changing the CSS file that they are linked to.

In our next tutorial, we will take a look at CSS class selectors to add to the amount of formatting that we can do to our HTML. CSS classes can be applied to nearly any HTML element, and allow us to format the same element in different ways, such as showing two paragraphs, but one in italics and the other in colored text.

SOCIAL

3,169FansLike
1Subscribers+1
1FollowersFollow
0SubscribersSubscribe

LATEST REVIEWS

0 756
Email marketing is one of the most powerful, sales-driving tools available to ecommerce companies, reaching consumers directly on their mobile smartphones, tablets, laptops, and...