How to adjust a MailPoet Newsletter layout to align left

Newsletter Layout align: left - Illustration: T.Bortels/cpu20.com

After the last MailPoet update has now shot my beautifully modified newsletter template, I see myself compelled to document the adjustments i made, so that I do not have to look for them again once the next update comes along

But first from the beginning.

I use the WordPress plugin MailPoet to send newsletters. Or rather: some of my customers use MailPoet as a newsletter tool – and I help them with it.

Of course, you want your newsletter to match the design of your website. But sometimes this is not so easy. While web design has come a long way in the last years, newsletter design is still on the level of the late late nineties. Or maybe of the early 2000s. Or whatever. Anyways. Images, tables and some CSS instructions is basically all you have when you want to style a newsletter. Everything else is not really reliable. So it’s all the more helpful if you can use a tool that makes your work at least easier. After all, the editors should take care of the text and the compilation of the newsletter – the design is predefined in templates.

This works quite well so far. But now there was the following problem: For one of my customers the layout should be left-aligned, because the website is also left-aligned. Unfortunately, it seems to have become common that the layout of newsletters is centered. At least in MailPoet. What to do? Of course, adjust the template accordingly. Unfortunately, this is not so easy in MailPoet. You can edit, export and import templates – but the part that is responsible for the orientation of the layout is located outside the template. No matter how much you edit the freshly exported JSON file – the layout remains centered.

Tthis is due to the renderer, through which each template must pass before the newsletter is actually sent. Looking at the source code of any email that is sent by MailPoet you’ll see that every element exists only inside a table – and every TD element of this table has the property align=”center”. And the rederer does just that: stacks every part of the newsletter into that predefined table. So we’ll have to look at the renderer a little bit closer.

The renderer consists of several HTML templates inside MailPoet’s plugin directory. At this point we are specifically interested in the file Template.html. It can be found at the following location:

wp-content > plugins > mailpoet > lib > Newsletter > Renderer > Template.html

Here you have to change align=”center” to align=”left”. I changed this in all three places where this occurs – probably the first place in line 97 is enough:

Before:

<td align="center" class="mailpoet-wrapper" valign="top">

After:

<td align="left" class="mailpoet-wrapper" valign="top">

And that is just that. Done.

(Parts of this article are translated with the free version of www.deepL.com/translator.)

Center any Element in Under Construction Page

Leave a reply

I use the WordPresss plugin Under Construction Page a lot. And I mean A LOT! It’s basically one of the plugins I istall first, whenever i start a new WordPress project.

One thing that seems to bother many people is that “it is not possible to center pictures that are not 100% width” – well – guess what: it actually is possible. And it only takes 2-3-4 lines of CSS, depending on how you count:

.ucp-module {
    margin: 0 auto !important;
    float:none;
}

You simply add these lines of CSS to the field “Custom CSS” under “Page Properties” aaand Bam! Magic! Or actually ‘just’ the magic of CSS. Hope this helps? Cheers!

WooCommerce: Category-Filter (Dropdown)

Leave a reply

With the Besic-Installtion of WooCommerce you have a filter, that may be interesting for programmera – but aftr my honest opinion it’s not veryuseful for clients and shop keepers. You can sort products by price or by popularity – but running a small shop this functionality is not really helpful.

Instead i would love to have a filter that filters products by category. From a client’s point of view: I don’t care how cheap or expensive or popular a product is – i just want to see all products from category X. But it seems in WooCommerce there is no such filter, no such functionality built in. So we will have to add some code…

How to remove the WooCommerce standard filters dropdown

First of all I want to deactivate the standard filters. I could do this with a few lines of CSS, but of course I ‘really’ want to deactivate those filters. So I’ll have to add some code to the function.php – and this is how and what:

remove_action( ‘woocommerce_before_shop_loop’, ‘woocommerce_catalog_ordering’, 30 );

Just add this one line of code to your functions.php – and the drop down will disappear. In case you are using the free WooCommerce theme Storefront, you will have to add also these lines of code, which i found over at Business Bloomer.com :

/**
* @snippet Remove "Default Sorting" Dropdown @ StoreFront Shop & Archive Pages
* @how-to Watch tutorial @ https://businessbloomer.com/?p=19055
* @source https://businessbloomer.com/?p=401
* @author Rodolfo Melogli
* @compatible Woo 3.5.2
* @donate $9 https://businessbloomer.com/bloomer-armada/
*/

add_action( 'init', 'bbloomer_delay_remove' );

function bbloomer_delay_remove() {
remove_action( 'woocommerce_after_shop_loop', 'woocommerce_catalog_ordering', 10 );
remove_action( 'woocommerce_before_shop_loop', 'woocommerce_catalog_ordering', 10 );
}

Well. The standard sorting dropdown should be gone by now.

Now for the category dropdown.

Over at remicorson.com (“WooCommerce: Create a shortcode to display product categories“) you’ll find a script, that will ‘almost’ fit our purpose. Almost. Somehow the developer mixed ID and CLASS – or maybe it’s rather a problem related to some update of WooCommerce or WordPress – but the script won’t work out of the box. But it’s rather easy to fix this little bug. First here’s the original script from remicorson.com –>

/**
* WooCommerce Extra Feature
* --------------------------
*
* Register a shortcode that creates a product categories dropdown list
*
* Use: [product_categories_dropdown orderby="title" count="0" hierarchical="0"]
*
*/
add_shortcode( 'product_categories_dropdown', 'woo_product_categories_dropdown' );
 
function woo_product_categories_dropdown( $atts ) {
 
extract(shortcode_atts(array(
'count' => '0',
'hierarchical' => '0',
'orderby' => ''
), $atts));
 
ob_start();
 
$c = $count;
$h = $hierarchical;
$o = ( isset( $orderby ) && $orderby != '' ) ? $orderby : 'order';
 
// Stuck with this until a fix for http://core.trac.wordpress.org/ticket/13258
woocommerce_product_dropdown_categories( $c, $h, 0, $o );
 
?>
<script type='text/javascript'>
/* <![CDATA[ */
var product_cat_dropdown = document.getElementById("dropdown_product_cat");
function onProductCatChange() {
if ( product_cat_dropdown.options[product_cat_dropdown.selectedIndex].value !=='' ) {
location.href = "<?php echo home_url(); ?>/?product_cat="+product_cat_dropdown.options[product_cat_dropdown.selectedIndex].value;
}
}
product_cat_dropdown.onchange = onProductCatChange;
/* ]]> */
</script>
<?php
 
return ob_get_clean();
 
}

The only problem wit this script is, that it is looking for an element with the ID “dropdown_product_cat” g– which does not exist. Bt there is actually an element with the CLASS “dropdown_product_cat”. So I basically just modified the script a little bit – and now it is looking for an element with the CLASS “dropdown_product_cat”. And this looks like that:

/////
/**
* WooCommerce Extra Feature
* --------------------------
*
* Register a shortcode that creates a product categories dropdown list
*
* Use: [product_categories_dropdown orderby="title" count="0" hierarchical="0"]
*/
add_shortcode( 'product_categories_dropdown', 'woo_product_categories_dropdown' );
function woo_product_categories_dropdown( $atts ) {
extract( shortcode_atts(array(
'count' => '0',
'hierarchical' => '0',
'orderby' => ''
), $atts ) );
ob_start();

// Stuck with this until a fix for http://core.trac.wordpress.org/ticket/13258
wc_product_dropdown_categories( array(
'orderby' => ! empty( $orderby ) ? $orderby : 'order',
'hierarchical' => $hierarchical,
'show_uncategorized' => 0,
'show_counts' => $count,
'show_count' => 0, 
) );
?>
<script type='text/javascript'>
/* <![CDATA[ */
jQuery(function(){
var product_cat_dropdown = jQuery(".dropdown_product_cat");
function onProductCatChange() {
if ( product_cat_dropdown.val() !=='' ) {
location.href = "<?php echo esc_url( home_url() ); ?>/?product_cat=" +product_cat_dropdown.val();
}
}
product_cat_dropdown.change( onProductCatChange );
});
/* ]]> */
</script>
<?php
return ob_get_clean();
}

Of course also this Code Snippet has to go into the functions.php of your current theme to be recognized by WordPress – or into an active plugin – otherwise it just won’t work.

Once the snippet is placed inside the functions.php, you can proceed to implement the dropdown menu by placing a shortcode inside a template file.

I placed the shortcode inside the WooCommerce template “archive-product.php” which is responsible for displaying the categorie pages. I actually copied the template file to the directory “theme/woocommerce/archive-product.php” so that the next WooCommerce update won’r override the changes i made. The implementation of the shortcode looks like this::

echo do_shortcode('[product_categories_dropdown orderby="title" count="0" hierarchical="0"]');

I hope this may help somebody in the future? Cheers!

How to change a link href with jQuery

WordPress Navigation - screenshot T.Bortels/cpu20.com

Leave a reply

Recently I had to dig a bit deeper into ways and options on how to change a link href dynamically with jQuery. It’s not really the most beautiful thing one can do, but it can help sometimes to solve problems you never expected to be problems in the first place. The situation was like this: a client of mine had bought and installed a premium WordPress theme already quite some time ago. But it turned out there were some SEO issues to be solved. What was wrong? The theme basically utilizes one navigation in admin, but two navigations in front end – or actually two slightly different iterations of that one navigation: one for wide screens / desktop screens and one for mobile use. The only difference seemed to be the div classes used. So far so good. So why would I now need to change a link with jQuery?

By default the theme handled the main navigation / top navigation items – the ones that are visible on default as anchors. The actual linked navigation items are solely found in the subnavigation. Why? Obviously the theme author tried to make the theme mobile friendly, but didn’t bother to go the extra mile. In detail: on hover the main navigation items reveal their respective subnavigation items. For this to work on touch devices (that have no hover in that respect) the main navigation items must be clicked. Now if the main navigation items were fully functioning links, the mobile website visitor would never have a chance to actually click any of the subnavigation items, because the top navigation would fire the link before the subnavigation was even visible.

For me this basically implied two different problems: the top navigation items were reduced to anchor links making them useless for search engines – and since the top navigation items often consist of powerful keywords, this can be considered as a wasted SEO opportunity. On the other hand dead links (or anchor links, that don’t do anything else than reveal subnavigation items) can be considered bad UX – at least on desktop. The user sees the supposedly important top navigation items – but clicking them doesn’t really have any impact other than revealing the second level navigation.

Changing a link dynamically – jQuery to the rescue

So what we did is add links to the main navigation and then change them to anchors for the mobile iteration. And with a few lines of jQuery this was rather easy to accomplish.

Working on the solution, another oddity appeared. Usually you would look for the link either by an id or a class and then point the jQuery script at that exact link. In this case the surrounding divs had no distinct id. Actually neither the links nor the surrounding div containers were equipped with any kind of distinct id or class. So we used the link (href) itself instead to identify the link that needed to be changed. Here’s the script that worked for us:

jQuery(".sf-mobile-menu a[href='/about-us/']").attr('href', '#');

For every link we need one line.

If we had distinct identifiers on the surrounding div containers, instead we could have also looked for the first link inside the parent element as described on this forum post at stackexchange:

jQuery('.sf-mobile-menu #content_1 li:first a').attr('href', '#');

if you have more than one link you want to change you could also automate this in a jQuery loop:

$('.content').each( function() {   
    $(this).find('li:first a').attr('href', '#'); 
});

or like this:

$('.content').each( function() {   
    $(this).find('li a').first().attr('href'); 
});

Alternatively we could also use a wordpress function to loop through the navigation and then apply the jQuery to each element – but I guess the jQuery loop will do the job just fine.

Responsiveness: make jQuery change links for specific screen width

In case there is actually only one navigation you could also add something I would call a jQuery listener – a snippet that listens to css classes – as pointed out in this article “Firing Responsive jQuery Functions based on CSS Media Queries Rather than Window Width” over at Fourfront’s Blog. This is basically the perfect use case for this method since we want to change the links for the mobile navigation – so we know already what element we want to listen to. We only need to fire the jQuery when the mobile navigation is visible.

function checkSize(){
    if (jQuery("#az-header.h-classic .az-menu-trigger").css("visibility") == "visible" ){
        /* your code */ 
    }
}

Hope this helps.

What is Dedicated Virtual Server Hosting?

What is Dedicated Virtual Server Hosting? – Photo 'New servers' CC BY-SA 2.0 by Dominic Hargreaves

Leave a reply

Renting a web server can appear to be difficult – at least making the decision, what server to rent. First you will probably have to decide, what ‘size’ the server should be – and what kind. Do you want to rent a Virtual Server or a Dedicated Server? And what does this even mean? I was recently asked, what Dedicated Virtual Server Hosting is. My first reaction: Wow! Dedicated Virtual Server Hosting? Sounds great – but – wait a minute…

To me the term Dedicated Virtual Server Hosting really sounds great – sounds promising – but as far as I’m concerned it is a mixture of Dedicated Server Hosting and Virtual Server Hosting. You can not really have both at the same time. Or can you?

Virtual Private Server – What is Virtual Server Hosting?

Some hosting providers offer hosting on Virtual Private Servers. Some providers may call this tpe of hosting Cloud Server, others call it Virtual Dedicated Server Hosting. How does this work?

Basically a software manages a web server across a network of different machines – a server cluster – or a server could. Renting a Virtual Private Server you can basically expect guaranteed memory (RAM) and disk space (web space). That RAM memory and disk storage is then handled by the server cloud. However, it is often not clear how the actual processor requests are handled, since you are not renting an actual physical machine. And for some this may be an argument against renting a virtual server.

What is Dedicated Server Hosting?

Also here the term dedicated tells a lot about what to expect. I would like to sum it up like this: the server is dedicated – to you and your web projects. You are renting a web server – and in this case this means you are renting an actual machine.

Renting a Dedicated Server comes with a price – but it has quite many advantages over renting a Virtual Server. First of all: performance. A dedicated server will always perform better, than a a shared server. Period.

And then there are a couple of features and options and possibilities, that may vary, depending on the service provider you chose. Some may offer shell access, other my provide you with protocols that would let you use your server as a cloud hard drive. With a dedicated server there are are virtually endless options.

Dedicated vs. Virtual Server Hosting

Basically these are the two most common, most popular types of hosting: you can either rent a Dedicated Server or a Virtual Server. So what are the differences? What are the advantages? And what are the disadvantages?

A Virtual Server Account is basically more powerful and often faster than most Shared Server Accounts, yet cheaper than a Dedicated Server. In most cases a Dedicated Server will however be faster than a Virtual Server, since the processor is all yours. Also chances are that you have more options to configure if you are on your own server, if it’s a physical machine. However, that additional speed and flexibility comes with a price.

I hope I could spread some light on this not so important, yet interesting little detail. Please feel free to add your thoughts and questions in the comments below. Thank you!

WordPress: How to change string translations without a plugin

WordPress: How to change string translations without a plugin - Photo / screenshot: T.Bortels/cpu20.com

Leave a reply

Often a WordPress installation comes with a variety of different languages you can select from. And with every language you get a language file, that is basically containing the various translated strings. Most of those string translations are rather ok – but you may still want to change some of those string translations. You could of course install a plugin for that – basically WMPL or Loco Translate would let you alter those translated strings – but that may often be just a bit too much, if you just want to adjust a single string. So – here is a quite guide on how to change string translation without a plugin.

In my case I wanted to change the translation of some strings in a WooCommerce powered website: we needed to have “objects” instead of “products” because that shop is basically not selling products – but objects. So instead of related products we needed to have the string say related objects.

change strings without a plugin

To accomplish this, you basically just need to add the following lines of code to the file functions.php of your theme or child theme:

function gb_change_cart_string($translated_text, $text, $domain) {
    $translated_text = str_replace(“related products”, “related objects”, $translated_text);
    return $translated_text; 
} 

add_filter(‘gettext’, ‘gb_change_cart_string’, 100, 3);

In the above code the function gb_change_cart_string will hook into the function gettext and return the altered string. So instead of related products the website will show the string related objects. And actually the website does not have to be translated – this solution will also work even if you don’t use any translation – if you are working with the standard English installation. A simple solution that just works. In most cases.

How to: Google Image Search on iPhone

How to: Google Image Search on iPhone - Photo / montage T.Bortels/cpu20.com

Leave a reply

Google Image Search is great for finding images of all kinds – it just works well. And of course Google Image Search works also pretty well on an iPhone. But people seem to miss that they can use Google Image Search on an iPhone almost just as they use it in a regular desktopn browser. That’s why I compiled this short How to: Google Image Search on iPhone.

First you obviously need to open your browser – in my case that’s Safari – the default browser on the iPhone. Then you simply enter what you are looking for in the URL bar – this will forward your search request by default to google.

Just above the top search results you will find a couple links: ALL, MAPS, NEWS and IMAGES. Click on IMAGES and you will be forwarded to the the Google Image Search results page.

On the Google Image Search results page you can either start browsing the images, or refine your search for alternative results. Also Google Image Search suggests various filters to refine your search results. You can focus on the latest results by clicking “latest” or reduce the results to only show clip art or gifs. And then there are often also a few popular search terms listed that could help you to narrow down the amount of images. Once you have refined your search query you can start scrolling down– and down… and most likely even further down.

How to save Images from Google Image Search on iPhone

Once you find the image you were looking for you can either load the high resolution version of the picture (if there is any) or even save the image to your iPhone for later use. You may for example look for a portrait of one of your contacts to add it to your address book – of send an image via imessage or email to one of your contacts.

To save images from Google Image Search all you have to do is first open the image by clicking in the search results, then click on the three dots you find on the right side just below the image. Next you choose “View original image” and last but not least click the image, hold your click for a moment and choose “Save image”.

How to save Images from Google Image Search on iPhone

Save Images from Google Image Search on iPhone – Screenshots / montage T.Bortels/cpu20.com

The image will then appear in the photos collection on your iPhone for later use. Instead you could also click on “Copy” and then paste it in whatever app you want to paste it in.

Reverse Google Image Search on iPhone

Instead of searching for images, you may want to search by image. The so called reverse image search lets you search by image via Google. As far as I know this is a feature or actually an extension on Android phones – but on iPhone / iOS this is not yet supported. Instead you will have to install a small app that will do the trick. The iOS App Search by Image Extension is supposed to do exactly this. I haven’ tried it myself so at the moment I can neither confirm nor recommend this. But it might be worth a try.

How to remove images from Google image search

Let’s define Content Marketing and what it means to you and your business

Define Content Marketing - screeshot/montage T.Bortels/cpu20.com

Leave a reply

Is this going to be yet another definition of what Content Marketing actually is? Not quite so. There are indeed enough websites out there that try to define Content Marketing. But do these definitions really help to understand, what Content Marketing is? And what it means to you and your business? It very well depends a lot on the actual situation, on the audience – on you and your business, what Content Marketing can mean – and what it can do for you. That is at least what I recently found out when discussing with a client, how her website ranking could be improved.

Her situation was like this: she had a pretty good looking, compact website, describing her business. She’s in the coaching business, so competition is high. But she had enough returning clients – so her company is actually doing fairly well even without new clients. However – new clients are always good for business.

There were two ways how she gained new clients: either through recommendation by happy clients, or through her website. Since competition in the coaching sector is quite high and her business’ website is rather compact, she found herself spending a three digit number for online advertisement on a monthly basis. So far so good.

One day we were talking about how she found new clients, and how difficult finding new clients sometimes can be. She mentioned that she basically didn’t like the idea of paying for advertisement. She would herself never click any ads online – and she found that the clicks she paid for didn’t actually convert into new clients. So she began wondering if there were different online marketing approaches available, than going down the rather expensive road of online advertisement.

I know my client – and I know me – and I know that throwing buzzwords around doesn’t really help, unless you know what they actually mean. Sometimes you have to define things first, before you can actually talk about them. You need some common ground. So we basically went down the long road and started analyzing, what could be done, what should be achieved, and what each of us could do to actually get there, to ‘improve’ the website – or actually to improve the website’s performance.

We first had to write down some goals to figure out, what we were actually hoping for and what “improvement’ meant to us. This was quite straight forward: she wanted to gain more clients. In other terms: more visitors that would turn into customers – the ‘findability’ and the conversion rate had to be improved.

When thinking about ways how to get more visitors to a website, the first thing that may pop up may be Search Engine Optimization or short SEO. We had talked about Search Engine Optimization before – but looking at her website I knew I had do dig a bit deeper than simply pointing out “SEO will do the trick!“. Remember: only things that are there can actually be found. So we also had to talk about content and content creation. In the good old days we used to say “Content is King!” – and so I did. She knew exactly, what I was talking about – and agreed. Yes, of course – only Content can do the trick! But what did I actually mean? Was this already basically the underlying concept of Content Marketing? Was it that easy? What if everybody already knew, what Content Marketing was, but was confused by the buzzword itself? So maybe it would be a good idea, if everybody would first try to define Content Marketing for herself, and then see, if this DIY definition was not too far off of the more established definitions? This route looked promising – so we gave it a try…

Introduction to Content Marketing

First things first: What is content? You probably have a website – so you probably have at least some kind of content online. Be it a blog, a catalog, the story of your business or simply an ‘about us’ page – it’s content. And the reason you have that content online is probably that you want to present your services, your products, your company, your story to the world. Maybe you just want to find new clients online, maybe you’re offering some online service, or maybe you are presenting some precious information about a technical device that nobody in the world can manufacture as precise as you can. Maybe you’re not even sure what the actual goal of your online presentation is – no matter what: if you have a website online, you have content online.

Define Content Marketing for yourself

Marketing on the other hand is basically the art of making people aware that you, your company, your service and/or your product actually exist. You may think you are not actually into marking, since you are not actively trying to find new clients. Maybe your clients actually do come to you and you don’t have to spend anything on advertisement – but chances are, you are still doing marketing. You’re handing out business cards? That’s marketing. And Online Marketing is doing marketing on the internet.

There are different marketing channels. Advertisement is one. Content Marketing is basicaly marketing with or through content – making people aware that you, your company and/or your product exist through content. And content can be what ever content is for you – be it messages, stories, images, video clips or whatever you’d like to put in the ‘content’ box. So let me allow this wild guess: you are presenting content online and by doing this you are already doing Content Marketing. Welcome to the jungle.

How do people find your website?

Just like in the offline world, on the internet things can only be found if they are there. Websites can only be found, if they have at least some content – content can only be found, if it are actually exists. Many people seem to think that having a website would be enough – like putting up a fast food booth booth next to a busy motorway. But online basically every booth is right next to the busy motorway. Actually the motorway only exists because there are so many booths. So maybe this image is misleading.

There are basically only two ways how your precious content can be found: either you pay for advertisement, or your website is found for its content. Both options require at least some investment. You either need to spend some money for paying ads, or spend some time for producing content. In most cases you will need to invest both time and money.

Conclusion: So what is Content Marketing really all about?

In the past months or even years Content Marketing has become a buzzword – and a promise. Can this promise be kept? I don’t know. You decide. At least there are many promising definitions out there – some of them written by marketing experts, some by SEO experts, others by advertisement agencies. Reading some of those definitions I sometime get the feeling, Content Marketing is one of those trains nobody wants to miss. But what is Content Marketing really all about? Is it a magic trick that will drive drive hords of customers to your website? It sure has the potential.

I suppose everybody has to find out for themselves, has to define content marketing for their very own use case. You are publishing an “about us” page? That can be content marketing. You are handing out business cards? That is advertisement. You upload a video on YouTube or Vimeo? That is probably Content Marketing.

Just uploading a video or publishing a few lines of text will however not bring masses of visitors and/or potential clients to your website – it takes a bit more – for example some basic SEO activities. In my honest opinion Search Engine Optimization (SEO) is the art of doing things right.

Let your content work for you – Content Marketing done right

If your content IS your product, then things may be different – then you could define Content Marketing as marketing for your content. But in most other cases Content Marketing is doing marketing with content.

People are searching the internet – and they do it a lot – all the time. People are looking for answers, for information, for products, for services – and for entertainment. Offering an answer to one of those questions can be the missing link between you and your potential customer. Should your content be informative or entertaining? In this article I can’t really go that far, so that’s something you will have to find out yourself. And if you find yourself lost or stuck, you can of course hire somebody to take a closer look at your situation. You may not need to hire a Content Marketing Expert or a Content Marketing Agency – sometimes somebody with a fresh pair of eyes like your web designer, your webmaster or somebody else with at least basic SEO knowledge and a feel for your content can help seeing the obvious.

Just one last argument for Web Content Marketing, Search Engine Optimization and Search Engine Marketing: the experience of finding something you are actually looking for is in most cases perceived way more positive than the experience of being talked or tricked into something. Which brings me to another buzzword I won’t discuss in this article: User Experience (UX). So if content is king, let your website be the kingdom that people are eager to visit.

PS: Yes, Content Marketing can be considered Inbound Marketing, while Growth Hacking is probably more technical. But let’s define Growth Hacking and Inbound Marketing another time…

So what do you think? How would you define Content Marketing? Got a different approach? Please feel free to leave a comment below… Thank you!

Task Management with Things – How to do To Do’s the right way

Leave a reply

I have been using the handy little helper app Things for quite a while now, both on my Mac OS computer and on my iPhone to manage all the little things I need to do. First I was simply looking for an efficient way to organize tasks. Of course I also wanted to synchronize the tasks with my iPhone from the very beginning – so it had to be an app that had both: a desktop client and an iOS app. I was checking on different reviews of task management apps – Things caught my eye. So I invested a few Euro and a few moments later I downloaded and installed the program on MacBook and iPhone.

For a couple of years I used Things on a daily basis – and it was indeed quite useful indeed. I added To Do’s as I liked – and I got some things done. Things was helpful. But somehow I was always just a bit too lazy to go the extra mile and read the handbook – or at least some introduction. I found the program useful the way I used it – and the interface appeared to be very intuitive. So instead of using the software the way it was meant to be used, I used it the way I thought it was useful. And that was not actually not very effective.

How did I actually use it? Well – I basically only used it as a simple task list. For every new task / To Do I added a separate entry to the list – no matter if the thing I added was a simple task like “call the janitor” or a complex project like “Relaunch Website XY”.

To become a bit more effective in getting things done I actually added everything to the “Today” list. Good plan, I first hought. So I found myself with a looong list of things I had to get done – sometimes that list would consist of hundreds of different tasks. The task manager was close to being un-managable. Not very effective. Just writing down the words describing how I used to use the program actually kind of hurts today: Always! All the Tasks! In one list! No wonder that I never really felt satisfied with my results – I never really had the feeling that I got anything done. The list would just sit there and either be slightly longer, or slightly shorter. Finally I realized I had to change the way I used the program – change the way I managed my tasks.

When purchasing the program I already knew it was designed around the ideas of “Getting Things Done” – an action and time management method based and a book by David Allen. So I should actually get all the tasks out of my mind – out of my way. But instead I was facing a list that felt like a wall. I realized for too long time I was too lazy to work on a way of making things easier for me.

Finally I took the time to have a closer look at the various features built into Things. And finally I came to the conclusion: I had missed a sea of options that could have saved me a lot of time and stress in the past. So what did I change – did do I use Things today? Well – it’s not that complicated. I just use it as it is probably meant to be used.

Good for Productivy AND Motivation: How to use Things the right way

A project is a project – and not just a task

Every project can consist of many different that need to get done before a project is completed. In other words: in Things a project can have as many tasks as you like. Rule of thumb: every task that needs more than 20 minutes to complete could be / should be split into two tasks. Whether you follow this rule of thumb or not is up to you – but don’t try to stuff everything into one task. This way you will also build some kind of documentation of all the little things you actually needed to do to get the project completed. Very handy.

When all tasks are completed, the project can be closed – or marked as “done”. The project will then disappear from the project list – but it will still be available from the archives / logbook for later reference.

Work on continuing and/or recurring tasks inisde the “Area of Responsibility” list

For continuing and/or recurring tasks that may feel like projects, but actually are not projects, there is another section in Things: Area of Responsibility. An Area of Responsibility can be something like “Office” or Home” or “Car” or something the like. An Area of Responsibility can by nature not be “done” like a project. But you can add again as many tasks / to do’s as you like.

I have to admit it took me some time to understand the difference between a Project and an Area of Responsibility. Once you’re over that things (and Things) may become much easier to handle.

When to get things done? Today, Next, Scheduled, Someday…?

It is recommended to only add as many tasks to “today” that you actually can get done on that very day. But of course I still tend to add too many tasks to basically every single day, leaving behind a virsual trail of tasks that are constantly moved from one day to another.

However I also do manage to add tasks to either specific days / dates – or to the more blurry sections Next and Someday. All of those sections do make sense – and there is no need to fear you would lose your tasks somewhere in time and space. You’ll just have to click on the Project or the Area of Responsibility – and – voilà – all the tasks are listed.

I hope this short “review” may be helpful for somebody some day. I can just again recommend to actually use Things (or any other time / task management software) and start getting organized. It may help you in the long run. A lot.

How to fix Masonry Offset caused by Webfonts loading slow

Leave a reply

No doubt: the jquery plugin Masonry can be a nice website feature – if it works as intended. It can be a pain in the neck if it doesn’t. The most common problem with Masonry is probably slow loading images. This problem can be caused by either large, heavy images that need some time to load – or a slow internet connection on the client side. This problem is well known, well documented – and there is a fix for this: you just need to implement one additional script imagesLoaded that checks if the images are already loaded, or not.

The other not so common, not so well documented problem can arise from the use of Webfonts. The problem is not as obvious – but anyways annoying. Sometimes a single Masonry item is off the grid – depending on your layout you may not even see you have a problem in the first place. The offset may also only occur occasionally which makes it even more difficult to track.

What is causing the Masonry item offset?

All that Masonry does is basically measure the size of each item (or element or box) in the grid and then calculate its position according to the settings and preferences you defined. In most cases this works pretty smooth. But in case there are slow loading Webfonts used inside the grid items, Masonry may first calculate the positions wrongly. Or actually it is first calculating the positions correctly, but once the Webfonts are loaded, some text like a headline might be using less space. This may lead to line breaks disappearing after Masonry finished calculated all the positions – hence the offset.

So as I said before – the problem can be difficult to track. You may actually never see the problem, if all the wefonts used are already present in your browser’s cache. And even then it can happen that your texts are behaving nicely because there are no line breaks disappearing. But then someday you change one of the text or add a new one and all of a sudden the grid looks wonky.

The ‘bug’ is probably most obvious when you’re working with a couple of same height testboxes – and only one has a text that adds a single disappearing line break. A single textbox may then be positioned a few pixels lower than the others. Sometimes also the order of the items can get mixed. Elements that should align to the left are suddenly floating to the right side of the grid – an invisible element seems to be in the way. Sheer chaos breaks loose.

Anyways. Just like with slow loading images there is a fix / a script for slow loading Webfonts: webfontloader. The script was released by Google in cooperation with typekit and you are free to use it. You basically just have to load the script either through Google’s distribution platform, or install it locally on your webserver. Once the script is in position you will have to wrap some lines of Javascript around your Masonry code. This makes sure that Masonry is only fired when all the webfonts defined are present.

First make sure webfontloader / webfont.js is loaded:

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js'></script>

Then wrap your masonry code with the webfont load check:

// check if all webfonts have loaded
WebFont.load({
    custom: {
      families: ['RobotoCondensedRegular','RobotoCondensedItalic', 'RobotoCondensedBold' ]
    },
active: function() {

// check if all images have loaded
var $grid = $('.grid').imagesLoaded( function() {
// init Masonry
  $grid.masonry({
    // use outer width of grid-sizer for columnWidth
    columnWidth: '.grid-sizer',
    // do not use .grid-sizer in layout
    itemSelector: '.grid-item',
    originLeft: true,
    percentPosition: true
  });
});

}

});

Check the project page over at github for further details:
https://github.com/typekit/webfontloader