You’ve probably noticed the trend for bigger, bolder visual elements on websites. There are several reasons for this trend, and one of the biggest is that visual elements catch the attention of the reader. A picture really is worth a thousand words, and it grabs the reader above the fold. That means you have them, at least for the moment, and can then keep them engaged with your amazing content.

One way to incorporate large images is with full-screen website backgrounds. However, a full-screen background can be done really well, and it can also be done really wrong. The last thing you want is to make your website cluttered or the text difficult to read. To make sure you’re using a full-screen background in a way that will entice readers to hang around your site, try these best practices:

1. Prioritize

When it comes to using larger images in the background or anywhere on the page, you have to stop and consider what you want your priority to be on the page. Compelling images can be engaging and inspiring to your audience. However, those same images can also fall flat if placed incorrectly on the page. … [Read More]

From the dawn of civilization, there have been commercials. If you look close enough at the Ancient Egyptian hieroglyphics, you’ll likely find an ad for a chariot dealership mixed in with the picture stories. (Seriously, though: papyrus wall posters in Ancient Egypt were some of the earliest advertisements.) Flash ahead to our modern age and you’ll find there could never have been television without commercials. Now that the world has truly become Internet-centric, businesses want to utilize your time by offering some form of advertisement.

At first, it was a banner ad dropped onto a website. The clever marketing device soon evolved into the popup. Today, tech savvy websites generate popups in hopes of capturing an email address or providing a direct click-through to sales.

As a web designer, your goal is to create popup tools that will make the client happy and not annoy the user. Too tall an order? Perhaps it’s not as challenging as you might imagine. Before getting to the gorgeous graphics that you’ll create to go with it, you might want to consider some functionality.

… [Read More]

When considering modern web design, you want your site to not only look good but perform well too. By that, I mean a site should load in a decent amount of time, offer a pleasant user experience and have as few bugs and errors as possible.

One of the most important elements of a well-performing site are the page loading times. Speed can really suffer when you spend more time worrying about the aesthetics of a site by trying to add slick functionality, animations or content. Some administrators even overlook slow loading times because they care more about the way their site looks than how using it feels.

In truth, page loading times should always be one of the first things you work to improve. Speed now factors heavily into search engine rankings, but consumers want to see speedier sites too. According to an infographic from Kissmetrics, 40 percent of people say that they leave a website any time it takes more than three seconds to load.

Furthermore, an additional one-second delay in page loading time can lower your conversion rate by seven percent. If this happens on an e-commerce site that brings in $100,000 per day, that page delay translates to a loss of $2.5 million in sales each year.

Page loading times matter — there’s no question about that.

What can you do to ensure that your site is streamlined and doesn’t run into these performance issues? It depends on what kind of content you have on your site, how well it has been put together and how many plugins or add-ons you have loading at one time.

We’re going to take a look at five general ways you can improve site loading times. Keep in mind that these tips may not apply to every site, but they offer a good place to start with improvements.

1. To Speed up Loading Times, Use a Content Delivery Network or CDN

A Content Delivery Network or CDN is not the same thing as a Content Management System (CMS). They can actually work in tandem to deliver a fully optimized site.

A CMS is a platform that can be used to create, schedule and publish content. It includes services like Magento, Joomla, Drupal, WordPress and more. It can also include a custom-made CMS designed with PHP or HTML.

A CDN, on the other hand, is a server-based system spaced throughout various data centers across the internet. It can essentially be used to store files and data from a website — like your web server — and deliver these files to visitors. It works better than a traditional server system because it takes into account a person’s geographical location. It delivers content and data from a local server, so the site is rendered much faster. When used in combination with a CMS, the system drastically improves page loading times for a site.

The other benefit of using a CDN is that it alleviates some of the load on your actual server. This doesn’t necessarily make a difference if you’re using a third-party hosting provider, but if you’re running the site from your own servers it can give the hardware a break.

The most popular CDN services include CloudFlare and MaxCDN. CloudFlare also offers DNS provider services.

2. Enable the Apache “KeepAlive” Feature

Apache is a server platform that is one of the most commonly used by most providers. More specifically, it’s deployed for a lot of shared hosting setups and can be run for a relatively low-cost. It also happens to have a feature that can increase HTTP request limits for visitors.

The feature is called “KeepAlive,” and it allows multiple HTTP requests for a single connection, a process that allows a website to load much faster for visitors because it relies heavily on HTML.

You’ll need to check with your host provider first to see whether or not they have the feature active. If they do not, you’ll also need to make sure you have access to the httpd.conf file in your Apache setup. The location of this file will differ depending on what kind of server system is running (Windows or Linux).

If you do have access, open the file and check whether or not “KeepAlive On” is located somewhere within. If it is not, don’t worry: You can activate it using your .htaccess file. Include the following piece of code in your htaccess to turn the feature on:

<ifModule mod_headers.c>

 Header set Connection keep-alive

</ifModule>

The KeepAlive feature is great for improving performance on all sites, but works miracles if your site is running WordPress or a similar CMS.

If you cannot use this feature for whatever reason — perhaps your server is not running Apache — then consider minimizing the amount of HTTP requests your site calls for. This is also a good general maintenance task, as it can speed up load times.

There are several ways to minimize HTTP requests: combine CSS files, merge Javascript files or combine images into data sprites. Ultimately, you’re reducing the number of files that need to load. Yoast has a great guide on this if you’re running WordPress, but the guide can be used as a general reference for all sites.

3. Optimize Your Images

This next bit of advice shouldn’t come as a shock to anyone who has worked with websites or web development. The bigger your images are and the higher their quality, the longer they’re going to take to load. It doesn’t matter if you resize them using HTML or shortcode, because they still have to load in full.

Use a photo editing tool like Photoshop, GIMP or even something simple like Microsoft Office Picture Manager to resize them. Try to not to keep images on your server that are bigger than what you need. For example, there’s no reason to keep a raw image file in excess of 5000 pixels if all you’re doing is displaying it within your content. Three online tools that work great for resizing include Optimizilla, Kraken and Free Image Optimizer. They work by compressing an image in size, essentially making them smaller so a site can render them faster.

If you’ve already resized your images and just need to cut filesize, you can try running them through JPEGmini or TinyPNG. These tools cut out colors and meta data to shrink the space an image takes up without making its dimensions smaller.

Ultimately, you’re looking to trim down the overall size of the image itself and the storage size. Anything 2MB and above is pushing the limits, especially when you have a ton of images that your site needs to load.

4. Enable Caching for CMS

If you host a WordPress powered site — or a similar CMS — then by all means, look into a cache plugin or add-on. Caching works pretty much as you’d expect: The plugin builds a cache file of your entire site server-side and then delivers it to a client for faster loading times.

This is the same process your web browser uses to cache sites you visit. Your browser downloads images, CSS and Javascript files the first time you load up a site, and for each subsequent visit it simply loads those cached files so that the site may render faster.

When caching is enabled for a CMS, it builds a cache file of your entire site — or select pages — and every time a new visitor arrives it sends them the cached content. This is so that the site doesn’t have to be generated in full every time someone new lands there. Any time you make changes to the site, you’ll need to refresh your cache, but this is usually handled automatically by the plugin.

If you’re using WordPress, recommended plugins include W3 Total Cache, WP Super Cache or WP Fastest Cache. These are by no means the only ones out there. Have a look at the WordPress plugin repository and you’ll see at least a dozen more.

You can also define a browser caching policy for all server requests to your site. Google recommends keeping a cache time of at least one week for your site assets that aren’t changed often. This can include CSS, images and javascript files.

You can ensure this happens by including a cache command snippet in your .htaccess file.

<ifmodule mod_expires.c>
 ExpiresActive On
 ExpiresByType text/html “access plus 7200 seconds”
 ExpiresByType image/gif “access plus 864000 seconds”
 ExpiresByType image/jpg “access plus 864000 seconds”
 ExpiresByType image/png “access plus 864000 seconds”
 ExpiresByType text/css “access plus 864000 seconds”
 ExpiresByType text/javascript “access plus 864000 seconds”
 ExpiresByType application/javascript “access plus 864000 seconds”
 </ifmodule>

Other Ways to Speed up Your Site

This list is merely a handful of techniques you can use to boost loading times on your site. There are hundreds — if not thousands — of other things, large and small, that you can do to both improve performance and make your site look more professional.

You can do a simple web search to find more information. If you run a WordPress powered site, a ridiculous amount of guides and resources out there can help you boost performance, like Gregory Ciotti’s.

One thing to make a habit: checking whether or not your site meets Google’s webmaster guidelines. Sites that don’t follow the guidelines will often experience performance issues. You can check up on this using Varvy’s tool.

With a little invested time, you can have your site running in tip-top shape. Eventually, this should translate to lower bounce rates and more visitors!

Web design is always on the flux, the shape of the web changing as leading companies have major redesigns or new toolsets like Bootstrap make web development more accessible.

In 2016, we’ve got faster connections and more variety in screen sizes than ever before. More users are browsing on the go, but still expecting media-rich, tailored experiences.

The following ten web design trends are all either making an explosive rise to popularity, or the technology has finally solidified and become advanced enough for them to be in full swing this year. You probably will recognize a number of these features from the websites you use every day.

1. Background Video

How many times have you found yourself scrolling through your Facebook newsfeed just to stop at a quick video?

Video draws attention. This is important in today’s Internet of short attention spans. Having a background video playing on your home page draws the attention of the user and makes them stay on your website.

Background video is also very effective at quickly establishing a mood. For example, a background video going through shots of your employees collaborating, hard at work, and then relaxing after work over a couple beers gives off the vibe of a fun office that works hard and plays hard.

When you go to IUQO’s website, you are immediately greeted with an enchanting background video of the sky. The video is high quality, interesting and immediately establishes a peaceful atmosphere.

… [Read More]

The widely-panned nbcnews.com website redesign from February 2014 is getting a facelift—after a really bad facelift!

You read it here first. In my previous article highlighting the flop redesign of nbcnews.com, I excoriated the horrible design misfire and left it at that. In private conversation, I told friends how such a bad user experience was going to impact their reader stats negatively. Well, the numbers are in:

The nbcnews.com website was already declining when the silly redesign was launched in February. They had a functional site, but the hyper-partisan cheerleading, I mean news reporting, was the real issue behind their decline in the first place. The overly-picturesque giant-comic-book redesign effort, which was an attempt at a branding turnaround, simply hastened the continued decline in visitors because it was simply unreadable as a source of news. Apparently, some Very Smart People™ at nbcnews.com thought mixing partisan news, coloring books, and Flickr, would equal a turnaround in the decline of their viewership. It did not work.

So how does the new design look, which is available for the moment in a preview opt-in section of the site? In a word, improved:

There are now 17+ story links above the fold, and a full suite of site navigation tools to quickly get you some place else. And if you flip to a mobile device, you get a very-workable no-nonsense sans-comic-book layout and typographic treatment (hidden pun in there, for sharp-readers only).

The mobile view looks good too:

Overall, we can see it’s very much a work in progress, but progress in the right direction.

What about Search? Let’s quote my previous post on this:

“BTW: Don’t even click “Search” unless YOU ARE READY FOR SOME SERIOUS SEARCHING! WOOHOO!

You clicked “Search”, didn’t you. You were warned.”

Hopefully they’ll fix that search box before the real site goes live :).

In the meantime, if you want a ton of news in a legible format, try Real Clear Politics (for desktop) or the Real Clear Politics app (for mobile). You’ll get a cross-section of headlines from all major news outlet in a cohesive, news-focused UI that knows what it is trying to do.

 

Visit nbcnews.com now. The “news” site has 5 headlines. I’m on a Mac with a 1080p display. This is what 5 headlines on a 1080p display looks like:

This is what happens when someone doesn’t get mobile-first.

Mobile-first should mean optimizing the content and design starting with mobile, not starting and ending with mobile. I’m looking at a formerly desktop-friendly news site that is 100% unusable on a desktop device.

This is such a goofy misapplication of mobile-first methodology that it’s goofy.

Let me just say that I wrote a little piece called 52 Question Checklist for Responsive Web Design Projects that was written to prevent goofy misapplications of mobile-first, or responsive web design, exactly like what we see at nbcnews.com. It annoyed a few people. I wonder if any of those people are on the design team at nbcnews.com?

Ok, so the world should design websites mobile-first. We get it. It’s right. It’s “how to build websites” now. But someone in charge of nbcnews.com only read the table of contents to “Mobile-First Web Design for Dummies” (is that a real book?), stopped there, not realizing they didn’t get it. This is Windows 8 all over again. Truly mobile paradigms are….mobile! They don’t translate to desktops! Hasn’t anyone on the design team at nbcnews.com been paying attention…to anything?

Oh well, another day, another deleted bookmark to a formerly relevant or usable site.

BTW: Don’t even click “Search” unless YOU ARE READY FOR SOME SERIOUS SEARCHING! WOOHOO!

You clicked “Search”, didn’t you. You were warned.

 

Ok People:

Here is a glimpse of the future of web design 🙂

Imagine a future where you spend time designing and not fiddling. Remember those days past? They will yet come again.

Imagine designing in the browser. You will be doing it before too long.

I predict a wholesale shift to much more advanced CMS and web platforms or systems where code takes a big retreat behind dazzling GUIs like we see in Squarespace 6, and other platforms like Virb, Adobe Muse, etc. Hand-coding will be a niche, enterprise-focused endeavor. The realities of responsive web design necessitate this fact.

There was a time before PageMaker and Quark where people edited PostScript by hand, but those days are a distant memory. Can you even imagine hand-coding a page to simply print something out? Web design is moving in that direction. Listen to these sage words and watch magic happen as the user below changes a complex layout in realtime in Squarespace 6. Wow:

Skip to 6:50 for the relevant snippet and watch for about 30 seconds. Again, wow:

So if your favorite CMS doesn’t yet have rich GUI-based dynamic layout editing as it’s default mode, or have it on it’s roadmap, know one thing: it will.

Responsive web design, or RWD for short, is here to stay. It’s rapidly maturing but not without some serious pitfalls for certain sites. If you are considering converting your existing site into a RWD, or are being roped unwillingly into a RWD project, this prickly list of 52 questions will come in handy.

… [Read More]

There is a great article over on Smashing Magazine called Choosing a Responsive Image Solution that has a fair amount of commenting going on. The whole image and page weight conundrum and the swirling circus of slippery solutions for these problematic areas of responsive web design is reaching towards a tipping point, in my opinion. Yes, people are being weeded out of the web design business, but for those that remain, if the current paradigm holds, things will never be the same. I shared a comment on this article I want to share here:

I remember not too long ago when web design was fun.

None of this is fun anymore. It takes half-a-dozen js libraries on top of some flavor of HTML5 boilerplate – all before you even look at a CMS – to get going with responsive design. It’s more like we are crossing the threshold into a new paradigm were fully-baked software platforms will have to create and manage website development.

It’s getting to the point where making a website is like coding an illustration by hand in SVG, or coding a PDF in PostScript by hand. Sure you can do it, but those technologies, especially PostScript, made fully-baked IDEs for creating documents based on it a sure necessity. Where is the Quark, PageMaker, InDesign, Illustrator for websites going to come from? Does Adobe have anything up their sleeves?

And if you flip over to app development – man that sure looks a lot more fun by comparison!

I think my philosophical waxing about responsive web design was finally terminated by the all-of-them-are-too-complicated solutions around images. Or rather, they are too-complicated to be *fun*…

You may agree or disagree — that’s fine. The point is that the technical complications and wavy-gravy permutations of web design solutions, in 2013, are seriously unfun and a big killjoy to what used to be a process more like building with Lego bricks, which shall forever remain FUN. After 18 years doing web design, I wish it was more like Legos again. Like it used to be 🙁

 

Hey everyone. Look. Responsive web design is many things including these three:

1. Here to stay
2. Super cool
3. Perfect for many sites

However, responsive web design will not do many things, too, including these three:

1. Make coffee
2. Print money
3. Walk your dog

Impossible, unbelievable, but true!

Like I said in my previous very very short post, wherein I was referred to as a troll, I might actually write something to do my part to curb the responsive web design enthusiasm syndrome, but for now, I just want to troll post this cartoon. Enjoy your day, really!

After you are done thinking about trolling me back in the comments, do stop and look at this great collection of responsive web design infographics and learn something cool!