Tag Archives: layout

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


  • Passively taking information in has never been simpler
  • Works great when all you have to do is click briefly on something to save it for later
  • Especially easy to browse for images this way
  • Great for scanning items quickly for content


  • Can’t reliably return to your “position” in the item stream if you follow a link or click to “read further”
  • Always updates so you never get to the bottom of any results
  • Item feed usually displays one at a time, so it can get boring to search through endless data
  • Hard to find items again if you pass them by accidentally

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

What IS “Flat Design” and Why Should We Use It?

After seeing several webdesign blogs mention “flat design” as a still-up-and-coming design trend for 2014, I was intrigued. “What do you mean, ‘flat’ design? Ain’t the screen flat already?” I thought, jokingly.

At first, I wondered if perhaps the CSS box shadows, pretty text bevels, and all of that had started going out of style–you know, the stuff I worked really hard to master and have just now begun implementing into my new designs. But the answer is a lot more subtle than that.

Flat Design: A Feeling Rather than a Set of Rules

The Ultimate Guide to Flat Web Design is where I began my research, and after perusing the screenshots of several different “flat design” layouts, I began to understand. Not only was flat design already a “thing” on the Web, but it wasn’t necessarily just “flat” as in boring. It was, instead, a certain minimalist approach, a “less-is-more” feeling…and it was EVERYWHERE.

A few examples:

Tumblr’s login form, for instance, has elements of flat design; the fonts are simple, the text boxes are only very slightly rounded (VERY slightly!), and the colors are basic (white, blue, and a touch of gray here and there). And yet, there’s an elegance in this simplicity–there is no high-gloss “Web 2.0” feeling, but it still looks “finished.”

My WordPress login screen is treated very similarly–subtle variations between colors, pictorial icon rather than text logo, and clear, readable fonts. Notice on the right and bottom sides of the form, there is the very faintest shadow, just barely there.

Here’s the most surprising example of flat design, at least to me–this comes from Version 13 of my own domain’s layout! In my search to give my layout a new, icon-heavy/pictorial feel, I quite by accident wove in some flat design aesthetics. You can’t call my color choices “subtle” (LOL), but the simplicity of the icons and fonts still fit.

Basically: Flat Design = Natural Makeup

Flat design is to webpages as “natural” makeup is to faces. I know that’s a weird analogy, but it’s accurate. When you choose natural makeup, the point is to not LOOK made-up–it’s all about enhancing the bone structure and features that are already there, with skin-like shades and very careful, subtle color placement. Flat design does the same thing, with 1px strokes of faint shadows, minimal color choices and simple icons, and only the very subtlest shaping and rounding of page elements.

Where Can You Use Flat Design?

Thankfully, like all web trends, you can choose to hop aboard the “Flat Design Train” or not. The look can be too boring for some and too cold for others, especially if used all over the page. Some projects just don’t need that much minimalism (as weird as that sounds!).

That’s why I personally advocate using flat design for your basic page functions, such as navigation and web forms, and perhaps use a more striking graphic or design aesthetic for news, updates, or anything else which needs immediate user attention. Just as a makeup artist balances a strong red lip with just the barest touches of eyeliner, flat design’s concepts can provide just enough styling to your page to make it look polished, without detracting from your most important content.


Give flat design a try with your next design–toy around with shading things just right, picking simple yet effective icons and fonts, etc. Who knows, you might find your next idea hiding amid your musings!

Should You Make a Single-Page Site?

As a relatively “old-school” designer (having learned way back in 2003), the idea of a website having only a single page seems really weird. And yet, according to some folks in the webdesign world, it’s one of the hot new trends for 2014. It baffles me. I mean, a website’s supposed to be about content, right? And content needs to be divided up into pages, doesn’t it?

The answer: Not necessarily! There are actually several instances where a single-page site can serve you well. See the following examples:

Sites Which Work Well with a Single-Page Format

Portfolio Page

If, like most webdesigners, you choose to host your own portfolio page on your website, a single-page site should do well for you, since all you need for a portfolio page is your contact info, examples of your work, etc. And with a little careful page design, you can have a single-page portfolio where the user doesn’t even have to scroll much–thus, interested users don’t even have to click to see all they need.

App or Service Page

If you’ve made an app or are providing an Internet service, most times you won’t need a heavily-involved website. A small write-up (with screencaps) of what your app/service does, support/contact information, and links to download any necessary software, and you’re pretty much done. (Just make sure your single-page site is mobile-friendly if it’s for an app!)

Personal Site

Unless you just want a full-on site about yourself, your personal site can be more like a quick window into your life–your latest tweets, last listened tracks, and a small bio, for instance, or whatever you’d like for visitors to know about you. A single-page personal site can be tidy and still informative.

Small, Extremely Focused Fansite/Fanlisting

If you’ve made or want to make a small fansite or a fanlisting, the single-page format can work REALLY well. Think about it this way–it’s less pages to code and less for your users to click through. (This works best if your fansite/fanlisting has 10 or less pages of content.)

Sites Which Should NOT Be Made into Single-Page Format

Large, Intensive Fansites

If you have a HUGE fansite or topic site, a single-page format is definitely not the best idea. With a large site, you want to make sure your content is well-organized, which often means breaking it up into separate pages. That way, users can go right to what they want with a single click, rather than making them scroll for days.

Sites with a Lot of Topics

If your site has a slew of topics (like this blog, for instance), a multi-page website is better, both for content organization (as explained above) and linkage purposes. For instance, if someone is only interested in my Saturday with the Spark posts, he or she can simply bookmark my “Spark” tag page, rather than having to scroll through a ton of other posts to find the one or two desired-topic posts and read them.


Single-page sites can simplify your webdesign workload greatly. If you’ve already got a small site, give this kind of site organization/layout a try!

Don’t Forget to Credit Your Design Sources

Sometimes we get all swept up in the process of design and we forget exactly what font we used, where we found those Photoshop brushes, what site Google Images found that picture, etc. It may not seem like a big deal, but it’s actually important to credit other people’s work, especially when their work has made yours possible. Not only does it create good feeling among the creative crowds who make the stuff you use, but it also raises awareness about their work and may draw more interest their way! In webdesign, we’re all helping each other with links, after all!

So, here’s a handy little guide to crediting your design sources (and adding credits where none were before):

Properly Crediting Design Sources to Begin With

  • As you find brushes, fonts, graphics, photos, etc., copy-paste the URLs of each site where you found them. Also note the creator’s name, if provided, and their personal work’s website (if different from the source link).
  • Place your credits either at the bottom of each page of your site, or on a separate page (this option works great for longer lists of credits).
  • Your list doesn’t have to be super-organized or stiffly written. A simple, casual format like this could work: “I used brushes made by This Girl (WebsiteA.com), found the image by This Girl over at WebsiteB.com, and used This Cool Font, made by This Guy (WebsiteC.com).” (Just make sure you include the links somewhere in that text!)

Fixing or Adding Credits

  • Check through your files to see if you saved the Readme documents for your downloaded font or brush. Most creators will include at least a little something that can help you credit your source correctly.
  • If you don’t remember where you got your brush or image, try doing as specific a Google search as you can for it, and comb through all the sites you usually visit for visual design resources. It may be time-consuming, but it’ll be worth it!
  • If you just can’t remember or decipher what font you used on a design (been there done that), give the WhatTheFont tool a try. Though the process is a little more involved, it’s always been accurate whenever I’ve used it!
  • If all else fails and you are clueless as to where one of your design elements came from, put a line in your credits like this: “Apologies, but I have no idea where I downloaded this font/brush/image; if this is your work, please contact me and I will gladly put up your link.” Be honest, and you might just make a new design friend!