NewDevNation Live!

I got off my lazy ass today and spent the whole day coding and getting the new custom theme for NewDevNation put in place.

For the most part it is done, a few small minor things I'm working on: footer / copyright note, custom "Read More" graphic, paginated comments yet to come and will be putting a search bar in place.

http://www.newdevnation.com/

Awesome, and good for you! Are you looking for tips?

Sure any feedback is appreciated.

Okay!

There's a lot of things going on in your header navigation:

1. You have <li> and <a> backwards... The <li> should contain the <a>
2. Use sprites for your background images. That means, combine your background images into one large image and use CSS to change the background position.
3. Actually, it appears that you can use plain text and the same orange/hover background for all the links
4. The HTML can be simplified

You have this:
This would be better:
In the CSS you'd do this:

• #nav { display:block; }
• #nav li { list-style-type:none;display:inline; }
• #nav a { display:block; }

You may have originally had the <li><a></a></li> structure, and reversed it to <a><li></li></a> because you couldn't get the links to be a certain width and height. That's because <a> elements aren't displayed using the box model and won't respond to a { width:100px; } until you add the "display:block;" to the CSS. Anyways, this element order change is important.

I see 40+ images requests! It appears 15 or so images are header backgrounds; these can actually be combined to one large CSS sprite. Or better yet, since the image text appears to be just a standard (Arial?) font you can even use plain text and a single orange background. This will eliminate that :hover blank effect you're seeing when the :hover background loads. It'll also make the page load much faster!

If you made a single background and had the plain white text... you could simplify the HTML further:
This last one is the best solution because search engines can read the link text ! Since all your header links are { height:80px;width:130px; } and could use the same background CSS... you wouldn't need individual #id's on the elements.

That should be enough to get you rolling for now

If you have questions, let me know!

Thank you, been quite a while since I coded anything, great tips and I will try to put them o use.

Originally Posted by IamGears Thank you, been quite a while since I coded anything, great tips and I will try to put them o use.

No problem!

Remember, visitors are picky and will leave your website if it loads too slow. You want your blog to load quick and not scare away potential readers and customers. I'm on a 25+ mbps connection (that's over 3 megabytes per second, download) and the website takes about 6-7 seconds to fully load. This isn't because you have huge image files, but because you have so many image, css and javascript files.

Think about it like this
When my browser views your website it connects to your server, pulls down the HTML, and starts downloading 4-8 images, css and javascript files at a time (depending on the visitor browser!) Each and every one of those connections has to be negotiated by the web server; also, my browser can't download the next batch of images, css and js until the previous batch has finished loading.

I'm seeing 40+ images, 20+ .css files and 60+ .js files on your main page! In other words, I have to make 100+ connections to your main page on each page load. This not only means your site is slow, but you could also end up overwhelming the server!

Thankfully, easy solutions
This actually isn't your design's fault. A lot of this loading is due to those social plugins. I would recommend only showing the social plugins on the post/article pages and removing them from the home page. Some other things you can do are...

• Use CSS sprites, combine the background images, etc.
• Combine your css files
• Combine your js files (and put them at the bottom of the HTML)

You can really speed up your site with these two WordPress plugins:

1. AutoOptimize: http://wordpress.org/extend/plugins/autoptimize/
2. WP Super Cache: http://wordpress.org/extend/plugins/wp-super-cache/

Start with AutoOptimize, which will do the following:

• Combine your CSS files into one larger file
• Compress the combined CSS file
• Combine your JS files into one larger file
• Compress the JS file
• Trim white space in your HTML code

WP Super Cache is great too, but I wouldn't enable it until you're done coding your design. This plugin does a lot of fancy stuff behind the scenes like sending 304 Not Modified, gzip compression for pages, etc. However, since it caches your website as it is viewed you would need to clear the cache each time you made design changes to the site. So, hold off on this plugin until you're finished designing.

So three easy changes and your blog will load a ton faster:

1. Only have social plugins on post/article pages, not homepage
2. Install AutoOptimize WP plugin
3. Make CSS sprites for your design

This should bring the website to load very quickly.

Finally, food for thought
Consider only using the social plugins YOU use. Don't include Google+ if you don't use it and can't +1 your own stuff! Do you really want every article to be tweet-able? Is it worth the extra page load time? If you consistently have 0-1 tweets and +1's on articles they should be removed until you have more visitors.

You can always add a follow me and a +1 button to your homepage until then!