The Capsule Blog

Navigation refresh

Sunday, July 03, 2011 by Duncan Stockdill

We’ve rolled out an update to the Capsule navigation bar. Along with a fresh look for the icons and styling, the new navigation bar improves the way the navigation elements work.

With ever increasing screen resolutions we wanted a design that took advantage of the available screen space. Over 90% of our users have a screen resolution that exceeds 1024x768. In the previous design the number of recently accessed records that showed across the top was fixed to 5 links. In the new design this section expands and contracts to show as many recently accessed records as you’ve got space for.

In the previous design the search box sat below the navigation bar in the page header. The new design unifies the search with other navigation links in the navigation bar.

And finally, the “more” menu has been removed and replaced with the name of the logged in user which also acts as a drop down menu to provide links to user preferences, help and logout.

The new design:

As before, the color of the navigation bar is customisable so that you can match Capsule with your brand if you wish. Here’s an example in blue:

The old design for comparison:

We’ve taken advantage of a number of CSS3 features in the new design such as transitions and the usual rounded corners and shadows. To get the full experience be sure to use a browser that supports the latest web standards such as Chrome, Firefox or Safari rather than Internet Explorer.

posted in capsule, design,

Comments

Tim Sun Jul, 3 2011 at 07:42 pm

I like it! How about keeping the menu bar at the top of the browser window using an absolute positioned div? Similar to the new Google images search results - see http://bit.ly/mxyUJx That .way as you scroll down, the menu will always be accessible without scrolling back to the top.

Taryn Mon Jul, 4 2011 at 01:59 am

Love the new look! Thanks for the refresh.

OuterbridgeMike Mon Jul, 4 2011 at 10:36 am

Excellent work guys!

Ruth Mon Jul, 4 2011 at 12:19 pm

Is it me or has the heading faded ?
I’ve changed to “corporate blue” to try and increase the contrast.
I liked the colours in the menu icons as they made the icons clearly visible.

Duncan Stockdill Mon Jul, 4 2011 at 12:40 pm

@Ruth, the background color should be stronger since we toned down the gradient that overlaid the color in the new design. However I suspect what you are seeing is that the new icons have less contrast with the background depending on what color you have chosen. We are working on some tweaks for that at the moment. Which browser do you use?

@Tim, thanks for the suggestion on the fixed navigation bar. We have experimented with it but feel it’s a step too far just at the moment.

@Taryn and @OuterbridgeMike, thanks for the kind support!

Tom Lewis Mon Jul, 4 2011 at 02:24 pm

Looks great, and frees up a fair bit of space. There’s a slight issue on my browser when I mouse over the ‘setting’ icon- the ‘feedback’ icon jumps a bit, but apart from that it’s great- looking forward to seeing what else you have in the pipeline!

nik Mon Jul, 4 2011 at 03:04 pm

Good economy of space. The less extraneous the better.

Roel De Meester Mon Jul, 4 2011 at 03:11 pm

Well Done.

I do miss the colorful icons a bit, but i guess that’s only a temporarily feeling.

No CSS3 issues on my chrome/linux environment

Martin Dufort Mon Jul, 4 2011 at 05:09 pm

Monochrome is better and cleaner. Good job.

Mike Masin Mon Jul, 4 2011 at 06:52 pm

The update is clean and efficient; I like it. Thanks.

Duncan Stockdill Mon Jul, 4 2011 at 08:16 pm

We’ve released an update to make the new navigation bar work better on a light background color. The new update works very well in Chrome and Safari which allows the icons to take on the configured text color. i.e. if you’ve configured dark gray text on a light background then the icons will take on the dark gray color. This ensures the icons have plenty of contrast with the background. However we can’t use this technique in Internet Explorer or Firefox and so if you use either of these browsers the icons will show in white instead, but with more contrast than before.

If you log out of Capsule and back in you’ll pick up the new version.

Nathan Koren Tue Jul, 5 2011 at 12:16 am

Today’s update is a significant improvement. My navbar is a lightish green colour (#20B020) that goes along with our corporate branding, and the previous version looked hideously washed out against it. This is definitely much better, but I have to say that I still preferred the multi-coloured icons. Those stood out well against our background, and seems like they would work over any background.

Functionality-wise, however, this is a definite. win.

David Whitehouse Tue Jul, 5 2011 at 04:08 pm

Hey guys,

If you want a unique selling point over SalesForce - develop a WordPress plugin or contact form that passes the Google Analytics traffic source. I made one myself, but I’m not so good at javascript, you guys can have the code if you like.

Email me if you’re interested.

Cheers,

David

Yvonne Wed Jul, 6 2011 at 09:10 pm

Is there any chance we’ll be able to change the colour of the text on the navigation bar? We have adjusted the appearance of our siteto match our corporate colours, but the text is very difficult to read now. I’ve tried some of the other standard colours, but it’s still a difficult read.

Duncan Stockdill Wed Jul, 6 2011 at 11:46 pm

@Yvonne - yes, you can already change the text color by choosing the “custom” option. This gives you control over both the background color and the foreground (i.e. text) color.

Josh Lyon Thu Jul, 7 2011 at 04:14 am

Completely agree that the header bar should be an absolute positioned div. We need access to it after scrolling down!!

Commenting is not available in this channel entry.

← back to blog

Feeds

Capsule CRM

Follow us on Twitter

News & notifications

Get in touch

We'd love to hear from you hello@capsulecrm.com