Preparing Your Website For Mobile Devices

Tips to convert your current site into a mobile-friendly format

By: Brian Getting

With the growing number of consumers using mobile devices, such as cell phones and PDAs, to access the Internet, it's important to make sure your website can be accessed by potential customers using these devices। To get started, ask yourself a few questions about your website: Have you ever seen your website on a mobile device? Are you confident your customers can find the information they are looking for and make a purchase from your website on their handheld device? If your answer to all of these questions was not a resounding "Yes!," then you need to read on.

The first thing to do as a developer is to check the World Wide Web Consortium (W3C) specifications for CSS and mobile devices, which can be found at: W3.org/TR/css-mobile/. If you are still awake after the first paragraph, you can move into some more useful analysis. Is your site using tables? Does your site use a lot of images or multi-media files? Does your site take a long time to download on a web browser. While the Internet works essentially the same on mobile devices as it does on computers, you want to be sure the information on your website is easy to read and navigate.

A good resource to convert your current site into a mobile device friendly format is Skweezer.com. Simply enter your website's URL, and it will display your website in a mobile-friendly version by removing large images, CSS styles and page elements that will not display properly. I like to look at this as a template, or starting point, for making a mobile CSS profile for the site. To provide an alternative CSS stylesheet for users with mobile devices, insert the following code in the head of an HTML document:

A couple of things to think about when assigning styles for mobile devices is to keep it very simple। Mobile devices are still a bit slower, so you want to avoid using lots of images and graphics. In addition, there are varying screen sizes and resolutions with handheld devices, so it's a good idea to scale page elements by screen size, rather than setting fixed pixel widths for page elements.

Read More...

Summary only...

How To Start a Video Blog

Many folks prefer moving pictures

By: Jim Edwards

Web logs, commonly referred to as "blogs," came into the mainstream about two years ago.

Not really a newsletter or traditional .html-page publishing, blogs resemble more of a web-based diary where the creator records their thoughts, posts links or responds to questions.

Initially, blogs contained only text and pictures, but then came "audio blogging," which entails the use of audio on a blog.

Audio blogging also gets referred to as "podcasting" because of the ability to let people with iPods and other portable MP3 players download your MP3 audio.

The simplest form of video blogging, or "vlogging," means putting a video file online, linking to it from your blog and anyone subscribing to your RSS feed (automatically created by your blogging software) will get notified about your new video.

They can then open up your latest blog post in their "feed reader" and view your video by clicking the link.

More advanced forms of video blogging include getting your "vlog" accepted by Apple's iTunes so their subscribers can find and subscribe to your vlog (which gives you access to 19 million users at last count).

Vloggers use a variety of video file types (like Windows Media, Quicktime, Real Media and MPEG) and there's no restriction on which file type you use to be considered a "vlog."

However, two file types stand above the rest if you want to reach the widest possible audience.

For video podcasting, you must publish in either the FLV (Flash Video) or SWF (Shockwave Flash) file formats if you want people on both Mac and PC to view your video files.

FLV is better suited for full motion video, but they both work on smaller length video files.

For video podcasting, you must publish in the MPEG4 file format or Apple's proprietary version of that format known as M4V. Apple's QuickTime Pro software rates the simplest and easiest way to convert your video files to the proper video podcasting format.

To create a basic "vlog," you need the following list of equipment and software: a web cam or digital camcorder; a microphone, production software; a blog; an RSS feed to "syndicate" your content। A webcam will work for a basic vlog, though a digital video camera will create much better results because they contain better optics.

Using a separate microphone instead of the microphone built into your web cam or camcorder will also produce a much better sound quality.

Once you shoot your video you need to produce it to display on the web. At a minimum, if your computer operates with Windows XP, you can use the Windows Movie Maker software that comes free with XP.

Though you can't save as an .FLV or .SWF, you can save as a Windows Media file (.wmv) to get you started.
For a blog, you can use the free www.blogger.com service. To create a feed to syndicate your site, you can use the free service at www.feedburner.com.

Though audio blogging received mediocre acceptance from the mainstream Internet audience, "vlogging" should do extremely well simply because of our fascination with moving pictures.

If you're looking for a precedent, look how far TV has come in the last 50 years compared to radio.

Read More...

Summary only...

Flash or HTML: Which to Choose

By: Brian Getting

The question of whether it is better to design a website using Flash rather than using just HTML has sparked many debates among web developers. For the most part, it seems that developers tend to defend what they know, although there are some important differences between a pure HTML website and a website that is completely done using Flash. The method that is chosen depends purely on the type of website being created and the goals of the website owner.

Since every web browser in the world is designed to interpret HTML code and display web pages, building a site using strictly HTML ensures every web surfer will be able to view the site. Flash, on the other hand, requires users to have the Flash Player, which is a browser plug-in, installed on their computer in order to properly display the website. In addition, as Flash matures there are different versions of the Flash Player out there, further diminishing the chances that every visitor will be able to view the website.

On the other hand, Flash offers some capabilities that simply cannot be matched using pure HTML code, such as animation, dynamic content generation and user interactivity. Much of this capability stems from the Actionscript, which is the scripting language used in the Flash environment. Actionscript allows for developers to create complex animations, incorporate streaming video and provide unparalleled interactivity. In recent years, Flash has also proven to be a leading method for providing streaming video content on the web, and continues to be the choice for developers who want to present complex and stunning visual presentation.

Search-engine optimization is an important consideration if the website will rely on search engines to generate traffic. When looking at how a search engine will index a website, HTML offers the best choice. The reason is that search-engine spiders are designed to interpret and understand HTML code. In recent years, some search engines have made progress at indexing Flash content as well, although that can be deceiving for a couple of reasons. The first reason is that search engine spiders do not have the ability to run Actionscript code, which means that any dynamic content or Actionscript generated links, will not be indexed. The second reason relates to the way that search engines index and rank content.
Generally they would prefer to see content packaged in discrete, relevant units like the pages in an HTML website are. With a Flash site, all of the content appears to be in one file, causing content dilution in the search engines.

Generally, Flash websites tend to be used by companies that have large marketing budgets, or rely on compelling graphic interfaces to generate business. Businesses and websites that are interested in organic marketing and universal accessibility tend to opt for HTML-based websites. However, the lines can be blurred since Flash content can be incorporated into HTML websites in order to harness the benefits of both technologies.

Read More...

Summary only...

Installing Google Maps On Your Site

Help customers find the location of your business

By: Brian Getting

Implementing Google Maps into your website is an easy way to provide rich, interactive map features that can help your customers find your business.

Of particular interest to brick-and-mortar stores, Google Maps provides an Application Programming Interface (API) that makes it easy for developers to incorporate custom maps into websites they create.

The first step in working with the Google Maps API is to sign up for what is called an API key. Each website that contains Google maps requires its own API key — an effort to reduce spam and abuse of the service. Once you have your API key, you're ready to go.

Now that you have your API key, you will need coordinates that tell the API where the center of your map should be. The process of converting addresses to geographic coordinates (latitude and longitude) is called geocoding. Google Maps provides access to geocoders that can easily convert the address you want to serve as the center of your map (such as your business) into latitude and longitude coordinates. With that information, you have everything you need to render a map on a web page.

Rendering maps requires that you add a link to the Google Maps API in the head section of your HTML document. This link is where you provide your unique API key for the site with which you are working. From there, you simply specify an empty DIV element on your page where you would like the map to appear. The API automatically displays and scales the map interface to your DIV element.

At the most basic level, you can provide a draggable, illustrated map that centers on a position of your choice. However, there are many advanced features that allow you to customize your map presentation. Controls can be added to pan and zoom the map, as well as to switch between illustrated and satellite views. An animation API gives developers the ability to animate certain actions. Markers and pointers can be added to the map to show precise locations, and they can be supplemented with callouts that provide more information. Not only can the information in the callouts be customized, but the callouts themselves can be customized to contain tabs, display custom images and more. You can even provide an interface for users to obtain directions from their location to your store's, all with some simple JavaScript.

Developers can explore many other possibilities with the Google Maps API, and I encourage people to refer to the documentation provided by Google. If your business has a physical location that customers need to be able to find, there is really no excuse for them not to easily find that information on your website.

Read More...

Summary only...

Video Tutorial: CSS Design, Part Two

Applying graphics with CSS

By: Brian Getting
From: http://www.practicalecommerce.com

In the conclusion of our two-part video tutorial on CSS layout and design, we will take the layout we created in the beginning of this tutorial and begin to apply graphics and other visual stylings to it, in order to achieve the look we are going for.

In Part Two, we will be looking at how to identify the basic graphic elements we need. From slicing the images out of our original Photoshop document to optimizing the images in Photoshop to applying the images correctly to our page, we do it all in this tutorial.

We start by breaking our Photoshop document down into the basic graphic elements we need to achieve our design goals, and then proceed to optimize each graphic element. Once created, we apply graphics to our page using a variety of CSS techniques that can be intimidating to designers. By the end of this tutorial, we will have quickly made a basic web page using HTML and CSS that almost exactly matches our original Photoshop document.

Please feel free to download and review the additional files provided below.

Software Used: Adobe Photoshop CS2, TextMate
Additional Files: CSS_layout.zip

Click the image below to launch the tutorial.

This video tutorial requires Flash Player version 8 or above. Please forward us your ideas for additional video tutorials, via our Contact Us form.

Read More...

Summary only...

Boosting Your Programming Skills

Online resources can provide basic and advanced tutorials

By: Mitch Bettis
From: http://www.practicalecommerce.com

If you're tired of calling your web design firm every time you want to make a minor tweak to your site, there are online courses you can take to boost your knowledge in HTML, JavaScript, cascading style sheets and more.

In fact, there are so many online options to improve programming skills — for beginners and skilled pros — that it may be difficult to wade through the options and choose just one resource. There are courses that provide an instructor-led environment, while others feature a do-it-on-your-own-schedule, self-paced structure.

eClasses.org offers more than 50 online instructor-led courses in web design, web programming and ecommerce. Richard Brinegar, executive director at eClasses.org, says the site has around 10,000 students each year. Instructors for each class, at a minimum, are required to have a bachelor's degree in information technology or a related field and a minimum of three years recent work experience in IT or a related field.

Brinegar says the fact that the average student at eClasses.org takes 2.5 classes is an indication professionals find the classes worthwhile.

“We have expanded our web business classes to target beginning online entrepreneurs or small business owners who want to take it upon themselves to understand more about the web, gain some more technical skills or learn about what their webmaster is doing,” Brinegar said.

The fee for courses at eClasses.org generally ranges from $180 to $250 each, but Brinegar said students get a $60-$100 discount on each course if the student is a member of organizations such as the International Webmasters Assoc., Women in Technology International or the HTML Writers Guild.

All courses are completed online, and students can attend classes at anytime and from anywhere. Generally speaking, the “classroom” is a web forum where the instructor posts the weekly assignments and, during that week, students can ask the instructor questions about the assignments. The course is instructor-led, but students can work on the material at any time of the day.

eClasses.org also provides certificates of completion for each course based on a pass/fail grading system — there is no conventional A, B, C, D or F grades. In addition, eClasses.org offers a more comprehensive “web study certificate.” Individuals participating in that program must complete a series of required and elective courses in a web development topic through the eClasses curriculum.

For those interested in a self-paced environment without an instructor, one option is available at Teachmeit.com, which offers more than 280 courses in a variety of topics like “Fundamentals of Active Server Pages 3.0,” “Dynamic HTML,” “Programming in PERL 5,” “Advanced Features Of Microsoft Excel 2007” and “Preventive Maintenance of a PC.”

“We have categorized our courses into basic, intermediate and advanced levels,” Rinkesh Sharm, owner and general manager of TeachMeIT, said. “We have designed the courses in such a way that we have a rich pool of subject matter explored in an environment that is not only content-rich, but it is also instructionally sound. When learners go through any of these titles, they actually go through the education starting right from the very basic level to each incremental step towards intermediate and advanced levels.”

Sharm says more than 25,000 people have taken courses at Teachmeit.com. For those who don't want to work in the web-based environment, TeachMeIT sells a CD version of each course. Web-based courses range from $19-$149 each and require about one to five hours to complete.

Even with the self-paced environment, there are tests along the way to ensure the student is understanding the material. At the successful completion of each course, students are able to claim a instructionally course-completion certificate.

Free HTML Tutorials

If you don't want to pay a fee for a course to boost your technical skills, there are various online resources available. If you're looking for free tutorials on HTML, cascading style sheets, JavaScript, PHP, XML and more, some options to consider include:

• W3schools.com/html
• Htmlgoodies.com
• Pageresource.com/html
• Htmlcodetutorial.com

—PeC Staff

Read More...

Summary only...

Video Tutorial: CSS Design, Part One

Coding your design.
By: Brian Getting
From: http://www.practicalecommerce.com

Designing search engine friendly websites can be intimidating, particularly for designers who are just learning how to use CSS formatting. One of the most intimidating aspects to learning CSS design is creating page layouts that do not rely on tables. In the first of a two-part video tutorial by Practical eCommerce's online director Brian Getting, we will look at some of tricks and techniques used to create flawless CSS page layouts.

In Part One, starting with a Photoshop layout, we will look at how to markup an HTML document based on our design needs, and create the proper code we will need to get the results we are looking for. Once we have our markup in place, we finish Part One by using CSS to create a formatted two-column page layout that does not rely on tables or other non-compliant code.

Once we achieve a lean, efficient layout, we will find ourselves ready for Part Two, where we will learn how to apply graphics and visual styling to our layout in order to match it up to our Photoshop document.

Please feel free to download and review the additional files provided below.

Software Used: Adobe Photoshop CS2, TextMate
Additional Files: CSS_layout.zip

Click the image below to launch the tutorial.



This video tutorial requires Flash Player version 8 or above. Please forward us your ideas for additional video tutorials, via our Contact Us form.

Read More...

Summary only...