WordPress is a content management system used on a huge number of sites around the web – and it’s our choice as a CMS for the church websites we design and build. Let’s take a look at a few of the advantages of using WordPress for your church’s site.

WordPress is Open Source and Ubiquitous

WordPress is an open source project that is developed by, and for, the community. This means that not only is it in constant development (meaning bugs are being fixed, and new features added) but there is a huge community of developers and users around the world able to provide advice and assistance if you need it.

It also means that your church’s website is run on an open platform – you’re not stuck only being able to get future updates or changes made by a single developer who created the site.

WordPress is Easy to Use

One of the great things about WordPress is its ease of use. We would always recommend you invest in a professional to put together your church’s website – but for those on a really tight budget it is possible to get a simple website up and running all on your own.

You can get a site up and running on WordPress.com at no charge – and even customise it with a bunch of free themes, and additional plugins. That being said – if you have the budget for a custom site – you’ll be able to have a much more tailored experience for both your attendees and visitors.

It’s also easy to use WordPress to edit the content on your Church’s site. Pages, blog posts, sermons and more can be added, and edited with great ease – in a way that is simple and intuitive.

WordPress is Flexible in Design

WordPress uses a system which allows total flexibility in the appearance of the site – you can choose from any number of themes from around the web. Even better than that – you can have a custom design where the branding and overall look and feel of the website are a perfect match for your church.

It also means that things like Responsive Design (a single site for ALL devices, no matter their screen size) are supported and possible in a WordPress website – with no barriers to setting them up.

WordPress can suit ALL Content Types

The flexibility of WordPress also means that it can be expanded to handle all sorts of different types of content. Instead of being stuck with a big single text box to enter your content – content can entered in a structure that is organised and logical. Church websites particularly need to handle different sorts of content like events, staff members, sermons, series, registrations and more.

WordPress can be used to set up each of these content types (and more) in a way which makes sense.

That’s a just a few of the reasons WordPress is a great CMS option for your church’s website (and why we – at Jordesign – use it for almost all of the sites we put together). If you’d like to find out more about how WordPress could work for you – we’d love to chat to you.

The post WordPress for Church Websites appeared first on Jordesign: Websites for Churches, Non Profits and Organisations.

One of the major parts of my talks (with a small warning) was Cowboy Coding – or editing files directly on the server. I offered up a few safety measures (backing up everything when you touch it) – but it’s still pretty poor practice.  The good news is there’s a much better way to handle editing your site’s theme.

Child Themes

One of the major problems with editing your theme directly is the theme upgrade process. If an update becomes available for your theme (and is installed) it overwrites all of the theme files – taking all your lovely new changes with them. So unless you want to re-tweak every time you upgrade – there needs to be a better way.

Luckily WordPress has a great little piece of functionality called Child Themes. These are themes you can create that make amendments and changes to another theme (referred to as the parent theme). The theme contains ONLY the tweaks you make – so when the parent them is updated – all your tweaks will still remain in place.

It IS a couple of additional steps in the process – but more than worth it to ensure the valuable changes you make are future proof and won’t disappear.

Want to find out more? I recommend checking out this great tutorial on Child Themes, and also the WordPress Codex entry on Child Themes.

The post Know Enough To Be Dangerous (Safely) appeared first on Jordesign: Websites for Churches, Non Profits and Organisations.

In the name of launching early, and iterating – there’s lots of little Gremlins around the site – but that’s to be expected. I’ll be weeding them out over the coming week. In the meantime – enjoy!

The post A new site? appeared first on Jordesign: Websites for Churches, Non Profits and Organisations.

One thing that struck me was the way that Cirque du Soleil handles transitions in its shows. The transition to the next section of the performance is never jarring or noticeable – it flows on without you really noticing. They seem to get around this in two ways.

Handling Transitions

The first is they manage to make the transitions entirely seamless. Whilst your attention is directed to the current performance, the next scene is being prepared and set up out of sight.  Once the current scene is ended, it pulls away to reveal the next set, complete with performers already in action. All the hard work was done behind the scenes so that the viewer didn’t have to wait.

The other way they handled the transitions was to incorporate them into the performance. There were a number of instances where there was rigging or other safety equipment that needed to be clipped into place in order for the show to continue. Rather than have this be a jarring return to reality - Cirque du Soleil makes it all part of the act. Synchronised swimmers took the cables to comical butlers who moved in unison to plug them in – the whole thing was beautiful and whimsical. You never really thought about the fact it was delaying you from seeing the acrobats themselves.

Cirque du Soleil and the Web

I think we can learn a lot from Cirque du Soleil in terms of the way we deal with transitions in our websites and web apps.
By transitions I am talking about those moments between a user’s action, and the desired result. It might be a new page loading, or ajax content being brought in, or anything where they expect a result from their action.

Let’s be honest – people hate waiting. They want results as soon as they take action – otherwise the become discouraged, bored or otherwise disinterested. It’s happened to me, it’s happened to you. You’re browsing a site, find something that interests you, click away. And wait. And wait. It doesn’t take long at all for you to give up.

So let’s take a look at what we can learn from Cirque du Soleil about managing transitions for our users.

Work Behind the Scenes

What can you do to prepare content and information for the user behind the scenes while they are looking at the current page? Maybe something like Filament Groups Ajax Include can load the vital content first, then load additional, supplimentary content in the background? Perhaps you load the first image of your slideshow, and then load the others in the background before the slideshow starts?

These things don’t load the site faster, but they do give the illusion of speed. The user get’s the important information first, and then the rest is filled out behind the scenes.

Make it Part of the Show

The way in which Cirque du Soleil made the functional transitions part of the show really reminded me of the way we can use animation on the web and in web apps. Subtle transition animations like swipes, even loading screens make the loading of content in the background part of the process. Rather than a straight change after waiting a bit – the animation makes the time taken to load a part of the experience.

These are only two really brief thoughts – and I’d love to elaborate on them more in the future. But it’s always interesting to look at other artforms (in this case performance) and see how it can relate to the work we do day to day.

I’d love to know your thoughts on this?

The post Cirque du Soleil and the Web appeared first on Jordesign: Websites for Churches, Non Profits and Organisations.

I’ll be giving a talk entitled ‘Know enough to be dangerous’ – which kind of covers the path of what I (very design/front-end focused) have picked up of the more development oriented side of WordPress.

It’s sure to be a great weekend, so you should come along. Find out more at the WordCamp Melbourne website, or you can buy tickets here.

The post Speaking at WordCamp Melbourne appeared first on Jordesign: Websites for Churches, Non Profits and Organisations.

Next think about ALL the possible devices that can access the internet. Kiosks at the airport, portable gaming devices, accessories like the T-Hub, and even fridges and other appliances. Not to mention the vast range of phones and tablets currently in the marketplace.

Finally, have a think about how your  website looks and behaves on all those screens.

• Can people read it all?
• Can they find the information they are looking for easily?
• Do you make it easy for them to respond in the ways you want them to?

These are important things to be asking if your website is going to be an efficient and powerful communication tool.

Many mobile and tablet devices do a pretty good job of scaling a website so it fits without having to scroll around the page. But in doing so they make the text tiny – meaning you have to zoom in and scroll around anyway. In a lot of cases this is far from ideal.

Thankfully, Responsive Design is here to make your life easier.

Responsive design is a relatively new addition to the tool belt of the web designer/developer. There are a number of technical aspects (there are some references at the end of this article), but the important thing for you and your own website is this.

Responsive Design means your website appears optimised for the best possible experience on whichever device and screen size you view it on.

Rather than having a separate app or site for mobiles, tablets or other devices, it simply changes the layout (and things like text and image sizes) to suit the device.

So why is this so great? Here’s 5 reasons.

1. Make your site easier to use for everyone!

Having a design the adapts to suit the device it is being viewed on means it will be much easier to use. No more zooming and scrolling, no more crazy drop-down menus that are too big to use. Just a site that tells you want you want to know with no mucking about.

2. Lower cost.

Producing a website as well as mobile apps for multiple devices can be an expensive undertaking. A Responsive website is a much more budget conscious decisions – usually costing a fraction more (for additional development time) than a non-responsive site.

3. Only maintain one site.

Mobile apps, and separate mobile sites are sometimes a great way to serve information to those on mobile devices. But it also means writing and maintaining all your copy in multiple places at once. When using Responsive Design the same site is served to all devices, meaning you only have to keep it updated in one place.

4. Focus your content.

At a smaller screen size, you can’t show as much on the page. By necessity this forces you to focus down on what the important aspects of the site are. And if those are important to people on a small screen, its fair to say they are important to everyone. In that sense, thinking of a Responsive Design is a really helpful way to help narrow and refine the focus of your site.

5. Future-proof.

A site that is Responsively Designed is ready for the future. The flexible nature of the site means that it will display nicely on any current device (whatever size) but also future devices in what are sure to be an array of bigger, smaller and weirder sizes.

The bottom line is that if you are currently thinking of redoing your current site – Responsive Design is at least worth a closer look. It can be a great, cost effective way to make sure ALL your users have the best possible experience.

Interested in learning more about the technical side of Responsive Design? I’d get started with reading:

• Responsive Web Design from A List Apart.
• Beginners Guide to Responsive Design from Treehouse.
• Responsive Web Design – a book.

——

This article was written for, and originally posted over at Communicate Jesus. Thanks to Steve for the opportunity to write for the site, and to repost it here.

The post Responsive Design – One site to rule them all. appeared first on Jordesign: Websites for Churches, Non Profits and Organisations.

Many people would not class themselves as designers, but they can arm themselves with techniques to make themselves better at an aspect or technique of design.

This is the sort of thing I can see real value in – particularly when it comes to the ever-expanding startup space. I’ve noticed this particularly in my time recently in the Startpad in Wollongong, but also more widely in the past as well.

Designer Cofounders

Design is one of the things within a startup which is often handled as some sort of ‘additional responsibility’  for someone with a different skillset (be it business, development or something else). It’s great to see a lot of startups are understanding the importance of design, and including a dedicated person for Design, but its still not that common.

The first point I would like to make is that this is an important consideration for anyone in the early stages of seeking a partnership, or forming a team. The Design of your product is an intrinsic part of the product itself. Design is not about ‘prettying’ up the product once it is complete – It is a vital component in formulating how the product itself will work.

If you are in a place where you can introduce some with training and background in design to your team – I strongly recommend it.

‘Making Do’ Design

For all those companies that don’t have a dedicated designer – I see a couple of pretty common solutions that are used to ‘make do’ when it comes to Design.

The first, is that once the product is almost complete – they call in a designer to give it the once over. A quick coat of paint to give some spit and polish to what is already there. Although the results of this are often quite visually spectacular – it is a poor imitation of the possible value a designer could have. If brought in earlier in the process, a designer could help craft the whole product from a user-oriented perspective – doing more than just decorating.

The second is the trend you see amongst many startups of ‘The Bootstrap Site®’. Don’t get me wrong, Twitter Bootstrap is a great framework – beautifully designed, well thought out, and a great starting point. The trouble is that (most times) you can spot a Bootstrap Site®  a mile off. Even with substantial tweaking – the DNA is so strong that a great deal of the individuality of the startup is hidden behind the generic bootstrap sheen.

In a marketplace where personality, drive, and ability to get things done are paramount – a generic looking website or app can really be problematic.

So What?

It seems wrong to point out these shortcomings without some sort of solution. It’s unrealistic to think that every startup will have the finances, or contacts to be able to have a dedicated designer on the team. So what is the alternative?

I’d like to revisit that quote from Mark Boulton.

Many people would not class themselves as designers, but they can arm themselves with techniques to make themselves better at an aspect or technique of design.

I think this is a possible solution. Whilst there is no replacement for a dedicated and trained practitioner of design – there are aspects and techniques of design that other members of the team can learn, practice and master that will make a BIG difference to their product.

Some incubators are already doing this – giving some level of design training and advice to their intake.

@jordesign We provide access to a team.Adaptive design, agile process to balance elegance and speed of learning cc@startmate @optusinnov8

— Pollenizer (@pollenizer) January 15, 2013

This is great to see – and I would love to see more of it.

Bootcamp, not Bootstrap

I wonder if there is value in some kind of resource (be it online or in the physical world) that manages to get to the guts of design and draw out the important takeaways for startups. Almost like a Design ‘bootcamp’.

Something that covers the theory, but makes it relevant – perhaps workshopping on the existing product at whatever stage it is at. Teaching founders about the value and importance of design – and instilling them with enough knowledge about certain aspects that they are able to make educated decisions regarding the design of their product.

It’s something I’d love to think more about – and love to know what you think?

The post On Design and Startups appeared first on Jordesign: Websites for Churches, Non Profits and Organisations.

Around Australia (and presumably the world) Universities, TAFEs and Colleges are pumping out design graduates. As a general rule, these graduates seem to have great head knowledge, and produce really high level creative work. In my experience, however, they seem to be lacking a couple of things.

The Problem with Design Graduates

For one, a lack of ‘real world’ experience means that the transition into a workplace with deadlines, constraints, politics and teamwork is a really tough one to make. Uni/College assignments rarely have the same sort of issues at play as when you have a real client to work for.

The second thing I find is that most traditional Design educations don’t do a great job of preparing students for designing for the Web. They are still locked in a mindset of static canvases (preparing designs in Illustrator or Indesign), unaware of the need for websites to be inherently flexible. Very rarely are issues such as interaction (hover states etc), wider or smaller displays, or typeface availability addressed.

For me these factors HAVE to be limiting the usefulness of these students as they try to enter the workforce, particularly if they are set on the Web industry. I’d love to see a ‘Third Path’ as an option for students, where they came out with both ability, and real world experience. There’s a few options I can see working.

Internships

We don’t see this happen a great deal in Australia – it seems ‘intern’ is almost a dirty word. But the reality is that it is a great way for students to cut their teeth on real jobs with real constraints.

I strongly believe that these sorts of positions should be paid in some manner – otherwise you run the risk of businesses taking on interns just as a cheap workforce.

The biggest obstacle (ironically) to this is the cost and effort of taking on an intern for the businesses involved. As well as the cost of paying an intern there is the time cost of training, supervising and mentoring an intern.

Alternative Training

There are some great courses/colleges cropping up around Australia who take quite a different approach to the act of training. Tractor Design School (Graphic Design) in Sydney, Old School (design and typography) in Melbourne, and Award School (for copywriters) are pioneering as courses/schools that take a much more intensive, hands-on path to learning.

I’d love to see the creation of some sort of course for the web that teaches Design Principles and applies them to the web. Something small, intensive – and involving working on real-world sites.

Something that teaches the basics of html, css, and javascript and inspires students to push themselves to go beyond the basics.

Some sort of hybrid Front-End-School.

Apprenticeships

I think it would be interesting to see what a Web Design apprenticeship would look like. A position which combined training and working to take an unskilled individual and train them up, whilst ultimately using them on the job. Its a model that works in many industries – but has never really been utilised in more desk/computer based roles.

There’s a great interview with Dan Mall (from Super Friendly) on the BizCraft podcast where he talks about the two guys who he has working with him in that sort of situation. He has taken them from almost no knowledge to train them up (one in design, one in dev) and work with him.

It’s an inspiring story – but also a model I can see being really useful.

So where does that leave us

So there it is. Three ways I can see that Web Design students can come out with a much more rounded education. Their all different in their scope and difficulty to achieve – but I think they are quite doable.

I’m going to keep thinking about where I can make a difference, and I would love you to do the same.
How do YOU think we can train more rounded Web Designers?

The post A Third Path appeared first on Jordesign: Websites for Churches, Non Profits and Organisations.

This isn’t going to be a tutorial – there’s not going to be any code – but I thought I would reflect a little on the process.

Custom Post Type

This was a perfect opportunity to utilise WordPress’ ability to add custom post types. I created a new post type for the daily videos. We didn’t need a normal textarea, so I removed it and added fields for the day number, the vimeo embed ID, and the video thumbnail. The normal WordPress publish date did the trick of scheduling  posts for the future and having them publish on each day of the advent.

Past, Present and Future

For the advent calendar, we had to list 25 days of videos – but with different behaviour depending on their status. Videos from past days showed the video thumbnail, along with the title – clicking the thumbnail would slide the video down to play. The current day had a layer hiding the thumbnail, which would fade to reveal the thumbnail when it was clicked and the video played. Future days simply showed a box with the day number.

Getting the past posts to display properly was no problem – they just came in the normal query. Showing the current day differently was simply a matter of checking for the last post in the query  applying some classes (and divs) conditionally within the loop.

To get the future entries to show I started a counter before the first post. Once all the posts in the query were completed I started a continued looping through the counter, displaying empty days, until it reached 25.

A sprinkling of jQuery

Switching the videos within the same page was achieved with the help of a little jquery – grabbing the ‘href’ attribute from the link and using it to replace the src of the iframe containing the video. Getting the same functionality from the ‘next’ and ‘previous’ buttons was a little more tricky – having to check for the currently active thumbnail and then getting the ‘href’ of the next or previous thumbnail link.

I also used Vimeo’s API and Froogaloop library to make the form pop up when the video stopped playing within the iframe.

Scheduled posts and WP Super Cache

During initial testing, we had some trouble with scheduled posts not publishing. It turned out that the cache (WP Super Cache in this case) was the culprit. You see, a scheduled post in WordPress doesn’t actually publish until the first time it is requested after the publish date. With the site being cached – the page was being served without the request being made to WordPress at all – so the page wasn’t being published.

The solution to this was to schedule the cache to clear automatically at 12:01 am – immediately after the post was set to publish at 12:00am.

So that’s the basics  of how it was all done – if you’d like to know more or have any questions – feel free to get in touch through the comments.

The post Making an Advent Calendar with WordPress appeared first on Jordesign: Websites for Churches, Non Profits and Organisations.

I had the pleasure of working with a great young developer creating a fun little toy, Infinite Small. It’s an exercise in live data calculations and interface – trying to look at a new way to display interactive data. The judges liked it so much we were honoured to win the prize for ‘Best Business Potential’ and will both hopefully have desks at Startpad (Wollongong’s incubator) over Summer.

It was a really great time, and I thought I would share a couple of my thoughts from the weekend.

Collaboration

It was so great to work with someone with a different skillset (with a few overlaps) to mine. We could never have come up with what we did if we hadn’t been working together – it took a combination of our skills and abilities. The whole weekend seemed to be great for that – bringing people together to create things they couldn’t have done otherwise.

New Things

Both Rhys and I were trying out a few new things with this project. Rhys had never really worked with Ember.js before so it was a good chance to run it through it’s paces. For me it was the first time I’d used Git for anything more than just versioning my own work. Collaborating meant that we were really using git for what it was made for. It was a little bit of struggle for me – but well worth the experience.

I’ve used CSS preprocessors in the past, but this was the first time I had tried using nested styles. I was hoping it would make my life easier, but in the end it resulted in me having more trouble than usual finding selectors in my CSS. It also had a lot more specificity to the code than I would have like. I think both of those things would be nullified by more practice using nested styles – I’m yet to decide if it is something I will stick with.

Responsive on a tight timeline

One of the major features of our project was that it be fully responsive so that it looks beautiful on any device. And it does – go check it out. This fell well within my comfort zone, so I was all set. What DID throw a spanner in the works was that the tight timeframe meant the features and functions were changing almost the entire time, which meant a LOT of layout tweaks, multiplied by the need to make sure it worked at all sizes. This made things a little frantic at times. I think, however, this was just a symptom of the timeframes involved, and is all part of an event like that.

Wollongong FTW

The major thing coming out of Hackagong for me – is the wealth of talent we have in the design, entrepreneur and tech communities down here in Wollongong. There was an array of great and talented folk working on some amazing ideas. On Monday we also found out that 4 of the 20 startups that made the final round of Startmate were from Wollongong – that’s astounding. We’re going to continue to see great things coming out of Wollongong.

KickstartKristmas

The winning entry on the weekend was a great idea called Kickstart Kristmas. It’s essentially a kickstarter-style site for buying group contributed gifts. It was well conceived  (mostly) functional, and beautifully designed in less than 30 hours. An amazing achievement.

As far as I am aware, the folks involved in the project are going to run with it, and try and get it up and running full time, so keep an eye out for them.

So that was Hackagong – I had a blast, and can’t wait for the next one to roll around.

The post Hackagong 2012 appeared first on Jordesign: Websites for Churches, Non Profits and Organisations.