Photography is important for your website Photography and high quality graphics can make or break a new design

camera

Redesigning a website requires investment. As a consultant, we invest our time digging deep to get to know our clients, their history, their business model, and generally what drives them. As a business, you invest your time and human resources to work with us, and you invest your hard earned revenues in our partnership.

But it’s also important to consider investment in other items that often go with a new website: investments such as branding, photography, and video.

When we create a new website, we are looking to frame a story. Your business has a story, and our goal is to find it and help you tell it with beautiful design. And photography is a key part of telling great stories.

Tell stories with photography and illustration

For example, when Range worked with Disney Publishing Worldwide, their beautiful graphics and illustrations for their books help tell their story. Children of all ages get lost in the wonderful world of Disney through their stories, and the Disney Books website helps give a glimpse into that world through the illustrated book covers and other graphics displayed on the website.
disney-books

Or, when Range Creative Director Sara Cannon worked on the Jones Valley Teaching Farm website, she was able to work with Kelly Housholder and Cary Norton, a brilliant photographer, to capture stories from Jones Valley that help tell their story as an educator for students about healthy eating and sustainable community development.
jones-valley

Photography converts

Photography also has another big advantage in a website: it converts well. By saying it “converts”, I mean that photography helps convince website visitors to do what you ask them to do. You may ask them to click a button, or buy something, or fill out a form. Good photography, especially of people, helps convince visitors to take such actions.

37Signals did a fascinating case study to test this. They saw over a 100% increase in signups for one of their products by using photography in their sales pitch — specifically photography of people.
photography-helps-37signals

Barack Obama’s digital team was also famous for A/B testing various designs for improving conversions. And they had excellent success. As Kyle Rush notes in one of his case studies, they increased conversions by 49% between two versions of their donation page.
obama-before-after

And Rush cites photography as a huge factor in the testing’s success. But not just photograhy, but specific kinds of photography. In a separate article he highlights how the context of imagery can play a huge role.

Photography was a huge part of the Obama brand. We had several photographers that took lots of amazing photos of the President, the First Lady and everyone else. We took advantage of this by testing a ton of images. We tested photos just about everywhere from donate pages to sign up forms and about everywhere else you can imagine. As with layout and usability we learned a lot about how users react to different kinds of imagery. We found that there are many variables in photos that can affect conversions, but possibly the biggest impact had to do with the context in which the photo was used.

splash-page-obama

Photography isn’t an afterthought

I hope that these examples help highlight how photography and imagery should not be an afterthought in our web projects. Photography is an important part of your overall investment in your brand. And it helps us, as web designers, better serve you when you have great photos.

So, in your next web project, remember the importance of photography for the overall project success. Of course, in case you are scared about how to go about this, we know a lot of excellent photographers who can help you get great photos so we can better help you tell your story.

Ranger Brian Krogsgard

bk-range

Hey y’all. My name is Brian Krogsgard, and I’m happy to be joining Range as a Junior Partner. I’m looking forward to working with the outstanding team here.

I’ve followed Range since its inception, and I’ve always loved their mentality that a small company could do big things.

So, who am I?

I graduated from Auburn University with an Industrial Engineering degree, and for a few years web development was purely a hobby for me. My first job was as a technical sales engineer in the manufacturing industry, where I got my feet wet learning the value of effectively managing customer relationships and complex projects from start to finish.

But eventually I made the leap and turned my web development hobby into my career. Today, I bring experience building websites large and small across a variety of industries. I specialize in theme and light plugin development.

I also keep a keen eye on what’s happening in the WordPress community. I run a WordPress news blog called Post Status, which helps me learn more about my craft, share what I learn, and get to know many wonderful people that make the WordPress ecosystem great.

I’m based out of Birmingham, Alabama, where I live with my wife, Erica, and our blue Great Dane, Lucy May. I organize the Birmingham WordPress Meetup Group and co-organize WordCamp Birmingham.

At Range, I’ll wear many hats, just like Sara, Pete, and Aaron. My skill set compliments theirs nicely, and I really look forward to learning from them and bringing my best efforts to the table.

Disney Books relaunches on WordPress

Disney Publishing Worldwide

disney-books-iphone
Disney Publishing Worldwide has relaunched it’s books site, books.disney.com, on WordPress. When Disney came to us, we were excited, but it was clear that the biggest struggle was going to be the timeline. They wanted to build an all new books.disney.com on WordPress, and they needed it in less than a month. It was a tall order, but we pulled it off. From concept, to wireframing, design, development, and launch, Range put in a team effort to design and build the new books.disney.com.

In order to keep such a tight timeline, we knew wireframes needed to be done in less than a week, and the design needed to be finished just a week after that. Sara Cannon stepped up to the plate to lead the wireframes and design, and kept the schedule right on track. The design is also responsive, so it looks great on every device.

The development team pulled some crazy hours for a little while there, but the end result is an amazing site that meets our client’s needs and was delivered on time. We couldn’t have done it without Disney, who was a great partner. They held up their end of the bargain to trust our instincts and give quick feedback every time we needed it.

We are proud of the end result, and we hope you like it too. Be sure to check out the site, and who knows, you may find a new book for you and your family.

Sara Cannon’s Be the Unicorn Published on Torque

Screen Shot 2013-07-23 at 5.03.11 AM

Check Out the full post on Torque at WCSF!

Be The Unicorn by Sara Cannon

What’s all this talk about Unicorns? Beautiful, sparkling, Golden Unicorns.

My beginnings in Web Design and Development surfaced out of a love for technology an art. I was an artist and print designer with a thirst for something more. Because I wanted to be relevant and engaged, I ended up diving head first into the fast moving waters of web design and development. To get things done, I hunkered down, studied, imitated, and learned. To be completely self-sustainable, you end up learning bits of everything. I strived to become a renaissance woman. I wanted to build and create, without needing to rely on others to achieve my goals.

A few years later, I was hired by a small agency that really needed a one woman show. They did not want to need to rely multiple departments and titles to get the job done.

They needed a Golden Unicorn

They wanted someone who could not only always solve the technical problems at hand, but had an eye for design and user experience. Someone who could say “yes that can happen” without hesitation and then google it right after making the promise. Since then, I decided to strive to be the unicorn.

In the industry now, there seems to be a long standing tension between designers and developers. This tension is manifested in the workplace, in social settings, but it is also within ourselves – with how we think. It is the longstanding battle of the left brain and right brain. The left side of the brain is known to be logical, analytical, and objective (hello technical directors!) while the right side is known to be intuitive, thoughtful, and subjective (creative thinkers). But the one thing both sides of our brains have in common is Problem Solving. Even though both sides are radically different, there is a common thread there. No one wants to be a code monkey or a pixel pusher. We want to solve problems, and do great work.

Check Out the rest of the Post on Torque

Pete Mall to talk about the YouTube Upload Widget Live today at 10am PDT

Screen Shot 2013-07-10 at 12.22.48 PM

Join Ran.ge and YouTube this week to find out more about our open source upload widget for WordPress. We will show you how it works and walk you through the source code for the widget itself.

Tune in to @YouTube Developers Live at 10am PDT

https://developers.google.com/live/shows/38132276-6003

 

update: check out the video of the show & demo below!

Sara Cannon to Speak in Montreal

sara-cannon-wordcamp-birmingham-copy

I can’t tell you how excited I am to be able to speak at the Montreal WordPress Developers Meetup and the Montreal Girl Geeks!


wcmtl-developer-meetup-facebook-size-179pxOn Tuesday, April 23:

The Future of UI: How Mobile Design is Shaping the Web

Web design is not an interactive brochure anymore. Smart mobile devices have forever changed the way we think and interact with websites. Now you have to consider an array of things you didn’t have to worry about before, such as HiDPI graphics, UI/UX patterns, touch target sizes, gestures, and managing expectations. All the while not losing track of what’s important: Content.

We’re going to discuss the influence of mobile on design, trends, and implementation methods, as well as how touch is changing our lives. As designers and developers, we can benefit from learning about how mobile is changing the way we interact with websites, and what that means for the future of UI. http://wpmtl.org/2013/04/montreal-wordpress-developer_meetup-april-23rd-2013/


MTLGGbarcode1-300x300On Thursday, April 25:

Font Swoon!

Times New Roman. Helvetica. Comic Sans. We’ve all got fonts we love to use or love to hate. Typography is one of those topics that’s easy to overlook, but when you bring it up, everyone has an opinion. Sara’s talk is not just for designers spending hours debating on the slant of a curly-quote or the perfect sans serif – it’s for anyone who’s ever typed, read, or even just stared at the screen or page. Because typography is essential to how we read, consume, convey, and process the written word and it’s BFF, design.

Let’s take our relationship with web typography to the next level and crush on the latest fonts, check out some awesome CSS3 implementations, and find incredible inspiration for interaction, refinement and our next dates with negative space. Come fall head over heels with us at Font Swoon! http://montrealgirlgeeks.com/2013/04/18/april-event/

If you are in Montreal, come on out – I’d love to meet you!

Join Me at WordSesh Tonight!

wordsesh

Tonight I’m going to be speaking at the first ever WordSesh online WordPress Conference! WordSesh is a day of live WordPress presentations from all over the world streamed live, and it’s free! Tune in at 4UTC 12am EST (midnight tonight!) to join me in my talk “Be the Unicorn.”

I’m really looking forward to hearing all the other awesome speakers! If you can’t make it, don’t worry, all the sessions will be recorded. #WPYall

Re-thinking WordPress Post Format UI An Exercise

post-formats-classic-modal-approach-1024x698
Post Format Modal

Post Format Modal

Post Formats are slated to drop in 3.6 and are currently in Beta. I love how WordPress is standardizing formats so that when you change your theme, the content format and metadata associated with that format is preserved. This opens up new doors and possibilities for bloggers who want a unique look without having to customize a category display.

3.5 post formats enabledPost formats are currently in WordPress 3.5 but are just in a tiny modal box to you right (if your theme has them enabled)

They don’t change the metaboxes for use with the content (aka make a “Video URL” field when selecting) but in 3.6 they will – which is exciting.

There has been lots of discussion and wireframes about the Post Formats UI and user testing… I decided to do an exercise that might address some of the pain points of the current UI’s iteration.

Researching Other similar tools

WordPress.com New Dash

Taking a look at the simplified blogging tool for WordPress.com – they deal with Post Formats right away.

WordPress.com New Dash - Screen right after you hit "New Post"

WordPress.com New Dash – Screen right after you hit “New Post”

WordPress.com New Dash - Post Page

WordPress.com New Dash – Post Page :: a simplified version of the one in the admin

WordPress.com New Dash - Screen

WordPress.com New Dash – Video Post Selected
note the customized interface just for uploading photos

Tumblr

Tumblr.com Dashboard - choose the format from the icons across before posting

Tumblr.com Dashboard – choose the format from the icons across before posting

tumblr.com Post a Video Screen

tumblr.com Post a Video Screen

The glaring similarities between WordPress.com New Dash and Tumblr is that they are 1) making a post format decision  before they get to the editor and 2) the editor is only giving them the modals and upload buttons that they need. If we think about #1 philosophically from a UX point of view – the formats are action-centric. They are not passively opening up the post editor then wondering what they are going to post – they are forced to make a decision, an action, and therefore the UI they are given is tailored to this decision making for a better UX.

Neither Tumblr or New Dash have a way of changing the post formats – which I think is good because they would lose all the data that they put in there to the custom modals. (more on this later)

Current 3.6 Iteration in Beta

WordPress.com 3.6 Beta

WordPress.com 3.6 Beta

The current iteration of the new Post-Formats UI that is now in 3.6 Beta has icons for each of the 10 formats spread across the top of the post editor. They are currently passive button-like selectors with a label to the right. Dave Martin ran some user tests on the current UI and the results were not good.

I decided to do some action-centric decision-first based UI exercises to explore some options.

Decision Based Approach – Working Within the Current Menu System

The first exercise is one based on just using the current menu system. It turns out that it *could* in theory work – but in reality there are just way too many post formats.

Action-Centric Dashboard Menu

Action-Centric Dashboard Menu

Post Page - Sub Menu

Post Page – Sub Menu

Basically in this iteration, we make the choice in the menu and then the post screen will have just what you need.

Video Post Format - note the simplified interface, the title changes to include the word "video" in it , and the labels are inside the boxes

Video Post Format – note the simplified interface, the title changes to include the word “video” in it , and the labels are inside the boxes

Changing Formats

In the above screenshot – there is a way to change formats (unlike new dash or tumblr.) It is in the publish meta box. This is a more passive-switch than an in-your-face one which is important, as someone would have to completely change their mind to use it. It also falls under the same importance as the other items in the publish meta box.

Post Format Switching

Post Format Switching

Post Format Switching - drop down option

Post Format Switching – drop down option

Post Format Switching - radio button option

Post Format Switching – radio button option

Exploring both radio buttons for switching or a drop-down – That meta box currently uses both as a standard, but I think I prefer the radio simply because the icons are visual cues.

Explorations outside of the current navigation pattern

So, seeing that the navigation above is a bit cramped - I decided to explore in-page and modal decision patterns.

In Page decision with post editor greyed out. Icons will go away and the "switching" will be in the siidebar like above

In Page decision with post editor greyed out. Icons will go away and the “switching” will be in the sidebar like above

not greyed out but post editor fades in after decision

not greyed out but post editor fades in after decision

without labels - cursor rollover changes page title

without labels – cursor rollover changes page title

While all this is interesting – I’m not sure if it feels quite right as it is outside of the typical WordPress interface, but could be explored further.

Modal Window

So our natural progression here is to try out a modal. Usually I’m not-a-fan of modals at all. They tend to be disruptive. After the new media editor launched last release, its made me re-think modals. Lightbox was so terrible and slow – but using a modal for this action kind of makes sense as you can be on any page and receive it before hitting the post editor, without another page load or coming from any add post action. (think top nav bar add new)

Post Format Modal

Post Format Modal

At this point, I am leaning towards a fast modal with a few caveats. 1) you can turn the modal off if you don’t use other formats as much and just want to use the passive switcher. 2) you can turn all post formats off from within core settings to override what your theme set. 3) you can filter list tables by format (like you do categories.) The last two I think this should be an option regardless of the approach.

However, that being said, I know we are in Beta for 3.6 and the modal window approach might be a bit out of reach for this release. If I were to have a #2 I would say the greyed out post edit UI with the larger icons. approach might be viable (after the decision is made, the icons go away, post editor fades in, and the format switching is in the publish meta box.)

In conclusion, I hope to get some conversation going and hear what everyone else thinks so that we can make WordPress amazing together.

update: if anyone else wants to tinker, here are my thrown together photoshop files etc s.sar.ac/071P0S3r2H2Q

Update 2: Mark Jaquith is asking for feedback on the Make UI Blog http://make.wordpress.org/ui/2013/04/11/saracannon-has-posted-her-take-on-a-new/

Globalnews.ca Data Migration The MSSQL to MySQL Delima

mssql

Recently Globalnews.ca made the move to WordPress and we were tasked with migrating all their data from their existing custom MSSQL-based environment to the new WordPress environment hosted with WordPress.com VIP. We have a normal process for this kind of thing, and it goes something like this:

  1. Create a local WordPress install and get rid of the default posts, comments, and meta data.
  2. Put the clients old data into tables in the same WordPress database.
  3. Write a script that pulls the data from the old tables and uses a combination of WordPress functions and direct database queries to put it into the WordPress install.
  4. Check the data and if it’s not quite right blast out the posts, comments, and meta data and go back to step 3.
  5. When the data is exactly what we want in WordPress we use wp-cli to export the data in WXR format, and submit those files to WordPress.com VIP.

It sounds pretty straight forward, and usually it is, with the most difficult part obviously being the script that imports the data from the old tables into WordPress. Not this time however. This time the most difficult part turned out to be step 2, putting the clients data into the same database as WordPress. The problem was that the conversion from MSSQL to MySQL was no trivial matter.

Often you can use MySQL Workbench to migrate data from MSSQL to MySQL, so we started by spinning up a Windows cloud server with MSSQL. We imported the data into an MSSQL database on this new server, and then we installed MySQL and the MySQL Workbench. Due to the large amount of data being converted, we ran into memory issues several times and had to resize the cloud server, but once the memory issues were under control we realized that MySQL Workbench simply could not migrate many of the tables that we needed.

After many hours of digging and research, I finally found the problem. It turns out that there were a couple data types that were causing things to choke. In our case that was mostly limited to nvarchar and ntext. Why? Well because MSSQL doesn’t actually support UTF-8. What?! I know…I was surprised too, but it seems MSSQL doesn’t support the standard in character encoding. Instead it has nvarchar and ntext that don’t store as UTF-8 but offer similar output in a classic Microsoft-proprietary way.

I was able to work around this limitation by creating duplicate tables for each table that contained one of these field types, using nvarchar in place of varchar and ntext in place of text. Then I ran queries to select the data from the old tables and insert it into these newly created tables.

CREATE TABLE [dbo].[ImportFixed](
	[RowNum] [bigint] NULL,
	[post_title] [nvarchar](200) NOT NULL, -- Previously varchar
	[content_html] [ntext] NULL -- Previously text
) ON [PRIMARY] TEXTIMAGE_ON [PRIMARY]
GO
----------------------
INSERT INTO [import].[dbo].[ImportFixed](
	[RowNum],
	[post_title],
	[content_html]
)
SELECT
	[RowNum],
	[post_title],
	[content_html]
FROM [import].[dbo].[Import]
GO

This then allowed MySQL Workbench to properly handle the encoding during it’s migration from MSSQL to MySQL. Even once the process is known it’s tedious and time consuming at best, but it seems to be very reliable and stable.