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!

I haven’t decided if I’m going to write more on the pitfalls of responsive design syndrome as I call it, but this comment on a post, Clown Car Technique: Solving Adaptive Images In Responsive Web Design, at Smashing Magazine sure sums my sentiment at present:

… [Read More]

How many times have you hung up the phone after a chat with a new prospective client and then immediately slapped your forehead and said “I can’t believe I forgot to ask ______!”. Yes, fill in the blank. You have done this, right? If not, you will shortly. Well, I jotted down my own personal list of forgetful-questions, and did a quick survey of the top 20 results for “questions to ask new web clients” and related searches. Aside from semantic fluctuations, there was zero overlap: we all ask the same stuff. So I present below the best 72 questions to ask prospective web design clients, along with a PDF chart.
… [Read More]

I have the good fortune of having owned “bonfx.com” for the last 10 years. It could be any domain name, but having had it for so long with the same subject matter is a benefit for SEO. It has always been a freelance graphic design website focused on my portfolio of web, print, and logo design work. It has never had a blog on it until last week.

As of right now, I only have about 15 articles, all authored in the last week. I got a hat tip from Jacob Cass over at Just Creative Design to check out the Hubspot Website Grader. I ran a report and I think – someone correct me if I’m wrong – I have reason to be pleased with where I’m at after one week of changing to a blog format. Of course I have a lot of work to do now, but it could be worse. See the report:

http://www.grader.com/site.php?URL=bonfx.com

I have a score of 83, and a Page Rank of 4. All of my old content is still being indexed, like totally random stuff and like Flash demos installed in their own folder from my days as a hack Flash Developer, temporary junk like a folder of pictures from when I sold my Jeep (96 Jeep Cherokee 4×4 – what a vehicle!), old customer sub-domains, and temp folders for friends like “stuff” hanging off the root.

So what did I learn? First, I learned that the way to increase SEO and ranking is to be humble, true, and honest and write good content. There is so much bad information out there that tries to game the system, but it won’t work. I just read last night, I think it was Jacob Cass (not sure now) that there are hundreds of PhDs working at Google and the like. You are not smarter than them, and they know how to write algorithms that smoke out the impostors. Essentially, do what is good and right, and do it in a good and right way, and you will do well in ranking. Essentially, it seems to be a fact now (and certainly more so as search engines get even better) that search engines will bless hard honest work and not much else.

Part of my blogging will chronicle my work in regards to ranking. Click the link above to Website Grader for a detailed report (and then get your own) of the BonFX website, or read some interesting facts I need to act on immediately:

• My page title is way too long. It should be 70 characters or less and mine is 236
• My site description is also way too long. It should be no more than 150 characters, but I hit 160. I guess less is more for these first 2 points!
• 2 images are missing alt tags.
• My domain is going to expire in 4 months. I had no clue this could count against me, though the site is old! The farther the expire time is out in the future, the better search engines feel about the site.
• My Page Rank is 4. From what I gather, 4 is pretty good considering what has been going on on my site for the last 8 years (nothing!).
• I have a form! I guess having a form on the site counts towards looking alive to the search engines!
• I am looking to lock down some decent search engine rankings for 2 basic terms: freelance graphic design and logo design. It’s not clear if I have to pick one or the other and focus on it. For now, I’m not doing too badly (20-30 ranking) for having done nothing, essentially, in regards to “freelance graphic design” other than having had that in my title for eons. Notice I didn’t even rank for logo design, but I’m just starting that, like 5 days ago:
  

  freelance graphic designer	1,401	30
  freelance graphic design	1,775	30

• It looks like my site vocabulary is too high, being ranked as college undergraduate. It is suggested I lower it. It’s probably due to my predilection for run-on sentences. Why stop when you are having fun? Yes, I’ll work on that. If you want some long sentences, try reading German Biblical scholarly titles translated into English. There are some sentences that are close to a full page. Not good, not user-friendly.
• Overall, I got a score of 83.
• The last thing I learned is that there is an astonishing array of very powerful tools to help you analyze your site, and a wonderful cadre of friendly bloggers to help find the way.

As usual, thanks for reading! Please subscribe to my feed in the top right corner to keep tabs on my progress

One of the hallmarks of Renaissance art and architecture is stability in composition and design in both art and architecture. The desire of the Renaissance artists and architects (often one and the same person) was to create a sense of solidity and permanency in all that they did. This required, as they discovered, adherence to some basic laws of math. They discovered ratios that universally achieved balanced, pleasing designs. Graphic designers, especially web designers, could learn much from this.

Grid based design and HTML

Web designers for some time eschewed grid based layouts. This was due in large part not to a disdain for grids, but rather a lack of HTML suited to the task. Table-based layouts where the pinch-hitter stand in that ended up going 313 innings for no other reason than there was no other way to get the job done and stay in the game. Then along came CSS and most designers immediately shuddered and 1) embracing a new way of doing layout since tables and “1px transparent gif shims” just worked and it was predictable. Not easy to edit, those tables, but they were predictable. CSS layout, or “tableless layout” as it was first monikered, was not easy to grasp nor easy to implement. After about five years of bickering and reluctant education, along with much CSS griping,  graphic designers en masse adopted CSS layout.

Grid based CSS systems

With the advent of easy-once-you-know-how-to-use-them CSS layouts (“easy” might still reasonably be called a relative term), the focus sharpened on grid based layouts. Today, there are entire CSS frameworks built on Grids. The 960 Grid System system is the foremost advocate of this design / CSS approach to solving the problem. Any system is going to have it’s strengths and constraints, but the 960 system works for many people. There are many ways to achieve a grid based system, from open source collaboratives to home-spun frameworks adapted to a graphic designers own peculiar way of working. But what about results? And how does this connect to the Renaissance?

Grids and the Renaissance artists

The Renaissance has had a permanent affect on all Western architecture present to this day. Of course, we have to go all the way back to Greek architecture to give full credit. But let’s stick to Renaissance for now, since it was during that time that a clear and communicable rationale was established for their methods of design and architecture.

By way of a quick musical analogy, a famous musician (nobody know who for sure) was once asked in an interview about what notes or scales he chose while improvising. The musician responded “writing about music is like dancing about architecture.” Well, in this case, writing about grid based layout is like designing a building about poetry. Instead, lets look at some pictures.  So here are 6 Renaissance building fascades and 6 grid based layouts. We can see immediate parallels to the idea of header, footer, side bar, main content, etc. One obvious note is that a building is going to have a grid layout focus exactly upside-down compared to a web page. We don’t (not usually anyway) enter a building at the top floor, but we do enter a web page that way. Hmm…imagine a site that scrolls up? There’s a thought…Enjoy!

6 Renaissance inspired building facades.

Now, for 6 grid based web design layouts…

Further reading on grid based design

• Grid based design gallery at Design Meltdown