New Orchard based website for mirakel.be

In august 2012 I blogged about the website for my wife's business, well, we're one year later and there's a new site. I'm even more proud of the results, especially since I'm not a web developer, not even a developer per se. Nevertheless, my wife and I managed to build this website with lots of effort and late night work.

check it out at www.mirakel.be.

Special thanks goes to David Hayden, who translated the whole design into an Orchard template. I must say that working with David went very well. He did more than what was asked for and thought together to deliver the best result (that we could afford ;) ). David delivered in time, and was very supportive to get the final pieces together. Thnx Dave :thumbs:

The site is again build on the excellent open source Orchard CMS, version 1.7.2 this time. I've done the design myself based on bootstrap 3.0.

It is very rewarding to have an artist @ home. Ira does all the art work that I then translate into the design of the site. We've spent lots of time in the Calendar but the result looks great. 

The calendar is a timeline representation where the future events are displayed in artistic cards as shown above. Each future event is displayed in one of 3 different card designs. Using some clever CSS - well LESS to be exact - and well prepared artwork, these cards are stitched together in one fluent timeline. A hell of a job, but it looks great ;)

The bootstrap framework allowed me this time to have one design for all form factors. I've designed for mobile first and then went up in screen size. The previous site had 2 different themes which were served based on the user agent. But now, there's one theme to rule them all.

The new media features in Orchard 1.7 allowed us this time to work way easier with image galleries. Previously we did photo's kind of outside the orchard environment, this time, Ira can do all the editing, including image galleries within Orchard.

The site runs on windows azure this time on a pay as you go sub using a standard web site package. After 2 days, my bill is up to € 0,42 ;). Windows Azure works like a charm with Orchard and I'm glad I've moved from a VPS to it.

 

I'm glad the result is up & running, feel free to comment on the results. There's always room for improvement ;)

Building responsive websites

Last evening I held a presentation showing how one can start building responsive websites.

The idea was not to give an in depth session but to inspire my colleagues at E2 Partners. I'm not an expert by far, but maybe my knowledge on the subject was just about enough to give them an appetite for more.

Mirakel, a simple Orchard site

Mirakel, the site for my wife's new venture is up and running, since a couple of days now and I'm happy with the results :)

The site is based on Orchard CMS which is an ASP.Net MVC based web content management system.
Orchard is a very active open source project led by these guys with plenty of support on their codeplex forum next to their good documentation.

Tools for agile software development

I'm involved in a couple of projects at the moment, one of those is the website of my wife Ira, who's starting up her own business Mirakel where she's organising workshops for kids.

I'm always looking for ways to make work more simple and more accessible whilst keeping costs at a minimum. I know there are a lot of tools out there, but I thought I'd write up my list of tools - Trello, Google docs and Balsamiq - which work perfectly together and costs are minimal.

HTML Kickstart Orchard Theme

I really like Orchard as a CMS and HTML Kickstart as an HTML/CSS framework, so I figured that I merge the two and contribute this back to the community. You can find the theme here.

The HTML kickstart files and structure are almost intact, the only changes I structurally made are renaming of the folders "css" and "js" to "Style" and "Script" respectively. Orchard "knows" by default the later folders hence the correction.

Template wise there's the additional View folder containing the different views for the page, header, footer etc.

Site wireframe
I stayed with the same structure as the example theme "TheThemeMachine" from Orchard so you get the wireframe as shown here.

This wireframe contains a column based design for the Aside bars and the Triple and Quad sections below. These columns are based on the HML Kickstart grid system. I needed to add some calculation logic as these columns are not always used and therefore the space has to be released.

For example, if no content is provided in the TripleThird zone, then we don't need to render this zone. However, in that case, we'll divide the space not by three using "col_4" classes but rather by two using "col_6" classes.

Kickstart Features
The kickstart framework has a lot of features like tab page and slideshow components. The easiest way for a admin/designer of the Orchard CMS is to get a nice module and UI where files can be selected for the slideshow for example. I haven't done this yet, but that would be an area to make it more user friendly.
Note that you can use all features of HTML Kickstart, you just have to work a bit more in HTML and CSS coding than a nice UI that hides that.

Credits
Just want to mention that credits goes to the open source Orchard CMS team and Joshua Gatcke. My contribution was just to the mash them up :)

DateTimeRange Field for Orchard CMS

I've spent a couple of weeks now on Orchard in the spare time I could find here and there.

To learn the system I decided to dive into some coding again and create myself a module. The module on itself is quite simple and adds a field to Orchard that can be used to enhance your content types.

The field adds two text boxes where you can provide a start and end moment either by date, time or both.

It is build for Orchard CMS 1.4, that was just release earlier. As this is my first module I expect some issues here or there but we'll see how it goes.

The module is hosted on codeplex: http://orcharddatetimerange.codeplex.com/
And available through the public Orchard Gallery: https://gallery.orchardproject.net/List/Modules/Orchard.Module.Line20.DateTimeRangeField/0.7

Catch up on todays web design and development

When baking pancakes for the carnival festive at my daughter's school I had sufficient time to catch up on  my online news.

Basically you create the dough and let it rest for a bit. You heat the pan and poor some pancake mixture and wait for 30 seconds or so, turn it and another 15 seconds.

In between you have a lot of seconds spare so I took a chair and my iPad and started browsing the web news.

One site struck my attention which is designshack.net. Although I'm not a designer, I found some very good articles on that site, especially    these ones:

• Save Loads of Time by Writing Your HTML With Haml
• 5 Online Playgrounds for HTML, CSS and JavaScript Compared
• Jumpstart Your Web Project With HTML KickStart
• Nailing Browser Support in CSS3 and HTML5: Invaluable Resources to Use Today

All credits goes ofc to writers of DesignShack and the original authors, developers. 

 

If you are into web design, development or alike take a couple of minutes to read these articles and you'll be amazed and fresh of new ideas and appetite (although that could also come from the pancakes ofc :D)