When you redesign or enhance your site, you make a lot of changes. You change the content, the design, the front end technology, the back end stack, the user flows, the information architecture, everything. It is tough to know what you have done right, and what needs help, particularly as it compares to other sites. These sites can help show you what you have done right, what needs help, and how you compare to other sites. I use them… and so should you.

http://www.similarweb.com/ – Another great site for a large, corporate web site. But not a lot of information about performance. Good to monitor usage and marketing metrics.

https://moz.com/researchtools/ose – Moz is known for its SEO tools, and this is an easy dashboard of information to monitor before and after your redesign. The free version is useful, but the Pro version is even better. Not a lot of tech help here, though.

http://www.alexa.com/ – 7 days for free, the paid version is the only one really useful. Lots of marketing information is available, though.

http://builtwith.com/ – Very technical. Shows you the infrastructure and software choices made by the development team. You will be surprised. Helpful for technology and information security teams.

http://www.google.com/analytics – Free analytics tool. Tells you who uses your site, how much, where they are from, what browsers, what time of day… a plethora of information. Including Page Speed.

https://www.google.com/webmasters/tools – Free tool that shows you what index errors Google has encountered, things to make your site more indexable, and what your pages look like to the Google Search Crawlers. Use this.

I have just finished creating two new jQuery plugins. I found them very useful for my own site, and thought I would share them with everyone else. One is called FlickrTools, the other is SocialCards.

FlickrTools

FlickrTools is a simple jQuery plugin that queries the Flickr API, and gathers all the images that match a certain tag. At some point, this can be expanded to query other properties in the API, but this is the simplest way to start. I use my flickr images as part of my home page hero, and as a rotating carousel of images. One of the nice things about this plugin is that the data retrieved from the query is reusable between both features on the site. The hero is custom jQuery, whole the carousel uses Slick.

SocialCards

SocialCards is a jQuery plugin that queries all of your social media outlets and gathers all of your recent content into cards and displays them on your own site. Currently it queries blog posts, Etsy, Flickr, Foursquare, GoodReads, Pinterest, and Tumblr. Soon to be developed are Facebook, Google+, Instagram, Twitter, and Youtube. It uses a masonry style based on the one I found on w3bits, that is configurable using CSS, included in the sample. The plugin integrates with the Google API for easy RSS reading, and with Yahoo YQL API for other more complex data.

Please feel free to give these a try. These are the 1.0 release, so they may not fit your needs exactly. Reach out to me at brian.whaley@gmail.com with any comments, suggestions, or constructive criticism.

I have recently come across this situation during a site redesign project. There are two primary objectives for the web site property, each with their own distinct and unique persona. What do you do in this situation? I recommend you embrace the bipolar nature of the site, and use a split screen design.

A split screen design, as it suggests, splits the home page in half, each side embracing one of the personas. You can design each side to look very different – color schemes, styles, fonts, etc. Shared elements such as header, footer, navigation, hero images, etc. bridge the gap between the different sides of the site. The hero can rotate between different calls to action, focusing on the personas and themes. And, shared pages such as the home page can be a continuous scroll to allow the large volume of content.

Instead of fighting the nature of the beast to blend the personas, embrace the content divide, emphasize it, and stay focused on your users.

Here are some examples of Split Screen Design I have come across in my research:

It has been a couple years since I have made any big changes to my web site, so I thought it was time. I have taken my own advice in my post 2014 Web Design Trends, and added some changes to my own site. I have flattened the design, added a hero image area, focused on Mobile First design, trimmed some text, and focused on a card based design.

Flat Design

I have made some minor changes to focus on a flatter, simpler design. I have removed shadows and rounded corners throughout. This makes the site look lighter, simpler, and cleaner. I like the look. You can see more at 25 Delightful Flat Design 2.0 Websites for Inspiration.

Fixed header and navigation

I have anchored the header and navigation at the top of the page, so that it is visible even if you scroll away from the top of the page. This is a very popular technique, particularly if the header and navigation is kept slim. You can see more examples of fixed header and navigation areas at 22 Examples of Fixed Position Navigation in Web Design.

Hero Area

I have added a hero area on the home page, which showcases my own photos stored on flickr. This adds a lot more interest and personalization to my site. Some additional examples of this design can be seen at 30 Web Designs that Fully Embrace the Hero Image.

Mobile First

The amount of traffic coming from mobile devices increases with each passing day. Building mobile specific web sites or applications separate from your desktop web site is not sustainable. My site is now accessible on phones, tablets, desktops, and extra large screens.

Less Text

I have trimmed the extra, unneeded filler text from each of the different areas of my web site. this kept the site focused on the original content, and on my photography too.

Card Based Design

This is a very popular design lately. I have gathered and organized my most recent social media content from pinterest, tumblr, twitter, and my blog, and displayed it on my home page. Each post, tweet, and pin is shown as a separate card. I like that it is always updating and follows my pixelated design theme. You can see more examples of card based designs at 15 delicious examples of card-based web design.

The most common way to size user stories for an agile team is to use planning poker and fibonacci sequence numbers. But sometimes doing this is difficult if you are not colocated. I was a big fan of planningpoker.com. But without much fanfare, they changed their tool to only allow 10 people into their estimation session. Definitely hoses half of my team. now i need a new tool to help me size my user stories. Here are some web based tools that can help me out.

The Original – Planning Poker – https://www.planningpoker.com/ . This is what I used for years. But now, the free version is only available to 10 people on your team at a time. To add more you must pay $25 per month. Crazy talk.

Scrummy – http://playscrummy.com/ . This one looks cool… but sounds like it was more of a technology proof of concept than a new product to be launched.

FirePoker – http://firepoker.io/#/ . Another popular estimation tool. This one uses angular.js . Give it a try.

Planning Poker (old version) – http://www.old-planningpoker.com/ . This one looks to be a legacy install of the original planning poker before the change, and before the redesign. This might be the answer to my problem.

If you are building a web site on an Agile team, you need to find ways to save time. These two checklists will help you with that. The first checklist, for on-page optimization, is helpful when building a new page or significantly modifying an existing one. This is a good set-up for success criteria for a user story or sprint. The second checklist, for on-site optimization, is good for regression testing or stabilization, and is a good baseline for success criteria for the release.

Do you have any feedback? Things you disagree with? Anything I missed? Please leave feedback.

On-Page Optimization

URLs

Readable by a human

115 characters or shorter

shorter URLs are better for usability

Head Section Order

Meta tags are in the right order: Title > Description > Keywords.

these tags are used to render the title and description in the search engine results pages

Title Tag

6 to 12 words , 70 characters or less

Unique across the site

Description Tag

include the most important info and keywords before the SERP cutoff

approximately 160 characters including spaces.

make it compelling – don’t want to waste your prime real estate

Unique across the site

Keywords Tag

Even with the controversy of their value, include it as a best practice

It may be a bit late, but I did a little bit of research on the web design trends of 2014. It is important to stay on top of these trends – not only to develop a cool site for you or your company, but to provide a simple interface for your users that follows conventions they understand.

Here are the articles I read ( in no particular order, just the first ones to show up in a Google search) :

I have practiced most of these trends myself in the last 2 years – flat design, image backgrounds, mobile first and responsive deign, more graphs, micro UX, minimalist navigation. The others I have seen in my travels through the internet. It is good to know that even through all the years, I still haven’t lost it.