September 5, 2012 - Tables, labels, ecommerce, and XKCD

A place to discuss things that were on our weekly Web Wednesdays show

September 5, 2012 - Tables, labels, ecommerce, and XKCD

Postby raw10 » Wed Sep 05, 2012 4:17 pm



This week's Web Wednesday broadcast was brought to you by the <label> tag, an often misunderstood but rather useful adjunct to the <input> tag. Just remember to always associate each label tag with its corresponding input tag using one of two methods:

Method 1: Wrap the Input

Code: Select all
<label>Enter a monkey: <input type="text" name="monkey" /></label>


Method 2: Target the Input using For...ID

Code: Select all
<label for="monkey">Who is your favorite monkey?</label>
<input type="text" name="monkey" id="monkey" />


Now your labels are properly married to their inputs. And they lived happily ever after.

eCommerce, Credit Cards, and More!

We had a post over on our Facebook wall about what it takes to accept credit cards on a website. If you want to build an eCommerce site from the ground up, you may be looking at a pretty major project. Been there, done that. But fortunately there are lots of resources out there for you to get going. Everything from commercial (Volusion, Magento Go, ...) to open source (Magento Community, Zen Cart, etc.) to off-site checkout (PayPal, Google, Amazon). Let's assume that you want to keep people on your site as they check out. They'll stay on the same domain the whole time and not get foisted off on some other site. In this case, you'll need a few things.

  • Web host with a unique static IP (generally)
  • An SSL Certificate
  • Your eCommerce web system (Magento, Zen Cart, Volusion, etc.)
  • A credit card payment processor and gateway (PayFlow Pro, First Data, Authorize.NET, ...)
  • A merchant account to take the funds (your bank)

The eCommerce system needs to have a connector that talks to the CC processor to authorize and capture transactions. Oh, and to make it even more complicated, there are also different gateways and processors, but some providers do both. And they all take a piece of the action, usually a flat fee plus a percentage ($0.25 + 3%, for example).

If you want to do something very quick on an existing website (or your social media pages), try out a new startup called Gumroad (https://gumroad.com/). The fees are higher, but it's easy to use. You can also simply try PayPal Checkout. We have a tutorial over on the MagicEdit site about how to integrate PayPal Checkout with MagicEdit for product management (http://www.magicedit.com/ManagingProductsPart.cl).

Alt, Title, and XKCD

It's a good thing I like learning new things, 'cause I just learned something else today! I pretty much always used the alt attribute (there is no such thing as an "alt tag") on images, and the title attribute on links. We did a bit of experimentation and confirmed that in order to get a little tooltip to show up you need to use the title attribute on images. Of course, XKCD really popularized this by adding additional commentary to the title of each comic image (http://xkcd.com/).

So if you want the little tooltip to show up on links and images, just use the title attribute.

Code: Select all
<a href="http://google.com" title="Go to Google">Google</a>


Here's an image with both alt and title attributes:

Code: Select all
<img src="images/rhesus.jpg" alt="Rhesus macaque" title="Not to be confused with Reese's peanut butter and chocolate confection." />


Always use the alt attribute on images. The title isn't quite so critical.

Responsive Tables?

Vitaliy had a good point from last week's discussion about tables. He pointed out that even if you're using tables for their correct use (displaying tabular data), you may have trouble with them on responsive websites.

That's because a table will always have a certain number of columns, and you can't just overcome this by doing alternative CSS from a media query. As the browser window gets smaller, the columns just get that much narrower. If a responsive layout is critical, you may actually dispense with tables entirely and go to a responsive grid layout for tabular data as well. Interesting.


That's about it for this week! Feel free to join in the discussion, or just drop in next week. See you then!

http://www.magicedit.com/hangout.cl

And remember, a label without an input is like a street sign without a street.
raw10
 
Posts: 81
Joined: Tue Apr 12, 2011 2:46 pm

Re: September 5, 2012 - Tables, labels, ecommerce, and XKCD

Postby cadmanchriss » Fri Nov 09, 2012 5:45 pm

Is it compulsory to give the alt tag for the image because as far as i know, alt tag is for search engines not for the users. :?
cadmanchriss
 
Posts: 1
Joined: Fri Nov 09, 2012 5:40 pm
Location: USA

Re: September 5, 2012 - Tables, labels, ecommerce, and XKCD

Postby raw10 » Sun Nov 11, 2012 2:59 pm

The alternative text is also used by screen readers like JAWS for people who have sight disabilities. It will also be displayed to users who have images turned off for some reason. So descriptive alt text on images is HIGHLY recommended. If you have a caption on the image, for example, using that caption for the alt text is a good place to start.
raw10
 
Posts: 81
Joined: Tue Apr 12, 2011 2:46 pm


Return to Web Wednesdays

Who is online

Users browsing this forum: No registered users and 1 guest

cron