Your browser is no longer supported! Please upgrade your web browser now.

Harvest HD: A Wider, Roomier Harvest

Hi there! I’m Matthew, Harvest’s new visual designer, having joined the team here in October. So far I’ve been responsible for the new look of this main website and blog, recent ad campaigns, and now I’m onto updating the look and feel of Harvest. I’d like to explain what changes we’ve made today, and what these changes mean for you.

We’ve nicknamed this layout update Harvest HD. While we know it’s not quite 16:9, this new design brings a wider HD feel to the application. We’ve removed the borders around the main content area and pushed the page out to your full browser width. Before HD, Harvest had a minimum width of 840px, and HD takes us out to 980px.

In addition to widening every section of Harvest, we’ve brought in a modified version of a 16-column Blueprint Grid. We’ve brought the Invoices and Estimates pages into this grid already. As we move forward, we’ll be using the extra room and this unified grid to make better usability choices.

New Invoices and Estimates Pages

Highlights of these new pages include:

  • Using CSS3 for the buttons and toolbar.
  • Grouping all action buttons together.
  • Bringing the Web Invoice/Estimate design into the app, so that you see what your client sees.
  • An easier way to see if an estimate is accepted or declined.
  • An invoice and estimate header that includes the most recent action and a link to the Invoice History.
  • A cleaned up Invoice History log that is easier to scan.

Harvest Example InvoiceClick image to view full.

Building A Better Button with CSS3

New Harvest ButtonsOne of the biggest changes in Harvest HD is our push for CSS3. With CSS3, we are able to create smooth gradients, rounded corners, and drop shadows without the use of images. This significantly cuts down on our HTTP requests (ie. page load time). The navigation is also now done in CSS3, though it looks strikingly the same, with the Home icon remaining the only image. We’re excited to start bringing these buttons and techniques to the rest of the app.

Harvest Navigation Tabs

A Word for Internet Explorer Users

Internet Explorer users may notice that the image above does not match the navigation they’re seeing in their Harvest Account. This is because Internet Explorer 7 and 8 do not support many of the modern techniques available in other browsers. While there are methods available to bring rounded corners and shadows into Internet Explorer, many of them impact load and render speeds by loading extra files or downloading additional images. Harvest continues to support IE 7/8 by making sure that any advanced techniques we employ degrade gracefully and work without changing your workflow. We’re hopeful that the next version of Internet Explorer (IE9) will be released soon, as it brings with it improved CSS3 support.

Leaner and Faster

In addition to the CSS3 changes, HD helps us work toward our goal of making Harvest leaner and faster. Improvements in this latest release will allow us to shrink the size of our CSS and Javascript packages, and we’ve gotten a little smarter about our asset caching. While these improvements won’t change the way Harvest works for you, we hope you’ll notice that Harvest has a little extra pep in its step.

This update has been a long time coming, and we’re excited about today’s launch. Though the largest impact can be felt in Invoices and Estimates, Harvest HD gives us a strong foundation for future improvements to all areas of our application.  Take a spin through your Harvest account to see how this wider, roomier view feels, and enjoy!

Thoughts or questions about this post? Need some help?
Get in touch →

This was posted in Behind-the-Scenes, New Features, Online Invoicing, Product News.
  • Clean and fresh! I like it.

  • Every things is looking great. Love the app. Thanks!

  • Yea awesome work guys … one of the best-designed web apps I get to use every day.

  • Love it! Small changes make great improvements :-)

  • Wow, very cool :) Thank you!
    Also, I would love to see a more compact header in the future…

  • Harvest just keeps getting better. Thanks for all the fine work, harvesters!

  • So … is there a reason I’d still be getting the old version of the site? I haven’t seen any changes, and I’m on Firefox

  • Yay! Looks great! Thanks for the great work.

  • Looks great guys.

    now its time to add some more features.

    like search by invoice number and statements to send clients each month.

  • I prefer liquid layouts for webapps.. (like “regular” apps)

  • Hi
    My frustration with the timesheet interface is that I have a lot of entries in my Week view and have to keep scrolling to the top to see the day/date of a column or to get to the link.

    A related issue, is that I want to be able to Ctrl-click the day/date link for a column to open that day in another tab but only get another weekly page

    Addressing these would be really helpful

    Brian

  • Is there a reason I’d still be getting the old version of the site?

  • Erik and Steph,

    There isn’t any reason you should be seeing an old version of the app. It’s possible that you have old versions of the stylesheets stored on your computer – have you tried clearing your browser’s cache?

    If that doesn’t work, please feel free to contact Harvest support and we’ll try and figure out what’s going on. Include a screenshot if possible.

    Thanks,
    Patrick

  • Of course, I clean it twice …

  • Any chance we could gain a bit more space on the dashboard page? More than a third of the page is taken up with Harvest news. While I am occasionally interested in news from you guys, Harvest is software that I pay for. Exposing other reports there would be far more useful than *always* showing news from your blog. Perhaps let me make new clients or projects from there. Or let me choose?

  • zac spitzer on December 23, 2010

    There’s an annoying bug that the title isn’t coming across when generating an invoice from an estimate

  • Oh! CSS rounded corners on input fields, berry nice!

  • Aaron Stanush on January 11, 2011

    I noticed that the total amount for outstanding invoices on the main invoices overview page is missing with this update. I found that figure very helpful and was wondering if there were plans to bring it back?

    Screenshot: https://img.skitch.com/20110111-t3bqebifa5xgug8rjr3jnmhwy3.jpg

  • Aaron Stanush on January 13, 2011

    (see previous comment)

    Looks like the figure is back. Thanks!

  • Not all good.

    I don’t want my browser windows to open full screen — so it bugs me to that I have to scroll right on the Home page to click the Track Time button. It would be nice if big screens (like reports and weekly timesheets) were big, but small screens (home page, daily timesheet) were small.

    It feels like your making the common software designer mistake of assuming that your application is the most imporant program on the planet. I really like Harvest, but it’s only a means to an end. I have lots of other windows open and a small timer window is better.

  • Karen Schoellkopf on January 19, 2011

    @zac please feel free to contact Harvest support at support [at] harvestapp [dot] com so that we can investigate — Include a screenshot if possible.

    @aaron that bug should be all fixed up, and @ben and @jon thanks for the feedback about what parts of Harvest you’d like to see wider or thinner.

  • I noticed this change a few weeks ago, and I don’t care for it. A utility site such as this begs for taking up *less* space, not more. Now I have to open my browser wider to see all the content.

    The culprit seems to be the project column, which is excessively wide. Why not make it narrower? There’s more than enough space for two rows of text there with the original width.

  • Sandra Bakhache on January 21, 2011

    Hi there, great job! Will there be a Canadian tax feature soon? Please?
    Cheers!

  • Nice changes, with a light-weight feel. However making the layout wider *and* fixed seems a bit misguided; especially given how this layout may appear on tablet or notebook devices–or even in when a browser window is narrower than 980px wide. A liquid (or even responsive) approach would have made more sense. Is that on the horizon?

Comments have been closed for this post.
Still have questions? Contact our support team →