website creation & maintenance

Jan 062011
 

The largest paper in New Mexico has long had the most dumbfounding, confounding website anywhere. Fifteen years ago, when I started using the site as an example in classes, the oddities of the Albuquerque Journal’s websites might have been forgiven, but to this day it appears to be the work of someone who has never seen another website and who knows nothing about conventions or style. Examples can be found on every single page, but consider this portion of a form used to submit a letter to the editor.

image

I could simply sneer “1995 called and they want their form back” – this is starkly utilitarian. Why is each field so huge? Why not include NM as a default state? I know letters come from all over, but most surely come from NM. The web page creator might be forgiven for defaulting the city to Albuquerque. (That would make someone mad, I suppose.) But why, o why, dear designer, are there three phone number fields? Surely one suffices; OK, two; but three?! No doubt, the editors want the information, but it is your job to tell them it’s ridiculous.

The following example isn’t beautiful, but it is functional and more compact. It took minutes to code by hand.

image

To its credit, the form page does not have all the junk most abqjournal pages feature: a chaotic blend of menus and ads. It shows admirable restraint in that regard. On the other hand, except by clicking the Submit button, there is no link back to the website. Check out the site for yourself: www.abqjournal.com.

image

 Posted by at 9:59 am
Jun 052010
 

You know, I left Facebook. Elsewhere, I noted my concern about all the info flowing constantly off screen and out of mind. Every effort you make to add content to FB is ultimately washed away and lost. Your efforts may be noticed (or not), but they will be forgotten – and soon. “OK, yeah, move on, Mark.” But I do have some specific technical complaints to share with the geeks and nerds – my peeps, yo.

Let’s start at the top of the Home page with the blue command bar (or whatever FB calls it): This bar lets you move between various major functions. So, why doesn’t it stay at the top of the screen? Many times I move back to the top of the page to switch between Home and my Profile or Account. (In fact, I used a Greasemonkey script to keep the bar at the top, but a FB update broke the script.)

The notification icons: Indeed, these are much improved yet still so lacking. Click on one of the so-tiny notification icons for a list of items such as “So-and-so likes your link.” Which link, now? I’ve posted hundreds of links – would it kill FB to say “So-and-so likes [title of link or something specific]”? The notification icons *alert* you without really informing you, unless you follow each link.

The navigation area down the side: This is another potentially important area that could stay on screen all the time. Moreover, a FB update broke my use of lists, which helped me concentrate on friends in groups. The list function is there, but requires more clicks than before. That’s a legitimate gripe, especially if one visits FB multiple times a day – clicks add up.

Near the top of the home page, Top News Feeds versus Most Recent. News appears by default. If you select Recent, it will be the default for the rest of the day, but tomorrow you’ll be back to News as the default. Top News was a new feature that many people hated but had to learn to live with.

Notice we’ve already considered *three* important navigation/function areas, and we’ve barely started. Switch to your Profile and you have at least four new menu items, including the less-than-intuitive “Wall.” Quick: Explain the difference between Home, Profile, and Wall. Yeah, yeah, it’s easy, but isn’t this needlessly complex? And I know you know, but does everyone know that what they see in each of these areas is unique. This uniqueness of view should appeal to the individualist, but it actually complicates explaining differences to people – you simply don’t know how different my Wall is from your Home page or my view of your Home page. These differences are further complicated by Privacy options, although the fact that most people choose the extremes – Friends or Everyone – for everything rather than the absurdly exquisite tailoring that is possible for nearly every posting does simplify things de facto.

Consider status updates: Tell us what you’re thinking. Have you noticed that if you include a link (or photo, video, etc) in a status update it’s not a status update? Seriously. Status updates are text only. So, if you deal with FB by going to Friends > Status Updates, you’re missing every link, etc, your friends post. WTF?!

Speaking of Status Update, Comments, and other text boxes: On many occasions, I’ve started typing into a FB text box and found that when I reached the end of the second line of text, the box would not expand. I could continue typing, but I couldn’t see what I was typing. Fun. On many occasions, my cursor disappeared within the text box. If I clicked between two letters, I had to hope my cursor was where I thought it was (and often it wasn’t). All of which was made even more fun by the fact that you can’t edit anything once you enter it. How fucked up is that?

Lastly, I found that if I made a comment or clicked Like, I could no longer scroll down page by tapping the spacebar (my preference). In many cases, the arrow keys or Page Down/Up stopped working. I admit some of these things could be the fault of my browser (Firefox) or my many plug-ins.

I wont’ even go into the maze of pages, the complex Account options, or the fact that FB keeps going through major revisions that upset lots of users without every really getting it right. Facebook is overwrought but ineptly assembled. (And, yes, truth be told, I couldn’t build as ‘good’ a system, but it doesn’t take a tailor to see the Emperor is naked.)

An Alternative: Blog

Go to www.blogger.com (Google) or www.wordpress.com and you can set up a free blog in minutes. You’ll have beautiful templates at your disposal and gadgets and widgets galore. You can easily upload photos and videos and link to anything on the Web (unless it’s hidden behind FB’s wall or the like). You can edit with a click. The result is just like your FB Wall and Profile, with fewer complications and more options.

As for the social side – the alternative to your FB Home stream: Every blog generates an RSS feed (the little orange icon in your address bar or elsewhere on the page). Use RSS to pull the content from all of your friends’ blogs into one screen using an RSS reader (I recommend Google Reader).

 Posted by at 9:47 pm
Mar 252010
 

You will use some FTP (File Transfer Protocol) program if you upload webpages from your computer to a website server. FireFTP is as good as most and convenient as an Add-on to Firefox.

FireFTP :: Add-ons for Firefox

FireFTP 1.0.7

by Mime Cuvalo

FireFTP is a free, secure, cross-platform FTP client for Mozilla Firefox which provides easy and intuitive access to FTP servers.

All Add-ons for Firefox

FireFTP :: Add-ons for Firefox

 Posted by at 10:24 am
Apr 232009
 

I’ve been a 1and1 customer for years and I am very happy with them. I do not make commercial endorsements lightly (even for my books <grin>), but if you’re looking for a Web host or Domain Name Registrar, use the link below and we both get something out of it. peace, mjh

Dear Mark,

It’s not too late to get in on the special 1&1 50% OFF Hosting Deal. These amazing offers are ending April 30th. ALL shared web hosting packages are 50% off. Plus you could earn up to $300 for referring new customers to 1&1 simply by using your personal 1&1 tracking link. Other great offers include $6.99 .com domain names, 50% Off VPS Plans, 50% Off select Dedicated Servers, and 50% off eCommerce Hosting.

Since you are already a 1&1 customer you can earn commissions by using your affiliate link to make a purchase, or by getting your friends, family, and colleagues to order using your affiliate link. Domain names start at only $3.99/yr and shared hosting starts at only $1.99/mo! Dedicated Servers start at only $99.99 a month.

 Posted by at 9:39 am
Dec 222008
 

Favicon Generators – Six Revisions

Your website’s favicon is a key trademark to its look. It shows up in the navigation bar as well as on browser tabs (for most browsers at least), helping users quickly pick out your website out of the crowd.

Creating favicons is simple, and with these online favicon generators, you’ll have your own favicons in no time! Further down the article are some more resources related to favicon design and inspiration.

http://sixrevisions.com/resources/favicon_generators_resources/

 Posted by at 10:40 pm
Dec 202008
 

These are the Mobile Web Best Practices Flipcards, which summarize the Mobile Web Best Practices 1.0 document. The flipcards are a useful reminder of the sixty guidelines explained in detail in the specification. A PDF version of the cards is available.

The MWBP flipcards are available in the following languages: in French, in German, in Korean and in Spanish.

W3C Mobile Web Best Practices (MWBP) Flipcards

 Posted by at 5:41 pm
Nov 122008
 

Official Google Webmaster Central Blog: Google’s SEO Starter Guide

Webmasters often ask [Google] at conferences or in the Webmaster Help Group, "What are some simple ways that I can improve my website’s performance in Google?" There are lots of possible answers to this question, and a wealth of search engine optimization information on the web, so much that it can be intimidating for newer webmasters or those unfamiliar with the topic. We thought it’d be useful to create a compact guide that lists some best practices that teams within Google and external webmasters alike can follow that could improve their sites’ crawlability and indexing.

[Google’s] Search Engine Optimization Starter Guide covers around a dozen common areas that webmasters might consider optimizing. We felt that these areas (like improving title and description meta tags, URL structure, site navigation, content creation, anchor text, and more) would apply to webmasters of all experience levels and sites of all sizes and types. Throughout the guide, we also worked in many illustrations, pitfalls to avoid, and links to other resources that help expand our explanation of the topics. We plan on updating the guide at regular intervals with new optimization suggestions and to keep the technical advice current.

So, the next time we get the question, "I’m new to SEO, how do I improve my site?", we can say, "Well, here’s a list of best practices that we use inside Google that you might want to check out."

Written by Brandon Falls, Search Quality Team

Official Google Webmaster Central Blog: Google’s SEO Starter Guide

 Posted by at 4:28 pm
Sep 262008
 

David Pogue writes:

In other words, there’s very little point in using the Search box within your favorite sites. Use Google to take you to that site and to the page you want within it. Works for Amazon (”amazon freakonomics”), ebay (”ebay delft figurine”), Define.com (”define ersatz”), Facebook (”facebook amy pomeroy”), any newspaper or magazine, and hundreds of other kinds of sites.

http://pogue.blogs.nytimes.com/2008/09/25/the-mother-of-all-search-functions/

 Posted by at 10:33 am
Sep 262008
 

 

Cropping, editing, resizing, and adding text to images are various actions that bloggers and photographers constantly perform. The most popular tools used to perform these actions range from high-performance products like Adobe Photoshop to the free-for-all Paint.NET and GIMP applications. However, the start-up times for these products can waste precious seconds if you only need to perform one action. Here are three great programs for Mac and Windows to resize images on the fly.

3 Quick Apps for Resizing Images on the Fly – ReadWriteWeb

 Posted by at 10:25 am
Sep 212008
 

Welcome to class. Please feel comfortable asking questions and participating in discussions. mjh

Note the following addresses:

My computer blog: www.mjhinton.com/help/
My email: mark@mjhinton.com
Continuing Education contact: Caroline Orcutt at 277-6037, orcutt@unm.edu

Please check this blog after the course is over.

UNMCE course description:

Get an overview of the tools and techniques involved in creating and updating websites. Discuss the practical matters of file organization and site navigation. Students get hands-on experience with Dreamweaver, FrontPage, or other HTML editors, and with uploading files. Prerequisites: 51101/11 or 52002 or 54101/11 or equivalent experience, and Internet experience.

Announcements before class begins

Class website: www.mjhinton.net/begdw/

 Posted by at 1:45 pm
Apr 082008
 

A simple editor that runs as an Add-on to Firefox (opens in a tab or floating window). Not bad. My two minor gripes: doesn’t seem to have word wrap for long lines; doesn’t open a page you are currently browsing (you have to use File > Open or drag and drop). Bigger complaint: Switching between Code and Design view moves the cursor. peace, mjh 

Codetch is a code editor that runs along side other Gecko based programs, such as Firefox. Install it as an extension today and have a full featured editor right beside your web pages as you surf!

Notable Features
  • Source view, WYSIWYG view, preview window, and quick reference view panels
  • See multiple views via splitscreen
  • Open multiple files with tabbed editing
  • Launch previews of your documents in other browsers
  • A sidebar file list for convenient file browsing
  • Embedded JavaScript Console for quick debugging
  • Easily validate saved or unsaved code with W3C validators
  • Advanced search/replace and results panel
  • It’s open source!
  • …with many more features in the works!

Codetch.com :: Home

 Posted by at 11:15 am