On 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/

On 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!

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

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.

Post 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 – Post Page :: a simplified version of the one in the admin

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 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

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

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

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 – drop down 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 sidebar like above

not greyed out but post editor fades in after decision

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

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/

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.

First I think it’s important for you to understand a little bit about me to help you understand where I’m coming from on this. I’m an idealist. Always have been. I think that I can have my cake and eat it too, without preventing anyone else from doing the same.

I’m also a capitalist. I have no problem with people making money. I encourage people to! Making money isn’t a bad thing, although I do think there are methods of making money which are.

So there you have it. I’m a strange blend. I’m an Idealistic Capitalist.

The idealist in me loves the Internet. It has brought with it freedoms that never existed before and brought opportunities to people that never had them before. Almost ten years ago a good friend of mine, James Pearson, went to Nepal and worked with Mahabir Pun and the Nepal Wireless Project to bring the Internet to places that didn’t have it. I encourage you to read their story, but to sum it up they hiked through the Himalayas putting up antennas to relay a wireless network out to small villages. The benefit to the schools in the area was enormous. Can you imagine having access to the information on the internet when previously you were a day or more walk from the nearest city? Think about how that increased the quality of education! Think about how they could leverage that to actually fund their school and get supplies they needed! This is the Internet I love. This is the Internet I want to protect.

The thing about that whole story is that the truly transformative part, the inspiring part, was all about the users. It’s the people in the villages, the teachers, the students. These are the people the GPL tries so hard to protect and empower, and this is why I love the GPL so much.

The GPL focuses on protecting users instead of creators and often times to the detriment of the creators. I’m a creator and I’m okay with that. I’m willing to work harder, put in some extra hours, and go the extra mile, to make sure that the Internet I love continues to grow and thrive.

I’m thrilled that I was able to give my third talk at WordCamp Phoenix! I’ve grown to love Chandler and WCPHX over the years and all the amazing talented speakers. My talk is titled:

“Designer vs Developer – Creators in WordPress”

This talk will explore myths & preconceptions about roles.. When we push these boundaries, we can achieve greater things. If you understand what you’re trying to accomplish both technically and visually, you will have fantastic a outcome.

We’ll touch on “crossover”(golden unicorn) topics such as UI, UX, trusting instincts, user testing, wire framing, information architecture, front end structure, and form.

WordPress is a great place to put this into practice: as its a perfect environment for leaning php,css, but also its surrounding community support helps us achieve greatness.

I’ll post up the video whenever it’s ready.

“Be the Unicorn”
cheers, sara

• Autosave – Better auto saving, including making use of local storage, so we never lose anything ever again.
• Better diffs – when viewing the differences between post revisions, give something more user friendly (words changed, prettier output, etc)
• Post locking – current post locking is really just a notice that someone else is editing the post. We’d like to see an actual lockout with a “click to takeover” option, as well as an indicator in the posts list which posts are currently locked
• Better post format UI in admin – So users can better tell what post formats do/what they’re for
• Twenty Thirteen – The new default theme, which will hopefully highlight the functionality of post formats
• Editorial flow – Allow post updates to be submitted for review

Currently everything in still in flux and some things might get cut, re-prioritized, or added, but this is already shaping up to be an amazing release!

Presentations:

• Sara Cannon at Future Insights Live – slides
• Sara Cannon in WCSF 2011 – video / slides

Grid frameworks:

• A List Apart: Fluid Grids by Ethan Marcotte.
• Less Framework 4 – an “Adaptive CSS grid system”.
• Columnal – “A responsive CSS grid system helping desktop and mobile browsers play nicely together.
• The 1140 CSS Grid – “12 columns fluid down to mobile size screens”
• The Skeleton Theme – “A Beautiful Boilerplate for Responsive, Mobile-Friendly Development”.
• Foundation “the most advanced responsive front-end framework in the world.”

Responsive Images:

• Filament Group: Responsive Images: Experimenting with Context-Aware Image Sizing by Scott Jehl
• Adaptive Images – “Deliver small images to small devices”.
• ViewPortIndustries: Automatic Responsive Images In WordPress by Keir Whitaker
• Unstoppable Robot Ninja: Fluid Images by Ethan Marcotte

Responsive Video/Text/Slideshows:

• .net Magazine: Create fluid width Videos by Chris Coyier
• Fitvids.js – “a light-weight, easy-to-use jQuery plugin for fluid width video embeds”.
• WooThemes Flexslider – “an awesome, fully responsive jQuery slider plugin”.
• FitText – “a jQuery plugin for inflating web type”.

Retina/HiDPI screens:

• RetinaJS.com – “Retina graphics for your website. retina.js is an open source script that makes it easy to serve high-resolution images to devices with retina displays”

Media Queries & Responsive Web Design in general:

• css3-mediaqueries.js – “a JavaScript library to make IE 5+, Firefox 1+ and Safari 2 transparently parse, test and apply CSS3 Media Queries.”
• A List Apart: Responsive Web Design by Ethan Marcotte
• Smashing Magazine: Responsive Web Design Techniques, Tools and Design Strategies by Smashing Editorial
• Zomigi: Essential Considerations for Crafting Quality Media Queries by Zoe Mickley Gillenwater
• Palantir: Scalable Navigation Patterns in Responsive Web Design by Michael Mesker
• Design Shack: Sass and Media Queries: What You Can and Can’t Do by Joshua Johnson

Inspiration:

• Mediaqueri.es – a curated showcase of responsive websites. List of all sites featured.

Tools:

• Responsive.is – “display and present responsive web designs”
• icanhaz.responsiv.es – a tool for testing responsive web designs as you’re developing them

Books:

• Code Poet’s “WordPress Meets Responsive Design“ - Learn how three WP pros use media queries and fluid images and grids to create responsive WordPress sites. (featuring Sara Cannon!)
• A Book Apart’s “Responsive Web Design” by Ethan Marcotte

If you have more resource that you think we should add to this list: let us know in the comments! cheers and happy responsive-ing!

The Parallax

I have always / loved / parallax / sites.  I dreamed of finding a client who the story-telling aspect would be perfect for. Its almost like directing a video. You write it like a script and play it out: the graphical and storyline interactions. The code part of this comes later. Thinking about the story you have to tell is the best place to start.

As for the code: we used Richard Shephard’s JS / CSS on Github as our desktop parallax base. It looks great! But what about mobile? I pulled out all the tiny tablet-y devices and to my surprise the parallax kinda worked – but it had one major flaw: it was slow and choppy and needed to simmer down and become sleek and sexy like the desktop.

Luckily for us* we were already using _s for our theme base with foundation to help with the responsive bits. Minus the parallax sludge, mobile was already in a good place with some tweaking (like un-sticking the sticky navigation, etc). Now the question is being begged:

How do we disable and modify the parallax to speed up the site on mobile and tablets?

Enter Jetpack by Automattic! They have a nifty mobile detection system built right in that we can utilize. We leveraged it to disable the parallax JavaScript and load in an extra CSS file when tablet or mobile is detected. In that stylesheet we were able to load in smaller compiled versions of multiple background images, and utilize media queries to adjust them at different sizes.

Utilizing Jetpack:

function range_is_mobile_or_tablet() {
	if ( class_exists( 'Jetpack_User_Agent_Info' ) ) {
		$ua_info = new Jetpack_User_Agent_Info();
		return ( jetpack_is_mobile() || $ua_info->is_tablet() );
	}
	return false;
}

Disabling js and loading in the CSS:

if ( ! range_is_mobile_or_tablet() )
	wp_enqueue_script( 'parallax', get_template_directory_uri() . '/js/parallax.js', array( 'jquery' ), '20121114' );
else
	wp_enqueue_style( 'tabletmobilecss', get_template_directory_uri() . "/parallaxdisabled.css", array( 'style' ), '3.1.4' );

Now that the css is loading in , we can begin to start the tedious finagling and image resizing process until perfection is achieved. But what is the secret to the sauce? We can also use that handy function range_is_mobile_or_tablet() to target our php in our theme files if we so desired.

You’re now thinking: “WHAT? REALLY? MODIFY THE THEME FILES BUT IM SO USED TO RESPONSIVE DESIGN WHERE YOU JUST SHIFT THINGS AROUND OR HIDE THINGS!”

I’m glad you had a little freak out there because I did too when I realized that I had ALL THE POWER TO MODIFY ANYTHING. But caution: power can be dangerous and evil (like if you put in so many conditionals on content that you can’t keep up with modifications). Use sparingly.

*actually this was planned because we’re genius