I knew even then that actually designing a nice looking site was going to be beyond me, but the nuts and bolts of actually making it *work* was where my interest lay. At the time I remember being very adament about using ‘scaleable’ layouts as opposed to fixed width. This basically meant that when you resize the window, the site will contract and expand with it. To build a site that remains a fixed width could end up with ugly dead areas on higher resolution displays, and I saw it as something that pointlessly limits the space in which you’re presenting your content, especially when it has to be at a width that can be seen in full even on the lowest resolution displays.

On the other side of the coin, fixed width sites make actually designing sites much, much easier. If you want a nice image based banner at the top of your site, for example, you’re going to have a real headache making that look right as the site changes width around it. As the web moved on and broadband prolifferated, heavy use of images in web designs became more viable and sites started to be designed and laid out to the pixel, making fixed width sites far more common due to not having to worry about how it will change on one display or another – it’s comforting to know that your site will look consistent for everyone.

It’s only now, with the emergence of advanced CSS techniques, that I can really see a great opportunity to go back to the old ideals of designing sites that change based on what they’re being viewed on. The difference now is how much control the developer has. The old technique of giving all elements of the site a percentage based width is pretty heavy handed and can cause problems when squashed or expanded too much, but with Media Queries – the CSS technique that allows different styles to be applied based on variables such as the browser window width – you can basically do anything you want. At the most basic level I can take a box that is normally floated to the left of the main content area and, once the site is squashed to a certain width, I can then make that box appear at the top of the page, allowing the main content more space to be displayed correctly. The potential control is pretty much limitless and as a developer it presents some interesting new challenges, as you’re required to structure your web pages in a way that will allow the CSS to place your content wherever you need it.

A side effect of this is that brings back the need for developers to have a bit of design acumen as the functionality and form rely more heavily on each other. When we start a new project that we intend to build with a responsive design, communication between the designer and the developer becomes much more important, as you’re constantly making sure that what is being designed is technically possible to achieve in a nice, clean way when it comes to development.

Another side effect is that it’s almost forcing designs to simplify. You’re going to have a much easier time with a site that’s mainly solid colours and text than one that is packed with images in every corner and I think that can only be good for the clarity of information presented on the web. The best responsive designs I’ve seen do a great job of making the text itself beautiful, and the use of images more considered because you have to justify the presence of every design element if you’re going to work out here everything will sit in a variety of widths.

Responsive design of course has all sorts of benefits when it comes to comfortably viewing sites on mobile devices, but I think the side effect of simplifying sometimes overcrowded designs and concentrating on placing greater emphasis on the information the site is presenting is going to be of great benefit.

But regardless of your feelings towards the grey boxes of joy, if you work in web design in a professional environment, they will have been a common part of your existence for the past 15 years.

Process driven

They are a crucial part of any design process, giving the creator a logical thought process, allowing them to visually, and mentally, navigate through the proposed design. UI (User Interface) issues can be ironed out at this stage through the use of wireframes. By having this process in place, a design team can ensure they have the best solution to the brief. I am process driven for the most part, and always endeavor to follow a work flow similar to this handy diagram below.

Scalability

Of course, wireframes may not be required for small scale projects. Depending on the size of the solution, it is sometimes not necessary to wireframe the design at all, and the designer can go directly to producing visual mockups which accurately describe the final result. This can approach can generally only be taken if the clients expectations are successfully managed. As I have mentioned in a previous post, there are clear arguments, both for and against, presenting the client with full mock ups or wireframes.

Functional Vs Visual

There are two types of commonly used definitions of wireframes, functional and visual. Generally, functional wireframes are less common in todays design environment, and were used for primarily for large scale solutions, with hundreds of hyperlinked pages. Historically, this task would have usually been completed by the IA (Information Architect). Functional wireframes can be difficult to read, complex and overly annotated. They are ugly, and don’t inform the visual design. Getting a solution signed off on the basis of a functional wireframe can be risky, as it may not accurately reflect the visual mock, elements may move and other decisions may be changed during the design process.

A more accurate description of the final product is a visual wireframe. The designer can show actual content, fonts at correct sizes and use image placeholders. A visual wireframe is a mix of functional and mock up. It is something that combines the IA and design, into a document that everybody can read and feel comfortable with, including the client. Web design has evolved. It is now very much a modular process, as is coding. This argument is explained very well in this article by Isaac Pinnock over at Made by many.

Whose line is it anyway?

As I mentioned earlier, the job of creating wireframes 10 years ago almost certainly fell to the IA, which would then be passed to the designer to design. Today the the line between the Designer, IA and Developer is a blurry one. With Ajax and todays web design principles and technologies, the designer must ensure that their solution not only looks awesome, but works beautifully. Again, historically, this task fell to the developer, but today more commonly the UX (User Experience) is handled by the designer.

The best, and most successful solutions, are those which seamlessly combine the look (UI), experience (UX) and the Content, so the designers role in delivering these elements to the client is crucial. Wireframes will continue to remain a crucial part of this process, in whichever format best suits the solution.

demoMedia has successfully focused on the Corporate Conferences and Events market place for over a decade, supporting and enhancing our globally recognised international portfolio of clients’ digital reach and footprint via a close-knit team of innovative and highly skilled web designers and developers. It is through this success that the demoMedia story continues… We are now looking for a Web Developer who would like to be part of our expansion and help us build a digital future.

The skills required are:

• Solid object-oriented design, programming and debugging skills
• Demonstrated expert-level proficiency in PHP5
• A strong understanding of SQL and database design
• A good understanding of Javascript and how best to use it for enhancing the front-end experience
• Can build front-ends with good, valid and cross browser compatible HTML / CSS
• Understands what good documentation is and its place in the development cycle
• Understands version control systems and best practises

What do we expect from the ideal candidate?

• Understanding of the jQuery framework, specifically its AJAX functionality
• Basic image manipulation in Photoshop, such as resizing, cropping and ‘cutting up’ designs when needed Codeigniter, Zend or other object orientated PHP frameworks
• Basic UNIX command line
• You show an appetite for technology and innovation
• You show ways of taking advantage of social networking sites
• An incessant desire to continually expand your brain with knowledge and ideas until it bursts
• Excellent communications skills with a clearly defined English language skill set
• Likes to discuss and talk with the team any new ideas
• You should be familiar with working to tight, sometimes impossible deadlines
• You should be INCREDIBLY organised
• Demonstrates the use of various tools to show you are highly process oriented
• Understands accessibility, cross browser and platform compatibility

Although we represent some of the world’s most recognisable brands in the world we have an informal nature. Behind hard work is hard play and we like to have fun both inside and outside the office. Games nights, pizza, pub quizzes and film nights are the usual order of the day. It’s a fast paced, challenging and dynamic environment where no two days are the same. There are no walls, glass prisons or segmented desks here and the only person likely to be micro managing you, is our resident Chief of Staff – Loki the Bichon. The position is a 3 month contract starting immediately (with the opportunity to become permanent). Salary is dependent on your skills and experience. Please accompany your application with examples of work to Jill Dumas at info@demomedia.co.uk

Once the code has been checked out from our version control server the development environment is at the individual developer’s behest.  For a while now I’ve been using a tool called Intype, which styles itself as the “The text editor we’ve all been waiting for” which is apt, because I’ve been waiting for the thing to be finished and stable for almost two years, now.  While I like the customisable formatting for various scripting languages, it’s been in an officially ‘unstable’ state for as long as I’ve been using it.  One of the biggest problems is the way that, every morning, it takes a good ten minutes to scan all my projects on my machine before it’s ready to be actually used.

The search for the perfect web development environment is constant and I’m always looking for something new and interesting, and ShiftEdit has recently caught my eye.  This is a text editor that buys in to the increasing trend for in-browser apps (something Google is desperate for people to get on board with, as it’s the entire basis for their new ChromeBook laptops that can run the Chrome web browser and not much else).  It allows you to sign in to the app and manage all your projects and start your development straight from the browser.  For someone who, like me, allows Google to run his entire life and has each instance of Chrome synced to his account, this instant access to one development environment is a very attractive prospect.

I’m not the biggest fan of the move from natively running apps and storing your files to having everything kept in the vaguely sinister ‘cloud’ but I can’t deny the usefulness of allowing Google (or similar service) to manage and serve you your entire life at a click of a button.

If ShiftEdit proves useful, it might be time to suggest making it a standard for the office, especially if it could solve the problem of not having your normal development available when working from home or responding to emergencies at 3am.

Now, if you’ll excuse me, Intype appears to have crashed again.

demoMedia is one of the UK’s most exciting and fast growing, interactive Digital Design Agencies based in the heart of the City of London.

demoMedia has successfully focused on the Corporate Conferences and Events market place for over a decade, supporting and enhancing our globally recognised international portfolio of clients’ digital reach and footprint via a close-knit team of innovative and highly skilled web designers and developers. It is through this success that the demoMedia story continues…

We are now looking for a Project Manager who would like to be part of our expansion and help us build a digital future.

As Project Manager, you will work closely with all members of the demoMedia team, from accounts to the dev team, including executive management and our clients using your highly honed skills to exceed customer experience and ensure smooth running of a multiple projects, ensuring they are delivered on time and on budget. You will ensure that the challenge and requirements are understood and will work closely with the team to define the solution.

As a senior member of the team, you will be empowered to handle accurate financial management of projects as well as take on pre-sales duties by adding value to the business development process.

Interested?

Here are some of the things we will be looking for in our Project Manager:

• 5-7 years of relevant experience preferably in a consulting or agency environment
• Relevant qualifications, Bachelor’s degree preferred
• Advanced knowledge of one or more of the following: software development life cycles, web technologies, web development processes and the delivery of solutions with creative and engineering components, media and advertising projects, digital strategy projects
• Advanced understanding of project management methodology including the ability to identify and resolve issues, manage risk, develop detailed work plans and specifications, perform resource allocations and run team meetings. (i.e. Prince 2, PMP, Six Sigma, etc)
• Ability to work on multiple projects and manage multiple project coordinators, leads and/or managers at one time
• Excellent verbal and written communication skills. English language is a must
• Excellent organizational and time management skills
• A love for the internet and all things social
• Expert Microsoft Project and MS Office skills
• And, most importantly – happy to report to a Bichon Frise, namely Loki.

If you think you have the skills, see if you like the environment…

Although we represent some of the world’s most recognisable brands in the world we have an informal nature. Behind hard work is hard play and we like to have fun both inside and outside the office. Games nights, pizza, pub quizzes and film nights are the usual order of the day. It’s a fast paced, challenging and dynamic environment where no two days are the same. There are no walls, glass prisons or segmented desks here and the only person likely to be micro managing you, is our resident Chief of Staff – Loki the Bichon.

You got this far, why not send your covering letter and CV to Jill Dumas at info@demomedia.co.uk

Salary is dependant on experience.

We do not require agency support for this position but appreciate you looking!

So what is responsive web design?

Responsive web design is, put simply, a website which can be viewed at any resolution. The CSS is developed in such a way that the page elements can adapt to different devices. CSS3 introduced Media Queries, which allow you to serve different CSS Style Sheets depending on device resolution, without the use of of Javascript. Using this method this makes your developed site far more flexible when designing for multiple devices. CSS Media Queries, Fluid grids, & image sizing adapt the content of the website to any device.

Throwing your budget a lifeline

With the ever growing number of devices on the market today, having a ‘one size fits all’ website makes perfect sense. Desktop computers, laptops, tablets and smart phones, all have wide varieties of resolutions. This presents a huge challenge when designing & developing websites to cater for everyone.

Most projects simply do not have a sufficient budget to develop multiple versions of a website. This is where planning and building a responsive solution is really beneficial. You do not have to create a mobile version of your website for different devices, just develop one site than can adapt itself to different resolutions.

Responsive, or Mobile?

Some projects may not require a responsive approach, and clearly need a separate mobile website to be developed. Facebook, for example, has a mobile web application, which is vastly different to its bigger brother. The content is the same, but the design, layout & user experience have been designed specifically for mobile devices.

It is in the hands of the designer to decide the correct solution, responsive web design is never going to be suitable for all projects. Having said that, best practice in design would have had most designers considering these potential problems already. Liquid layouts (thankfully we don’t see too many these days) had been using percentages to calculate the width of columns to cater for different browser resolutions since the birth of CSS. Responsive web design is the next step for universal accessibility.

Tell me more…

I have only lightly brushed on the principles of responsive web design, if you would like to know more about it, take a look at this article by Ethan Marcotte, over at A List Apart.

Ethan has published a book on the subject, for which he also coined the phrase, appropriately titled ‘Responsive Web Design’, which you can order from A Book Apart.

With the rapidly increasing popularity of OSX, we often forget that Microsoft have been responsible for some fantastic visions of the future. Even back in 2001, over a decade ago, Microsoft were having preliminary internal presentations demonstrating the use of gesture based navigation and interaction. Piquing the interest of Steven Spielberg, he went on to use this technology with the consultancy of Microsoft in his 2002 film, Minority Report, showcasing this contact-free method of interaction which became so synonymous with the film, having UI designers quoting ‘Minority Report’ style interaction. 

This tool later went on to become the Microsoft Surface, being released roughly the same time as Apple’s iPhone. Because of its price and requirement for localised and specialised development, the unit became too costly for anything other than branded marketing efforts. Even so, it was a great technological showcase for Microsoft which has had people referring to it for both inspiration and guidance. 

The Surface has recently been relaunched in v2.0 now, with price reductions and big changes to its practicality, further extending its possibilities in real world use. Would love one at home!

Moving the game even further, Microsoft presented the world with a romantic notion of the future, engaging people with an interface that promoted interaction. With some great visuals and imagination, they appear to really go to great lengths to demonstrate a very viable future.

Then, they go to town on a global vision with their fantastic ‘Product Future Vision (2011)’ video. It’s an all out showcase of technology illustrating how technology can reinforce relationships, focus more on doing rather than the organising and providing the world with a free form method of sharing that has no limitation in technology. How this all works in practicality remains to be seen, but having someone like Microsoft think about all these things today is a comforting thought.

As interface designers and service providers to digital communications, we all have a say in the future of the peripheral and its impact on all of us. It is truly an exciting time with an ever evolving landscape that does not seem to want to settle.

We’re not actually that far off from that pledge and we, at the very least, continue to launch a new site at least yearly. To some, this may come across as a strange method of marketing and solidifying your brand. To us, this is simply a demonstration of our own ability to continue to interpret modern design and development in its evolving iterations.

One thing we continue to champion is the beauty and simplicity of HTML, CSS and JavaScript. We’ve never believed in Flash and have actually applauded Apple’s decision to rebuff it. Even though, no doubt, it’s a corporate strategy with some end goal, for us, it simply meant the massive advances in HTML 5 that we’ve seen so far.

This is an isolated opinion and even here, at demoMedia, we are divided in that. However, we all agree that there is no place in the binary world anymore for sites built entirely in Flash. We’ve always put our money where our mouth is by living by that principle, as does our own website.

We welcome comments on the site, good and bad, but note that any bad comments will be immediately edited to show them as hugely praising. Haha, just kidding. No, seriously.

Anyway, this site’s a keeper. I’m very proud of Iain for the design and the speed with which our devs have built it. Based on WordPress, we continue to use this awesome framework to support our ongoing efforts to maintain our no.1 global top spot recognition as the best company in the universe. Ever.

When it comes to external links, however, the waters are muddied slightly by the fact the website owner usually wants to keep people on their site, so the default behaviour of links is thrown out in favour of forcing the link to open in a new window or tab. In my experience, you can guarantee that any client will ask this to be done for external links. The thought of taking the user away from site is just not an appealing one, which is of course understandable but the problem is that decision is almost always made without thought for what the user will be expecting to happen when clicking the link. For example, if you have an external link that, by default, opens the site in the same window then the user has the choice based on their knowledge of the link.

If it’s clear that the link will be taking them to another site, then they have the option to force the link to open in a new window or tab using the right click menu or the middle button on their mouse. If a developer has instructed the link to open in a fresh window, however, the choice is completely removed and the user could end up having the website behave in a way they are not expecting.

Counter arguments are all based on the assumption that the website knows better than the user. “What if they don’t know how to open a link in a new window?” is the main point, but personally I would rather trust the user to know this basic functionality and leave the choice with them.

At the end of the day, if your site is interesting and appealing enough, having a link take the user away from it shouldn’t matter. Tricking the user into non-standard behaviour just to keep your site open is, at the end of the day, just not worth sacrificing usability and consistent behaviour.

Firstly, lets clear up the difference between WordPress.com and WordPress.org. WordPress.com offers users a free blog, hosted by WordPress. Over 285 million people view more than 2.5 billion pages each month. WordPress.com users produce about 500,000 new posts and 400,000 new comments on an average day.

WordPress.org is the place to go to download the WordPress publishing platform powered by PHP and MySQL. This provides development teams with the files required to install the WordPress platform on the required server.

Initially created as a blogging platform, WordPress has developed into arguably the most complete and comprehensive web publishing tool available. Match this with its Content Management System, impressive security tools and its lovely user friendly interface, its easy to see why its so popular. WordPress has a huge open source developer community behind it, constantly updating & improving the various plugins available. Perhaps the largest factor, though, is the fact that WordPress is free.

User friendly Content Management System

The WordPress backend interface is very well designed, and simple to use. You require no technical ability or coding knowledge. The layout of the user interface instantly feels intuitive.

Search Engine Optimisation

The visibility of your website depends on many factors, but clean, well structured code is a must. Combined with semantic code, WordPress offer various plugins and tools to allow you to optimise your website for search engines, quickly & efficiently.

Themes & Widgets

As previously mentioned, WordPress has a huge developer community. One of the best features of the WordPress platform is the widget based approach to design & layout. Through the backend, users can modify their theme a the click of a button. Themes are available free of charge, whilst others are paid. There are currently 120 themes to choose from on WordPress.com, coming from various sources, designers & developers.

Security

We are all aware of the headaches of ‘Spamming’, irrelevant hyperlinks posted to blogs and forums, usually taking users to suspicious websites containing malicious code. Usually scripts or automated bots target high traffic websites. WordPress comes with anti-spam protection in the form of Askimet. This tool is regulary updated to keep one step ahead of the spammers.

Currently WordPress is used by over 14% of the 1,000,000 biggest websites. These including TED, CNN & TechCrunch to name a few. There’s no denying the Platforms popularity, and it’s market dominance will no doubt continue to grow, which is no bad thing.