Jump to content

Agrio new website and corporate identity / branding


Raymond Geerts
 Share

Recommended Posts

Just finished our companies new website build with Processwire.

Main site:

http://www.agrio.nl/

A few branding pages:

http://www.vee-en-gewas.nl/

http://www.melkvee-magazine.nl/

http://www.agriomediaplanner.nl/

  • fully responsive
  • pro-cached
  • several "one page" pages for each section / brand
  • unique structure with templates as building blocks

Our companies home page structure is shown in the attached screenshot. It contains several templates used as building blocks. The goal was to have a reproduceable structure and design to be able to easily create new landingspages without the need to code anything on the front-end level.

An additional benefit from this structure is the posibility to give content editors only access to the content templates (orange coloured).

Another thing to mention is the shared (green) pages, which contains content that needs to be re-used on several places in the website. For example the footer contact and google maps. But also structures for certain content.

post-694-0-85095700-1382003410_thumb.png

  • Like 14
Link to comment
Share on other sites

Nice!

I especially like the way the responsiveness of the layout is achieved, the way the background images appear or disappear instantly on resizing, not just with a reload - taking a quick look at it I think it´s done with jQuery, right? really nice...

  • Like 1
Link to comment
Share on other sites

Nice looking site and a lot of content. Impressive. Looking at the html source there are a lot of css files. It probably would be better to concatenate some of those files, especially for mobile performance.

Also, the meta description tag is empty. Is this intentional?

  • Like 2
Link to comment
Share on other sites

taking a quick look at it I think it´s done with jQuery, right? really nice...

Way simpler than that, the background is changed in a CSS media query, if I'm not mistaken :)

Your both right. When rescaling the window some divs around images are hidden (bootstrap 3 hidden-xs for example). But also jQuery takes care of some of the background images. I'm using data-bg-big and data-bg-small with both an image URL the latter one is resize a bit smaller. Then with some jQuery throttle function at resize checking every 250 ms for the window size. Depending on the size i show the big, small or no background image. So if you are on any screensize < 768 the background images never gets loaded.

Nice

looking site and a lot of content. Impressive. Looking at the html

source there are a lot of css files. It probably would be better to

concatenate some of those files, especially for mobile performance.

Also, the meta description tag is empty. Is this intentional?

You are right about that, this is something i still have to do. Didnt had the time to finish it all before the deadline. The meta description tags are going to be filled as we speak.

  • Like 3
Link to comment
Share on other sites

If you use SCSS, you can combine and minify as you build.

Some projects i have used SCSS, just not in this project. Maybe if i can find some spare time the normal CSS could be converted to SCSS.

But for now im using my colleges Martijn his Markup CssCompress module, that works great too.

http://modules.processwire.com/modules/markup-csscompress/

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...