Error message

User error: Failed to connect to memcache server: 127.0.0.1:11211 in dmemcache_object() (line 415 of /var/www/vhosts/dagency.co.uk/httpdocs/sites/all/modules/memcache/dmemcache.inc).

Posts by Paul Barnes

The Importance of Quality Photography in Your Website

A picture can say a thousand words and on the internet, where cognitive decision-making occurs at the milli second level, they can make or break your online presence. If you’re currently commissioning a new content-managed website, take a moment to see how the successful brands on the high street do it.

Below is a list of 6 high street brand website home pages. In each case, the images have been removed to demonstrate just how much of the page is dedicated to photographic imagery.

If you’re building or commission a new website and are aspiring to achieve a professional modern look, think about how these brands capture and sustain their visual identity, using high-quality photography - how will your web build do something similar?
 

Example 1 with images removed - do you know which well-known brand this is?

website-photography-quality-example-1

Example 1 - John Lewis

website-photography-quality-john-lewis

 


Example 2 with images removed - do you know which well-known brand this is?

website-photography-quality-example-2

Example 2 - Marks & Spencer
 

website-photography-quality-marks-spencer

 


 

Example 3 with images removed - do you know which well-known brand this is?

website-photography-quality-example-3

Example 3 - Virgin

website-photography-quality-virgin

 


 

Example 4 with images removed - do you know which well-known brand this is?

website-photography-quality-example-4

Example 4 - Harrods

website-photography-quality-virgin

 


 

Example 5 with images removed - do you know which well-known brand this is?

website-photography-quality-example-5

Example 5 - Harrods

website-photography-quality-virgin

 


 

Example 6 with images removed - do you know which well-known brand this is?

website-photography-quality-example-6

Example 6 - Harrods

website-photography-quality-virgin

Photo Shoot Services

If you need quality images for your business or products, D. Agency has access to the very best facilities located on site at our offices.

At our head office building, at D. Agency, we’re very lucky to have a high-quality Photographers studio tucked out the back, with impressive, modern facilities. The larger studio occupies what used to be the main projection screen of the original, art deco-style picture house.

Photoworks have been operating for over 20 years and owner & lead photographer, Andy Cahill uses the very latest cutting-edge equipment and rigs to achieve a top professional finish.

New Photo Studio Available for Hire 

Recently, a couple of us from D. Agency muscled in as background-extras, on a demo shoot to promote a newly opened additional studio, which is now available for hire.

D. Photo shoot with Paul Querol

Above: D. Agency's Drupal guru, Paul (‘Q’) Querol working the laptop role with vigour, on a culinary-themed setup.

 

D. Photo shoot with Paul Barnes

Above: D. Designer, Paul Barnes takes up a coffee and provides the rough edge in this, otherwise beauty-themed setup.

 

Main Photo Shoot Studio

Photoworks Studio at Picture House

Above: The main studio housed in the main screen area of an old, converted art-deco picture house.

 

The Drupal 8 Mobile Initiative

Drupal 8 is set to become the most capable version of the website CMS framework to date, with it’s new responsive features being among the most anticipated. What can we expect to see with regards responsive design?

Drupal 8 - Mobile Initiative

With an eventual release date earmarked for mid to late 2013, Drupal 8 will be warmly welcomed into the community. As well as a raft of developer upgrades (which wont be discussed in this post), there are some fundamental core changes, chief among which will be a responsive solution for front-end and admin, out the box.

Let’s first take a look at the new Admin bar. The ‘Seven 8.0’ is Drupal 8’s default theme and whilst a step-up in presentation is obvious from the outset, users of Drupal 7 will still find this a very familiar toolbar.
 

Drupal 8 - Admin Bars

It now has clearer, better-designed buttons with added icons to help spare the user’s cognitive load and aid in orientation. The new icons are also a big help at mobile size where things can become a lot simpler.

Improved Drupal 8 Admin for Responsive Websites

Whilst Drupal 7 could always be integrated to a responsive website, the actual Admin user experience on smaller mobile devices was not the best it could be. A lot of vertical and horizontal scrolling and bunching of content meant adding or editing content wasn’t the most pleasant of tasks.

Drupal 8 Desktop View

Drupal 8 - Admin Toolbar Desktop

On a desktop monitor, the Admin bar has room to stretch and now makes better use of the two strips. The top strip has shortcuts and user info whilst the bottom strip is now a contrasting white colour, purely dedicated to Admin sections. A blue pencil icon on the far right toggles between the horizontal and vertical toolbar layouts.

Drupal 8 Mobile View

Here, the toolbar is shown responding to mobile. It re-adjusts automatically depending on the size of the device you are viewing so whether it’s smart phone, tablet or desktop, the toolbar simply adjusts appropriately without you needing to think. Users familiar with Drupal 7 will note how much clearer the layout for mobile is now.

Drupal 8 - Admin Mobile

 

Responsive Images

Whilst properly addressing responsive serves up a laundry list of issues in general, one of the immediate problems most designers and developers will grapple with is how to deal with page-loading performance. As the size-range of devices becomes ever more extreme, we’re also demanding that we’re not dealt a half-baked experience on mobile - where connections are typically slower than desktops. At the same time, mobile devices are also ramping up in quality, like the iPhone retina screens, so now there is also a demand for 4 times the image.

Drupal 8 is also tackling this with responsive ‘Pictures’. This allows admin authors to add one large image (whether it’s a banner slide, a block image, gallery photo or a general picture on a page) and Drupal 8 will automatically serve up an appropriate size of picture for the device. E.g. full size for 1200px sites and over, and physically smaller versions for smartphones. This eliminates the temptation to ‘hide’ certain heavy pictures at smart phone size, which would normally penalise a smart phone user’s overall experience.

This will avoid a large image designed for say, 1200px wide desktop (like a banner) being served up and scaled down, on the fly, for a smartphone and hence unnecessarily hogging bandwidth and page-speed.

 

Related Links:

The Drupal 8 Mobile Initiative Lead – John Wilkins
http://palantir.net/blog/drupal-8-mobile-initiative

The Drupal 8 Mobile Initiative Blog
http://www.unimitysolutions.com/blog/understand-drupal-8-mobile-initiative

Social Media Dimensions - Facebook

Facebook image dimensions. Prepare your profile image, cover photo and more with this handy quick start guide to get your account looking professional.

If you’re setting up social media, you’ll want to know what sizes all your profile pictures, banners and photos need to be for a professional polished presentation and to ensure you have a great looking social network to bolster both your company web presence.

Below we take a look at how the various zones on a Facebook profile can be used for both personal and company purposes.

Personal Facebook

Personal Facebook Example

Company Facebook

Facebook is a great way to promote your business and it’s completely free. A dedicated account can be set up solely for your business and you can use the various image areas creatively to really push your brand, products & services and connect with your audience.

Facebook is a great way to directly engage customers & fans alike. It allows people to publically ‘like’ aspects of your page, which in turn, generates a positive impact on others.

A Facebook page is not designed to replace a company website but it can work in parallel with it. Use it to promote products & services, relay news & events, and volunteer bonus insights into the way you work for a transparent and trusting relationship.

Perhaps product/service tutorials or video diaries or help guides will help customers make decisions. You don’t have to give away all your trade secrets but it’s a great platform for informal education. It’s entirely up to you but give your audience a reason to keep coming back. Every step of the way you can direct people back to your main website and funnel people to your specific goals and calls to action.

 

Company Facebook Example

The 15 Column 1200px Grid System

A logical approach to planning & prototyping your new, responsively designed website.
 

1200px Grid System

Grids have always been an important planning element for designers. They know that a well gridded layout can help ease a user’s cognitive load and help them scan a page with far greater efficiency than one that is chaotic and misaligned. With responsive website design (RWD) now firmly embedded in the industry, determining a workable grid system has never been more important.

In this article we’ll take a look at the 1200px Grid system.

Why 1200px?

All modern monitors (mostly wide-screen) support at least 1280 x 1024 pixel resolution. In January 2010 76% of the computers where using a resolution higher than 1024 x 768 px.


1200 is divisible by 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 40, 48, 60, 80, 120, 150, 200, 240 and 400. This makes it a highly flexible base number to work with.

The 1200px Grid System is based on the 960 Grid System of Nathan Smith.

Determining the Grid’s Complexity

Within the 1200px grid, we need to decide how may columns we will use to form the core language of our grid system. We need enough columns so that we still have a usable grid at the very smallest device sizes but too many columns can over complicate things and be counter productive.

For the purpose of this article, we will choose 15 columns across 1200px. This results in 60px wide columns, separated by 20px margins and capped by 10px gutters left and right.

That’s a happy compromise, which will flow out nicely as we continue to explore the grid across all the other device sizes...

Responsive Break Points

We now need to decide on what are called ‘break points’. A breakpoint is where our website will be re-styled when we change from one size range to another.

Here are some popular break point sizes.

Smart Phones (Portrait) 320px Wide (minimum)
Smart Phones (Landscape) 480px Wide
Tablets (Portrait) 720px Wide
Tablets (Landscape), Laptops, Small Monitors 960px Wide
Larger Desktops 1200px Wide (maximum)

There is an argument to say that just because desktop monitors are getting larger, users don’t necessarily experience websites at full-screen at such sizes so we need to consider these trends carefully and not over-engineer things. This is why we don’t produce breakpoint above and beyond 1200px.

The Responsive Grid

Within the breakpoints, we can simply determine the maximum number of our 60px columns that will fit into these size-ranges and this allows us to final produce a grid for each scenario.

Smart Phones (Portrait) 320px Wide (4 Columns)
Smart Phones (Landscape) 480px Wide (6 Columns)
Tablets (Portrait) 720px Wide (9 Columns)
Tablets (Landscape), Laptops, Small Monitors 960px Wide (12 Columns)
Larger Desktops 1200px Wide (15 Columns)
 

We now have 5 grids to help us plan our responsive website.

Use the grids to rapid prototype and collaborate with the client so that they can see well in advance exactly how their responsive website will play out across the devices and allow them to see the challenges that lay ahead!

Click here to view a working demo to better see how the grid adapts as you manually scale your browser up and down.

 

Related Links:

The 960px Grid System
http://960.gs/

The 12000px Grid System
http://1200px.com/

 

Pages

Free Updates

Stay informed on our latest news!

Subscribe to Free Updates feed

Tags

Archive

Latest tweets