Feedback & Support

If you have any requests, issues, or other feedback to provide on this beta, please use the links below.

• Report a problem
• Request a feature
• Provide general feedback

Releases

Release Candidate 1

• Update: WordPress version compatibility (v4.2.1)
• Optimize: Standardize code
• Optimize: Do not process excerpt content
• Optimize: Client-side libraries (Phase 1)
• Add: Set group via slb_activate()
• Add: Set group via activate_links()
• Add: slb_is_enabled filter

The post Simple Lightbox 2.4 (Beta) appeared first on Archetyped.

Last Friday, Archetyped’s new design went live. Here are some things I learned leading up to the launch.

Know When It’s Good Enough

When I started my day on Friday, there were a million things to do on the new site.

When the new site went live at the end of the day, there were a million and one things left to do.

Building a website is a task without end. In order to launch the site, I had to draw a line somewhere. I drew that line at “good enough”, but when is good enough?

“Good Enough” guidelines:

These were my guidelines of essentials that had to be done before launching the site.

• All content accessible
• Updated design broadly implemented
• No glaring display issues
• Cross-browser compatible
• Responsive — Content is easily readable on all devices
• Basic template in place

Just as important is what isn’t present in the new site’s initial release:

• No post type-specific templates — e.g. different layouts for blog posts, software, etc.
• No fancy animations, sliding menus, etc. — well, maybe just a little…
• No post metadata — tags, categories, etc.
• No search form.
• No custom lightbox theme
• No pretty 404 page.

All of these things would definitely add value to the experience, but they fall firmly in the “nice to have” bucket. In other words, while they would be nice to have, they are not important enough to delay the site’s launch.

Gain Clarity by Setting a Deadline

Each day spent working on the redesign started out with a glimmer of hope. As work progressed smoothly over the course of the day, my hopes were raised and I thought that perhaps today was the day the new site would be ready to launch.

Yet each day came to an end and the site still wasn’t launched.

On this particular Friday, I took a different tact– I set a deadline, I would launch today.

The change was immediate.

By limiting myself with a deadline, I was liberated from all the features I wanted to work on. Instead, I gained clarity on the tasks that needed to get done in order to launch the site.

There were no longer any questions about whether I should work on this feature or that functionality– decisions became black and white.

“Is this necessary to launch the site?” was the mantra of the day. If something wasn’t necessary, it got deferred, simple as that.

If you’re always at the edge of launching, do yourself a favor and set a deadline that you’re not sure you can deliver on.

Make a Roadmap, Not a Treasure Map

You might think of a redesign as a single event, but it’s not. A website evolves and changes over time– it is never truly “done”.

Websites are not buried treasure that you uncover in their full glory at the end of a long and arduous journey. As such, your plan should not look like a treasure map with a big red “X” that marks the end.

Instead, build a roadmap to plan your website’s evolution over time. Here’s an example of what a good roadmap looks like:

• Immediate: Tweaks and Fixes — Small adjustments and high-priority fixes. No new features.
• Update 1: Top-priority features & functionality — These should be limited to 2-3 features max to make sure the release is not delayed unnecessarily.
• Update 2: Next highest-priority features & functionality
• In the Distance: Plans for the future, but not scheduled or locked in. Wish list items and ideas go here.

By limiting your roadmap to just the next 1-2 updates, you free yourself from trying to keep track of an ever-growing list of tasks. It is surprisingly easy to get buried under the weight of your task list if you allow it to balloon out of control.

Resist the temptation to plan everything. If a task is still important after your next update, it will present itself again.

Here’s the roadmap for Archetyped’s next 2 releases:

Immediate: 2.0.1

• Set article width on wrapper (not child elements)
• Add author metadata (document head, feed items)
• Bring 404 template in line with the rest of the site
• Housekeeping — remove unnecessary assets

Next: 2.1.0

• Software-specific template — optimized for software content.
• Content – Add “About” and “Contact” pages
• Add mobile-optimized menu (hidden by default)

Redesigned, but not done

The new site is up, but this series lives on as long as there is work to be done on the site. Future posts will cover everything from post-launch tweaks to building completely new functionality for the site.

That said, I don’t want to be calling it “Redesigning Archetyped” forever. I suppose I should think of a new name for this series.

Related

• Redesigning Archetyped: Side Project — This post covers pretty much everything that’s new in Archetyped 2.0.
• Start from the beginning: Redesigning Archetyped

The post Redesigning Archetyped: Launch appeared first on Archetyped.

It seems like only yesterday that Simple Lightbox (SLB) 2.2.2 was set free upon the world, but 191 commits have actually taken place since v2.2.2 was released barely more than a month ago.

Simple Lightbox 2.3.0 is a big update with lots of new features and enhancements. Let’s take a look at what’s new in this release.

Activate Anywhere

You asked for it, so here it is. slb_activate() is a new template tag that allows you to activate content with SLB anywhere. Themes and plugins can now activate content that is not directly supported by SLB, such as featured images in templates or plugin-specific output.

Content activated with slb_activate() supports all of SLB’s awesome functionality you’re used to in natively-supported content areas such as:

• Intelligent link activation
• Support for WordPress attachments
• Use metadata from your site’s media library (titles, captions, descriptions, etc.)
• Support for additional content types (video, etc.) via add-ons
• Shortcode support (see next section)

Usage

slb_activate() is used like a standard WordPress template tag. Simply pass the content to slb_activate() and it will process and return the activated content.

$content = 'content with links and stuff to activate';
if ( function_exists('slb_activate') )
    $content = slb_activate($content);
echo $content;

New Shortcodes

Simple Lightbox has two new shortcodes in v2.3.0 that give you even greater control over how content is activated by SLB:

Exclude

You can now manually exclude parts of a post from being activated by SLB by using the slb_exclude shortcode. Any content between the shortcode’s opening and closing tags will not be activated by SLB.

Some text here.  Links up here will be activated normally.

{slb_exclude}Nothing between these tags will be activated by SLB{/slb_exclude}

More text here. This content will be activated normally.

Group

You can also manually group links in content using the slb_group shortcode. Grouped links are displayed in the lightbox as a slideshow.

Some text here.

{slb_group}Links between these tags will be grouped together.{/slb_group}

More text here.

By default, links grouped using the slb_group shortcode will be assigned to an automatically-generated group. If you want to assign a specific group to some links, you can use the id attribute in the shortcode. This allows you to group links in different parts of a post (or across multiple posts) together.

Some text here

{slb_group id="group-1"}Links in here will be grouped together{/slb_group}

More text here

{slb_group id="group-1"}These links will be in the same group as the ones above{/slb_group}

New Filters

Several new filters have been added to SLB 2.3.0, allowing users and developers to extend and customize SLB’s behavior.

slb_pre_process_links

Filter content before it is processed by SLB.

• Parameters
  1. $content (string) – Content to be processed by SLB.
• Return (string) – Updated content to be processed by SLB

slb_post_process_links

Filter content after it has been processed by SLB.

• Parameters
  1. $content (string) – Content processed by SLB
• Return (string) – Updated content

slb_process_link_attributes

Filter a link’s attributes before the link is saved.

• Parameters
  1. $attributes (array) – The link’s attributes (key = attribute name / value = attribute value)
• Return (array) – Updated link attributes

slb_media_item_properties

Filter the properties associated with an item activated by SLB (e.g. image properties from WordPress’ media library).

• Parameters
  1. $properties (object) – Item properties
• Return (object) – Updated item properties

slb_pre_exclude_content

Filter content before instances of the slb_exclude shortcode are processed.

• Parameters
  1. $content (string) – Content before slb_exclude shortcodes are processed.
• Return (string) – Updated content

slb_exclude_shortcodes

Exclude specific shortcodes from activation by SLB.

• Parameters
  1. $shortcodes (array) – List of shortcodes to exclude from activation.
• Return (array) – Updated list of shortcodes to exclude.

slb_group_shortcodes

Automatically group links in content generated by specific shortcodes when activated by SLB.

• Parameters
  1. $shortcodes (array) – List of shortcodes to group automatically.
• Return (array) – Updated list of shortcodes to group.

Bye-Bye Default Title

When you upload images to WordPress’ media library, WordPress will automatically generate values for the required metadata fields if you do not set values for these fields yourself.

One of the required fields is the image’s title field. By default, WordPress uses the image’s file name when automatically-generating a title. This has been a point of confusion for some users who think the image’s file name is being displayed in the lightbox, when in fact SLB is using the title from the media library.

You now can control whether to display the default WordPress-generated title using the “Enable default title” option in SLB’s settings. When this option is disabled, the default WordPress-generated title will not be displayed and the title will instead be blank in the lightbox.

Faster Client-Side Loading

Optimized versions of Simple Lightbox’s JavaScript files are used to improve client-side loading. By removing unnecessary white space, SLB’s client-side footprint is reduced by nearly 60%.

Of course, development versions are still included if you want to peruse the code or load them instead of the optimized production files.

Ready for the Future

WordPress 3.9 is coming and SLB is ready for it. SLB has been tested against the beta versions of WordPress’ upcoming update to make sure that SLB continues to run perfectly when the WordPress 3.9 is officially released.

Clean & Polish

Aside from that, SLB’s code has been cleaned and polished to make SLB run faster and smoother. SLB was already fast and now it’s faster.

A Big Update, The Next One Has Already Begun

SLB 2.3.0 was a big update with a lot of new features and optimizations. Now that 2.3.0 is out the door, work can continue on the next update.

Yep, you read that right, work on SLB 2.4 is already underway and it’s going to make SLB even faster and more robust.

For your reference, here’s the full list of changes in SLB 2.3.0:

• Update: WordPress 3.9 support
• Update: Support URI, content
• Add: Enhanced grouping support
• Add: Shortcode: slb_group
• Add: Shortcode: slb_exclude
• Add: Filter: slb_pre_process_links
• Add: Filter: slb_post_process_links
• Add: Filter: slb_process_link_attributes
• Add: Filter: slb_media_item_properties
• Add: Filter: slb_pre_exclude_content
• Add: Filter: slb_exclude_shortcodes
• Add: Filter: slb_group_shortcodes
• Add: Template Tag: slb_activate() – Manually activate content
• Add: Option to enable/disable usage of WordPress-generated media title
• Add: Dev mode
• Add: Theme breakpoints
• Optimize: Remove deprecated code
• Optimize: Remove deprecated legacy support
• Optimize: Content exclusion performance
• Optimize: Content grouping performance
• Optimize: Harden code against third-party post query modifications
• Optimize: Utility code
• Optimize: Loading process
• Optimize: Client-side code
• Optimize: Client-side: Code loading
• Optimize: Client-side: Simplified dependency detection
• Optimize: Client-side: Default Theme transitions
• Optimize: Grunt: Cleanup
• Optimize: Grunt: Path abstraction
• Optimize: Grunt: Task loading
• Optimize: Grunt: Selective file compilation

Related

• Simple Lightbox — The only lightbox custom-built specifically for WordPress.

The post What’s New in Simple Lightbox 2.3.0 appeared first on Archetyped.

The selection of task managers is vast. I know, I’ve tried them all.

The tool I use is Checkvist.

Who is it for?

If you have things to do, then Checkvist can work for you. Everyone from startups to soccer moms can benefit from a good task manager.

Here are just a few of the things you can use Checkvist for:

• Software development
• Design projects
• Project management
• Travel planning
• Film production
• Business development
• Meeting agendas

Task Management vs Project Management

A task manager focuses primarily on your tasks– a to-do list, if you will– whereas a project manager usually includes task management, but also provides additional tools for communication, collaboration, and visualizing a project’s current state.

While Checkvist includes some collaboration functionality, everything is centered around your tasks.

Full list of tasks

That said, you can definitely manage large projects with Checkvist depending on your needs and workflow. I manage dozens of projects with Checkvist, including those requiring collaboration with others.

Let’s look at what makes Checkvist so much better than the other task managers out there:

Dive Right In

No project setup, team members, contact information, milestones, or due dates. In Checkvist, you just create a new list:

New list

You can immediately start adding tasks to your new list:

Tasks added to new list

There’s nothing to slow you down in Checkvist. Everything is very simple and straightforward.

Keyboard Driven

It’s rarely necessary to take your fingers off the keyboard when using Checkvist.

When you name a new list and hit enter, a new text field is ready and waiting for your first task.

Adding first task

Add your first task and hit enter. A new text field for your next task appears below it.

Adding another task

Creating a subtask is just as simple. Just hit tab in the text field and the field is shifted to the right and is now a subtask of the task directly above it.

Shift task to subtask

Navigate and select tasks using your keyboard’s arrow keys. If the task you want is far away, using the mouse is also an option.

Selecting a task

Just hit enter to create a new task under the selected task.

Inserting a new task

When you’ve completed a task, select it and hit space.

Complete a task

Type tt to bring up the UI to tag tasks for even more refined organization.

Tagging UI

You get the idea– your fingers stay on the keys 99% of the time in Checkvist, keeping you from wasting time reaching for the mouse every time you want to make a change to your list.

Unlimited Nesting

Breaking a big task down into smaller chunks is a great way to make it more manageable. Checkvist allows you to break your tasks down to the atomic level if that’s what you want.

Nested tasks

I don’t know how deep my subtasks go, but at least I know I won’t be limited by Checkvist. Unlimited nesting makes Checkvist flexible enough for any project.

Task Focus

Nesting tasks is great, but when you’re 10 levels deep in subtasks, it can be difficult to focus on a specific task.

Busy list

Thankfully Checkvist has your back with hoisting. Just select a subtask and hit Shift → to display only the selected task and its subtasks.

Focused subtask

Your list has not been modified, just your view has. Hit Shift ← to once again view the full list of tasks.

Flexible View Modes

When you’ve completed a lot of tasks, things can start to look a bit messy.

Lots of completed tasks

Just type hc to toggle the visibility of completed tasks to make it easier to focus on the remaining tasks.

Hide completed tasks

Collaboration

Whether you’re planning a vacation with your family or working on a project with a large team, Checkvist’s sharing feature makes it easy to collaborate with others.

Sharing lists

Send collaborators an invitation (via email or link) to access one of your lists. They can then work on the list by adding, removing, and (most importantly) completing tasks.

Import & Export

Tasks can be imported in a variety of formats, making moving your tasks over to Checkvist relatively painless.

Fully nested lists can be imported and the tasks can also be nested under the currently-selected task in a list.

Import tasks

Tasks Imported

Of course, task can also be exported in a variety of formats for integration with other tool and for backup purposes.

Export list

The Holy Grail?

Checkvist is the best task manager I’ve found for my needs and workflow. It helps me organize my tasks without getting in the way so that I can focus on the work.

Of course, there are definitely some features I would love to see, which I’ll be detailing in an upcoming series of posts.

I’d definitely recommend giving Checkvist a look. It is likely to become a tool you use.

Related

• Checkvist — The most streamlined task manager around. Feed it your tasks and watch it go.

The post Tools I Use: Checkvist appeared first on Archetyped.

Case in point: I’ve been so deep in Archetyped’s redesign that things were starting to blend together.

I was losing focus.

So I put this site’s redesign on pause and started working on something that would let me look at this project with fresh eyes.

That’s right another redesign.

The difference was that the scope of this side project was much smaller and more straightforward. Really, it was more of a refresh than a full redesign. At least that was the idea…

In the end, a 2-day project turned into a 5-day project, but the result is a fairly dramatic visual transformation that I’m very happy to have out in the wild: Suggestion of Motion

New Design

Old Design

Having an updated site is nice, but the benefits didn’t stop there. In fact, the side-project’s biggest benefit was its impact on Archetyped’s redesign.

A Prototype for Archetyped

Suggestion of Motion’s previous design was not nearly as old as Archetyped’s, having been most recently redesigned in 2012. That said, it was in need of some sprucing up to accommodate the evolving direction of the site.

However, Suggestion of Motion’s focus on photos and videos is completely different from Archetyped’s focus on code and web design– how does this side project give me any perspective on Archetyped’s redesign?

While not everything in Suggestion of Motion’s redesign will transfer over to Archetyped, it does share several features planned for this site.

Using Suggestion of Motion’s new design, here is a preview of some of the things you can expect to see in Archetyped’s upcoming redesign:

Focus on Content

Sidebars have been banished on Suggestion of Motion.

Unless the goal of a page is to send users away to another page, sidebars have no place on a website. Sidebars only serve to distract visitors from the primary content on a page. Sidebars contain secondary content, but it’s placed side-by-side with the primary content!

Wonder why your bounce rate is so high? It’s because you’re sending visitors away with a more interesting link in the sidebar!

That’s not to say that secondary content has no place on a page, just that it should take a secondary position. In most cases, this means that content usually found in the sidebar will show up below the primary content.

Likewise, post metadata will be…somewhere. Details like publication date and tags do have value, but just like on Suggestion of Motion, these things will be absent in the initial release of Archetyped’s redesign.

While useful, metadata is simply not important enough to delay release. This is one of the things I had to get perspective on by switching to a side project– I was digging deeper and deeper into the minutiae of Archetyped’s redesign. If I kept going, who knows when the redesign would ship?

More Visual

Suggestion of Motion is focused on stories told through photography and video, so a highly visual design makes sense.

While it might not be evident at first glance, an emphasis on visuals also makes sense for Archetyped’s more technical slant.

Visuals help to set the tone of the content regardless of the context. Though code may make frequent appearances, you are still telling a story. Visuals can help tell that story more effectively by setting the stage for the mindset a reader should have.

As a result, visuals will play a larger role in Archetyped’s upcoming design.

No Comments

Suggestion of Motion has no comments and soon, neither will Archetyped.

Encouraging healthy discussion is very important– it builds a sense of community and helps good ideas grow into great ones.

I’ve enjoyed the discussion we’ve had on this site, but I’m just not so sure that standard WordPress comments are the best way to facilitate discussion.

Discussions on this site’s content are already being held all over the web, so I prefer to let that continue as organically as possible. Attempting to box the discussion in to a single website limits the reach an idea can have.

In the future, I may look into tools like Disqus to aggregate discussions from across the web to help users more easily join in the conversation after reading a post. For the moment though, I’m using Twitter’s web intents to make it simple for visitors to share their thoughts on a post.

Step Out of the Shadows

Looking at Suggestion of Motion and Archetyped side by side, you can clearly see a stark difference.

Suggestion of Motion has always been light and bright, while Archetyped has been dark and stark.

Archetyped is coming into the light. It is no longer my “underground lab” and the redesign reflects that. A brighter appearance is more inviting, while improved white space gives users room to breath and improves readability.

Responsive

A responsive design is far overdue. Using Suggestion of Motion as the model, I was able to suss out the ideal breakpoints to provide the best experience for various devices and screen sizes.

Archetyped’s content will soon look great on any device as well.

Coming Soon to a Screen Near You

By focusing on a side-project with a smaller scope, I was able to get perspective on the big picture. Content and audience differ, but the structure and standards developed for Suggestion of Motion are just as useful on more involved sites like Archetyped.

Though there was some time lost on Archetyped’s redesign, it was completely worth the wait as this structure is useful for Archetyped and for future projects as well.

The next step is merging the new structure into Archetyped’s redesign. From there I can make adjustments to better fit this site and get an initial release out the door!

Related

• Suggestion of Motion — My photography and filmmaking-focused site.
• Twitter Web Intents — Make sharing content easier with customized Twitter links.
• Disqus — A socially-aware commenting plugin for websites.
• Redesigning Archetyped: Overview — Read about this site’s redesign from the beginning.

The post Redesigning Archetyped: Side Project appeared first on Archetyped.

Increase Customer Engagement with a Lightbox

The WooCommerce Extension brings the simplicity and power of Simple Lightbox to your WooCommerce product pages.

Product image links are automatically displayed in a lightbox directly on the page when clicked without any manual code or modifications required.

Now your product page designs can be clean and inviting, while also increasing customers engagement by allowing customers to view high-resolution product images without ever leaving the page.

Features

• Automatically enable Simple Lightbox in WooCommerce Product content areas. No manual coding required:
  • Product Image galleries.
  • Product Short Descriptions.
  • Product Full Descriptions.
• Mobile-Optimized Lightbox displays product images beautifully on any device.
• Easy Navigation between the product images in the lightbox with the mouse or keyboard.
• Instant Slideshows from all image links on a product page, or separate slideshows for each content area.
• Full support for features added by other extensions, such as the Video Extension.

Easy as 1-2-3

1. Get the WooCommerce Extension for Simple Lightbox.
2. Install & activate extension.
   • Note: Extension is installed like any other WordPress plugin.
3. Done! Enjoy your automatically lightbox-enabled WooCommerce shop!

Requirements

• WordPress: 5.4+ (download)
• Simple Lightbox 2.8+ (download)
• WooCommerce 3+ (WooCommerce 4+ is recommended) (download)

Get the SLB WooCommerce Extension $18 $10.80

The post Simple Lightbox: WooCommerce Extension appeared first on Archetyped.

For a support request to be effective though, it needs to be complete, and this is where the process can fall apart. Without a complete report, you cannot properly evaluate– much less resolve– a user’s issue.

This tutorial will show you how to use GitHub’s API to guide users through creating complete support requests that contain exactly what you need to evaluate and resolve their issue.

The Problem: Incomplete Support Requests

One of my favorite tools for managing user support requests is GitHub’s Issues feature, primarily because it’s so simple and straightforward. If someone can send an email, they can submit a support request to you on GitHub.

Blank New Issue Form

In some ways though, GitHub’s issue submission form can be too simple. The form is a blank canvas, making it difficult for a user to know what information is required to get the help they need.

You could provide instructions for users in your project’s wiki or on your website before sending users to GitHub. For example, all of my GitHub projects have a “Reporting Issues” page in the wiki to help users submit complete support requests.

Support Request Instructions

The problem is that some users might not see those instructions (or take the time to read them) before reaching the issue submission form, which brings us back to our original predicament– incomplete support requests.

The Solution: Guided Support Requests

What you need is a way to guide users through making a complete support request directly on the issue submission page.

This does two very important things:

1. Prompts users to provide the information you need to effectively evaluate their issue.
2. Creates a standardized structure for support requests that will help you to evaluate a user’s problem more efficiently.

For example, prefixing the title with “Issue:” would make it clear that the user is reporting a problem. Even better, automatically populating the report’s body with prompts for the user would allow them to simply fill in the blanks to provide the details you need.

Pre-filled New Issue Form

Sounds awesome, right? Too bad GitHub’s submission form isn’t customizable.

Except, it is.

GitHub API to the Rescue

Using GitHub’s API, you can create a customized issue submission form to guide users through the support request.

In truth, you won’t actually be using the API to do this– all you really need is the API documentation.

GitHub Issues API documentation

The magic is that the same parameters used to work with issues via GitHub’s API can be used directly on the issue submission page itself allowing you to create a link that customizes the form the user sees when submitting a new support request.

Step 1: Get the Base URL

First you need the base URL for your project’s issue submission form. This is the form’s URL for the GitHub project used throughout this tutorial:

https://github.com/archetyped/winning-user-support/issues/new

Step 2: Add a Title Prefix

Now we’ll customize the form’s title by prefixing it with “Issue: ” so that it’s clear what kind of report the user is submitting.

To do this, we add the aptly-named title parameter to the base URL:

https://github.com/archetyped/winning-user-support/issues/new?title=Issue%3A%20

Now when a user clicks your custom link, the title field will automatically contain your prefix.

New Issue Form with pre-filled title

Step 3: Add a Report Template

Next we’ll add a template to the form’s body to prompt the user to provide specific details about their problem. Here are some basic details that you may want from a user for a web-based application:

• Description of problem
• URL of page exhibiting the problem
• Web Browser(s) that exhibit the problem
• The version of your software that they are using

GitHub’s issues use Markdown, allowing you to create a nicely formatted template for support requests:

## Description of issue

## URL of page exhibiting the issue

## Web Browser(s) that exhibit the issue

## Installed Software Version

Encode your template and add it to the submission form using the body parameter:

https://github.com/archetyped/winning-user-support/issues/new?title=Issue%3A%20&body=%23%23%20Description%20of%20issue%0A%0A%0A%23%23%20URL%20of%20page%20exhibiting%20the%20issue%0A%0A%0A%23%23%20Web%20Browser(s)%20that%20exhibit%20the%20issue%0A%0A%0A%23%23%20Installed%20Software%20Version%0A%0A

Now when a user clicks your custom link, the form will contain your template and all they have to do is fill in the blanks:

Pre-filled New Issue Form

Step 4: Distribute Custom Link

Finally, update any links that direct the user to your GitHub project for making support requests (e.g. on your website, in your project’s wiki, etc.) with your customized URL that will guide users through the submission process.

Bonus: Infinite Possibilities!

Using URL parameters to customize the issue submission form is even better than being able to edit the page directly because it gives you so much more flexibility. By modifying the parameters in the URL, you can use GitHub’s issue reporting functionality for much more than just support requests!

For example:

• Feature Request
• Question
• General Comment

What uses can you find for GitHub’s issue reporting? Share your templates on with us!

Target Acquired

Everybody wins with guided support requests. Users will get their issues resolved faster because they provide the necessary information from the start and you will have a nicely structured support request that is quick and easy to evaluate.

Of course, the key is making sure you ask the right questions in the customized form so that you actually get the details you need to properly evaluate their issue. Fortunately, you can always update your custom links to refine the template if necessary.

Your Turn

What questions do you ask users to get useful support requests? Tweet your suggestions so we can can improve the user support experience together!

Related

• Winning User Support on GitHub — An ever-growing repository of resources for improving the user support experience.
• Support request instructions example — Useful support request instructions for users…if they ever read it.
• GitHub’s Issue API reference — Unlock the full potential of GitHub’s issue reporting functionality.
• URL Encoder/Decoder — The URL encoder used for the examples in this tutorial.

The post Laser-Guided User Support with GitHub appeared first on Archetyped.

First of all, don’t worry– we’ve all been there.

Secondly, troubleshooting a problem on your WordPress site is pretty simple and straightforward. This step-by-step guide will transform you into a WordPress troubleshooting ninja that can quickly pinpoint the root of a problem on your site and remove it with exacting precision.

Ninja training begins now.

The Goal: Identify the Conflict

More often than not, when your WordPress site is not working properly after switching themes or updating plugins, it is due to a conflict. There are so many different themes and plugins available for WordPress that sometimes one component will have a compatibility conflict with another.

Therefore, the main goal when troubleshooting a problem on your WordPress site is identifying the conflict.

Some examples of conflicts on a WordPress site are:

• Outdated theme or plugin that uses code no longer compatible with the current version of WordPress.
• Naughty theme or plugin that does things that are discouraged on a WordPress site.
• Incompatible theme or plugin that conflicts with another component (theme or plugin) on the site.

Thankfully, regardless of the reason for the conflict, the same 4 steps can be used to identify the conflict.

Step 1: Start with a Clean Slate

Before you can do anything else, you need to make sure your WordPress site works properly without any third-party components such as themes or plugins.

1.1: Switch to a Default Theme

First, temporarily switch your theme to one of the default themes that come with WordPress such as Twenty-Fourteen.

1. Log in to your site’s WordPress admin.
2. Go to Appearance > Themes
3. Activate the Twenty-Fourteen theme.

1.2: Disable Plugins

Next, we need to temporarily deactivate the site’s plugins.

1. While still in your site’s admin, go to Plugins.
2. Select all plugins in the list.
   Ninja tip: Select all plugins at once by clicking the checkbox in the top row of the plugins list.
3. From the Bulk Actions menu, select Deactivate and click Apply.

1.3: Confirm Functionality

With your site back to its default state, any conflicts caused by third-party components should no longer be present.

Browse through your site to confirm that the problem is no longer occurring.

Once you have WordPress working properly in its default state, you can continue following this guide if you are still experiencing a problem.

Step 2: Test the Theme

Now that you have confirmed that the site works properly in its default state, it’s time to test the third-party components, starting with your custom theme.

1. In the site’s admin, go to Appearance > Themes
2. Reactivate your custom theme.
3. View the site to see if the problem has returned.

Step 3: Reactivate Plugins

With the custom theme in the clear, we now move on checking plugins for conflicts.

1. Activate the Twenty-Fourteen theme to return the site back to a default state (see step 1.1).
2. Go to Plugins.
3. Activate a single plugin (any plugin).
4. View the site to see if the problem has returned.
5. If the site works properly, repeat until all plugins have been activated.

Step 4: Test Theme with Plugins

So far you have confirmed that:

1. The custom theme works.
2. All plugins work.

The final step is to confirm that there are no conflicts between the custom theme and the plugins.

1. With all plugins activated, activate your custom theme (see step 2).
2. View the site to see if the problem has returned.

If the issue has returned, then you have a conflict between your theme and at least one plugin.

1. With the custom theme still active, deactivate all plugins (see step 1.2).
2. Activate plugins one-by-one (see step 3) to identify which plugin is conflicting with your custom theme.

Troubleshooting Ninja

Identifying the conflict is the most important thing you can do when you experience a problem on your WordPress site. Armed with this information, you know exactly what component needs to be disabled and who to contact to get the issue resolved.

You are a noob no longer– you are now a WordPress Troubleshooting Ninja who can find the root of any issue on your site now and in the future. Sweet.

Share the Guide

A ninja does not hoard knowledge. Share this guide so that others can join the ranks of troubleshooting ninja as well!

You can also send me a tweet if you have any questions or comments.

The post Become a WordPress Troubleshooting Ninja appeared first on Archetyped.

Resources

Thanks for participating in the beta testing. If you have any questions, issues, or requests, please submit them via the link below:

Feedback & Support

Releases

Beta 3

Download

• Add: Grouping support
• Add: [slb_group] shortcode
• Add: [slb_exclude] shortcode
• Add: Filter: pre_process_links
• Add: Filter: post_process_links
• Add: Filter: pre_exclude_content
• Add: Filter: exclude_shortcodes
• Add: Filter: group_shortcodes
• Update: WordPress 3.9 support
• Optimize: Remove deprecated legacy support
• Optimize: Content exclusion performance
• Optimize: Content grouping performance
• Optimize: Utility methods
• Optimize: Harden code against third-party post query modifications

Beta 2

Download

• Add: Manual link activation template tag (slb_activate())
• Add: Option to enable/disable usage of WordPress-generated media title
• Add: Filter: Link attributes (slb_process_link_attributes)
• Add: Filter: Media properties (slb_media_item_properties)
• Add: Filter: Support link text (slb_admin_plugin_row_meta_support)
• Optimize: Client-side object detection
• Optimize: Remove deprecated code
• Optimize: Loading process
• Update: Support URI, content

Beta 1

Download

• Add: Production versions of client-side code (JS)
• Add: Dev mode
• Add: Theme breakpoints
• Optimize: Simplified client-side dependency detection
• Optimize: JS standardization
• Optimize: JS:Admin
• Optimize: JS:Image Handler
• Optimize: JS:Template Tags (UI, Item)
• Optimize: Default Theme transitions
• Optimize: Grunt cleanup
• Optimize: Grunt path abstraction
• Optimize: Grunt task loading
• Optimize: Grunt selective file compilation

The post SLB 2.3 (Beta) appeared first on Archetyped.

In fact, one of the things I’m learning from redesigning Archetyped is that you might actually want to get out of Photoshop and into the browser even sooner than you think.

A Case for Browser-Centric Design

Why design in the browser? The main reason is that browser-centric design will save you time. Vast changes to the design can be made with a single line of HTML or CSS instead of furiously clicking around in Photoshop duplicating layer groups, changing background colors, selecting different fonts, repositioning layers, etc.

The browser is also where your design will be viewed by the world. You could tweak layers and transfer modes in Photoshop all day long, but it’s just a facade– there are just some things you won’t realize until you see the design in its natural environment– the browser.

The tools are now available to effectively design in the browser. It just makes sense to start using the browser as early in the design process as possible.

Okay, enough validation, let’s dive in. In the spirit of working faster, I’m going to give you the perfect foundation to jump-start your transition into browser-centric design (BCD).

Start with a Strong Foundation

Remember learning to write an essay in grade school? I’d wager that the first thing you learned was the structure of an essay:

• Introduction
• Body
• Conclusion

Web pages are very similar to essays in that they have the same basic structure:

• Header (Introduction)
• Main Content (Body)
• Footer (Conclusion)

Let’s look at that in HTML:

<header>
    <!-- Header content -->
</header>
<main>
    <!-- Main content -->
</main>
<footer>
    <!-- Footer content -->
</footer>

Never before have we had HTML markup as straightforward as in HTML5. With tags like <header>, <main>, and <footer>, the HTML is basically self-explanitory. Look at the comments in the HTML if you have any questions.

To effectively design in the browser as smoothly as possible, we need to start with a good structure as the foundation of our page:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Page Title</title>
</head>
<body>
    <header>
        <!-- Header content -->
        <a class="site-title" href="#">
            <h1>Site Title</h1>
        </a>
        <nav class="pri">
            <!-- Primary Navigation -->
        </nav>
    </header>
    <main>
        <!-- Main content -->
    </main>
    <footer>
        <!-- Footer content -->
    </footer>
</body>
</html>

The page’s title and primary navigation have been added to the header section, but otherwise it’s exactly the same as the first example.

Happy Content

Though the header and footer will generally stay the same on all of a site’s pages, the main content will vary from page to page.

This HTML structure makes it easy to build templates for the different types of pages on your site (single posts, archives, etc.) because now you only need to focus on what goes inside the <main> element.

This will be even more useful when you convert the HTML into a WordPress theme. A future post will discuss how to save a massive amount of time building templates for WordPress using structured HTML like this.

Stylin’

This simple structure is perfect for styling with CSS as well. By using meaningful tags like <header> and <footer> instead of <div> tags, we can easily target the primary sections of the page.

/* Header styles */
body > header { }

/* Main Content styles */
main { }

/* Footer styles */
body > footer { }

The body > header and body > footer selectors target only the top-level <header> and <footer> elements so the elements don’t need attributes (ID, class names, etc.) that would only add noise to the HTML.

Also, as there can only be one <main> element on a page, the selector is incredibly simple.

Simple HTML = Simple CSS.

No ID, No Problem

You may notice that some elements, such as the page’s primary navigation, do have addtional attributes.

<nav class="pri">
    <!-- Primary Navigation -->
</nav>

A class name is added to these elements for flexibility. While there should only be one top-level <header> and <footer> element in a page, there may be multiple navigation elements in the header (secondary navigation, etc.).

By adding the pri (as in primary) class to this nav element, we can easily target and style the page’s primary navigation in the header:

/* Primary Navigation styles */
body > header > nav.pri { }

But then, why use a class name when we could give the element an ID and target it directly?

<!-- Using ID attribute instead of class attribute -->
<nav id="nav-pri">
    <!-- Primary Navigation -->
</nav>

Targeting this element in CSS would be straightforward:

/* Primary Navigation (using ID selector) */
#nav-pri { }

In a word: flexibility.

IDs can only be used once per page, so all style rules set using the #nav-pri selector can only affect a single element on the page.

By Contrast, a class name can be added to multiple elements on a page. Therefore, using a class name allows you to set baseline styles common to all primary navigation elements on the page.

/* Baseline primary navigation styles */
nav.pri { }

Targeting specific navigation elements on the page is also possible by using selectors with more specificity.

/* Primary Navigation in header */
body > header > nav.pri { }

Of course, you can also an ID attribute in addition to a class name.

<nav id="nav-pri" class="pri">
    <!-- Primary Navigation -->
</nav>

This would allow you to augment the baseline styles for a specific element regardless of its position on the page.

/* Baseline primary navigation styles */
nav.pri { }

/* Specific navigation element */
#nav-pri { }

However, with a good document structure the results are the same in both examples, making the ID attribute unnecessary and redundant.

I’m on board, what’s next?

Now that you have a strong foundation for BCD, it’s time bring in the design! In the next post we’ll use CSS to transfer our design from Photoshop to an actual web page.

Resources

• HTML5 Doctor — The latest and greatest iteration of HTML makes great strides toward a semantic (meaningful) internet. Check out this site for tutorials and articles on how you can add meaning to your site’s content through code.
• The <main> element — There can be only one! (and that’s a good thing)
• Redesigning Archetyped — Archetyped is being redesigned from the ground-up. Read about the design from the beginning.

The post Browser-Centric Design appeared first on Archetyped.