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: webdesign
The Beauty of a One-Page Site
Want to build a website, but don’t want to have to deal with tons of pages?
Well, these days you don’t have to! One-page sites are not only useful–they’re a Web “trend” that’s become a staple.
Why Choose a One-Page Site?
It used to be that lots of separated pages were just about required for having a “good” site. But these days, with wide screen monitors and larger screen resolution sizes, we designers and developers can put more information on one page without it looking crowded and hard to read. This can (potentially) be easier to code as well as to design, with less content files and more ability to concentrate on attractive design and function elements.
(click for larger image in new window) Take my about me page on my domain, for instance. I condensed all the information that used to make up my overly-complicated personal SITE and made it into a much simpler PAGE, using banner-like columns in different colors to organize the information in a pretty but functional way. No scrolling, no extra pages–just a well-designed presentation of who I am.
One-page sites are great for personal “about” sites like mine, but there are many other applications for this design/development style, including:
- Homepages for apps
- Portfolio pages for creators and performers of all sorts
- Online resumes
- Lifestream aggregators
- Small fansites
How to Design a Great One-Page Site
One-page sites can be floridly designed like an onscreen, interactive painting, or they can have a more minimalist vibe, or anywhere in between; your site designs don’t have to be hampered by the lack of “pages.” In fact, as the following sites will show, it can set you free from web design cliches!
OnePageLove, OnePageMania, and WebDesignerDepot’s pictorial article on single-page sites are all great places to start gaining inspiration for your own designs. When you’re ready to start coding, check out TeamTreeHouse’s list of open-source jQuery plugins for one-page sites and 1stWebDesigner’s parallax design tutorial, both key for building sleek, interactive one-page sites. (Or you could just do what I did and fit everything onto one page literally and figuratively without any special code…but then again, I’m not exactly on the cutting edge when it comes to web design, LOL!)
Redo: JPG, GIF, or PNG: This is the Question
With just a little editing and polishing, my trusty post on image file formats is updated and awesome again! Check it out to learn more about the differences between JPG, GIF, and PNG!
Most Websites vs. My Websites (Funny Infographics)
This is just from my personal observation while using the Internet…did I hit the nail on the head?
Note: I don’t run my sites for any profit, and I realize sites that are designed for profit have to make money…but sometimes all the “attention-grabbing” text gets a little much for the average Internet user, you know? 🙂
Redo: Fast Loading Times: A Personal Trademark
To kick off another Redo Week, I went back and reworked my old post about fast loading times, including more explanations in fewer words as well as quite a few explanatory links. All in all, a MUCH better article which is quicker and easier to read!
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
Redo: Navigation Placement, part 1: Traditional Navigation Placement
Another Redo Week kicks off with a much-improved post on site navigation: Navigation Placement in a Web Design, part 1: Traditional Navigation Placement. Check it out for new spiffy explanations and pictures!