Editing, condensing, updating, and adding more pictures–always a good thing for an old blog post! My informational post on multiple sidebars is now light-years better.
Tag Archives: user interface
3 Little CSS Changes to Make Your Content Pop
It’s temptingly easy to get swept up in the visual/graphic part of a webdesign, and end up styling the content as what feels like an afterthought. But, as demonstrated in the following article, content styling is incredibly important–and the slightest changes can make a huge difference in whether your audience actually reads your content or not!
These 3 changes literally take less than a minute to implement, but they can radically improve your content design. Read on to find out!
Make Your Font A Little Bigger
CSS Rule: “font-size: 14px; font-family: “Arial”, sans-serif;”
CSS Rule: “font-size: 16px; font-family: “Arial”, sans-serif;”
The first and easiest change to make is to just enlarge your font, just a bit. This isn’t just for nearsighted people like me, either–bigger font simply looks easier to read for everyone. Even the change from 14px to 16px, as depicted above, can be enough to make words more distinct at a glance. Visually, it looks more appealing already–and visually appealing content means readable content, which means your site has an audience. Awesome!
Space Your Lines Out a Bit
CSS Rule: “font-size: 16px; font-family: “Arial”, sans-serif;”
CSS Rule: “font-size: 16px; font-family: “Arial”, sans-serif; line-height: 24px;”
Bigger font, however, looks even better when spaced apart a little bit more. Ever wondered why your teachers always asked for double-spaced papers? As a former teacher, I found out that my eyes boggle less when the text isn’t all scrunched together like it just went through a trash compactor (especially when grading dozens of student papers late at night). Your site visitors likely think the same–respect their eyes and give each line of text a good amount of space with the line-height property.
Use Subtle Color in Your Headings and Subheadings
CSS Rule (heading only): “font-size: 22px; font-family: “Arial”, sans-serif; color: #336699;”
Using font colors in a webpage doesn’t have to involve crazy-bright hues. Even just a little color in your headings and subheadings, slightly different from your body font color (like the deep blue alongside the black in the above image), can help visually separate your content out. For all types of readers, whether they gobble down words or savor each mental morsel, the heading and subheading color is another cue that the topic has changed and they need to pay attention. This helps your readers take in your content more easily and understand it quicker.
Summary
Styling your content, even with just the few simple changes outlined in this article, can be the difference your site needs to become widely read. After all, content is why sites exist–let’s make it as appealing as possible!
I Hate Slideshow Articles!
As an Internet user, I inwardly groan upon discovering that an article I really wanted to read is actually a slideshow. In fact, it’s one of my top pet peeves of Web content formatting!
I’m not alone in this opinion: there are articles about why slideshows should be banned entirely, as well as workarounds for those of us who hate slideshows and other multi-page articles. (There are a few people who defend slideshows as a practice, but even they admit that the format can be overused.)
Since I’m both a Web content consumer AND a Web content writer, I studied this problem from both angles. Why do slideshows bother me so much, as a user, and why might Web content formatters choose this format when so many users hate it? The 4 following reasons explain why:
Why We Should Stop Using Slideshow Article Format
#1: It’s basically a strategy for getting page ads to load more often per user.
Above all, this is what irritates me about slideshow articles: they are invariably riddled with ads (including that dadgum “Ad Slide” that always pops up right in the middle of my reading and disrupts my whole thought flow). It actually feels like the content formatters are highlighting the ads INSTEAD of their content.
News flash: users hate ads! As a user, I don’t care if those ads are “paying for your site”–I don’t want to be bothered with them, ESPECIALLY not when I’m trying to read your admittedly interesting content. Making me click through a 10 or 12-page article just so you can get a few more cents feels like a huge tease. (And as a content writer, I know that the LAST thing we ever want to do is make our users feel like we think of them as money-generators and nothing else.)
#2: Because each slide is so short, the articles end up feeling skimpy on content.
You’d think that if an article is 10 pages, it would actually have some decent content, right? But unfortunately, in the slideshow format, article content is often compressed and badly written to fit alongside or under pictures. Each slide usually contains maybe 5 sentences, which may be enough to satisfy some users, but leaves this English major feeling pretty cold. Explanations are often glossed over in favor of using a picture that usually doesn’t really explain anything, and so the whole article feels rather useless.
Being a largely text-based content creator, I don’t want to waste my users’ time with insipid articles like the ones I end up clicking through all too often. If I’m taking the time to write an article, I want my users to feel like they’ve really learned something at the end of it. And I’d rather not have the format of the article steal emphasis away from my content.
#3: Slideshows don’t work well on mobile devices.
I’ve noticed this while trying to read slideshow articles on my tablet and smartphone–slideshows (especially the pictures!) are usually so huge that the mobile screen has to be scrolled around the page to read everything. And what if the screen can’t be zoomed out or in? Sorry, this content just isn’t visible, and you wasted your time clicking on this article. (Trust me, it’s happened more often than not!) There are some websites I actually just don’t visit on mobile (though I’d like to), because all their articles are slideshows and I can never read the content anyway. (Not to mention that tapping your touchscreen to advance to the next slide is very frustrating when you have big fingers and are trying to target small buttons/text!)
I realize that there are quite a few hurdles to jump when it comes to making slideshows mobile-friendly. In fact, the whole slideshow format seems ill-equipped to handle mobile users in general, from what I’ve been able to see. With that in mind, why aren’t we moving away from slideshow format to something that actually works on all devices?
#4: It makes reading the article take a lot longer.
Admittedly, this is probably my impatience/A.D.D. talking, but I am a fast reader and prefer to scan articles rather than sit and read each line word by word. Having to stop reading to click on to the next slide is an unnecessary block in my information digestion process. Not to mention that the pictures take longer to load than the text, and sometimes the slideshow article software decides to hang in the middle of the article. All of these factors make reading slideshow articles much more of a drag than they ought to be.
Those of us who write and format content for the Web have to be careful of frustrating our users like this. After all, a frustrated user is a non-returning user. Do we REALLY want people turned off from our awesome content because of the way we formatted it?
Redo: Navigation Placement, part II: New Ideas to Try
Today, we’re revisiting the long-ignored second part of my Navigation Placement series, New Ideas to Try. I have significantly revamped the post, making it about 300 times better (and with more mobile-friendly design advice this time!). Click and read through!
Using and Styling Infinite Scrolling
I came across the curious idea of “infinite scrolling” in the past week, as I searched for ways to make a Tumblr theme less annoying to browse. Especially on blog sites like Tumblr, the idea of having no page numbers to click has caught on as a way to make browsing easier–new posts and search results pop up without having to click or tap again.
Google’s Image Search and Pinterest both famously do this, as well as Facebook, Twitter, and 9gag–and those are just the websites I use most often that have infinite scrolling enabled. It’s becoming more and more popular with mobile-friendly sites especially, since scrolling on a mobile device is as simple as the flick of a finger. But I wondered whether it was really worthwhile. Should I dedicate time to learning this technique and using it on my pages, just because it’s Internet-popular?
I decided the best way to test it was to approach infinite scrolling as a user would, rather than as a designer. Read on to find out pros and cons, which sites can use infinite scrolling, and how best to style and set up your infinite scrolling layout!
Infinite Scrolling: Pros and Cons from My Experience
|
Pros
|
Cons
|
Where Infinite Scrolling Works Best (and Worst)
If you have a website with quick blurbs of content and images, where links don’t take you out of the “stream” of information, infinite scrolling works well. This is great for news sites and some blogs–and I can see why it’s become popular with Tumblr themes, too. When you’ve got lots of posts with just a few images, a quote, or a short paragraph, infinite scrolling saves your user a lot of clicks.
But if you’ve got a website with a lot of links or in-depth content, such as this very blog you’re reading right now, infinite scrolling is definitely not your friend. Users will have a hard time searching your site for information, and every time they click to “read more,” they end up at the top of the page–very frustrating! Infinite scrolling on sites with fewer but longer posts (and/or more links to external content) doesn’t work nearly so well.
If You’re Going to Use Infinite Scrolling…
- Make sure your posts are tagged thoroughly so that once people find one post they like, they can use its tags to find other similar posts on your site. (Example: an LOLcat picture could be tagged with “lolcat”, “cats”, “humor”, and “meme”.)
- Use CSS to design your posts so that each one stands out on the page–make your posts’ headlines big and bold, surround each of them with a differently-colored “box” from the background. Anything you can do to separate out individual posts while people browse will help them navigate better!
- Make your navigation either stick to the top of the page or scroll in a fixed position alongside the content. Infinite scrolling where navigation is only found at the top of the page = NOT a great idea, at all.
- Give your users a separate “tag list” page where they can quickly scan through and see what kinds of posts you have on your site. That way, they don’t have to waste time scanning through your post stream to find things they like.
For Further Reading
jQuery4U: 5 jQuery Infinite Scrolling Demos
Awwwards: Best Infinite Scroll Websites
NNGroup: Infinite Scrolling is Not for Every Website
SmashingMagazine: Infinite Scrolling–Let’s Get to the Bottom of This
CodySherman.com: Infinite Scrolling Javascript
Web-Safe Fonts: There are More than You Think!
When it comes to using fonts for my websites, I admit I’ve gone the “super-safe” route more often than not. In search of making my text readable on all devices, I end up using Arial, Garamond, Georgia, and Verdana…and that’s pretty much it, since I avoid Times New Roman like the default plague it is.
Imagine my surprise, then, when I learned that there are plenty of other web-safe fonts available–and even some which are friendly to multiple operating systems! Here’s how to make this work for your site:
Explore Which Fonts ARE Web-Safe
CSSFontStack is an excellent resource to begin searching for the web-safe fonts you want. It displays OS statistics on the most commonly-used web fonts, so you’re more aware of which OS (Mac or Windows) likely carries your chosen font. VERY handy!
See Which Mac and Windows Fonts are the Same
This Windows and Mac fonts list shows you which fonts are designed alike (for instance, Verdana and Geneva, Lucida Console and Monaco, Book Antiqua and Palatino). This will not only help you pick a good cross-platform web-safe font, but it will also help you choose fonts for your font stack in your CSS document (see next point!).
Build Your Font Stack Varied and Strong
As this W3Schools page shows, you can’t safely specify just one font name and be done with it–you must give the users’ browsers a range of fonts to choose from if one or more of the specified fonts is not natively installed. This range of font options is called a font stack, and will save your users from having to read your content in a really odd font.
See Examples of Font Stacks
Sitepoint’s “8 Definitive Font Stacks” article is a great jumping-off point for your sites, either to use directly or as a template for designing your own font stack. This will help you make your font choices as web-safe as possible!
Summary
Choosing fonts for your website content doesn’t have to be “same-old, same-old”–using these web resources can help you pick stylish yet standard choices for your design! (And now if you’ll excuse me, I’m off to select some new favorite fonts! :D)
What Happens When You Rethink Your Design
Last week, I wrote about my upcoming domain layout and the design issues I was having with it. Check out what happened when I started rethinking all the bits I didn’t like!
(click picture for larger image in new window)
This layout has a very, VERY different feel from my first design; the lighter, more neutral background color and the longer, thinner sidebar feel like the biggest changes, because those were my biggest problems with the first layout (too dark and crowded). But I also made some smaller changes, depicted below:
Text Shadows and Box Shadows, EVERYWHERE!
The headings have a subtle shadow behind them to make them pop; so do the boxes holding the various website feeds. Even the sticky navbar at the top of the page has a little shadow! (I was following my own advice, LOL!) Though at first I was afraid I was going shadow-crazy with the layout, the design seemed to need a little extra detail, and I find that the text shadow on the headings especially looks good without being overdone. What’s your verdict?
Social Network Sidebar Slightly Revamped
Since I loved the social network sidebar as it was, I didn’t want to change it too much…yet the taller, thinner dimensions of the sidebar in this design called for me to make some sizing changes, at least. Instead of two wider rows of icons, I now have three narrower rows. However, I’m not sad about these changes–in fact, I like this more compact design even better!
*GASP* A Background Gradient!
I’ve written about background gradients positively and not so positively, but after struggling with several background tiles and finding them all too “busy,” I finally chose this subtle gradient style, which highlights the top of the page AND scrolls with the sticky navbar as it glides down the page with the user. (I like this option better than the other ones I tried, but admittedly I’m still not QUITE sold on it…what do you think?)
New Quick Links Section
After receiving a couple of complaints from visitors about not being able to find certain sites on my domain, I decided to include this little section–and quickly realized it would be just as helpful for me as for others! These are the sites that are the most active these days, so this Quick Links section could help draw attention to them as well as make it easier to navigate my network.
Less Blathery Welcome on the Sidebar
Part of what made my first layout feel so crowded, I realized, was the super-long welcome paragraph I had shoved into the main content area. It felt clunky and distracting…so, with a ruthless Backspace key, I edited it and put it at the top of the sidebar instead, where it can properly greet people without overrunning the layout’s prime attention-grabbing space.
Bottom Line: Rethinking Isn’t Scary or Annoying–It Can Be Fun!
Revamping and rethinking my design seemed like a huge pain at the outset, but once I started digging into my layout and really trying to revision what I wanted for it, I found myself unexpectedly freed. For instance:
- If I didn’t just love a layout feature, I wasn’t expected to keep it
- It’s MY layout, so I can choose to have features wherever I wish/wherever they make sense
- I can make several different versions of changes and compare them
In fact, doing this redesign gave me carte blanche to try styles and formatting I hadn’t messed with much before (such as the text shadows and the welcome message on the sidebar)–I found myself thinking, “why not try it?” After all, if I didn’t like it, the all-powerful Backspace key and Undo button could help me change it back. That was incredibly liberating! (Just make sure to save your work under different filenames if you want to compare two or more versions!)
So if you’re currently stuck on a webdesign you’re not sure about, I hope this post will inspire you to look back at your design and think, “Hmm, what could be different?” You may only make subtle changes, but it could end up creating a very different look–as I discovered!
Don’t Be Afraid to Rethink Your Design
The hardest thing for me, as a webdesigner, is to admit that a design of mine is just not up to par…especially when it feels like I’ve spent months crafting the stupid thing. Layouts and UIs take so long for me to think up and code, so it’s disappointing when I get to the end of the process and find that I’m dissatisfied with the product.
This is what’s happened to my latest domain layout, version 14, which has sat finished on my hard drive for about 5 months. Here’s what it looks like so far:
I just can’t get up the gumption to let it go live, because I’m not QUITE satisfied with it. There’s something wrong with it, but I can’t exactly name what it is yet. So I’ve been sitting in “Layout Limbo,” pretty frustrated with myself.
I would guess I’m not the first or only webdesigner to feel like this, however. Come to think of it, we all end up with projects that just FEEL like they need redoing, for some reason. This impulse, contrary to my fears, is not a wasteful, horrible thing; it can serve as the impetus to keep doing BETTER, to keep making things more awesome. And it doesn’t just entail hitting Delete and starting all over again!
Step 1: Pinpoint What You Love about Your Design
Before you hit Backspace and delete all your code, and before you select and delete all your images, take a careful, thorough look at your design. What do you love about it, if anything? It can be even a really small thing, like the font you used, or a particular color.
|
For instance, I love this cool little sidebar I developed for version 14. The simplicity of the icons, and how they pop against the background color, look tidy and sharp…plus, I like the font I used for the “social networks” and “affiliates” text. |
I also like the navbar at the top of the page (which is a sticky navbar, yay)–I like that the main navigation scrolls with the page rather than getting lost.
When you find design elements that you like, make sure you note what they are, and copy/paste code and images so you don’t lose them. This is key to the “scrapping and remaking” process; if you don’t have anything to go on, you’ll be more stuck than you were with an unsatisfactory design!
Step 2: Figure Out What You Hate about Your Design
This is a tough one, but you have to confront it if you’re going to fix the problem. Really take time to look at your design–your choices of font, color, and basic content layout, your link styles, your images, EVERYTHING. What in your design sets your teeth on edge?
In studying my version 14 design, one of the things I keep saying to myself is “it’s so DARK.” The background is a lovely deep purple, but it almost feels so dark that it’s “flat”–it doesn’t seem to have much life in it. The lack of images also disturbs me subtly; it’s as if there’s nothing to brand my site, to make it look different. I was trying to go with the whole modern “mobile-friendly sleek and sexy” site look that’s so popular right now, but I think I may have gone overboard and turned it soulless instead. Even the addition of a few little curlicue images don’t seem to add enough spice.
As you observe your design with a similar critical eye, make notes about the things that bother you. But don’t delete your code or images just yet! There’s one more critical step!
Step 3: How Do You Fix These Problems AND Keep Your Favorite Stuff?
Now that you’ve gone through and figured out what you love and hate about your design, you need to know how to implement changes without losing the stuff you liked most. This is why I said don’t delete anything yet–you may only need to make small changes to your existing layout.
For instance, my main complaints on version 14 are that the background color seems too dark, and that the layout is overall lacking images, which would give it visual personality. Yet I like the sidebar and the top navigation bar. In my case, the colors and personality issues can be fixed easily without getting rid of the happy little sidebar and navbar–I can lighten the background color and darken text colors to maintain readability, and I can add in small images to demonstrate my personality without overwhelming the layout. (I don’t think I need a mid-2000s giant header image, but at least SOMETHING pretty and visual, right?)
Think about how you can blend problem fixes with the stuff you’re already happy with, and you’re halfway to a new design already! (And, if you end up having to scrap your design completely, don’t worry; it’s a learning experience if nothing else!)
Summary
Rethinking a design doesn’t mean you’re a horrible designer, nor does it mean you’ve failed–actually, it means you want to make a better product for your users to enjoy. Listen to those little tugs on your brain that say, “Hey, something doesn’t look right here!” Embrace that impulse to tweak, perfect, and shape your design to your heart’s content. You’ll be much happier with the end result!
Yes, I Still Use HTML Tables for Layouts!
I can just about hear the astonished gasps: someone still uses HTML tables to style their pages? In this day and age of aligning everything on a webpage with CSS-styled divs?!
Some webdesigners might react not with shock, but with scorn: “Pah, only newbs and amateurs style pages with TABLES. REAL designers use only CSS for layouts.” (Don’t think webdesigners say that stuff to each other? I have been part of several design discussions where such negative terms were bandied about–very discouraging!) But after 10 years of self-taught designing, I still rely on tables for a few styles of page layouts, including the one below.
The three-column design demonstrated above (which will be part of a future layout on my main domain, withinmyworld.org) is one of the many reasons I keep tables in my layout toolbox.
Why? Because try as I might, I have never been able to get a three-column pure-CSS layout to align like this–to have the correct, even spacing between content blocks, or to just LOOK like a cohesive whole. I’ve tried a few solutions–for instance, floating a few sets of nested divs (as in, two sets of “float: left” and “float: right,” one set for two of the columns, and the second set floating the first set and the third column).
But this solution always seems too clunky, and never looks just “right” on the page, either–usually, one column ends up too far away from the others, or the content boxes are unevenly spaced apart no matter how I try to shore up the padding and margins. Plus, if the page width shrinks too much, one or two of the columns always ends up dropping down below the others–definitely not what I want, either.
So, in lieu of CSS, this is how I achieved the above look:
- Table tag: <table border=”0″ cellpadding=”14″ cellspacing=”14″ width=”790″>
- Each table cell: <tr><td valign=”top”></td>
- CSS styling:
table {font-size: 11px;}
.tablecell {background-color: #8fd6ff;}
This is much simpler coding (a plus for someone who is self-taught, like me), plus it’s less for the browser to load. Lastly, it gives me the look I want: clean, evenly-spaced blocks of content, with a slightly darker color in between the blocks to visually separate the content even further.
If It Ain’t Broke, Don’t Fix It!
I’m a big believer in the above sentiment when it comes to webdesign. If the coding still works in all modern browsers (and hasn’t been labeled as “deprecated” by the W3C), why not use it, if it is the only tool which works precisely as we need it to work?
I admit, I’d like to find a way to make this layout work the exact same way in CSS. But unless I’m just going about it all the wrong way, I haven’t found something to match the HTML table for sheer cleanliness, ease, and even spacing on a layout with more than two columns. And I don’t think that’s a bad thing. After all, visitors to our sites are not going to know (or care) whether we used tables or divs to make our layouts–they just want a site that works and is easy to browse!
I’m not suggesting that webdesigners quit trying new coding styles entirely; I am, however, suggesting that having multiple ways to code a page can be to our benefit. And, if the only tool that works is an “older” style (such as an HTML table), it shouldn’t be a point of scorn between designers. We’re all on the same side, anyway–we’re all in the business of putting together great pages for others to view!
(PS: If you know a way to make a pure-CSS three-column layout like the one I’ve pictured above, let me know in the comments! It’d be great to augment the good ol’ HTML table with a few more dabs of CSS.)
4 Essentials You Need on Your Main Page
When your visitors first come to your Web address, what do they see first? Too many of us webmasters crowd our main page with tons of information (guilty as charged), and it often results in information overload. Either that, or we give them a webpage with almost nothing on it–maybe a “splash page” with a clickable image and a tiny bit of information.
What I’m suggesting today is a middle path between these extremes: a main page that gives just enough information without being overwhelming. When you make your main page, here are the four essentials you must include:
#4: Clear and Concise Navigation
Navigation is very important for your visitor to see, but the format and number of links in your navigation is just about as important–it makes a big visual difference. A long horizontal bar of really tiny navigational links is daunting; navigation that is scattered all over the page in various sidebars is downright annoying.
Having all your navigation in one place, with a larger, easily-readable font (16-18 px), is the best way to go so that you don’t confuse your visitors. (If you have too many pages to link to on a horizontal navigation bar, you can always put your navigation in a sidebar menu and it will function just as well.) Also, make sure that the text for each navigation link is as concise as possible: using “contact” instead of “here’s my contact info,” for instance.
#3: Contact and Author Info
No matter what kind of contact information you plan to display on your site, it should be easily visible and accessible for your users. After all, if they have questions for the webmaster/webdesigner, they shouldn’t have to dig around for hours in your site to find out how to get in touch with you!
As far as “author information” goes, you can write a small blurb about yourself on the main page and/or link to a separate page of author info. But your contact information should be readily available. Your name/Internet nickname and an email address should be enough for most visitors. (You can even make or generate an HTML/Javascript contact form if you don’t want your email address actually visible to viewers.) These strategies help put you in contact with your visitors and give you a better idea of what they like and don’t like about your site.
#2: A Quick Site Purpose Statement
You don’t have to wax philosophical in your site description, but your main page should have at least a sentence or two describing what your site is about, whether it’s a personal blog, a fansite, a small hosting service, etc. This should be displayed prominently on your page so that the visitor’s eye is drawn to it.
This information helps people categorize your site for later viewing through a bookmark/favorite, and can help random visitors immediately know whether they want to stay on your site or keep on surfing. It’s all about convenience for your visitor, after all!
#1: Most Recent Updates
Going along with the “convenience” theme, the most important piece of information you need to display on your main page is your most recent updates to the site. If you are not already doing this, you should–it is the fastest way for your users to tell that your site is still alive!
You don’t necessarily have to place a big long update message on your site every time you update; just the date and a quick summary of what you updated will be enough for most users. This is especially important if you are going to be absent for a little while (for, say, a vacation, illness, etc.), so that your visitors know the site is still being maintained.
Summary
Providing clear navigation, contact/author info, a site purpose statement, and the most recent site updates not only makes your main page a hub of information, but it makes your site look and feel much more professional. When people don’t have to hunt around through your site for information, they are much more apt to come back and visit more often!