Category Archives: Web Development

Responsive Prototyping

Recently Axure Co Founder and Product Manager Victor Hsu, posted in the forums that version 7 is going to be delayed so that they can spend more time with new features for responsive prototyping. Unless the application is going to be a complete rewrite of ode and concepts I can’t see how this will ever work. I like many people driven by employers and clients to use Axure for create ‘wireframes’ have on several occasions made mobile and desktop versions of a prototype in Axure with limited degrees of success. The overal problem with a tool like Axure when it is put into the modern (although not that modern if you enjoy the rants of Jeremy Keith this week who reminded us that many people have always worked with fluid layouts, is that Axure is fixed width at its core.

When I first used Axure back in 2007, it gave my team and I an opportunity to reduce the time wasted writing detailed functional specifications and designing detailed screens for an application that already had a defined layout. It gave us the ability to focus on features and not to concern ourselves with the application chrome.

For us; a development team consisting of database/system admins, php developers, front-end developers and systems testers, it saved us huge amounts of time.

Providing we wrote detailed notes on widgets and pages, worked with variables and state changes with panels we were able to maintain a virtual copy of the live application in Axure that could be validated with the product owner, give the dev team the necessary information to write and build the new branch of the app and meant that our tester didn’t have to write as much for her test scripts because there was something to validate against.

And this is where I would like to leave Axure. It is a fantastic tool for prototyping applications. Semantics aside we all know there is a clear difference between what the general public may call a website, and an application. Websites are the things we lose hours on looking at cats and reading drivvel, applications are the things that you put something in and you get something out.

I don’t know what is going to be in Axure 7, but they have some competition on the horizon from the big boys namely Adobe.

This week I got to see the preview for Adobe Edge Reflow. Although Reflow is being promoted as a responsive web design tool, I see some major opportunities here for creating prototypes by the audience that Axure is aimed at – people are are not able to write code.

During the demonstration, Piotr Walczyszyn walked through creating a simple site layout; header, footer content blocks, using the graphical interface that allows you to drag divs across a column grid system which you can set up specifying number of grids, gutter size and what the total width wil be in percentages.

The interesting part of Reflow is when you start to look at what happens when you resize the canvas. Using some drag controls you can expand/contract the canvas until something starts to look rubbish and then add a breakpoint. From here you can adjust the elements on your layout repeating ad infinitum.

Just from the demo it is clear that you can visually put together acceptable site concepts. I do however have some gripes with Reflow.

During the demo, Piotr regularly switched between using pixels to set maximum sizes and percentages. For example, when setting a breakpoint for a background image after a certain width he set the max-width of the image using pixels, this was after the introduction explaining about flexible images as described ages ago by Richard Rutter.

Classic Adobe code bloat. Edge Reflow uses HTML5 Boilerplate at its foundation for your creations. A good start yes, but as with the majority of these starting frameworks it is known for having a lot of shit in it you’re unlikely to ever use. The example html file created during the demo saw all the tell tale signs of html generated by an Adobe product. Every single div on the page had a derogatory id tag. box1,box2,box3,box4,img1,img2,img3,img and so on and so on. if that wasn’t bad enough, every image was given the class image. Stating the bloody obvious?

All your CSS is added to a reflow.css file and is normalised with boilerplate – not that it can be making an huge wins because as with the html the reflow.css is huge and contains a great deal of repetition (it has to when #box1,#box2, #box99999999999 are most likely going to be identical.

Finally, and I am sure this is just going to be in beta…… the generated code only works in Chrome. in fact, they have even gone to the lengths of putting a disclaimer into your page code for you so that on body load if the browser is not Chrome, it will instead show an annoying text block:

Preview HTML generated by Reflow is meant to be viewed in Google Chrome and may not display correctly in other browsers.

Now I wonder why they’ve done that?

Even with all of this said, I don’t think you should discredit the possibilities for Adobe Edge Reflow which is now in the preview on Cloud and you can download it now. It could become a great tool for responsive site prototyping and quickly learning where issues in the layout are going to arise without the need for knowing the code behind it.

 

Welcome to the Adobe Community

Many years ago, I worked in network support. As a result I ended up with a raft of industry qualifications to validate my experience and knowledge to my employers clients (but really so that they would pay me more than a paper boy), ranging from SQL Administration, Windows, Cisco, Linux, I’ve held them all at some stage. My most favoured certification was to be awarded an Adobe Certified Expert status (ACE). This involved learning the in and out of an Adobe application and gave you an acknowledge qualification for teaching others how to use that application. I held ACE status for Photoshop & Dreamweaver and was very happy teaching people how to make their ideas a reality and avoiding the design view in DW!

The scheme disappeared over recent years from what I could see but Adobe have evolved their schemes and I am now a member of the Adobe Community and have a new title to put to my signatures of Adobe Community Professional. What does this mean? Well it means I get to try out some of the new apps as they go into beta stages and share my experiences with anyone who wants to listen. It is a great opportunity to be involved in shaping the way Adobe products work and I am very interested to give the Edge product suite a thorough soaking.

Right now I am playing with Brackets, a new code editor which has been built in web code. Pretty exciting stuff. The interface on first glance is pleasing, I’ll write up some notes on how I get along with it over the next few weeks.

Code Igniter: Getting started fast

I’ve opened a Vimeo account to be able to share what I am finding as I go along with Code Igniter. I’m still getting my head around Camtasia, the software I am using in this video for screen casting, but check it out anyway. It’s un-edited and a bit rough, but here is a guide on how to do the basic setup for Code Igniter.

A quick start guide for Code Igniter 2.1.3 from Andy Parker on Vimeo.

Digital Marketing & Web Analytics from Darren Ware

I worked with +Darren Ware for just over a year on some pretty chunky projects as well as some work for startups and small e-commerce teams. His Marketing and Analytics work is astounding, the information that he produces is deep. His insight into what was happening on existing websites acted as the right hand in any of the strategy and planning we put forward for redesigns helping us define the difference between what was fact and what was fluff.

Darren is now offering businesses of any size his services as a consultant to anyone in the South East of England including Kent, Sussex, London and Essex. His results really have been integral to the success of a number of organisations I have worked with on projects over the last year and he was even kind enough to help me set up some sensible analytics and goals for this blog and my main site byandyparker.com

For more on Darren’s servies, visit http://www.darrenware.com/digital-marketing-analytics-consulting/

adding CSS, Javascript and images in Code Igniter

Last week I started learning Code Igniter. This has come about because I have been working with a great team building websites over the last year or so in Expression Engine, a CMS built on Code Igniter. There are a lot of things that frustrate me about Expression Engine and I am sure that knowing a bit about how the Code Igniter framework operates will help me in resolving some of those pesky EE issues.

After losing half a day trying to mess around with routes.php because I couldn’t seem to pull in my CSS files I discovered a reference to placing these directories in the root. Now I thought this would be the application root; everything under one roof. It turns out that when guides reference root in Code Igniter they are in fact talking about the root of the site. I think this is a bit sloppy. It means that I now have an uploads folder, images, css and js folders in the same places as system and application. I’d much prefer to have them in application and perhaps there is a way of doing that but I haven’t found it yet.

I’m going to be putting up videos on how I am getting along and the settings in Code Igniter on my new vimeo account. The first of these videos is here http://vimeo.com/57220196