Open Forum: Your Biggest Design/Development Pet Peeves

November 19th, 2012 by , in Monday in the HTMLab
Tags: , ,

Today, I’d like to open the “floor” for discussion, with a topic I think we can all talk about: what annoys us most about design and development, whether it’s something during the creation process, or something annoying you see being practiced around the Web.

To get the ball rolling, I’ll say that autoplaying music or video clips are a fairly annoying practice, as is un-descriptive navigation (not making it clear what the user is clicking on). During the design/development process, I get more frustrated by how a single misplaced comma or semicolon can break a whole CSS style sheet or PHP script, and how finicky MySQL is about how calls to the database are formatted. (Does an extra space matter THAT much? Apparently so! LOL)

So, what are your pet peeves? Share them with me in the comments!

no comments

Design Around Your Content

November 12th, 2012 by , in Monday in the HTMLab
Tags: , , ,

We’ve likely all seen examples of websites that could hang in a museum, as visually appealing as they are. Such feats of graphic strength amaze both users and other webdesigners, who may wish to imitate or pay homage to what they see.

But, at least in my experience as a designer, it IS possible to go overboard with the “visual art” part of the design, and forget all about what those graphics are supposed to do–frame the website’s content. In a way, we webdesigners are creating usable art, with heavy emphasis on the “usable.”

Today’s post focuses primarily on designing around text, images, and social connectivity, as these are the three major types of content on the Web these days. Each type of content must be handled differently, as you’ll see below!

Designing for a Text-Heavy Site

For a site with lots of text (ahem, this blog and others like it), you want to make sure your header, footer, and sidebar are as unobtrusive as possible, while still making your site easy to navigate. Having a fairly thin header, possibly with across-the-top navigation included, and well-organized but uncrowded sidebar and footer is a good idea–it keeps the rest of the site simple while letting the text content shine.


Larger pic of GeekyPosh.com

This design on GeekyPosh does a great job of combining the header and navigation into one seamless whole, making the latest post visible without the user having to scroll down at all. The blue ribbon running across the page neatly divides “content” from navigation, without making it look blocky. Additionally, the background texture is also subtle enough to lie behind the text without any visual confusion.


Larger pic of Jenn.nu

While the header image on Jenn.nu is larger, the thin strip of navigation below the header makes up for it–combining not only navigation but social media links into one easy-to-read, accessible “bar” below the image. In this case, the large header image does not detract from the site’s purpose, as it’s still easy to scroll down a little and begin reading.

When designing for text-heavy sites, you also want to make sure your text and background colors contrast strongly (like white and black) so that your text is easy to read. (Nothing’s worse, for instance, than having to squint at the text or highlight it just because the designer thought taupe text on a tan background looked good.) Both GeekyPosh and Jenn.nu do a great job of making their text colors highly readable against their background colors.

Designing for an Image-Heavy Site

A site with mainly images as its content needs plenty of visual space around each image–maybe not a full page of space, but a good amount of space so that separate images don’t run together.


Larger pic of Hark! A Vagrant

Hark! A Vagrant, with its emphasis on visual webcomics, uses both plenty of white space in its layout, and a few samples of the artist’s embellishment on its navigation links. The white space makes it easy to take in each individual comic; the navigation images give the site its own personal, memorable stamp.


Larger pic of Pinterest

Alternatively, image-heavy sites can make the sidebar and footer utterly unnecessary, and combine header and navigation into one bar, a la Pinterest. This kind of site also benefits most from neutral site colors that don’t take attention away from the images themselves–hence, Pinterest’s beige/gray/occasional pinkish-red color scheme.

Designing for Social Connections/Conversations

Since social connections and conversations are part of many sites these days, we all want to make it easy for our users to connect with us and our sites.

The best thing we can do? Make our comment forms, tagboards, social media links, guestbooks, etc. very easy to find. We need to feature any important conversation links or social media buttons at the top of the page or as close to the top as possible. (Alternatively, we can put such links on a scrolling sidebar/header bar that makes it clear how to connect and converse with the site owner and other users.)


Larger pic of Whimsical.nu

Whimsical.nu’s comment form gets it very right–a big, easy-to-read form that doesn’t force all the text to be 8pt tall and squished together. (A personal pet peeve of mine is too-tiny text in a form space–you end up unable to read what you’ve typed in!) Plus, the visual space is used well, and the form is actually designed to blend in with the site instead of looking like a cookie-cutter afterthought.


Larger pic of PopURLs.com

Upon hovering over links on PopURLs, not only does a content preview show up, but you also get a little box out to the left or right of each link that reads “Share | Clip.” You can then choose either of those options easily with just a move of your mouse (or a tap of your finger). This makes it so much easier to spread the site’s content across the Web, and interact with other users who have shared or clipped the particular item of content as well.

Summary

Beautiful, visually attractive designs are wonderful–but what’s even more beautiful to the user is a well-designed and usable site. Taking into account readability, page organization, and convenience for the user is perhaps the most important part of designing a page; our designs should frame the content rather than overpower it.

no comments

3 Rules for Promoting Your Blog on Twitter

October 29th, 2012 by , in Monday in the HTMLab
Tags: , ,

Isn’t it odd that back in January of this year I wondered about the usefulness of Twitter, and my ability to use it to promote this little blog of mine? Now I can’t imagine my blog without it, thanks to some auto-tweet WordPress plugins that help me keep my Twitter stream updated.

However, even though I’m using Twitter for this blog officially, I fully admit to still being a Twitter newb, even after managing several Twitter accounts for my various sites. I know I’m nowhere close to being as adept with social media as some of my fellow bloggers. But I have learned a few unspoken rules of the Twitter community, which I think have incredible value for us bloggers.

#1: Follow People, and You Will Be Followed

We all like to receive praise for our work, as I referred to in my comments article last week. Following another person’s Twitter is a digital pat on the back for them, and it may lead to them following you back if they find your blog (and its Twitter feed) interesting.

Now, when I say “follow people,” I don’t mean just follow random people willy-nilly. Follow fellow bloggers, people who are doing what you’re doing, as well as other websites that cover the same basic topic(s) as your blog does. (For instance, my Crooked Glasses Twitter follows Twitter accounts that cover all of the various subject matters I write about, as well as several fellow bloggers.) This is part of building a Twitter following that’s legitimate and networked together–once you follow them and they potentially follow you, you have a connection you can build on.

I didn’t realize this for myself until I began my work with the Save City of Heroes movement on Twitter, and began to follow a bunch of people with my City of Heroes site account (@skiesoveratlas). When I first began using the @skiesoveratlas account, I had thought, “Well, if people like my site, they’ll just follow, right?” WRONG! I had to get my name out there first, had to follow people and let them know I was there. Once I started following the people who were active in the #SaveCoH movement, lo and behold, I began to see people following me, too, and liking what I had to say.

But just following other people is the first step. There’s another step, too:

#2: Retweeting = A Necessary and Helpful Courtesy for Fellow Bloggers

I’ll admit, this is something I don’t do well on my Crooked Glasses Twitter account, because I cannot have constant access to Twitter (dialup internet at home, and no money for a smartphone). But a strong retweeting presence on your own Twitter stream can help your blogging cause in two ways:

#1: Gets the retweeted party’s name out to your followers, giving them more site traffic
#2: Builds your connection with them and gets them interested in what you’re doing, too

As I said before, we all like getting praised for our efforts, and retweeting is another form of digital praise. (I know I get warm fuzzies from seeing that someone has liked something of mine well enough to retweet it, anyway. :P) When you retweet, you are saying, in effect, “I like what you said so much that I’m sharing it to my followers, too.” With that simple click, you show your solidarity of opinion with them, and you connect to them more effectively.

Retweeting blog posts and articles by fellow bloggers can also boost their popularity. I know I can credit retweets as the biggest reason I have any followers on Twitter–I certainly haven’t done my part to retweet anybody else on my Crooked Glasses account, but other people have liked what I’ve said enough to retweet what I’m doing. Thanks to other people being more on-the-ball with social media, I’m doing well, too. That’s part of how Twitter works for bloggers–we all build each other up, just with a click of the “Retweet” button.

With that realization, which has just come to me over the past two weeks, I think it’s well past time to start retweeting and giving back to the community which has helped me so much…even if I have to battle 15-minute load times on Twitter (which is a sad reality)!

One important thing to remember about retweeting, though: it’s not just about retweeting everything the people you follow say, as you’ll see below:

#3: Your Twitter Feed is a Curated Topic List for Your Users

A personal Twitter account is very different from a website/blog’s Twitter. On a personal Twitter, you can pretty much retweet at will; on a site’s Twitter, you must be more circumspect, more selective.

For instance, my blog’s Twitter has attracted a large number of Christian websites and blogs because I write weekly about reading Scripture and otherwise living a Christian life. If I were to suddenly retweet a whole bunch of anti-Christian sentiments, tweets riddled with curse words and offensive opinions, etc., how Christian would that seem? I’d lose those followers in a heartbeat, and for good reason: my Christianity would be in doubt.

We as bloggers have to remember our site’s image, its “brand,” if you will, when we retweet. Our site’s Twitter feed functions as not only promotion for our work, but official endorsements for other people’s work through retweeting. If we retweet something that doesn’t work with our “brand,” people lose confidence in us, and we begin to lose community interest, like in my example above. So, when we retweet, we need to make sure that what we’ve retweeted is in line with what our site’s about. That way, we don’t confuse our followers.

And, by retweeting selectively, we also create a “curated” Twitter feed and build trust in our credibility. When I retweet something through my blog’s Twitter, I want people to think, “Wow, if Crooked Glasses retweeted it, it MUST be good!” Not only do I want to build a strong community through my retweets, but I also want to draw people’s attention to what is legitimately wonderful content that ought to be enjoyed. I will be a much better advertiser for someone else’s work (as well as my own) if I’m seen as a keen judge of worth and reliability.

Summary

Through following other bloggers and retweeting especially great content they’ve made, you can actually build a strong, legitimate Twitter following for yourself. Once you connect with other bloggers and website owners through social media, showing interest in what they’re doing, they will likely be interested in what you’re doing, too, and the cycle of positive influence will continue!

no comments

Web Design on a Budget: The Three Best Free Software Tools

September 3rd, 2012 by , in Monday in the HTMLab
Tags: , , ,

If you’re just beginning web design/development, or if you simply don’t want to spend money on expensive software tools, it may seem impossible to achieve your dream of coding and designing your own site. You might even think you can’t create anything worth looking at or browsing if you don’t have high-end software.

I am happy to tell you that there are wonderful free software options for all of us who can’t yet afford some of the loftier programs. Not only are these programs free, but they are often the best utilities out there for the price. Here are the three webdesign software tools I use for my own designs:

Best Free Code Editor: Notepad++

Ever since I began web design, I longed for a “just-code” editor, one that would display the bare code like Notepad did…except that I wanted a little more Web-specific functionality, too. I wanted to surf through the code without getting so lost; I wanted to be able to speed up the long and tedious editing process. I needed a program that wasn’t so simplistic as a WYSIWYG editor, but one that was also helpful for those of us who were learning code.


Well, someone in the Notepad++ development team must have heard my prayers! Here, you can see how the different bits of code are color-coded (HTML tags are blue, selectors are in red, option choices are in purple, and so on).


See the gray minus sign and the line extending between the opening p tag and the closing p tag? This is another one of Notepad++’s great tricks: “folding up” a section of code if you need it up and out of the way.


When you click the minus sign, it closes the section of code encased by the opening and closing p tags, resulting in a display like this. Clicking the red plus sign will expand the hidden code out again.


Like the image above says, the “Replace” function is also known as “Hallelujah!!!” That’s what you’ll shout when you realize you can use the Find & Replace function to edit the same text in every file you have open within the program. SO awesome for expediting those previously long and tedious tasks, like editing a line of code on every page of your site.

Now, I haven’t even begun to expound upon all of Notepad++’s awesome features. The program supports a variety of different languages, from ASP all the way to XML, and even including some languages I’ve never even heard of (Haskell and KIXtart, among others). Plus, it has the ability to use macros, plugins, and converters for even faster programming. Check out the program with the link below:

Download Notepad++: Notepad-Plus-Plus.org

Best Free Graphics Program: GIMP

Ever wanted Photoshop but couldn’t hack the $600 price tag? Well, GIMP can do most things you’d use Photoshop for, even transparency and text addition, but for free.

Its interface is a little more free-form and spartan…


…but within it, you can still do all of the basic image-editing techniques, as well as some of the more sophisticated ones usually in higher-end products.


This is how an image looks when opened within GIMP–it appears in the central box of the program.


Most of the tools that usually appear under Enhance in Photoshop-esque programs are located under Colors in GIMP, such as Brightness/Contrast, Levels, Hue & Saturation. etc. These dialogs work just as well as the pricey ones, and these come with handy ToolTips to help you navigate the menus.


This is an example of the Levels dialog, in which you can change the shadows, midtones, and highlights to your heart’s content.


The Image menu remains largely unchanged from programs like Photoshop–it’s just that the “Resize Image” dialog is renamed “Scale Image.”


The dialog for resizing the image appears here. To resize your image proportionally, just type in your desired height or width, and then click the linked chains to the right of the boxes to get the corresponding number in the other measurement.

Besides changing sizes and tweaking shadows and highlights, GIMP can also do a lot of the artistic filters on pictures that Photoshop can, plus cropping, layering, and masking. It’s a great program, and even after six months of using it I’m still not done exploring all it can do. Check it out for yourself!

Download GIMP: GIMP.org

Best Free File Uploading Program: FileZilla

If you’ve got tons of files to upload, never fear that you’ll be stuck uploading through your browser again! FileZilla is a free FTP program that offers clean and simple uploading (and downloading!) functionality.


This is what the program looks like before you make a connection to an FTP server. On the left appears your computer’s folder hierarchy (top left pane), and the content you’re working with in the currently open folder (bottom left pane).


To connect to your FTP server, you’ll need to provide FileZilla with some information. This is the Site Manager dialog box, where you plug in the info for your site. The “Host” line is usually something like “ftp.yourdomain.com”; you’ll need to fill in your username and password for your hosting server. (My details are obscured for privacy reasons.) Once you’re done filling in your info, you can save and connect!


This button, at the top right underneath the word “File,” is the Quickconnect button. Use this to connect to any of the sites whose profiles you’ve saved already through the Site Manager dialog box.


Once you connect to a server, its folder hierarchy appears in the top right pane, and the contents of an individual folder appear in the bottom right pane. Uploading can be as simple as dragging and dropping the files from the bottom left to the bottom right pane!


Or, you can always right-click the file you want to upload and choose “Upload” from the right-click menu. (For Mac users, I am not sure of the keyboard shortcut to achieve this–please pardon my Windows-user ignorance.)


If you want to upload multiple files, the highlight-and-right-click-upload method works best, I’ve found.


FileZilla will even warn you if a file already exists, and through this dialog box you can choose whether you want to overwrite it or not–it even specifies very detailed actions depending on the age and size of the two files it’s comparing.


Not only can you upload files, but you can download them from your server as well! It’s great for making file backups…and, as I found out in 2011, great for emergency saves of all your hard work. When my hard drive crashed in 2011 and I lost ALL my data, FileZilla was able to download copies of all my files from my hosting provider very quickly and efficiently.

(And, just like uploading multiple files, you can highlight-and-right-click all the files you want to download from your server, and do it en masse. That’s what made getting all my Web work back a whole lot easier.)

FileZilla may not have a lot of frills, but it’s an excellent utility for bulk uploading and downloading, making file backups, and connecting to your site without having to have a browser window open. It’s well worth a download!

Download FileZilla: FileZilla-Project.org

comment (1)

Make Yourself a (Font) Map

August 27th, 2012 by , in Monday in the HTMLab
Tags: , ,

As webdesigners, we make use of hundreds (and possibly thousands) of different fonts every year, choosing just the right text ook for each of our layouts, small graphics, headers, and other projects. Symbol fonts, especially, have become very popular as a way to design matching social media icons, as well as general site commands (like Refresh).

However, if you’re working with many different symbol fonts, it can be difficult to remember which symbol occurs on which key when you’re using a particular font. Or, you may want a particular symbol and can’t remember which font has it. Fruitless searching follows, usually with a little (or a lot) of frustration included.

That is, unless you create something I like to call a “font map.”

What IS a Font Map?

This is an example of the font maps I’ve created for myself–this one corresponds to the Wingdings font, which is default on most Windows computers. The top group of four rows contains all the symbols that can be created with lowercase keys; the bottom group is all the symbols that are created by hitting Shift and a key.

How Do You Make a Font Map of Your Own?

You will need an image creation program–I use Photoshop, but even Microsoft Paint can do it (as I discovered while writing up this blog post!).

  1. Open a new blank image in your image creation program.
  2. Select the Text tool, and place a text box or text cursor onto your image.
  3. Type out all of the generally available keys on your keyboard, like I’ve demonstrated below:

    `1234567890-=
    qwertyuiop[]\
    asdfghjkl;’
    zxcvbnm,./

    ~!@#$%^&*()_+
    QWERTYUIOP{}|
    ASDFGHJKL:”
    ZXCVBNM<>?

  4. Select all the text you just typed/copy-pasted, and change the font to the symbol font you want to map out. Make sure the font size is big enough for you to read easily!
  5. Presto! A new font map! (If you want to, you can label the two different groups as I have done, and put the title of the font on the image, too. Just makes using your new font map a little easier.)

Does This Really Help? You Better Believe It!

I’ve been using font maps successfully in web design for several years now–it’s a real time-saver, meaning less minutes wasted typing and backspacing on my image till I find the right symbol. In seconds, I can flip through all my font maps, find the symbol I’m looking for, and be on my way to a finished design.

Try making one for yourself, and see how much easier it is to use the various symbol fonts in your designs. You’ll thank yourself later!

no comments

The “Great Wall of Text” and Other Web Writing Mistakes

August 13th, 2012 by , in Monday in the HTMLab
Tags: ,

Making content for the Web is not as easy a proposition as it first sounds. At least, not if you’re going to attract readers to it. This, I have unfortunately discovered since I began running this blog; for instance, my writing style may be conversational and fairly engaging, but it’s also a little verbose. (I suffer from “Wall-of-Text Syndrome” on a daily basis. LOL)

This is a Web writing mistake that can drive away visitors–but it’s not the only one we Web content creators can make. Read on, for the 5 most common writing mistakes on the Web, and how to fix them!

Web Writing Mistakes

  1. Paragraphs that are too long (more than 5 lines)
  2. Font size smaller than 12px
  3. Font color too similar to background color
  4. No pictures to help illustrate points
  5. Using 100 words when 10 will do

How Can We Fix These Mistakes?

Thankfully, Web content is very forgiving–all you need to do is hit the backspace key and rework your sentences. And believe me, your readers will thank you for improved readability and comprehension!

#1: Break Up Long Paragraphs

Preview how your Web content looks in your layout. Are any paragraphs more than 5 lines long when contained within your divs or tables? If so, you’ll need to reword and reformat to break those longer paragraphs into smaller sections. Just like dividing larger pieces of food into smaller bits, keeping your paragraphs small makes it easier for users to digest what you’re saying.

Think about it this way: would you rather read Example #1 or Example #2, below?

Example #1
Crooked Glasses is a multi-topic blog–sounds pretty weird, but I enjoy writing it. During the week, I cover web design and development on Mondays, social commentary and philosophy on Tuesdays, Biblical analysis and application on Wednesdays, gaming and game strategies on Thursdays, Internet surfing on Fridays, and any and all forms of creativity on Saturdays. (Occasionally, I have a wildcard post on Sunday, too!) This blog has been going since January 2011 and can be followed on Twitter; I’d love to hear back from y’all about subtopics you’d like to see covered. Also, comments are enabled on every post, so if you have opinions or ideas regarding any post, feel free to click “comment!”

Example #2
Crooked Glasses is a multi-topic blog–sounds pretty weird, but I enjoy writing it.

During the week, I cover web design and development on Mondays, social commentary and philosophy on Tuesdays, Biblical analysis and application on Wednesdays, gaming and game strategies on Thursdays, Internet surfing on Fridays, and any and all forms of creativity on Saturdays. (Occasionally, I have a wildcard post on Sunday, too!)

This blog has been going since January 2011 and can be followed on Twitter; I’d love to hear back from y’all about subtopics you’d like to see covered. Also, comments are enabled on every post, so if you have opinions or ideas regarding any post, feel free to click “comment!”

Which felt easier to read? If you’re like most Web users, you probably answered Example #2–when information is spaced out in understandable chunks, it helps our brains understand it better. Spacing out content, even if you don’t rewrite it, can help our users understand what we’re writing.

#2: Enlarge Font Size

I don’t know about you, but loads of tiny font crammed onto a page doesn’t make for happy reading for me. Small font sizes are all the rage for designers who don’t want to take the focus off their layouts, but if we want our users to be able to use our sites, we need to make our content as easily-read as possible.

I’ve found that the 12pt font size works well for body content (that’s what I’m using on this blog)–it’s not so big that it overwhelms the screen, but it’s not ant-size either. We don’t want to give our users squinting wrinkles, after all!

Look at this example of the same text formatted in 8pt and 12pt:

Both use the same text (an excerpt of the famous “Lorem Ipsum” text), and the same font color. Which would you prefer to read on a computer screen?

#3: High-Contrast Text and Background

Many designers, especially beginning designers, choose to have their font colors similar to their background colors…sometimes a little too similar. (I admit, I made the same mistake in my newbie days!) As a designer, you do want your colors to match well together. It’s just that the font color and the immediate background color (behind the font) should not be almost the same color.

An example, here:

This dark brown text seems to almost vanish into the similarly-hued background. If this represents important text on your website, it’s likely your user will either ignore it completely, or try to read it but give up on it.


Putting the font in a much paler color pops against the same brown background I used in the previous example. See how much easier it is to read?

#4: Add a Couple of Explanatory Pictures

As I’ve seen for myself throughout this blog post, adding a couple of pictures really does help illustrate your points. Not only do you have to write less to explain yourself, but it further breaks up any “walls of text” that might be on your page already.

If I hadn’t done the font color and size examples in pictures, for instance, then I would have had to resort to explaining myself in words, which might otherwise have been ignored or skimmed over. Pictures draw the user’s attention and help visually summarize what you’re writing.

#5: Edit Down to One Sentence, Then Expand

This is tough. Oh, wow, is this ever tough for me. I love words, so it’s hard for me to cut the excess away. But if we want our users to read what we’ve worked so hard to write, then it needs to be concise. After all, if the user doesn’t get what he or she wants from our site as quickly as possible, they’ll go somewhere else.

One of the tricks that has really helped me with this is to edit down a paragraph into one sentence, often called a “topic sentence” in grade school. Then, I can expand my paragraph out just a little bit with enough detail to make it smooth and flowing again.

With that in mind, let’s take the text I wrote from the first example, and edit it down just a bit.

Before Editing
Crooked Glasses is a multi-topic blog–sounds pretty weird, but I enjoy writing it.

During the week, I cover web design and development on Mondays, social commentary and philosophy on Tuesdays, Biblical analysis and application on Wednesdays, gaming and game strategies on Thursdays, Internet surfing on Fridays, and any and all forms of creativity on Saturdays. (Occasionally, I have a wildcard post on Sunday, too!)

This blog has been going since January 2011 and can be followed on Twitter; I’d love to hear back from y’all about subtopics you’d like to see covered. Also, comments are enabled on every post, so if you have opinions or ideas regarding any post, feel free to click “comment!”

One-Sentence Summary
This is a multi-topic blog, covering web design, opinions, Scripture, gaming, fun links, and creativity; come read, follow, and comment!

Expanding On the Summary, Making It Sing
Web design and development! Social and philosophical opinions! Even Biblical interpretations, gaming strategies, new websites, and all the arts! If any (or all) of these topics interest you, then come visit Crooked Glasses, a rare form of blog. If you like what you see, follow us on Twitter, and leave your thoughts in the comments!

Without losing any of the main points, I was able to summarize and energize the text into a much more attractive bundle. I believe this is easier to read (and more fun to read)–what do you think?

Summary

By taking a little time to revise and reformat your words, your Web content can be infinitely more engaging and convenient for your users. And the best thing? Writing can be revised forever, so if you don’t get the fix right the first time, there’s always the Backspace key. Like I said, your users will thank you for this!

no comments

Does Your Site Suffer from “Interaction Overload?”

July 23rd, 2012 by , in Monday in the HTMLab
Tags: , ,


See complete post @ TheOatmeal.com

As this hilarious comic from TheOatmeal makes clear, there’s a difference between making your site available for social media interaction, and spamming your visitor with a bunch of social media requests. These days, it seems, we as Internet users all want to be so interactive with the sites we visit, and we as webmasters want to make sure we’re connecting with our users as much as humanly possible.

However, we as designers can easily overdo it. If we try to push too much interaction on our sites, we may end up pushing away more visitors than we bring in. It’s great to be interconnected–don’t get me wrong–but we can’t afford to let “interaction” and the pursuit of it overshadow the content. We want our users to enjoy our content, not be driven away by dozens of popup forms and social media sharing opportunities.

A Quick Interaction Checklist

  1. Do you have social media buttons on your navigation, every post, sidebar, AND footer?
  2. Do pop-up boxes appear after users do or click anything on your site, asking if they want to be added to feeds/like you on Facebook/follow you on Twitter/etc.?
  3. Do you have tons of flyout content that randomly appears from the sides of the page, covering up actual page content while demanding that your user interact with the flyout?
  4. Can your user not even scroll down a little without being visually assaulted by images for all the social media networks you control are a part of?
  5. If your user clicks to exit your site, does a final warning message pop up saying something like “Wait! You haven’t liked us yet!!!”

If any of these sound familiar (maybe even the tongue-in-cheek ones)…your site might have “interaction overload.”

Fixing Interaction Overload

It is possible to tone down the amount of interaction opportunities on your site without losing visitors’ feedback. Here are a few ideas:

Summary

Getting more users to follow, like, and use your site doesn’t mean begging in the form of several thousand social media requests. Provide ways to interact without looking desperate, and you’ll attract more users who will get more honest value out of your content. It’s kind of like dating, in a way–act too desperate, and you drive everyone away, but being comfortable in your own skin draws everyone near.

no comments

The “Internet Snobs:” Elitist Webmasters

June 4th, 2012 by , in Monday in the HTMLab
Tags: , ,

We’ve all had the unfortunate experience of meeting them. From somewhere within the murky depths of the Internet, they arise, to purportedly “help” beginning webdesigners and developers…but they manage to “help” while sounding incredibly snarky and condescending. They are the “elite designers,” the peddlers of snobbery on the Web.

For sure, their reputation as “elite” designers is well-deserved, generally. They make beautiful designs, seamless coding, and always seem to be fluent in the right Web languages. But their abilities to make such lovely streamlined sites lends itself all too easily to critical judgments of others, who may not be as fluent or as strong, but who are still learning their craft.

Don’t think they exist? Never run into them? Well, here’s a couple of personal experiences I’ve had with Internet snobs:

Web-Snobs in Authority: Anecdote #1

As a fledgling designer back in ’05, wanting to drive more traffic to my site, I ended up applying to various topsites and site directories to get my link “out there” in front of others’ eyes. All was going well, until I visited a particularly beautiful web directory, which had a little “Help Wanted” box on the front page–they not only wanted more links in their directory, but wanted people who would be willing to evaluate submissions.

I jumped at the chance to help evaluate–I figured that the more websites I saw, the more understanding I would get about my own coding, and perhaps it would help me grow at the same time I helped others get admitted to the directory. I submitted my link, as well as an application to become an evaluator, and happily waited for an email back.

But alas, a few Web snobs got hold of me. A few hours later, I received a curt reply that went something like this:

Dear Robin:

To be an evaluator for (site name deleted), we feel it’s important to have a strong grasp of good design techniques. We have reviewed your site, which you submitted to the directory, and were honestly unimpressed with your content presentation skills; we do not believe you’d know the right criteria for admissions.

We are hereby rejecting your application for evaluator. Also, we suggest that you perhaps take some graphic design courses and resubmit your link at a later date, so your site will be better up to par with the rest of our directory.

So, not only was I rejected as an evaluator, but my link was rejected from the web directory. Why? Because someone had a bug up where the sun don’t shine, basically. They believed my site was designed badly, and they wasted no time making me feel like a pile of poo over it.

I admit, the design in question was not my best work ever (in fact, you can see what it looked like here–it’s Version 4), but it was an example of me trying out new things, trying to be different, trying to get comfortable with doing various design styles. I had been teaching myself web design for only two years at that point, and I didn’t have access to any courses in graphic design; I was going off of what I believed to be best practices.

I know that as a busy web directory, these guys didn’t have a lot of time to waste with nicely-phrased replies. But rejecting a link to their directory, which could have driven traffic their way no matter how badly designed the referring site was? Even now, I regard that as a pretty stupid move, motivated more by snark than common sense. It was an unnecessary flourish; I could have taken the criticism of my design alone and learned from it, but their added sucker-punch of rejecting my site in totality made it seem like an attack.

Needless to say, I was secretly very glad to hear the directory had shut down a few years later. Reason? They didn’t have enough submissions coming in, and the directory was too small to drive links. (I enjoyed quite a nice belly laugh over that irony.) Good to know that snobs don’t always win in the long run!

Mod Gone Mad: Anecdote #2

Along with trying to submit my sites to topsites and directories, I also had joined a few web design forums to learn more and maybe help other beginners out. I joined one nameless webring clique, which was a site review clique as well as a link directory, but quickly found out that according to one of the mods, I didn’t belong there.

She was a popular webmaster and builder of several useful webmaster tools and software; she also knew a whole lot more than I did about the backend part of web design. I respected her and was quite willing to sit at her proverbial feet and learn from her. But I also wanted to bring my unique perspective on web design to the clique’s forums, helping other beginners like me, writing articles much like this very post. To my surprise, she wasn’t having it.

It started with a couple of posts I made about praising websites instead of being overly critical–due to my past experience with critical judgments, I was alarmed at the amount of snarky, cutting reviews on the webring. I knew what harsh judgments could do to a beginning webmaster’s confidence, and I sought to shore up confidence and offer constructive criticism, pointing them to resources and offering to help where I could. But when I posted about praise, her response was simply “I don’t have time for praise. Next.”

OK, I thought, well, I’ll just make a few comments to some beginning designers on here and stay off the forums for a while. So I visited a couple of sites, offered each webmaster detailed help with some encouragement mixed in, and generally felt good about myself for being the bigger person and not continuing the argument. Little did I know, one of my paltry human judgments clashed with the mod’s omniscient, eternal judgment…she followed up both my review comments with suggestions that the other person should completely ignore my “sugarcoated BS,” since I didn’t know what I was talking about.

The stink of her elitism was strong in my nostrils, and in angry haste I responded to her on the forums; I told her exactly what I thought of her following me around the place and acting as if I had no right to be there. Her response: “Well, I’ve seen your designs. You tell me: does someone who doesn’t even know how to validate HTML have ANY right to advise anybody else here?”

I put up a weak response, something along the lines of “I deserve to be here as much as anybody, but I don’t deserve to be talked to like that”, and logged off. Of course, years later I thought of better comebacks, like “Well, since you apparently own the Internet and are so blasted good at this, why does your profile say ‘unemployed’?”…but of course, you never think of comebacks when you need them. That was the last time I accessed that forum, and I promptly took down the webring link and removed myself from it. I had enough snobs in my everyday life–I didn’t need another faceless snob on the Internet trying to shout me down.

What annoyed me the most about this particular mod was that I had been willing to learn from her, and had indeed sought out her advice before this incident. But her advice was always tinged with disdain, as if I “should know better” than to ask, as if I were an idiot for even forming the question in my mind. I had no issue with her being critical of my designs (though it stung badly); I took issue with her tone and how she treated me like a lesser human being. Poorer designer I may have been, but I still deserved better.

A Dirty Secret: My Own Inner Snob

I’ll admit, however, that I am not free from my own inner snobbery, and it has bitten me on the backside more often than not. When I accepted a web design job from a business halfway across the country, for instance, I privately scoffed and laughed at the previous webmaster’s poor attempts at design. I kept thinking to myself, “I could wipe my rear and end up with a better-looking design.”

Little did I know, the company’s owner had apparently loved the previous, awful look and was disappointed with my more web 2.0, sleek and modern design. (I didn’t even really get paid for the work I did, but I was glad to be rid of that contract!) I felt terrible about how I’d passed judgment on the other designer after the fact–that person was just trying to work within the (terrible) design concept, and ended up doing a better job than I did with it.

Web Elitism is Everywhere…How to Fight It?

As my stories show, it’s possible to be both a victim of Web-snobbery and a perpetrator. The key is to realize when you’re being a snob yourself, and tone it down (with an added apology to affected parties for good measure).

Truth is, we all pass judgment on each other, always trying to size each other up to see how skilled we are in comparison to others, etc. It’s like middle and high school all over again, with the “popular” crowd making all the pretty designs, the “geek” crowd with all the l33t coding skills, and the complete “n00bs” who don’t know any better than bright pink backgrounds and tabular layout designs.

Instead of playing on other people’s lack of confidence or apparent lack of skill, and hoarding all the l33t coding hacks and software tricks to ourselves, I think we web designers and developers should be more a community of designers. We don’t have to be in competition with each other–after all, we’re all trying to do the same thing, just in different languages and different programs. Elitism gets us nowhere; in fact, it can kill off confidence in newbie designers who have great potential, but little access to knowledge and tricks.

So, why don’t we put the one-upmanship aside, just for a while, and try helping out someone who might not know everything you do? Who knows, a new friend might be behind that screenname, wishing someone would chat with them and show them how to make a cool website like yours. :)

comment (1)

Hand-Drawn Graphics: Yes, They CAN Be Good Enough

May 21st, 2012 by , in Monday in the HTMLab
Tags: , , , ,

Contrary to popular Web belief, Internet graphics don’t have to be sleek ‘n shiny like technology. In fact, in this age of lookalike layouts and cookie-cutter designs, landscapes of reflective images and shadowed text, hand-drawn graphics can give a touch of rustic personality to a page. A hand-drawn layout, icon set, avatar, etc., can make your page feel homey and intimate–truly “handcrafted.” What’s more, it can make your site seem more down-to-earth.

But not all Web designers are handy with a pen or a paintbrush. (I know I certainly ain’t the world’s best. LOL) It can be daunting to try to put your own artwork on your webpage for everyone to see; you can be paralyzed, thinking “What if it’s not good enough? What if I work really hard on it, and it ends up looking like I used it for toilet paper?”

These are some of the real thoughts and feelings I had about doing my own hand-drawn layouts…and I finally just decided to go ahead and try my hand at it, literally. The following are some of my results:

Examples of Hand-Drawn Graphics

(For each example, click on the image to get a full-size screenshot.)

The Network Look


This, my network page, was my first try at doing a hand-drawn layout. With this layout, based on a real tree I used to climb when I was a kid, I placed buttons and links as if they were flowers and buds on living branches, with my sketch as a simple background image.

I added no color to the actual sketch–I wanted the buttons to be the spots of color in the design, like trees’ natural flower buds and blossoms. (Plus, whenever I add color to my sketches, they automatically turn from “pretty good high-school art class” to “kindergarten art class mess”. Every. Time. xD)

The Domain Look


My domain layout featured a big, sheltering tree like the ones all around my house, its soft, cloudlike branches overhanging the content on either side of the “trunk.”


The “trunk” of the sketched tree stretched down all the way to the bottom of the page, where I had the “roots” of the tree in my footer, seen here. This is probably my favorite footer design to date–it really looks like the “end” of the page, the “ground” rather than just an arbitrary bit of code stuck at the bottom.

This sketch also received no color, because I knew I’d be using large areas of various shades of green in my CSS styles; I didn’t want the actual tree to clash. I also cite my previous difficulties with adding color to my sketches. It just never works out quite as I intend. LOL

The Fanlistings Look


This “flowers & ribbons” design literally framed my joined fanlistings page, and was difficult to code but looked beautiful on the page. For this one, I added a golden color to the flowers using Photoshop, and the overall layout looked much better as a result.

I used the boxed-in design as a way to stretch my design boundaries–the style succeeded with a little image slicing and creative use of HTML tables (yes, I used tables because aligned divs hate me). In this layout, the hand-drawn images define the space but do not detract from the content, like a good area rug in a living room.

The Update Blog Look


My update blog featured only small-scale sketches (a big leaf, a tiny multi-petaled blossom, and a growing flower on its stem). I used the leaf and blossom on the top part of the layout, and the flower-and-stem image in the footer, as seen below:

Using little sketched images in strategic places on the layout (and, again, not adding any color to the sketch itself, but using blocks of color in the layout code) gave it an airy, organic look. Plus, using fewer sketches meant more space for content, should the design need it; I wasn’t sure how much the various tag clouds and category spaces would need, so I went for as much visual space as possible.

Weaknesses of This Design Style

While this does look down-to-earth and homey, it can also look amateurish. (I fully admit mine are not the best in technical execution, but they were the best I personally could do.) In addition, hand-drawn designs can easily be misaligned, angled oddly, or leave crooked lines on a webpage; you can correct many graphical sins with Photoshop, but not everything!

However, if you’re skilled doing pencil-paper sketches (or sketches on a tablet computer with a stylus), you might be able to turn a hand-drawn design into a sleek-looking layout; it would be a worthy challenge! It’s just a little bit harder to get the perfect straight lines and shiny details we’re so used to with the Web these days.

Where Can You Use Hand-Drawn Designs?

In my opinion as a designer, hand-drawn designs are generally better for small personal/informational sites and the like, not big corporate or commerce sites. Any site where you need a personal touch, a more casual layout, etc., a little sketch (or a big one!) can work.

How to Make Your Best Hand-Drawn Graphics

You Will Need:

Directions:

  1. Sketch out your ideas on your scrap paper with a pencil–much easier to work with your design when your lines can be erased (take it from me).
  2. When you have something you’re satisfied with, take up your pen and printer paper, and begin transferring your sketch(es) into finalized form, using a ruler as necessary.
  3. Make a couple of copies of your uncolored sketch to see how well the machine picks up your lines, and make any lines darker that don’t show up. (Also, it’s good to have a few copies of your sketch on hand just in case something happens to the original.)
  4. If you want to color in your hand-drawn design by hand, do so now. Alternatively, you can add color digitally with an image-editing program once you scan it in.
  5. Scan in the image–you may have to adjust the contrast, brightness, and other image settings so that the pen lines or hand-added colors don’t look distorted. (I ended up with one sketch that looked like a photo negative because I messed up the image settings…LOL)
  6. Once it’s scanned into your computer, you now have an image that you can use as the baseline for any web project!
no comments

Your Page is Being Frequented by (Internet) Robots

April 16th, 2012 by , in Monday in the HTMLab
Tags: , , ,

Though many of us webdesigners and developers don’t realize it, many of our page hits come from robots, usually known as Web crawlers or “bots”, which index our pages for various search engines and the like.

Bots like these are (generally) harmless, and indeed we designers should be glad for the innocuous presence of anything that helps our pages get better known. According to this article, they can help validate links and HTML, and they can monitor changes in your web page so that search results which turn up your site are as updated as possible.

You do, however, have to be watchful for those few malicious bots, according to this site about web robot abuse, that look to harvest email addresses and other sensitive information for spam attacks; some bots might even be programmed to take down your server with specialized attacks.

To help you design and develop pages with bots and their indexing habits in mind, I have written the following short guide with plenty of sources to find more information. How you want to handle bots on your page depends entirely on how you view them. For example:

If You Don’t Mind Bots at All…

…then you don’t really have to do anything about your webpages. Just keep designing and coding as you have been, and bots will happily index and keep up with all your pages on your site(s).

I personally don’t mind them coming to my site–anything that helps my pages show up in Google Search is a happy thing. But lately, since I’ve been using my domain as a source for a bit of personal storage as well as officially published projects (losing data will make you paranoid), I’ve found myself thinking of how to keep bots out of certain folders. Thus, the section below:

If You’d Like to Keep Bots Out of Certain Folders…

This is where the humble robots.txt file comes into play. This file, usually kept in the top level of your site’s directory, is a list of instructions for robots to follow while visiting your site–most importantly, used to disallow access to certain files and folders that you’d rather not have indexed.

So, for instance, if I wanted to keep bots out of a folder called “mine”, I’d write this little tidbit in my own robots.txt file:

User-agent: *
Disallow: /mine/

(The “User-agent: *” bit tells every robot that visits, “This applies to you, so listen carefully.”)

If, however, I wanted to disallow access to two folders, “mine” and “yours”, I’d need to write my robots.txt file this way:

User-agent: *
Disallow: /mine/
Disallow: /yours/

For everything you want to keep bots out of, you have to write a specific Disallow line. Kind of like keeping kids out of the various cabinets in your house–if you don’t tell them specifically they can’t get into it…well… LOL

And just like some kids deliberately disobey your pleas to keep out of certain drawers and cabinets, there are some bots who will ignore your robots.txt file completely. The only way to be completely sure a bot isn’t indexing your stuff is to take it off your site…sad.

Even more awesomely in-depth information about the robots.txt file can be found at RobotsTxt.org (very well-explained and detailed!).

If You Just Want Bots to Keep Out Altogether…

Of course, if you’ve had a bad experience with phishing and spamming bots, you might just want them all to buzz off. For this, such tags as the following have been invented (courtesy of this page):

<meta name=”robots” content=”noindex,nofollow”>

Put this meta tag in the header of your page, and it’s a virtual “Keep Out” sign for bots everywhere. Only do this, however, if you’re sure you don’t want anything on your site to be indexed, not even by the “good” bots.

Summary

Bots are an often-forgotten portion of web development, but with all the various search engines (and spammers, unfortunately) out there on the big ole Internet, we developers have to at least take them into consideration. I hope you’ve gained some insight on how to either welcome bots to portions of your sites, or how to keep them out!

Learn More about All Sorts of Web Bots

InternetOfficer.com has a complete list of web robots for your perusal, so if you check your web stats and see a number of hits from several strange names, you can check this list and see if a bot’s been visiting you.

no comments