The first CSS preprocessor I used was Compass.app which I quite like. It works smoothly, does the job and it’s great value for $10.

Recently, I’ve also been using Prepros which I like even more. It seems very flexible, has a really nice GUI, and can can compile LESS, Sass, Scss, Stylus, Jade, Slim, Coffeescript, Haml and Markdown. Like Compass.app, it has a live refresh extension for Chrome which means that your page auto refreshes whenever you save a file. It comes with a built-in web server but you can also use a custom server. It’s a great piece of software!

Also on my radar is Mixture which is a prototyping and static site generation tool that uses a templating language for building sites. It also gives you multi device testing and a host of other features. Check it out!

These are all great tools and I’m looking forward to working with them some more. At the moment, I’m loving Prepros because it just seems to work so well and is a great combination of simplicity and useful features.

It’s great to see new software from small companies changing the web development arena.

• A quick tip to improve your search engine rankings
• Why Google+ is very important for local businesses
• Four reasons why you must update your website
• Ideas for updating your website

I’ve also been busy with Clive Goes Cycling where I’ve been writing blog posts about some of the cycling I’ve been doing recently.

So, all in all, I’ve been pretty busy what with personal sites and client work as well. Better to be busy than sitting around twiddling your thumbs though!

Just a quick background, I’m mainly a front end developer but I’m a freelancer so I tend to cover a wider skillset as well. I’m Windows-based which may influence my opinion here (there don’t seem to be as many alternative web development tools for Windows as Mac?).

Reasons I like Dreamweaver

Dreamweaver’s multi-task and multi-window approach is the main thing that I really like. I can code something in Code View, check the web page’s Live View, preview the page in a Multiscreen Preview mode (for quick checking of responsive sites), validate my HTML, and see what CSS rules apply to specific elements quickly and easily, without leaving the programme. These things tick all the right boxes for me.

Additionally, Dreamweaver has some great site management tools that make common tasks very easy. Want to update the page layout in a large site? Just edit the master template file (.dwt file) for the site and click “update all pages”. Do you have common HTML patterns on some pages? Just create a Library item for that piece of HTML. As soon as you update the item, all pages that use it will be updated. Do you have common code snippets? Just add them to the Snippets panel and insert a snippet where and when you want. Of course, you have to set-up these things in the first place but that’s quick and routine for me now.

I could go on and there are many other things that I like about Dreamweaver. I guess I’ve used it for about 12 years now and it feels very easy and comfortable for me. No, it’s not perfect. It’s expensive and it’s a big piece of software with its Creative Suite partners. However, I’ve yet to find anything that matches it for my web design and development workflow.

The format

• The conference had 13 speakers, each talking for approx. 20 minutes, with a Q and A and on-stage discussion after each group of three (four) speakers. This format worked really well I thought and it meant that the day just skipped by.
• Some of the speakers were well-known on the ‘conference scene’ and others were new to public speaking. You wouldn’t have known which were which though because they all showed a high level of confidence and presentation skills. Overall, about half the speakers were new to me.

Rather than go through each speaker’s presentation, I just want to highlight a few things that I took from the day.

Some take-home points

• It was surprising and refreshingly honest to hear Sarah Parmenter (in particular) saying that she was ‘winging it’ with RWD. Also interesting to hear how she has had to adapt her web design process – although perhaps not too surprising if coming from a (mainly) design/Photoshop background.
• Fluid first is best. I definitely agree with that and wish I had done more fluid-based sites before I started moving to that approach a few years ago.
• Responsive patterns and navigation are things I need to test and experiment with more. This Responsive Patterns page page was mentioned.
• Icon fonts and asset fonts seem like a very good idea. I remain to be convinced by web fonts but Richard Rutter has persuaded me that I need to do more with that.
• Eliott Jay Stocks made the point in his presentation that “RWD doesn’t need to take more time and therefore doesn’t need to cost your clients more money”. Whilst I agree that it doesn’t need to, I won’t be charging my clients the same if their site is responsive since it does take me more time – and, therefore, my responsive sites will be priced higher. My projects/clients are much, much smaller though so don’t know if the comparison is valid.
• RWD – KISS principle applies more than ever.

A slightly indirect thought that I had during the day that applies to me.

• Spend more time on personal stuff and testing outside of day-to-day client work.

Personal things on the day

• The free coffee queue was very long.
• The seats weren’t very comfortable.
• I managed to have a couple of beers at lunchtime and avoid post-lunch snoozing.
• Brighton has some good pubs (see previous point).
• Should have made more effort to go to the after party (felt exhausted, didn’t go, my bad).

Would I go again?

Yes! It was a great day and I liked the slightly ‘unconference’ feel to the event (no name badges, no Wi-Fi). I thought the speakers were honest and direct and the conference was a lot more practical and thought-provoking for me than some other conferences I’ve been to.

More Info: Lots of details about the conference and speakers on Lanyrd.

• I wanted to write articles about business, the sites/projects I’ve been working on, and about client websites, and these articles did not seem to fit comfortably in this blog.
• The CVW Web Design site needs to have a regular stream of new content so that search engines and site visitors can see that it is updated regularly.
• I wanted to use Perch on the site so a News section was one way of kick-starting that.

I pondered whether to call the new section “Blog” or “News” but in the end I’ve gone with the latter to avoid confusion with this blog. Admittedly, “News” is not entirely accurate so I’m not completely happy but it’s OK for the moment.

So far, it’s been going quite well and I’ve been able to write a couple of articles a month. For example:

• Why web design conferences are important for smaller companies
• What company information do we need on our website?
• How to get help with your website from Google

I’m having to think more about articles to write so that’s definitely a challenge but I’m hoping to research these a bit better now that I have a place to publish them – so I hope the whole thing will be a virtuous circle. We’ll see!

Pre-conference

The conference was held on the Thursday but there was a pre-conference event the day before which was tied in with a regular Nottingham meet-up called Second Wednesday. I arrived in Nottingham that afternoon and went along. Firstly, Robert Mills gave a talk called Designing the Invisible which described how we tell stories on the web and the ways we communicate through design. Then, Rachel Shillcock gave a talk called Everybody is a Superhero where she talked about being the best at what we do and thinking about what you do best. Rachel also described her own background and how she left college at 16-17 without any qualifications. Quite an inspiring story for anyone looking to get into the web design industry. I really enjoyed both talks.

So, onto the conference itself…

The conference featured nine presentations and I’m only going to describe a few of these. Check out the conference page for details of all the speakers.

First up was Jason Santa Maria who talked about his web design process and how it had evolved over the years from a heavily Photoshop-based and linear process (lots of Photoshop comps!) to a prototyping, iterative and quicker, smarter process. Sketching ideas was a key part of this and it was great to see some of Jason’s sketchbooks for websites he has designed and how this plays a role.

Sketchbooks are not about being a good artist, but about being a good thinker

Jason Santa Maria at New Adventures

Probably the best talk of the day for me was Seb Lee-Delisle who gave a talk called Creative Coding where he described and coded some impressive visual effects with JavaScript and the canvas element. It’s difficult to describe this without seeing the presentation but I guess they can be described as “particle effects”. One (large scale) example described was the Pixel Pyros digital fireworks display which looked like a great event to have attended. Anyway, it was a very entertaining presentation. Sometimes a speaker just takes over a conference and I felt that this presentation absolutely did that.

Wayne Hemingway described how he and his wife Gerardine started in business by selling used Doc Martens boots in Camden Market, founded the fashion label Red or Dead, sold it and then created their own design agency with projects that include urban development design and vintage revival furniture. Phew, what a story! I hadn’t heard Wayne Hemingway talk before and I didn’t know his background in detail so this was an eye-opener in some respects. Take risks, love what you do, be good at what you do and make the most of your opportunities seemed to be the ‘lessons’ here.

Jessica Hische described how ‘procrastiworking’ (the things you do for fun when you are supposed to be working on other things) had transformed her life-work balance and shaped her career.

The work you do while you procrastinate is probably the work you should be doing for the rest of your life

Jessica Hische

Jessica also described a nice visual slide which showed “Things You Get Paid to Do” and “Things You Love To Do” as two overlapping circles. If you can get these to overlap fully, you’ll be a very happy bunny was the message. I’m not sure I’m there yet (ahem) but Jessica seemed to be in that lucky position. She showed some beautiful letter illustrations that she was working on for a series of book covers and described some of her ‘procrastiworking’ (fun) projects.

That’s a wrap

Overall, this was en excellent conference. As you can see from above, web design was one part of the conference but not the only subject or theme and the talks covered quite a wide range of topics. I enjoyed the whole day and it’s given me quite a few things to think about, especially work-life balance, which was alluded to either directly or indirectly in several of the talks.

It was great to meet up with people at the conference, both people I knew and some that I had not met before. So, if we talked at the conference at some point, I hope we can meet-up again.

It must be an incredible task to organise an event like this so Simon Collison, Greg Wood and team deserve a huge amount of credit for putting on three New Adventures conferences. Great job guys. Much appreciated!

Not only but also: After the conference, I came back and had a think about why web design conferences are imnportant to me. Here’s an article I wrote on that subject: Why web design conferences are important for smaller companies

Tl:dr: The cvw_googleanalytics Perch dashboard widget.

Starting points

I’m using Perch as the CMS for the site and the Perch developers recently introduced a Perch dashboard and widgets for the system so the Christmas break seemed like the ideal opportunity for me to get stuck into the Perch API code (something I’ve been threatening to do for a while, ahem). There was a new Perch tutorial for creating a dashboard widget so that was a good place to start. At the same time, I would need to read up on the GA API because I would be displaying the GA data outside of the GA system. At first glance, this looked like it would take me a while until I found OOCharts which is a script library that allows you to show GA data on your website. This seemed like a simple solution so I read the OOCharts documentation/example code and created a single HTML page example to show unique visitors, page views and a chart for the last 30 days. This worked fine (ouside of the Perch system). Yay!

Now to transfer the example to Perch….

Creating the Perch dashboard widget

Initially, I followed the Perch documentation and widget tutorial but I had a few problems with getting dashboard widgets to show up properly in my Perch admin. I think that was partly caused by a mistake in the Perch dashboard widget tutorial. The final value for the register_app function in admin.php needs to be “true” not “false”. This has been corrected in the Perch dashboard documentation now and the tutorial will be updated soon I’m sure.

I had a few other problems as well (mostly caused by me being a clunkhead) but after a Twitter conversation with Pete Eveleigh, he wrote a similar dashboard widget called fm_analytics so I was able to see how he had overcome some issues that I had. Many thanks Pete.

Info: The fm_analytics widget does things differently to mine so go check it out.

Anyway, after another hour or so, I breathed a sigh of relief and shouted “Eureka!” (or something like that) when my newly modified dashboard widget was installed and showed the data in the Perch admin. Hurrah! Here’s a screenshot of what the widget looks like on the Perch dashboard:

The widget gives two values for Unique Visitors and for Page Views followed by an interactive chart of the same data. The data is for the last 30 days and this can be configured in Perch settings. I may change the way that the data is displayed and tweak the style sheet in the next version but for the moment, it’s OK.

I’ve named the widget cvw_googleanalytics and it’s now on Github. I’ll be improving the code over coming weeks. It’s a personal project that scratches my own itch (so to speak) but if you want to try it out, please give it a whirl. All feedback gratefully received.

Here it is: The cvw_googleanalytics Perch dashboard widget.

What’s next?

I want to read through the Perch API documentation to see how I might improve the widget but I’ll be keeping it quite simple. I don’t want to display lots of GA data but I want a few simple metrics and a chart or two. That’s it.

It’s been good to do a bit more with Perch outside of the normal installations and customisations – and I’ve enjoyed it – so I hope to create other widgets over coming months.

Credits: The foundation for the widget is OOCharts. It’s great! Many thanks to its developer Tyler Shaddix.

• Geolocation and HTML5: I read up on this and learnt the basics but haven’t actually used it on a real project yet.
• Sass: I’ve started a few small projects using the CSS preprocessor Sass (together with Compass app) and I quite like it. However, it’s actually quite a deviation from my normal workflow¹ to use a CSS preprocessor so I’m not hooked on it yet. I also want to make my endpoint CSS better so OOCSS and SMACSS are a higher priority for coming months. I wrote about this in LESS or Sass or neither.
• I’ve done a lot more with the CMS called Perch and this is mainly because that system fits really well with my client work. I also really like the approach that the Perch developers have taken where the site HTML is used as the basis for Perch code templates.
• WordPress: I worked on the development of a site for Cheshire RFU that extensively used custom post types and fields earlier in the year so that was good for learning new WordPress methods. However, I’ve not done as many sites with WordPress as I would have wanted. That’s mainly because the projects haven’t materialised for it. I still like the WordPress system and, judging by the prices charged by other developers, I should be using it more ;-)

So, I have started some new things in 2012 but probably haven’t followed through on them as much as I might have. I am still determined to continue with a similar learning goal for 2013 because without the impetus from the 12412 project, I would have done even less.

One of the things that has impinged on my learning of new subjects is client work. Nothing wrong with being busy you might say – and I agree! However, it has meant that my motivation for sitting down and learning new subjects (and also working on personal websites) has been less than some previous years. I need to find a way to improve this in 2013.

One final point. This year I have started doing a lot more coworking than previously, both through the Horsham Coworking group that I started, and at the Worthing Coworking days. As a result, I have definitely been more exposed to other people’s ways of working and met some great people through it. Perhaps that wasn’t the intention of my post a year ago but coworking has provided a new experience this year and I think I have learned some (non-technical) things from this.

¹ Despite comments from many other web developers, I still like using Dreamweaver as my main coding tool. As an all-in-one, coding, design, preview and site management environment (that I know very well), it’s actually tough to beat and I just find I can work really quickly with it. Sorry guys, it works for me.

Here I am on Audioboo and on VoiceBo. I’ve found pros and cons for each app, and I may write a post on this, but so far I’ve used Audioboo most. Not because I think it’s better but mainly because I started with it before VoiceBo.

It’s been quite a challenge and also an enjoyable experience to record something every day. Here’s one of my previous ‘boos’ where I talk about Horsham Coworking as well as Windows 8.

I wouldn’t say that I have a recording career in me (!) but I’m intending to complete the #audiomo challenge for November and will probably continue with Audioboo/VoiceBo after that as well.

Jetpack supercharges your self‑hosted WordPress site with the awesome cloud power of WordPress.com.

Jetpack is made by Automattic, the company behind WordPress, and was orginally only available if your site was hosted on WordPress.com. Now, it’s available for self-hosted sites as well. So, what does it provide? Here are some of the options in the Jetpack package.

Site Stats

Firstly, there is Site Stats and, after activation, the page for this appears in the WordPress admin area. The Site Stats are not as comprehensive as Google Analytics (for example) but they give you an overview of how many website visitors, referring sites, most popular pages and posts, the search terms used to find your site, and clicks on external links – all over several time periods. For many website owners, I reckon that’s sufficient and because the figures are in the WordPress admin area, they are easier to view (how many website owners never look at Google Analytics?!).

Mobile theme

Another of the Jetpack options is a free Mobile Theme for your site. Don’t want to spend time on developing a mobile theme? Well, this might be a good solution. I’m using it on Clive Goes Cycling and it gives you a simplified mobile layout for your site. It’s not perfect but I think it’s a quick and easy solution.

Sharing

Sharing allows you to add a Sharing settings page to your WordPress admin and to configure share buttons (Twitter, Facebook etc) on your website. The settings page has the usual drag and drop WordPress interface, and several customisation options, which makes it dead easy to use.

Add a contact form

The Contact Form option in Jetpack adds a contact form button to the WordPress editor toolbar – making it easy to add a form to any page.

There’s much more in Jetpack than I’ve described. In fact, there 19 different options/plugins within Jetpack, ranging from extra sidebar widgets to an image carousel and a CSS editor.

Final thoughts

I’ve been quite impressed with Jetpack so far, it’s been useful, and provides a lot of extra functionality. I recommend giving it a try.

If you have used Jetpack – let me know what you think, and which parts you like the best.