Raymond Geerts Posted October 17, 2013 Share Posted October 17, 2013 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. 14 Link to comment Share on other sites More sharing options...
DaveP Posted October 17, 2013 Share Posted October 17, 2013 Lovely responsive layout, and also a great example of yet another way to structure content in PW. 1 Link to comment Share on other sites More sharing options...
Joe Posted October 17, 2013 Share Posted October 17, 2013 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... 1 Link to comment Share on other sites More sharing options...
diogo Posted October 17, 2013 Share Posted October 17, 2013 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 1 Link to comment Share on other sites More sharing options...
SiNNuT Posted October 17, 2013 Share Posted October 17, 2013 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? 2 Link to comment Share on other sites More sharing options...
renobird Posted October 17, 2013 Share Posted October 17, 2013 If you use SCSS, you can combine and minify as you build. 1 Link to comment Share on other sites More sharing options...
Raymond Geerts Posted October 17, 2013 Author Share Posted October 17, 2013 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. 3 Link to comment Share on other sites More sharing options...
Raymond Geerts Posted October 17, 2013 Author Share Posted October 17, 2013 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/ 1 Link to comment Share on other sites More sharing options...
Martijn Geerts Posted October 17, 2013 Share Posted October 17, 2013 Thanks for trying 1 Link to comment Share on other sites More sharing options...
MarkW Posted October 17, 2013 Share Posted October 17, 2013 Wow! Super nice design! Excellent work. 1 Link to comment Share on other sites More sharing options...
arjen Posted October 17, 2013 Share Posted October 17, 2013 Nice. Nice. Nice! Thanks for posting the structure part too! 1 Link to comment Share on other sites More sharing options...
NoDice Posted October 21, 2013 Share Posted October 21, 2013 Very Cool! 1 Link to comment Share on other sites More sharing options...
felix Posted October 22, 2013 Share Posted October 22, 2013 Very nice and well executed site. I love the idea of structuring the page-tree like this! 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now