Where digital and UX are concerned, project managers deal with a number of aspects such as team resourcing, scheduling meetings, and financial planning (to name just a few tasks) on a daily basis. The role of a project manager in the digital industry isn’t too dissimilar to project managers across other industries, however it is one that is becoming increasingly valuable to businesses seeking transparency and value from their web projects.

There are too many examples to count of businesses leaping full steam ahead with a web project without considering either the timing, or the value returned from their spending; with outcomes and business performance often suffering as a result of rushing the whole approach.

It is therefore the responsibility of the UX team to be accountable for perfecting their timing and reassuring businesses that their process works. Unfortunately this is often easier said than done.

The rigid waterfall method

A company looking for shortcuts with their website may choose a freelance designer or an agency which works with a more linear waterfall method of project management, an approach with very little client/agency collaboration, or scope for iterations. In essence (as the name suggests) this waterfall method is straight down without compromise, lacking the versatility for clients to see the design or development of their site until the project has been completed.

This approach is cheap, but can be incredibly risky and potentially detrimental to business, which will have minimal input or investment throughout the process beyond the initial brief they provide.

The flexible, agile approach

The agile project management approach (otherwise known as a sprint cycle or scrum) is the preferred choice for many UX agencies and project managers nowadays. This approach allows an agency and client to work collaboratively on many things at the same time, encouraging regular communication between both parties, and short feedback loops. The beauty of this process is that the client is involved at each and every step leading up to the outcome, not just at the outcome as with the Waterfall method, therefore allowing for all parties to be proactive, not reactive.

The value of the agile project approach

Digital projects will inevitably cost more with an agency that adopts the agile project management approach, as there is a greater level of due care and attention, as well as time invested around achieving the optimum performance for websites.

It’s a good sign when designers respond by challenging the brief, and communicating about project plans. It’s better than an agency or designer that doesn’t challenge any details from an initial brief or have any plan, other than just to crack on with the website. Those agencies that do choose to challenge the brief will at least be able to deliver timescales and a budget based on actions, unlike an agency looking to dive head first into a project without properly forecasting timescales or costs.

Like most things, “a goal without a plan is just a wish” and many businesses risk outlaying greater costs and resources in the long-term by making numerous iterations to fix ongoing website issues. These iterations can often be made based on the views of internal stakeholders within a business, or assumptions driven only by unsubstantiated interpretations made from weak analysis.

The danger with this approach is, when totting up the bill of ongoing costs incurred to fix a website which hasn’t been planned properly, there can often be a greater risk associated with hiring an agency to fix issues or worse, redesigning the entire website due to the sheer number of issues affecting performance. Trying to make numerous fixes to a poorly designed website can cost businesses thousands more just to rectify such issues.

As the renowned management consultant Peter Drucker once said:

Nothing is less productive than to make more efficient what should not be done at all.

How agile UX project plans work for businesses

Websites have to be functional and user-friendly to generate leads and ROI for businesses. For this to be achievable, the project plan has to be executed to a tee. UX agencies in particular need to start to think more on the process, not the outcome. This is the case for UX teams to have strong project management.

Speaking from my experience working at a user experience (UX) web agency, our projects are of course focused heavily around our clients’ and their users’ needs, as they are the very people that interact and engage with any business. To obtain all of the information we need about users, we need to have an effective, collaborative approach with our clients throughout the entirety of a project. An agile project management approach is therefore required.

Agile project plans provide full transparency

For timelines to remain realistic, the project isn’t just one sided based upon the capacity of the agency to deliver outcomes. There is a great deal of onus on clients to set aside time to give feedback to agencies on any information which help with progressing to the “next stage” of a project.

Projects and timing plans should always be client facing and fully transparent, not just to assure clients about levels of productivity, but also to reassure clients that outcomes are being met, following a calculated approach. They help to ensure that no key elements (which could dictate success/failure rates) have been missed from the process.

In summary

Effective project management serves as reassurance to businesses that defined actions and outcomes delivered by a UX team are measurable. An intelligent project approach also guides businesses on how wisely their money is being invested. The value of project management to the process can’t be understated and should always be factored into discussions with prospects from the outset. Providing this information in the early stages will certainly help, not just to set expectations, but also for businesses to more accurately forecast their budget/spend for their website.

Where businesses are concerned, they should find that receiving forecasted costs for their website alongside a defined project plan provides a greater level of assurance and substance. Certainly, it’s better than spending money on a website which they or their stakeholders had very little influence or involvement in creating.

Successful UX can only be achieved by a clearly defined project plan to support the process.

Source

There is a debate on whether HTML classes belong in your content. As in, classes that are strictly related to the presentation of that content. Sometimes the use of these classes is unavoidable. A callout paragraph, a pull quote, a carousel in the middle of a post… you’ll need classes to style and add functionality to these things.

While you sometimes need them, the less you write them into the actual post content, in my opinion, the better.

Why avoid writing HTML with classes in content?

The main reason is that these HTML classes are fragile as they’re tied to your current theme. On the next redesign there’s a chance these classes will change or require different structure. Or at least, over time, certain classes will be forgotten, new classes will emerge, duplicate classes will happen, and it will get messy.

Changing HTML in templates is easy, as one template is responsible for lots of pages. But changing HTML inside content is hard. They are individual things, sometimes in the hundreds and thousands, that may need to be updated manually one post a time.

But I need those HTML classes!

No worries, WordPress is flexible enough to allow us to generate HTML and insert it into the right spot.
Your content remains pure. No more fragile HTML. Remaining pure, you can easily transform and adapt your post content to your presentational needs.

All these transformations can happen with code. Next time you update the design you’ll update the transformation function to generate the right HTML. Just like templates, you make the updates in one place and it affects all the content at once.

No more updating posts manually.

Strategies for adapting content

Among all the tools offered by WordPress, we’re going to use:

1. Shortcodes
2. the_content filter

I’ll quickly explain how the two above work and provide some real word examples of things you can do with them.

Shortcodes

Shortcodes allow you to define a macro that expands to something of your choice. They’re basically a sort of HTML tag that wraps content and accept attributes. For example, you could put this in post content:

[my-shortcode foo="bar"]Hello, World![/my-shortcode]

Then write code to have it transform into:

<aside data-foo="bar"><h3>Hello, World!</h3></aside>

And then have the power the change that output anytime.

WordPress has extensive documentation for Shortcodes, but I’ll provide a simple example.

function css_tricks_example_shortcode( $attrs, $content = null ) {

    extract( shortcode_atts( array(
        'twitter' => ''
    ), $attrs ) );

    $twitterURL = 'https://twitter.com/' . $twitter;

    return <<<HTML
<p>This post has been written by $content. Follow him on Twitter</p>
HTML;

}
add_shortcode( 'author', 'css_tricks_example_shortcode' );

This is a contrived example, but if you include the code above in your `functions.php` file, you can create a post with the following content:

[author twitter="MisterJack"]Alessandro Vendruscolo[/author]

that will render this HTML:

<p>This post has been written by Alessandro Vendruscolo. Follow him on <a href="https://twitter.com/MisterJack">Twitter</a></p>

Filters

WordPress has many filters available. A filter is a function that has the opportunity to transform something before it’s returned to the entity that requested it. Filters are mainly used by plugins, and are what make WordPress so customizable.

The filter we’re going to use is the_content, which has a page in WordPress’ codex.

The following is a basic example of how to use it.

function css_tricks_example_the_content( $content ) {
    global $post;
    $title = get_the_title( $post );
    $site = get_bloginfo( 'name' );
    $author = get_the_author( $post );
    return $content . '<p>The post ' . $title . ' on ' . $site . ' is by ' . $author . '.</p>';
}
add_filter( 'the_content', 'css_tricks_example_the_content' );

This will add text to the end of a post, which can be useful for RSS scrapers.

Getting more out of the_content

The documentation for the the_content filter provides similar examples to the one above, so let’s do something different. We’ll get to some real world practical examples after we look at the tech involved.

Say you already write pure posts and transform them on the client side with JavaScript. This is a pretty common scenario. Say you write in markdown and do triple-backtick code blocks. Those convert to HTML like…

<pre><code lang="js">
</code></pre>

But say your syntax highlighting library requires the code blocks like this:

<pre><code class="language-javascript">
</code></pre>

You might be doing something like…

$("code.js")
  .removeClass("js")
  .addClass("language-javascript");

// then do other languages

// then run syntax highlighter

That works, but it requires a bunch of DOM effort on every single page load. It would be better to fix that HTML before it even comes to the browser. We’ll cover the solution to this in the examples below.

Combined with an HTML (technically, XML) parser such as libxml, we can move DOM transformations back to the server, relieving the browser. Reducing the amount of JavaScript required on the front end is definitely a good goal.

libxml has bindings for PHP that are usually available in standard installations. You have to make sure that your server has PHP > 5.4 and libxml > 2.6. You can check that by inspecting the output of phpinfo() or use the command line:

php -v
php -i | grep libxml

If your server doesn’t fulfill these requirements you should ask your system administrator to update the required packages.

Parsing a post

The filter we added will receive the raw HTML of the post and return the transformed content.

We’re going to use the DOMDocument class to load and transform the HTML. We’ll use the loadHTML instance method to parse the post and the saveHTML to serialize the transformed document back to a string.

There’s a little catch: this class will automatically add the definition and will also automatically wrap the content in and tags. This is because libxml was designed to be used to parse full pages, not just a part of it, as we’re doing.

One potential solution is to set some flags when loading the HTML, but this isn’t perfect too. When loading the HTML libxml expects to find a single root element, but posts could have more than one root element (usually, you have many paragraphs). In that case, libxml will throw some errors.

The better solution I came up with is to subclass DOMDocument and override the saveHTML function to strip those html and body tags. When loading the HTML I don’t set the LIBXML_HTML_NOIMPLIED flag, so it doesn’t throw any error.

It’s not ideal, but it gets the job done.

class MSDOMDocument extends DOMDocument {
    public function saveHTML ( $node = null ) {
        $string = parent::saveHTML( $node );

        return str_replace( array( '<html><body>', '</body></html>' ), '', $string );
    }
}

Now we need to use MSDOMDocument instead of DOMDocument in our filter functions. If you’re going to create more than one filter, I advise you to parse the post just once and pass the MSDOMDocument instance around. When all transformations are done we’ll get back the HTML string.

function css_tricks_example_the_content( $content ) {

    // First encode all characters to their HTML entities
    $encoded = mb_convert_encoding( $content, 'HTML-ENTITIES', 'UTF-8' );

    // Load the content, suppressing warnings (libxml complains about not having
    // a root element (we have many paragraphs)
    $html = new MSDOMDocument();
    $ok = @$html->loadHTML( $encoded, LIBXML_HTML_NODEFDTD | LIBXML_NOBLANKS );

    // If it didn't parse the HTML correctly, do not proceed. Return the original, untransformed, post
    if ( !$ok ) {
        return $content;
    }

    // Pass the document to all filters
    css_tricks_content_filter_1( $html );
    css_tricks_content_filter_2( $html );

    // Filtering is done. Serialize the transformed post
    return $html->saveHTML();

}
add_filter( 'the_content', 'css_tricks_example_the_content' );

Content Altering Examples

We’ve learned that we can use shortcodes and libxml to reduce the amount of HTML we directly have to insert in the post. It can be a little hard to understand what results we can get, so let’s go through some real world examples.

Many of the following examples come from the production version of MacStories. Other examples are Chris’ ideas, which could be easily added to CSS Tricks one day (or are already in use).

Pull quotes

Your site could have pull quotes. The desired HTML could be something like:

<p>lorem ipsum dolor…</p>
<div class='pull-quote-wrapper'>
  <blockquote class='pull-quote-content'>This is the content of the pull quote</blockquote>
  <span class='pull-quote-author'>Author</span>
</div>
<p>lorem ipsum and the rest of the post</p>

To achieve something like this, I’d suggest a shortcode:

function css_tricks_pull_quote_shortcode( $attrs, $content = null ) {

    extract( shortcode_atts( array(
        'author' => ''
    ), $attrs ) );

    $authorHTML = $author !== '' ? "<span class='pull-quote-author'>$author</span>" : '';

    return <<<HTML
<div class='pull-quote-wrapper'>
  <blockquote class='pull-quote-content'>$content</blockquote>
  $authorHTML
</div>
HTML;

}
add_shortcode( 'pullquote', 'css_tricks_pull_quote_shortcode' );

In your post you would then do this

lorem ipsum dolor…

[pullquote author="Mr. Awesome"]This is the content of the pull quote[/pullquote]

lorem ipsum and the rest of the post

The author is optional and the function that handles that omits it from the HTML altogether if it is not set.

There are many advantages to this:

• If you need a different HTML or different HTML classes you can update the output from the function in one place.
• If you want to scrap pull quotes entirely, you can start returning an empty string from the function.
• If you want to add a feature (e.g. click to tweet) you update the output from the function.

Twitter/Instagram embeds

One of the greatest features of WordPress is, in my opinion, automatic embedding. Say you want to insert external content in your post: chances are you might get the job done just by inserting the URL on its own line. No more hunting for the correct embed code. And most importantly, you don’t have to keep that up to date.

This is called oEmbed, and the list of supported providers is available here and here.

WordPress has a hook to customize such embeds. If you want to wrap the embedded content in a div you can do something like this:

function macstories_wrap_embeds ( $return, $url, $attr ) {
    return <<<HTML
        <div class='media-wrapper'>$return</div>
HTML;
}
add_filter( 'embed_handler_html', 'macstories_wrap_embeds', 10, 3 );

function macstories_wrap_oembeds ( $cache, $url, $attr, $id ) {
    return <<<HTML
        <div class='media-wrapper'>$cache</div>
HTML;
}
add_filter( 'embed_oembed_html', 'macstories_wrap_oembeds', 10, 4 );

Syntax highlighting

You can process your code blocks on the server to add line numbers to every line. With that you should be able to just insert the code in pre and code blocks.

This is achieved using the_content filter and libxml:

1. Search for all code blocks
2. Get all lines by splitting on newlines
3. Wrap each line in a span
4. Apply CSS

The handler also changes the classes (as explained in the earlier example) as required by the syntax highlighter.

function css_tricks_code_blocks_add_line_numbers( $html ) {

    // Iterating a nodelist while manipulating it is not a good thing, because
    // the nodelist dynamically updates itself. Get all code elements and put
    // only the ones that are direct children of pre element in an array
    $codeBlocks = array();
    $nodes = $html->getElementsByTagName( 'code' );
    foreach ( $nodes as $node ) {
        if ( $node->parentNode->nodeName == 'pre' ) {
            $codeBlocks[] = $node;
        }
    }

    foreach ( $codeBlocks as $code ) {

        // Fix HTML classes
        $lang = $code->getAttribute( 'lang' );
        $code->removeAttribute( 'lang' );
        if ( $lang === 'js' ) {
            $code->setAttribute( 'class', 'language-javascript' );
        }
        // Probably add some more `else if` blocks...

        // Get the actual code snippet
        $snippet = $code->textContent;

        // Split in lines
        $lines = explode("n", $snippet);

        // Remove all code
        $code->nodeValue = '';

        // Each line must be wrapped in its own element. Encode entities to be
        // sure that libxml doesn't complain
        foreach ( $lines as $line ) {
            $wrapper = $html->createElement('span');
            $wrapper->setAttribute( 'class', 'code-line' );

            // Create a text node, to have full escaping support
            $textNode = $html->createTextNode( $line . "n" );

            // Add the text to span
            $wrapper->appendChild( $textNode );

            // Add the span to code
            $code->appendChild( $wrapper );
        }

        // Jetpack adds a newline at the end of the code block. Remove that
        if ( $code->lastChild->textContent == '' ) {
            $code->removeChild( $code->lastChild );
        }

    }

}

You can use CSS counters to generate the numbers:

.code-line {
    display: block;
    counter-increment: line-number;

    &::before {
        content: counter(line-number);
        display: inline-block;
        width: 30px;
        margin-right: 10px;
    }
}

A real world example, from MacStories, is we can write Markdown like this:

```js
// This is a JS code block
var string = "hello";
var what = "world";
var unusedVar = 3;
alert(string + " " + what); // Actually do something
```

Which processes into HTML, then is sent through that filter, ending up like this:

<pre><code class='javascript'><span class='code-line'>// This is a JS code block</span>
<span class='code-line'>var string = "hello";</span>
<span class='code-line'>var what = "world";</span>
<span class='code-line'>var unusedVar = 3;</span>
<span class='code-line'>alert(string + " " + what); // Actually do something</span></code></pre>

Which renders like this, with our syntax highlighter:

Rewriting URLs

When we switched to HTTPS at MacStories we faced an issue with mixed content warnings. Old posts linked to images hosted on Rackspace using the HTTP protocol. Whoops.

Fortunately Rackspace also serves content over HTTPS, but the URL is slightly different.

We decided to add a filter to change those URLs. Editors will link images using the HTTPS URL, but this filter can work around HTTP URLs inserted by mistake. Goodbye mixed content warnings.

This is achieved by adding a the_content filter and running a regular expression substitution.

function macstories_rackspace_http_to_https( $content ) {
    return preg_replace(
        '/http://([A-z0-9]+-[A-z0-9]+.)r[0-9]{1,2}(.cf1.rackcdn.com/)/i',
        'https://$1ssl$2',
        $content
    );
}

You can do something similar to CDN-ify image links: if your image URLs have a well defined pattern (so that you don’t change an URL of something that’s not an image) use a similar approach. Otherwise it’s better if you parse the HTML to change just the src attribute of the images.

Adding IDs to headings

Having the id attribute set on all headings allows you to link to a specific section (e.g. when you have a Table of Contents or want to share a link scrolled to the correct section).

If you write in HTML, you can add them manually. But that’s tedious. If you write in Markdown you have to make sure that your Markdown processor adds them (Jetpack does not). In any case, authoring them adds redundancy to your content.

You can automate the process using libxml in a the_content filter:

1. Search for all headings
2. Generate the slug
3. Set that slug as id attribute

The filter is this:

function css_tricks_add_id_to_headings( $html ) {

    // Store all headings of the post in an array
    $tagNames = array( 'h1', 'h2', 'h3', 'h4', 'h5', 'h6' );
    $headings = array();
    $headingContents = array();
    foreach ( $tagNames as $tagName ) {
        $nodes = $html->getElementsByTagName( $tagName );
        foreach ( $nodes as $node ) {
            $headings[] = $node;
            $headingContents[ $node->textContent ] = 0;
        }
    }

    foreach ( $headings as $heading ) {

        $title = $heading->textContent;

        if ( $title === '' ) {
            continue;
        }

        $count = ++$headingContents[ $title ];

        $suffix = $count > 1 ? "-$count" : '';

        $slug = sanitize_title( $title );
        $heading->setAttribute( 'id', $slug . $suffix );
    }

}

This filter also prevents the generation of duplicated ids.

Removing wrapping paragraphs

If automatic embedding is my favorite feature of WordPress, automatic paragraph wrapping is the thing I hate the most. This issue is well known.

Using RegEx to remove them works, but isn’t well suited for working with HTML tags. We can use libxml to remove the wrapping paragraph from images and other elements, such as picture, video, audio, and iframe.

function css_tricks_content_remove_wrapping_p( $html ) {

    // Iterating a nodelist while manipulating it is not a good thing, because
    // the nodelist dynamically updates itself. Get all things that must be
    // unwrapped and put them in an array.
    $tagNames = array( 'img', 'picture', 'video', 'audio', 'iframe' );
    $mediaElements = array();
    foreach ( $tagNames as $tagName ) {
        $nodes = $html->getElementsByTagName( $tagName );
        foreach ( $nodes as $node ) {
            $mediaElements[] = $node;
        }
    }

    foreach ( $mediaElements as $element ) {

        // Get a reference to the parent paragraph that may have been added by
        // WordPress. It might be the direct parent node or the grandparent
        // (LOL) in case of links
        $paragraph = null;

        // Get a reference to the image itself or to the link containing the
        // image, so we can later remove the wrapping paragraph
        $theElement = null;

        if ( $element->parentNode->nodeName == 'p' ) {
            $paragraph = $element->parentNode;
            $theElement = $element;
        } else if ( $element->parentNode->nodeName == 'a' &&
                $element->parentNode->parentNode->nodeName == 'p' ) {
            $paragraph = $element->parentNode->parentNode;
            $theElement = $element->parentNode;
        }

        // Make sure the wrapping paragraph only contains this child
        if ( $paragraph && $paragraph->textContent == '' ) {
            $paragraph->parentNode->replaceChild( $theElement, $paragraph );
        }
    }

}

Adding rel=noopener

Recently we became aware of security issue regarding links opening in a new tab.

Adding the rel=noopener attribute will fix the issue, but that’s not something editors should have to remember to do. It also doesn’t play nice with Markdown, because you’d have to write links in plain HTML.

libxml can help us:

function css_tricks_rel_noopener( $html ) {

    $nodes = $html->getElementsByTagName( 'a' );
    foreach ( $nodes as $node ) {
        $node->setAttribute( 'rel', 'noopener' );
    }

}

Considerations

I’ve been using the techniques explained above since the launch of MacStories 4 and haven’t had any major issues. Writers can focus solely on writing great content. All presentation related transformations/generations are documented in code and can easily be ported over the new version or updated to the new design. It’s a big win. I won’t have to create a `legacy-theme.css` file to style or fix old (and poor) decisions.

With content filters, you can pretty much do whatever you want. With shortcodes, you’ll need to be careful not to create overly-specialized shortcodes that look like the old raw HTML you had in the past. For example

[bad-shortcode align="left" color="blue" font="georgia"]…[/bad-shortcode]

Some of these attributes may not make sense in the future, so it’s up to you to decide on attributes that seem well-suited and abstracted enough to live forever. Still, even a bad shortcode is better than no content abstraction at all.

In the end: do what you think is best and think twice before implementing. Always ask yourself “will I need this when the next design goes live?”

Leverage WordPress Functions to Reduce HTML in your Posts is a post from CSS-Tricks

One of the biggest risks of building a product is to build the wrong thing. You’ll pour months (even years) into building it, only to realize that you just can’t make it a success. At Hanno, we see this happening time and time again. That’s why we’ve put together a Lean Validation Playbook.

“Lean” in this case means that you’re moving swiftly to figure out what you’re going to build and how you’re going to build it with as few resources as possible. These resources might include time, money and effort. The lean startup methodology is advocated by Eric Reis, who has massively influenced the way we work through his book The Lean Startup.

The post A Lean Approach To Product Validation appeared first on Smashing Magazine.

Whenever I had to pay rent at my old place, I always found myself a bit frustrated. It wasn’t because paying rent itself is naturally an act of frustration, but because the designers of my rent manager portal decided to use this little navigation thing in the upper right-hand corner, just below the site’s search field:

The dreaded hamburger icon. On desktop.

Popular on WordPress, ThemeForest and other template sites, the hamburger, or sandwich, or side drawer, is an icon consisting of three stacked lines that can be clicked to reveal more content, such as the primary navigation.

The use of hamburger icons are detrimental to customer engagement in desktop. We’ve all heard the saying “out of sight, out of mind;” it is a phrase that can be easily applied to web design. By hiding your site’s menu, you are forcing customers to work harder to navigate and presenting a nuance older generations may not be familiar with — mistakes that can cut your customer engagement in half. You are doing the worst possible thing you can make visitors do: think more than they have to.

A less navigable site.

On most websites, primary navigation is an important part of how content is discovered and accessed. By hiding the navigation behind a menu, we’re decreasing the likelihood that the navigation items will be seen or used at all. It also removes visual hierarchy, limiting a visitor’s ability to see where they reside in a site’s layers and causing unnecessary confusion.

Patterns rely on familiarity and emerge slowly over time. The ones we count on today have been around for many years; although floppy disks are cold in their grave, their likeness still represents the “save button” even to younger generations who have probably never laid eyes on one. The three horizontal lines dubbed the “hamburger menu” are quickly becoming a standardized icon on mobile due to the necessity of hidden menus on the small screen. However: on the desktop, users are still confused, as portrayed by its low engagement.

Here are a few things that the hamburger menu can be mistaken for:

• A stack of pancakes
• A very short to-do list
• Cheetos performing a synchronized swim routine
• A tally taken by someone laying down
• Scratch marks from a partially-declawed bear

It isn’t a well-enough established icon outside of the context of mobile to depend on to create customer conversions. This doesn’t stop many companies from making an ill-considered attempt: Time Magazine, for example, who is known to have an older readership, hides their entire menu behind a hamburger regardless of screen size. Users have plenty of new things to learn without adding contrived navigation patterns into the mix.

Design appears lazy.

Hiding your navigation under a single button is like shoving a messy room under your bed — it’s lazy and suggests you don’t care about your visitors. While minimalism is a popular design philosophy for creating modern, attractive websites, it doesn’t necessarily mean less content; you can successfully deploy minimalism without removing important information. To achieve minimalist design, manage perceived complexity by adding more white space to the interface and reducing the contrast between elements to make the whole layout visually quieter while keeping all of the necessary information easily accessible.

On Snowbird’s website, they successfully manage a large amount of content with a minimalist design.

In addition to appearing sleek, many websites have jumped on the hamburger-wagon because it doesn’t require a separate approach for different screen sizes. Companies like Time, The Atlantic, Fastcompany, Upworthyand Slate seem to be in agreement.

“We knew that people are coming into the site through desktop at one point and mobile at another,” says VP of Tech at Slate, Dan Check. “We wanted to make sure that there was some sort of consistent navigation experience between the two.”

While there are many in argument for the “mobile first” design approach, it is the job of a designer to provide an optimal experience for the available screen size and not hobble themselves by slavishly following this philosophy — if we ignore that the size of the screen has changed, we risk problems such as higher friction navigation and an overabundance of white space creating an unbalanced layout. There are ways to foster consistency without forcing everything to conform to a phone-sized viewport, such as color palette, spacing, hierarchy and content placement. Designing a site so that it feels the same across devices is much more important than whether it looks exactly the same — in a world of unlimited devices and screen sizes, we no longer have the luxury of making things pixel-perfect and identical; we can be certain they won’t be.

So, what about mobile?

On a larger screen, such as an iPad or desktop, there’s more room to reveal the important tasks that users want to complete on a website, but in the case of a phone there’s the issue of limited real estate, so compromises on discoverability of content become necessary. While the hamburger succeeds at its purpose when navigation becomes too overwhelming for the allotted screen size, you may consider laying out your full menu when the site’s navigation is simple — even on mobile. The challenges of small screens are an opportunity to consider winnowing your navigation to fewer, higher priority choices than can be easily presented instead of a longer, less focused menu.

Conclusion

Don’t let the hamburger menu be your life vest for a bad content strategy — if your navigation is really so substantial that you have to hide it, then leaving it to your visitors to do the heavy lifting is going to backfire. While hamburger menus are useful when you are faced with fitting a large navigation on a small screen, they should generally be avoided on desktop. Your most important wayfinding information should not be hidden clicks deep — your visitors should always be easily able to determine at a glance where they are in the hierarchy of your website and how to get where they’re going next.

Read More at Hidden Navigation: Down with the hamburger

Any time a user’s experience is interrupted, the chance of them leaving increases. Changing from one page to another will often cause this interruption by showing a white flash of no content, by taking too long to load or by otherwise taking the user out of the context they were in before the new page opened.

Transitions between pages can enhance the experience by retaining (or even improving) the user’s context, maintaining their attention, and providing visual continuity and positive feedback. At the same time, page transitions can also be aesthetically pleasing and fun and can reinforce branding when done well.

The post Improving User Flow Through Page Transitions appeared first on Smashing Magazine.

Even today, there are still many people that want to print out the entire internet. This can have many reasons. Maybe a team seeks to discuss an article’s content in a meeting. Or maybe somebody wants to read your article somewhere where they don’t have an internet connection. To satisfy these people, each website requires a CSS file for printing.

Even today, many people print plenty of articles to read them offline. If you don’t want to lose readers, you should provide options for these visitors. However, there are two hazards on the way to printing.

First: today, there are barely any WordPress themes that come with a print stylesheet. The theme developers don’t put an effort in that, even though, for me, developing a print CSS is common courtesy. Second: as no print stylesheet is available, the ultimate consumer that uses the theme doesn’t have access to a print button.

Thus, in this article, I’ll show you how to create a print CSS, how it should be integrated into the theme, and how to create a print button.

Creating the Optimal Print Stylesheet

First, create an empty CSS file with a pure text or HTML editor. Name it print.css. Then copy and paste the following into the file:

/**
 * Print stylesheet for yourwebsite.com
* @version         1.0
* @lastmodified    16.06.2016
*/
 
@media print {
   Your notes
}

All CSS settings go between the opening and the closing bracket.

1 – Defining Side Borders and Font Sizes

First, we need to define the distances between the side edges, to receive an optimal result.

/* Setting content width, unsetting floats and margins */
/* Attention: the classes and IDs vary from theme to theme. Thus, set own classes here */
#content,#page {
width: 100%; 
margin: 0; 
float: none;
}
 
/** Setting margins */       
@page { margin: 2cm }
 
/* Or: */
@page :left {
margin: 1cm;
}
 
@page :right {
margin: 1cm;
}
 
/* The first page of a print can be manipulated as well */
@page :first {
  margin: 1cm 2cm;
}

I recommend using the above settings, and defining margins to 2 cm. After that’s done, the font size settings can be chosen. Here, you should keep in mind that the printer requires different units for the font size than the monitor. Thus, you need to convert pixels, em, and rem into points.

• Pixels => Points
• 6px => 5pt
• 7px => 5pt
• 8px => 6pt
• 9px => 7pt
• 10px => 8pt
• 11px => 8pt
• 12px => 9pt
• 13px => 10pt
• 14px => 11pt
• 15px => 11pt
• 16px => 12pt
• 17px => 13pt
• 18px => 14pt
• 19px => 14pt
• 20px => 15pt
• 21px => 16pt
• 22px => 17pt
• 23px => 17pt
• 24px => 18pt

A font size of 12pt has proven to be best. Now, you have the choice which font you would like to use for the print. On paper, fonts with serifs, like Georgia, are well readable.

/* Set font to 16px/13pt, set background to white and font to black.*/
/* This saves ink */
body {
font: 13pt Georgia, "Times New Roman", Times, serif;
line-height: 1.3;
background: #fff !important;
color: #000;
}
 
h1 {
font-size: 24pt;
}
 
h2, h3, h4 {
font-size: 14pt;
margin-top: 25px;
}

2 – Using Pagebreaks – Defining Pagebreaks

The three CSS attributes page-break-before, page-break-after, and page-break-inside allow you to decide exactly where a print page will be broken. Among other things, this will prevent images from being broken into two pieces.

• page-break-before determines if and how a pagebreak is set before this element.
• page-break-after takes care of breaks behind an element.
• page-break-inside can cause a break within an element, like images or graphics, for instance.

/* The following settings are possible: */
page-break-after  : auto | always | avoid | left | right
page-break-before : auto | always | avoid | left | right
page-break-inside : auto | avoid

Auto is the print element’s standard, always places a break every time, avoid prohibits the break, and left, and right are meant for continuation pages that are formatted left or right, accordingly. If applied properly, these rules would look as follows:

/* Defining all page breaks */
a {
    page-break-inside:avoid
}
blockquote {
    page-break-inside: avoid;
}
h1, h2, h3, h4, h5, h6 { page-break-after:avoid; 
     page-break-inside:avoid }
img { page-break-inside:avoid; 
     page-break-after:avoid; }
table, pre { page-break-inside:avoid }
ul, ol, dl  { page-break-before:avoid }

3 – The Handling of Links

Links should be highlighted so that they get noticed. As links can not be clicked on a piece of paper, we need to visualize the link targets. This is done with the following notes:

/* Displaying link color and link behaviour */
a:link, a:visited, a {
background: transparent;
color: #520;
font-weight: bold;
text-decoration: underline;
text-align: left;
}
 
a {
    page-break-inside:avoid
}
 
a[href^=http]:after {
      content:" < " attr(href) "> ";
}
 
$a:after > img {
   content: "";
}
 
article a[href^="#"]:after {
   content: "";
}
 
a:not(:local-link):after {
   content:" < " attr(href) "> ";
}

4 – Hiding Videos and Other iframes

Displaying videos on a printed piece of paper doesn’t make sense. However, when setting the iframes on display: none, ugly gaps remain. The following code allows you to remove the gaps and hide iframes, as well as videos entirely.

/**
 * Making intergated videos disappear, and removing the iframes' whitespace to zero. 
 */
.entry iframe, ins {
    display: none;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    line-height: 0pt !important;
    white-space: nowrap;
}
.embed-youtube, .embed-responsive {
  position: absolute;
  height: 0;
  overflow: hidden;
}

5 – Hiding Unnecessary Elements

Many areas of a website can’t be printed. For one, they don’t provide any relevant information, and for another, printing these areas is a waste of ink or toner. Thus, we will hide all areas that are not relevant.

For you, this means that you can dive into your website’s source code to find the areas that you don’t want to be printed. It makes sense to hide the following things:

The header, the navigations, the pagination, the sidebar, the tags, and the categories, the comments, the share buttons, and other elements. Here’s an excerpt from the print stylesheet of my website Techbrain.de:

/* Hiding unnecessary elements for the print */
 
#header-widgets, nav, aside.mashsb-container, 
.sidebar, .mashshare-top, .mashshare-bottom, 
.content-ads, .make-comment, .author-bio, 
.heading, .related-posts, #decomments-form-add-comment, 
#breadcrumbs, #footer, .post-byline, .meta-single, 
.site-title img, .post-tags, .readability 
{
display: none;
}

6 – Adding Messages Before and After Printing

Sometimes, it can be very useful to be able to add messages before and after the actual print content. This type of message allows you to thank your reader for printing your article. Or you can display a copyright message. Once again, it is important to find the proper CSS class of your content area.

/* Adding custom messages before and after the content */
.entry:after {
content: " All Rights Reserved. (c) 2014 - 2016 TechBrain - techbrain.de";
color: #999 !important;
font-size: 1em;
padding-top: 30px;
}
#header:before {
content: " Thank you for printing our article. We hope that some of our other articles can catch your eye as well.";
color: #777 !important;
font-size: 1em;
padding-top: 30px;
text-align: center !important;    
}

The Complete Print Stylesheet

View the code on Gist.

The Right Location: Where does the print.css belong?

The following functions belong into the theme’s functions.php or into a custom site plugin.

“Into the header” would be the correct answer. The following function is the right choice when a developed theme is to be added to the official theme index:

/* The proper function for the addition of the print.css */
 
function drweb_print_styles(){
    wp_enqueue_style(
        'drweb-print-style', 
        get_stylesheet_directory_uri() . '/css/print.css', 
        array(), 
        '20130821', 
        'print' // print styles only
    );
}
add_action( 'wp_enqueue_scripts', 'drweb_print_styles' );

If you don’t want to supply your theme with a print stylesheet, the method described above isn’t necessarily optimal. First, the CSS is loaded on all pages, and not on individual articles only, and second, it blocks the page display, while slowing down your website a bit. Thus:

Every CSS That Is Not Required For the Page Display Belongs Into the Footer!

On top of that, it should only be loaded when single.php is accessed with the individual articles. There should barely be anyone that wants to print your landing page.

That’s why we’ll let the stylesheet load in the website’s foot area.

/* The code's modified version only adds the print.css to the footer of single articles */
function drweb_print_styles(){
    if( is_single() ) {
    wp_enqueue_style(
        'drweb-print-style', 
        get_stylesheet_directory_uri() . '/css/print.css', 
        array(), 
        '20130821', 
        'print' // print styles only
        );
    }
}
add_action( 'wp_footer', 'drweb_print_styles' );

User-Friendliness: Creating a Print Button

When offering a well-done print stylesheet to your readers, it would be advantageous to also integrate a print button into your theme. The procedure is rather simple, as CSS allows you to design the button the way you want it to be. The code on my website looks like this:

<?php
function ah_print_button() {
?>    
<div class="printversion">
<header><span>Print Version</span></header>
 <a class="printit" href="javascript:window.print()"> <img src="//pathtoyourgraphic" width="146" height="20" alt="Print Page"> </a> 
</div>
<?php }

In the theme, this button can then be called up wherever you want it to appear with a simple

If you want a demo of the print stylesheet and the button, check out TechBrain.de. There you’ll find the button below the articles, and you can see what my print view looks like.

(dpe)

Another year! They tick by all-too-quickly these days. It’s time for another commemorative post, as we do. A state of the union. A mile-marker style post where I talk about the year gone by and where things stand ’round here.

See the Pen Proper Fireworks by Matheus Lin (@boomershin) on CodePen.

It was last year when I was just settling into Milwaukee after buy the house I had been renting. This year, household residents have grown by one person and one dog. We’ve just finished some major-ish renovations on the house, including some front and backyard “hardscaping” work. Looks like we’ll be in this house for a good little while.

I sit up in my attic as we speak, just like last year, looking across the street at loads of families in the park getting ready for 4th of July fireworks. I kinda wanna go watch them, but Digby is so damn scared of them that we can’t really bring her and and also don’t wanna leave her alone. I guess I’ll just look at some virtual ones. Thankfully CodePen is full of them! Like the ones above by Matheus Lin.

Traffic wise, on CSS-Tricks, last year I was coming to terms with things being stagnant. No significant growth or decline. This year so far, we’ve been seeing growth of around 12% (users/sessions/pageviews) when comparing to the same month of last year. That feels better! Although, check out the next section on advertising on why we’re caring about that less and less.

Last year it also felt very new to be working with a larger staff of folks here on CSS-Tricks. Now that feels very natural! You can find them all here. I even made a special alumni section for folks that have moved on or were involved with The Lodge. The Lodge is still a section of the site, but this year we made that free instead of charging for it, as the Office Hours thing were were doing for it wasn’t working as well as we wanted it to and we weren’t able to produce enough courses to warrant continuing to charge for it.

This is the first year of CSS-Tricks that felt like a tried-and-true business. Money comes in. Money goes out. Worry happens. The books balance. But fundamentally, the site is the same as it has been for years: we publish a bunch of writing about web design and development. That’s what we love and that’s what we’ll continue to do!

A quick word on advertising.

I like it. More complete thoughts. I think it’s a particularly good business model for small publishers who can be picky about their advertising partners and who have lots of control over the experience of the ads. That’s us.

We only work with companies we use (or would use), like, and recommend. We do our best to make sure we aren’t sending you anywhere slimy and that nothing uncouth is happening with the advertisements themselves. Here on CSS-Tricks, we are currently working with Media Temple as the primary site sponsor. We run some display advertising. And we also run sponsored posts. Everything is laid out here. We’d love to have any of you out there running great products or services!

It’s the sponsored posts that are particularly interesting to me. They can take various forms: from simple explanations with my own audio endorsements to full blown tutorials. They are clearly marked as sponsors. They are good for everyone. Good for advertisers because they perform well. Good for us as we need income from good partners. Good for you? In my opinion, yes. Not only is good advertising useful in finding out about products and services, but it means we can adopt a more liberal publishing strategy. Meaning: we’re incentivized to bring good content to you wherever you want to read it. Apple News? Sure. RSS? Cool. Email? No problem. Instant articles? On the way. AMP? Already doing it. We’re not trying to force you to come to this website and push pageviews.

And speaking of email, that’s probably the biggest new thing around here. We’re (well, mostly Robin is) hand-writing it each week. Subscription form here.

As ever, my time is split between my big products. CSS-Tricks, ShopTalk, and CodePen. CodePen getting the bulk of it. It’s my baby! My passion! It’s now a funded project. I have co-founders. We have investors. We have a full time staff. We have huge new secret projects! And of course, a roadmap forever.

But as I regularly reflect, all these products are not only related to each other in theme (web design and development), but fuel each other. Their existence helps people find out about them. My work on them gives me ideas and knowledge to make the others happen. I’m quite happy I made a conscious choice to focus (and limit) myself to these projects.

High five to the whole CSS-Tricks community, and here’s to another year!

The Ninth Fourth is a post from CSS-Tricks

As soon as we decided writing was a good thing, everyone wanted to be a writer. Even now, almost everyone feels like they have a book inside them. Even people who don’t read books want to write one.

And I bet almost all those would-be authors have at least tried blogging.

Blogging used to be a bit more glamorous, in a way. When people first started making money from writing on the Internet, “blogging” became that most dreaded thing of all: a buzzword.

I mean, people paid their rent by sitting down and typing! Who wouldn’t want to do that? Like the book authors before them, most quickly realized that it was hardly as simple as that. Writing was still hard work. Readers typically demand quality. Inspiration is an inconsistent source of motivation.

Even so, blogging has carved out a place for itself in the online world. Businesses and professionals use it to demonstrate their expertise. Larger blog sites use their big traffic numbers to generate income more directly. Many people just do it for fun; and large news networks have adopted the informal tone used by blogs since the beginning.

Even with the forced evolution of online advertising, we’re always going to need people to sit down and type; and we’ll find ways to pay them for it.

So why should you blog? That’s up to you. There’s a whole section on that down below. Let’s just assume, for now, that you have a truly excellent, fantastic reason to write stuff regularly. Yeah, let’s go with that.

The next big question is: Where are you going to blog?

This is a much bigger question than you may realize. Where you put your website decides who really controls what you post on it. Are you in control? Or is someone else’s company in control? Who owns your information, and the posts you write?

You see, you can easily start a blog on Medium, Blogger, Tumblr, or WordPress.com. And they’re great options, if you just want to launch your blog in the next half hour. Let’s look at the benefits:

• There are fewer design details to bother with. You can use pre-made themes, or customize them a bit. On Medium, there’s only one theme, and you just roll with it.
• You don’t have to worry nearly as much about site or server maintenance. There’s a whole team of people working on that for you, and willing to help you.
• These platforms are often integrated with social networks and social features. This can help you to grow your blog’s readership faster.
• If anything technical goes wrong, it’s never your fault.
• Blogging on these platforms is often just… faster.

However, you have to look closely at the Terms of Service. When you’re on one of these platforms, you do not have complete control over your personal information or blog posts. Some don’t even let you make proper backups.

Your blog can be summarily deleted; that has happened to people. Your personal information can be given away without your knowledge; that has definitely happened to people. If you’re making money but the company doesn’t feel like being part of that, they can effectively shut down the online part of your business.

I’m not saying it will happen to you. If you just want to share the perfect recipe for a bacon-on-more-bacon-with-bacon-for-bread sandwich, any one of those platforms will do just fine. But there are times when we need more control over our information.

That’s where you will want a custom site, with a company that’s taking your money to keep your site up.

Now let’s get this bit out of the way: It’s a lot more work; there’s more maintenance; a steeper learning curve for beginners; you occasionally have to talk to people (usually in the sales or support departments).

Now, we look at the good bits:

• Total creative freedom: Want a completely custom design? Most hosted platforms only allow for limited customization, if any.
• Total freedom regarding content: As long as you aren’t posting anything illegal, or particularly hateful, almost any host will keep your site going as long as you can pay.
• Art direction: Want to apply art direction to each post and go wild? You can. (To be fair, Medium allows for this to an extent.)
• Branding: Branding is typically easier to manage on your own custom site than on a more restrictive platform.
• Anonymity: There may come a day when you want to be heard, but not stalked. Not every host will fight to protect your personal information, but there are a few. There’s a list at the bottom of this guide.

So, should you go for a blog on a massive platform, or a custom site on hosting that you pay for? It all depends on what you intend to write about, and how much you really trust other people.

Once you’ve decided that, it’s time to start making a plan.

Planning your blog

As with any website, you’re going to need a solid plan. You’ll need a plan for your content, your design, your business model (when appropriate), your marketing (always), everything.

I mean, sure, you could throw some words into your system, and display them on the front-end with some loosely-defined categories, and call it a day. Or, and hear me out on this, you could not do that. You could, for example, choose to stand out from the vast majority of blogs out there by putting in some serious forethought.

Plans aren’t just productivity tools, they’re the beginning of original, creative thought. Plus, you can often solve half your future problems right there in the planning stage.

Naturally, since you’re planning a creative endeavor, your plan will need to be flexible. Timelines may have to be adjusted. Those original ideas you come up with might have to be tweaked for efficient implementation. You might have better ideas.

Even if you only use half of your original plan, you’ll be better off than if you had started without one.

Your theme

So what, exactly, do you intend to write about? Even the most eclectic of blogs have an overarching theme. Personal blogs are tied together by, you guessed it, the author. Brand blogs, by the brand. Humor blogs, by funny things.

Other blogs have more specific themes: un/healthy cooking, cheap travel, specific forms of humor, specific genres of literature, and so on. The possibilities are virtually endless.

Want to write a blog detailing the minutiae of each species of Rhododendron plant? Go ahead! Do it in an entertaining way, and you might even extend your reach beyond the botanist types.

The key is that you need a theme. It can be as vague or specific as you like. You just need to get people thinking that when they want what you have, your blog is the place to get it.

Your purpose/goals

Why are you blogging? What is it you want to say? Why should anyone care? Who benefits from your content, and how?

You see, no one will give a damn about what you have to say unless it interests and benefits them directly in some way. Well, you could be a celebrity, but that’s another story. So what are you blogging for?

Are you helping customers use your product better? Or do you just want to entertain people? Are you trying to inspire them to action for one cause or another? Are you trying to sell something? Are you simply providing good information about a specific topic?

If you just want to “be heard”, well, there are some pretty great forums and support groups for that sort of thing. The rest of the Internet is not your friend. In such a case, being ignored is sort of the best you can hope for.

So decide what you want your readers to get from each post. Whether it’s information, a hearty chuckle, a life lesson, or training, make sure that you’re writing for them.

Your audience

Who are you mostly writing for? Beginners in your field? Experts? The casually-interested, or the super-fans?

You might think that this will be entirely dictated by your overall theme, but it’s not quite that simple. Even in small, specific niches, there will be different audiences.

Let’s say you’ve decided to write about a TV show like the X-Files. (Yes, there are blogs dedicated to single TV shows that have long since ended.) You could choose to write a guide to getting started with the series to get people hooked. Or, you could write for the veterans, with in-jokes and references abounding.

You could feasibly write for both, seeing as you’ve chosen a very niche topic; but I bet that you’ll end up writing more articles for one over the other.

On a brand blog, you’ll have to write both to new customers and old, and maybe for fellow industry pros. On a personal blog, it would pretty much be just for people who’ve gotten to know you in one way or another (unless of course, you’re some sort of celebrity).

Your platform

Yes, you could just “go with WordPress”. WordPress is pretty great; there are, however, a lot of other options out there, most of which are free and open-source.

While you can sort of “make” WordPress do anything you want, it’s often better to start with a system that already has the features you want/need.

What features do you want, anyway? Do you want to keep it dead-simple? Maybe throw in some “related posts” for extra user engagement? Or do you want a fancy magazine-syle layout on the home page?

Also think about the writing and editorial experience. How many people will be writing on your blog? Are you okay with a CMS that depends on HTML-based WYSIWYG formatting, or would you rather go another route? What collaboration features would you like?

Whatever you want on your blog, some systems will provide it more easily than others. I’ll be listing several blog software options below. This is also where you start thinking about how to keep other people out of your business. There’s a section on blog security farther down below, but the work starts here. You’ll want to pick a host with a good reputation, and read their terms of service and privacy policies carefully. How hard do they try to keep your data private? What operating systems do they use for their servers?

Look for reviews that indicate how your host performs under pressure, and what their customer service is like.

If you’re going to blog anonymously, well, not just any host will do. You’ll need to look for one that will aid you in actively trying to hide your identity. You may even want to deal with them through an intermediary, depending on where you live, and how paranoid you feel.

There will be more information on choosing a host below, as it’s kind of a big subject.

Your schedule

This is something that will depend on you, and the time you have, and also your audience. And you do need a schedule.

Full disclosure, I’ve never been good at this part. Still, this is something that every good blogger seems to agree on. The results are in, and keeping your posting on a regular schedule is high on the list of “things you should totally do”.

And it makes sense. I follow more than a few blogs (and, incidentally, web comics), and it just feels nice to know that I can count on them to have something new for me to consume on particular days, if not at particular times.

If your readership is all mostly in one or two time-zones, you may want to schedule posts for the times and days they’re most likely to be sitting down to read stuff. Those times and days will depend on who they are, of course, and figuring all of this out will take time, and probably Google Analytics.

It’s not that bad

Okay, you just read over a thousand words about just planning a blog. If you feel like maybe you’d rather do something, anything else, I don’t blame you.

The truth, though, is that once you have the right mindset, the process doesn’t take so long (except picking a host, that can still take a while). Play to your strengths. The actual plan, once written down, shouldn’t take up more than a couple of paragraphs and a bullet list or two.

Definitely no more than a single page.

Don’t write down every step of the decision-making process, if you don’t want to, Write down the final decisions; then keep the file handy, for reference and revision.

A blog is an ongoing project, and things will change and evolve, and you will adapt. You can’t predict everything, but you can give yourself a solid start.

Choosing a platform, and a web host

Okay, let’s go into more detail about blog platforms. Now, as you may have noticed, I like to have control over my websites. Complete control. Basically, that means turning to open source.

Using open source software (OSS) means that, no matter what, you’re legally entitled to go in, mess with the innards of your site, and do as you like with it. Not everyone will want to do this. It’s complicated, and doing it wrong can screw everything up.

Still, it’s best to have the right to do it. Licensing software from someone else means that legally, they can tell you exactly what you are and aren’t allowed to do with it. And more and more software these days isn’t owned, it’s licensed.

What’s more, OSS products are often (though not always) more secure. This is because anyone can look into them and find security holes. As such, open source blog software often gets security updates faster.

Better yet, anyone can look into them and tell the world about it if the developers are including any sort of spyware, back doors, or what-have-you. The “open” part of OSS stands for transparency as much as anything else. In a world where few companies want you to know what they’re doing with your information, that’s important.

What front-end features do you need?

Okay, let’s talk about the fun stuff now. What sort of stuff do you want your viewers to actually see? In the previous section, I mentioned things like magazine-style layouts, and related posts; but there are more things to consider:

What’s your navigation going to be like?

Typical blogs organize everything based on categories, chronological archives, or both. Some add tags into the mix, but mostly for SEO.

You could, for example, create a more wiki-like navigation structure based on tags and inter-related topics. This could be great for a truly massive blog with lots of information, as long as the information is still relevant… a music blog, for example.

Or, you could combine that with advanced search functionality, if your blog also serves as a sort of database. Think of a travel blog using search to make it easier to find hotel reviews.

Comments and discussion

Some blogs opt to integrate third-party comment software like Disqus, others stick with the default comment systems in their CMS, and still others are choosing to eliminate comments entirely.

Ghost doesn’t have comments. WordPress has a thousand options for comments. Whatever your choice, there’s a platform out there for you.

Third-party integration

Many blogs are integrated, to varying degrees, with third-party services, like social media networks, and so on. These integrations can be as small as simple social sharing buttons, and as all-encompassing as the logging in with your Facebook or Twitter accounts.

With WordPress, and other larger platforms like it, this integration can be comparatively simple, thanks to plugins. With others, it will take more custom work.

Naturally, integrating third-party services means that third parties get your data to one extent or another, so that’s another thing to concern yourself with.

What sort of writing and editing experience do you want?

I mentioned WYSIWYG editors. Well, nearly every CMS has those, in one form or another. If you’ve been working with websites a lot, you’ll know their limitations. I personally love blogging in Markdown, which makes Ghost’s writing setup perfect for me.

However, were I to start a blog with another writer, at this point, I’d probably choose Bolt. It’s not well-known, perhaps, but I think it has much better collaboration features than either WordPress or Ghost, and it can use Markdown by default.

Software suggestions

So far I’ve mentioned three blog software options. Let’s talk about them in more detail.

You might ask why I’m only listing these three. For now, I’m talking about these three because I’ve personally tested them; and they perfectly illustrate how the differences in features makes them more suited to different kinds of blogs. Other blog options will be listed in the resources section at the bottom of this article.

WordPress

It’s not the granddaddy of all blogging software, but it might as well be, these days. Few actually remember what came before WordPress. (I have vague recollections of something called “b2”, and later, “b2evolution”. Others tell of magical place called “LiveJournal”.)

It’s the standard, and for fairly good reason. It’s feature-filled, flexible, and has been used as the basis for a a lot more than blogs. There are more plugins than you can reasonably expect anyone to shake a stick at, and the community is huge.

It has its drawbacks, though. It’s actually too big, now, for a simple blog. It’s based on older versions of PHP, and that makes it a bit slow and unwieldy, as its developers try to keep it backwards-compatible.

Worse, that massive codebase comes with more potential vulnerabilities. I’ll grant that the WordPress team does tend to stay on top of them, releasing security updates as fast as the bugs are found. That doesn’t do anything for insecure plugins, however.

WordPress is a massive, versatile beast; something which often comes at the expense of speed. Don’t get me wrong, you can make WordPress fast. But that’s just it. It’s not as fast as it could be out of the box.

You can build anything with it, but for a price.

Ghost

Ghost is newer, leaner, and does one thing: blogging. Built on NodeJS, it’s fast. Designed by the experts, it’s pretty. I have yet to hear of any major security flaws.

I just finished building a site with it, and I’m in love. Writing in Ghost is simplicity itself.

However, that’s all it does. There are plans to have a plugin system in place (called “Apps”) but it’s not there yet. This means that things like “related posts”, magazine-style layouts, and other slightly more complex bits of functionality just aren’t happening yet.

But my God, it does pure blogging so very well.

BoltCMS

Bolt can be used to make a blog. It could also be used to make something much bigger. With a somewhat steeper learning curve than either WordPress or Ghost, it’s made for teams. It’s made for businesses.

Need to build that magazine or newspaper site, with all kinds of posts, and data streams all over the place? Bolt can do that. Need to program in custom functionality? The CMS won’t get in your way.

And yes, there are plugins. They’re also all open source.

Hosting

When it comes right down to it, while not all web hosts are made equal, many are, and many of them may well be running on servers owned by the same corporation.

You’ll find many hosts, with many price ranges, with many varying degrees of good customer service. Sure, I could go and list all of the big names in the industry for you, but here’s the thing: most of what you’ll find is subjective information.

Or worse, you’ll find reviews that have been flat-out paid for by the companies being reviewed. Who then, should you trust? Yourself, mostly.

Look for a host that maintains their own hardware. Don’t ever go with “free hosting”. Ever. As always, if you’re not paying for the product, you are the product.

That said, hosts with cheap, shared hosting plans are not to be feared. Unless you gets tens of thousands of readers or more, you’re not likely to need more than what these cheaper plans provide.

Most hosts give you options for easy upgrades. It might require actually talking to the people at the company, but there’s another chance for you to evaluate them.

I’m with a hosting company that gets back in touch with me fast whenever I contact them. I’m a five-dollar-a-month customer, but that doesn’t stop them from responding fast, and getting things done.

While nice customer service people don’t necessarily guarantee good technical skills, it can indicate their general attitude toward their customers. That attitude is everything, especially in a crisis. And hosting servers are just big computers. There will inevitably be a crisis.

What do you really need?

Choose your host based on your needs. What CMS are you running? Any PHP-based CMS should be fine on most hosts, but not all support node-based apps like Ghost.

You’ll want daily backups. Every good host should have automated daily backups of all sites, but some don’t.

Lastly, don’t be afraid to move. If your current host isn’t giving you what you need, pack up and leave. Transfer your site to another host, start fresh.

Unless you’re planning to blog anonymously (more on that later), your hosting shouldn’t be too great a concern.

The basics of blog design

Now, the first thing to know about blog design is that you really don’t have to get fancy. Oh, you want it to look good, but that’s not overly-complicated.

Blogs are meant to do one thing, and one thing only: put the latest content in front of your reader’s eyeballs. That’s it. That’s all. You’ve mastered the secret to designing a half-decent blog.

Now, if you want people to stay for a while, see what you have, and keep coming back, there are a few more things you’ll need to do.

UX goals and concerns

More than anything else, you want people to enjoy reading / looking at / watching what you have on your site. Most of that work has to be done by the content itself. No amount of flashy animation and color can mask boring content.

However, even the best content can be undermined if it’s not easy to get to. So, like any smart person, you put the newest content on the front page. That’s a start.

But what if a reader found something before that they liked, but doesn’t remember where to find it now? It’s the one time they forgot that Bookmarks were a thing, and damn. It was funny! Now if only they could show their friend…

You usually want all of your content to be easy to find, including—no, especially—your old content.

Navigation & organization

To that end, you’ve gotta get your navigation right. Now, for many blogs, some categories and dated archives in the sidebar, or on the bottom of the page, will serve the purpose. It’s an old solution, but still a good one.

Likewise, the smart blog owners have implemented search options of some kind. When people come back to your blog, it’s either because they want more of what you’ve got, or because they’re looking for something specific. Make the specific stuff easy for them to find, and they’ll love you.

Search isn’t perfect, because it requires people to remember what they’re looking for, and (usually) to spell it right. You can get around some of these issues with Google-powered search, for example. Otherwise, you will want to look into different search plugins for your CMS, perhaps.

About those categories

It can be weirdly difficult to come up with categories that fit your content, sometimes. On WDD, we have it easy. The various disciplines, fields, technologies, and resources relating to web design have been largely defined and categorized for us already.

Is it mostly about HTML? Or CSS? Or is it a more theory-centric design article?

Select the category, and you’re done. Other subjects may not have been categorized down to the most minute details. You might consider whether you want to put some posts in more than one category, or make use of tags instead, or both.

Test it

In any case, once you have your navigation set up, get it tested. Whether you spend money on a testing lab, or just beg your friends and family to check it out, do some tests.

This is the biggest, most important thing you can test. Dedicated readers who like your stuff will put up with a lot, even barely-legible text, as long as they can find what they’re looking for.

Readability

That said, make sure your text is very readable. For every dedicated reader who’ll stick by you despite the green serif font on a hot pink background, more will start running. Or close the tab. You get the picture.

I’m not going to explain the basic rules of typography here, there are other places for that. Just be sure that however your design gets done, with a template or a custom design, the text is comfortable to read for long periods of time.

There are a surprising amount of blog themes out there that use strangely small body text, so really look.

Pre-made themes or custom design?

Ok, so remember how I said I like to have control? That goes even into the realm of design for me. I might have a problem.

Still, a custom design is a great thing to have, if you can make or get a good one. It’s yours. It’s unique (well, probably unique-ish). If you have an existing brand, a custom design might well fit that branding better than any pre-made theme you’ll find.

The downside is that custom design is expensive. If you’re a designer and/or developer, it’ll cost you a fair amount of time to get it right. If you’re not a designer or developer, it will cost you time and money.

For the average person starting their first ever blog, a pre-made theme will probably do the trick. Even when they’re not free, they’re almost always cheaper than a custom design. Many provide a certain amount of customization, and the good ones can look really pretty.

The main downside is that your site is going to have more than a passing resemblance to many others. This isn’t inherently bad, but can occasionally cause confusion.

Besides that, you may find it difficult change certain aspects of your blog later on. While there are WordPress themes (for example) out there that provide their own admin interfaces and endless customization options, these themes tend to be incredibly over-done, and slow. Yes, the wrong theme can slow down your website considerably.

Be especially wary of WordPress themes that promise you the moon. They might deliver; but the moon is slow to transfer over most Internet connections. Go figure.

Most bloggers that last usually combine the two options. That is, they start with a pre-made theme, and eventually move to a custom design.

The layout

For most, the basic layout is possibly the simplest part of designing a blog. I mean, you put the posts there, newest first, and go. If you want to get really fancy, you can use a masonry-style layout, or some alternative.

Things only get really complicated if you’re not making a blog, but an actual news network or magazine site. Since those websites are all about showcasing as many of their recent posts from as many categories as possible, their layouts can get tricky.

For most bloggers, this is not an issue. It’s usually hard enough just to motivate yourself to keep writing, much less find ways to show off that much content.

So, when it comes to layout, concern yourself more with the things I already mentioned: navigation and readability. The rest is mostly a matter of style. Remember to give your readers navigation options at both the top of every page and the bottom, and you’re probably good to go.

The actual blogging bit

For many people, the hardest part about blogging is the part where they sit down to write stuff. I won’t lie, I’m one of these people.

Okay, full disclosure, it’s a lot easier when you’re getting paid to do it. If someone’s giving you money to write for a site that already has traffic, it’s just easier to sit down and start tapping away at the keys.

When you’re just starting out, and you look at those dismal Google Analytics numbers, it feels kinda like you spent your work hours shouting out into the void for no good reason. So maybe don’t ever look at those numbers. Or maybe do look at them, but read the chapter on marketing below.

Mostly, everyone will tell you to just do it. That’s good advice, but it’s often not enough. You want to do it right. Fortunately, there are ways to prepare yourself to do just that.

Improve your writing by a thousand percent right now

Read Copyblogger. All of it.

Ok, fine, if that’s too much, start with a refresher course on grammar. Google words, if you’re not sure of their spelling. There are people who will respect your opinions even if they’re not perfectly expressed. Others may leave mean comments.

I’ll say it again: the Internet is not your friend. The best way to show that your opinion is valuable to the reader is to write it well.

And of course, there are two ways to get better at writing:

1. By writing a lot.
2. By reading a lot.

The first one is obvious, but a surprising number of people neglect the second. Read. Read a lot. Read articles. Read books. Read ads. While you do all of this, focus on they way they say things not just on what’s being said.

Listen to audio books, and listen to the way the reader will express things, based on punctuation. Learn to separate your thoughts into manageable sentences and paragraphs.

Spend enough time doing these things, and you may find yourself speaking more clearly in everyday life, not just writing better.

Keep it informal, and keep it honest

Express yourself freely (though always as clearly as possible). Your personality is what makes articles fun to read.

If you’re easily-excited, make use of the exclamation mark. Don’t use it on every sentence, but use it. Check the thesaurus for new superlative words, and let loose.

If you’re typically more reserved, are a fan of understatement, or are just British, use that to your advantage. Use your dry, sarcastic humor to amuse yourself, and hopefully, your readers. Just mention very clearly that you’re being sarcastic.

Let the style of your writing be informed and molded by you, and your nature. Well, most of us can’t help doing this anyway, but I can usually when a writer is fighting it.

I can also tell when they’re trying to force excitement into the tone of an article, in an effort to make other people get excited. I’ve done it myself at times. It doesn’t work.

Tone is hard to convey

I should tell you that not everyone will understand you perfectly, mind you, even if your English (or other language of choice) is perfectly written.

Some people, heck, probably most people, communicate more with their tone than with grammatical structure. These people tend to interpret everyone else’s communication in the same way.

I’ve had real-life conversations that went something like this:

Them: Want ice cream? It’s chocolate!

Me (internally frustrated about repeatedly dying in a video game): Sure. Thanks.

Them: What, you don’t like chocolate? Or ice cream?

Me (puzzled): Ummm, yes I do. I… never said any of that.

Them: But you look and sound like you don’t like chocolate, or ice cream, or pizza!

Me (still puzzled, now craving pizza): ???

Me: You’re making me feel like carefully choosing my words was all for nothing.

Them: You don’t like pizza. How can I trust you?

That’s a bit exaggerated, perhaps, but you get my point.

In writing, it gets harder. You might think, “Well yeah, sarcasm is hard to communicate in text.” That’s right, but the problem goes so much further.

Phrases, and even single, individual words can have an emotional context for a reader that goes far beyond their meaning. It could be from simply misunderstanding a word, or from past experiences, or who-knows-what. The point is that what you write and what your readers understand could be very different things, even if your writing is technically perfect.

Their understanding of your whole post can be colored by the use of a single word, their mood at the time, recent experience, or any number of other factors. There’s not a lot you can do about it, except continue to strive for clarity.

And be ready to explain yourself in the comments.

Blog regularly

Not gonna lie, I’m really bad at this. That doesn’t make this advice any less smart, but yeah. Regular blogging brings regular traffic. Regular traffic means regular readers, with new people popping by.

If you’re like me, and you have trouble maintaining a writing habit, there are a few strategies, one of which might work for you:

Write a specific number of words each day

Start small. Like fifty or one-hundred words. You can do that with a few paragraphs. Like every other strategy, this doesn’t work for everyone (read: it hasn’t worked for me), but some people do well with a solid word count to reach.

Write for a set amount of time each day

I haven’t tried this one myself, it’s next on my list. You pick a short amount of time to dedicate to writing every day, and just go for it. You don’t have to post something every day, just write, and post when you’re ready.

Use the buddy system

I’ve recently been working with a community of like-minded individuals to improve my work habits, and get my side projects launched and done. We check on each other weekly to see what progress has been made.

We also sometimes jump into Google Hangouts, mute ourselves, and just work. Every hour or so, we turn the microphones back on and check in. Having someone hold you accountable for promises that you make to yourself can be a huge advantage.

Multimedia

Images yes. Videos yes. I mean, besides the obvious purpose of images on photo blogs, and videos on video blogs, people just seem to like pretty pictures. Whether they’re static or in motion, people like clicking on big colorful images.

It’s just that simple, really. It’s probably the same reflex that makes it hard to turn your eyes away from a television when it’s on, even if it’s daytime programming.

Just make sure that when you spice up your posts with images or videos, that they are relevant, and that you have permission.

Video is fairly easy. If it’s on a site like YouTube that allows embedding, you’re probably free to embed the video on your blog. Images are more complicated.

Unless you buy stock photos, or get them from a free stock site, you’ll want to search for photos under the Creative Commons license. A lot of photos on Flickr are licensed that way, so there’s one place to look.

When in doubt, ask the photographer, or the model, or both, and give the creators credit.

I don’t have to explain how taking something that’s not yours and calling it yours is a bad thing, right?

Marketing and promoting your blog

Okay, so you have your blog, you have some content,and you want people to know about it. Well, everyone? Not everyone, right? Only the people that are actually interested in what you have to say.

Marketing isn’t easy, and it’s not everyone’s strong suit. Sometimes, even with all of the money and huge teams that they have, even the biggest companies get it wrong. And let’s be honest, you probably don’t have the money that they do, or a marketing team of any size.

Most likely, it’s just you. That’s okay. That’s where everyone starts.

It just means that you have to adapt your tactics. You can’t use the scatter-shot, make-sure-everyone-sees-it-and-hope-for-the-best approach that bigger companies use. You have to find the right people.

You need to find the kind of people who care about what you have to say, and prove that you are worth their time. They have lives, and friends. They have work. They have hobbies, video games, and even families. Again, they have video games. You have to compete with that.

You have to write stuff that’s good enough to make them carve out enough time to read it. That’s the first step. The rest is all about presentation.

Start with the search engines

Yes, this is where I’m going to talk about SEO. No, I’m not going to start talking about “SEO hacks” or tricks. Those don’t work. Or if they do, they rarely work for long.

Besides, there’s no better way to lose a reader than to start the relationship by lying to them. If they don’t find what they’re looking for on your blog, they’re just going to move on. They won’t stay “just to make sure”, and they definitely won’t be coming back.

Just write about the topic. Mix in keywords for your topic where it feels natural, and put relevant tags on each page.

It’s especially important to put in tags, and maybe a paragraph of descriptive text, on blogs that are more video or photo-oriented. Search engines can’t index videos or photos without a little text to help.

Then, just wait for your site to be indexed, and keep blogging. Or, if your blog is brand new, you can manually submit your site for indexing on various search engines. That makes it happen a little faster.

That’s it. That’s as far as most search engine optimization is supposed to go.

Oh, there’s more you can do, but you should be writing first. Once you have a solid bunch of content to work with, check out this guide to SEO: SEO Basics: Complete Beginner’s Guide to Search Engine Optimization

That guide covers the finer details quite well. It also has quite a few links, if you want to jump right down the rabbit hole. (By that, I just mean that SEO is a pretty big topic, once you get down to the details.)

Social media

Social media. There are times when I wonder if that’s an oxymoron. Language issues aside, social media can drive huge traffic to your blog. Then again, it might not.

Either way, people spend hours upon hours of their lives on Twitter, Facebook, LinkedIn (yes, really), and even Google Plus (yes, really). If they follow you, you can put your content in front of their eyeballs every day. Since people often browse those sites when they’re a bit bored, or at least looking for a distraction, it’s a great start.

Besides, it’s a great way to talk directly to your readers.

Use images on social media

If you can manage it, post an image for each blog post along with your link. In the endless stream of text and interaction, pictures are noticed.

I recommend using the same image you’re using on the blog itself. You are using a header image for each blog post, right?

Link your blog posts more than once

It’s okay to link your blog posts more than once, in case people missed them. Social feeds go by so fast, it’s almost a necessity.

Link it once earlier in the day, and once later. Or make up your own schedule, if you find something that works better. Then link it once more later in the week. Then don’t link it again for a good long while.

Some blogs with a fair amount of older (but still relevant) content link back to posts that are a couple of years old. It drives more traffic, and helps keep those older parts of a site alive.

Talk to people

You read that correctly. Getting people to read what you have to say may involve a fair amount of personal communication.I’m not saying to go around telling people, “Read my blog!” Most people seem to find that annoying, so don’t do it.

Or do it, but film it for the rest of us.

Context is everything. Here are a couple of contexts where you could subtly promote your blog in person without being tedious:

Get involved in the community

Well, get involved in the relevant communities anyway. Your blog has a topic. You’re probably not the only one who cares about it.

So sign up to a forum! Join a regular Google Hangout. Go old-school and find an IRC chat room. Find a community or three where you can talk freely about your passion, share resources, and have fun with it.

Then, if it’s ever relevant, bring up a blog post you wrote. Or ask for feedback on something you wrote. Obviously, don’t spam your new friends; but don’t be afraid to share your work, either. Chances are, they’ll want to see it, and perhaps share it with their other friends.

You never know.

The point is that people have more of a reason to care about what you write if they know and/or like you.

Throw some links around

Now, a corollary to engaging with your community is building up some inbound links. Wait, wait… remember what I said about not spamming? That’s still in play. But, you still need to put some links back to your blog around on the Internet.

Not only will it give people an easier way to find you, but it will help out your SEO, too. But here’s the thing: it only helps if those links are relevant.

Long gone are the days when randomly posting links back to your blog on comments and forums was a good idea. If you want people and search engines to take you seriously, you have to contribute to the conversation.

Write a guest post for another blog or five, and link back to your site in your bio. Leave comments, and include your website URL if there’s a form for that. (Never leave your link in the body of the comment. It’s tacky.) Put links back to your blog all over your social profiles, so people can find them when after you interact with them on social media.

As long as including a link back to your own blog actually fits the context, it’s a good idea. Oherwise, it’s spam; and spam destroys trust.

Don’t forget those who came before

The best traffic is repeat traffic. You want to keep people coming back for more. Building an audience is kind of the point.

How do you market to them? Interact with them on social media. Get them signed up for a newsletter. Start your own forum. Actually implement a commenting system.

However you do it, stay in touch. Reading a blog should, ideally, be a friendly, informal thing. These are real people, so you have to make your best effort to treat them that way.

Basic blog security

Unless you’re some kind of a programmer/systems expert and run your own server, you’re not going to have complete control over your security. Even if you were, security is rough. It’s always been harder to build defenses than to destroy them, and digital security is no different.

You have to pay attention to it, though. The entire point of running your blog on your own hosting is greater control, and that includes control over your security.

Does this seem daunting? Yes. Security on any Internet-connected computer can be complicated. especially for those of us who aren’t experts in everything, which is most of us. It’d be nice to just leave your security in the hands of professionals, right?

That’s not always completely possible. For one thing, a large number of security loopholes are caused by users themselves. Then, while information security employees are supposed to be competent, that simple isn’t always the case.

Lastly, the people who take care of your security can sometimes be compelled to divulge access to your information by higher powers and authorities, or worse, by criminals. In a perfect world, this shouldn’t be a problem if you’re not doing anything wrong.

Sadly, governments all over the world sometimes (some more often than others) perpetrate injustices and outright crimes against humanity. And criminals… well they have ways of making people talk. (Yup, I went there.)

Besides, there are other reasons for wanting to remain anonymous. For example, some people blog about mature topics and also want to keep their day jobs. Social stigma can make people hide their identities even when they’re not doing anything wrong.

Let’s not kid ourselves, though. If someone really, really wants in, and has enough resources, you can’t actually stop them. You don’t have to make it easy, though, and there are ways to minimize the damage.

Keep in mind, too, that security isn’t just about keeping intruders out. It can be about getting your data back safely if the main servers get hit by a natural disaster or five.

Secure hosting

Your hosting needs, as mentioned above, will depend on the platform you’ve chosen, but if you’re looking for extra security, you need to look a bit deeper. You also need to be a bit cynical.

See, non-secure hosts aren’t going to tell you that their security is horrible. They have every reason not to do that. The ones with incompetent personnel will tell you that their people are great, and everyone at the company might genuinely believe that.

And naturally, none of them really go out of their way to tell the world exactly how they manage their security. That’d be just begging for trouble. At most, they’ll throw a bunch of acronyms around to indicate which security technologies and software solutions that they rely on.

Those words and acronyms are not too terrible, as indicators of security go. I can tell you some of what you need to know right here:

• Do their URLs start with “https”? Make sure the “s” is there. It literally and figuratively means that their hosting is more secure.
• Do you see SSL (see the first point above), SFTP, or SSH being advertised? These features alone do not make a safe web host, but it shows they’re trying.
• Do they handle their own server hardware? Re-sellers can’t do all that much about their own security. Go to the source.
• Do they have a good backup system in place? Do they offer manual and/or automated backup systems for their users to download their own data?
• What operating systems are they running? Linux and Unix-based options like CentOS are a good start.
• Is all of their software (OS included) up to date? Old software is almost always less secure software.

Look them up. Search the Internet to find other people’s experiences with any host you have in mind. Specifically look for times when they faced crises, and see how those were handled. Did they take both responsibility and action? Or did they just fire somebody and hope for the best? Do they have the hardware and experience to handle denial of service attacks?

Blogging anonymously, and hosting

If you’re planning to blog anonymously, find out where your host has their actual physical servers. If you’re planning to do something rash in your home country—like exposing criminal behavior, or criticizing your government—you may want your data hosted in another country entirely. Perhaps another continent?

People will usually tell you to go for a local hosting company. If anything goes wrong, you can bring them all a coffee and bother them in person ’til they get it fixed.

However, when your personal identity, and perhaps your safety, is at issue, distance is a good thing. Happily, for most people in the world, this isn’t a major issue, but for some people—sadly, you know who you are—blogging can be literally life-threatening.Hosting offshore might mean a few seconds longer to load the page, but it’s worth it to stay alive.

You should interact with your host through intermediaries, if you can. A lawyer, an accountant, or even a humanitarian worker of some kind will do, depending on your situation. Do the same thing when buying a domain name, if possible.

Search for hosts that have a history of protecting their customer’s information, and even their identities. They may have their hands forced at some point, but most importantly, you want them to try. At the very least, it could buy you time to move somewhere safer.

CMS security

Security for a CMS is a different beast, and security for these systems can be incredibly simple, or very complicated. It all depends on how they were built.

Take WordPress, for example. It was first released over ten years ago. It has seen many updates since then, with many changes made to the underlying code. Changes were also made to PHP, the technology that WordPress is built on, in that decade.

Through all of this, the WordPress teams have been adding features, trying to update the software while also keeping it backwards compatible. This means bugs.

Bugs mean security holes.

Now, I’m not bashing WordPress. This happens to all software, to one degree or another. To their credit, the WordPress devs release security patches pretty much constantly. Yes, that’s a good sign. It means that vulnerabilities are getting fixed, and that the developers care.

The users care too. More than a few security-related plugins have been built for WordPress to “harden the defenses” so to speak. If you keep up with the updates, and educate yourself a bit about WordPress and security, you can keep your site fairly safe from attack.

Ghost has seen fewer of these security holes; but that’s really only because it’s newer, and smaller. They also fix the problems quickly.

In some ways, this is an advantage, because you can basically let the Ghost team handle the security stuff. If you just keep Ghost updated, you’ll probably be fine.

The drawback here is that Ghost does not have as big a community looking out for it, yet. There are no third-party security plugins. If something goes wrong, the best you can do is reset your site from a backup, and wait for an update to fix the underlying problem.

It’s simpler, but you have a bit less control… for now, anyway.

Blogging resources

Throughout this guide, I’ve linked a few different resources here and there where appropriate. I’ve talked about my three favorite blogging engines, linked to blogging-related guides, etc. But there’s so much more.

Here, then, is where you’ll find other great bits of software, guides, and resources to help you get your blog off the ground.

Other blogging software

Many CMS options are built for more than blogging. This has its pros and cons. One the positive side, you can add whole ranges of other functionality, if it seems right for you and your readers. These more versatile CMS options give you more room to grow.

On the other hand, this automatically, and immediately, raises the level of site complexity. If you’re just starting out, you may want to start with something meant specifically for blogging.

The CMS options listed here are all free and open source. They’re great for the wallet, and great for full control over your site.

Anchor CMS

Anchor is one of those “pure blog” systems that I mentioned. Made with PHP, it’s small, fast, light-weight, and quite customizable. You can use as many custom fields for extra information in your blog posts as you want.

Customize a theme or make your own. If you’ve ever made a WordPress theme, you’ll be fine. Add custom CSS and JavaScript to any individual blog post for art-directed blogging. Custom HTML is easy, as the whole thing runs on Markdown, which already supports the inclusion of custom HTML.

This is smart, simple option. It may not be the best for beginners; but for those who have a bit of blog-building experience, Anchor CMS gives you what you need, and skips a lot that you don’t.

Pagekit

Pagekit represents the other end of the spectrum. It’s meant to allow you to build any kind of site you like, just about.

The blogging features are solid, though. You get all the usual features, plus live previews of your post, whether you’re editing in markdown, or raw HTML. Add to that a file manager, advanced team management for multiple authors, and the rest of the non-blog features, and you’ve got a pretty solid CMS.

Larger brands and organizations might consider Pagekit for their blog.

Concrete5

Here’s one for the beginners. Concrete5 is a powerful and flexible CMS that, like Pagekit above, has a whole host of features for building any kind of site you like.

However, Concrete5 is built for beginners. Once it’s installed, you can drag and drop everything onto the page as you desire. Layouts can be simple or complex. You can install new themes and plugins right from the admin panel. Everything’s visual.

Mind you, some of the themes and plugins are paid. The core CMS is complete, functional, and powerful, though. You probably won’t need the paid stuff.

I will say that when I used it last, it ran a bit slow; though that could have been my internet at the time. Ease-of-use comes at a cost, though. That cost is usually paid in bandwidth and file size.

Textpattern

Textpattern is for nerds, basically. Don’t get me wrong, it can be simple, it’s powerful, and it’s very flexible. But to take advantage of all that, you’d best know some HTML and CSS at least.

The CMS itself has a bit of a learning curve, so if you pick Textpattern, give yourself some time to adjust. That said, you can customize just about everything. There are plugins galore, a strong community, and Textpattern is just beautifully fast.

It’s been around for a while, and it’s still around for a reason: it handles large, complex sites well. If you’re building a magazine-style site, Textpattern is a pretty good choice.

HTMLy

HTMLy is meant purely for blogging, but it’s loaded with features meant to make it more convenient for an amateur (or expert) developer to get their blog up and running.

Features include writing in Markdown with a live preview (this is quickly becoming a standard feature for blogs), separate content types, multiple authors, an easy installer, file caching, and a whole lot more.

One of my favorite bits is that it’s a flat-file CMS. That’s right, no database. If you need to move your blog from one server to another in a hurry, it’s just a matter of copying and pasting the files.

Wagtail CMS

On this list, Wagtail is a bit of an oddity. It’s written in Python instead of PHP, but don’t let that hold you back. If you can get it set up, (perhaps with help), it’s very simple to use.

It uses drag and drop components to put pages (and more importantly, blog posts) together, but those components are entirely customizable. Even better, you can make your own. It’s like a site-builder that you make to your site’s specifications.

This makes it easier to build complex, beautiful blog posts in bits and pieces, like you might do on Medium. But in this case, it’s all open source, and it’s all on your own server.

Blogging guides and tips

Obviously, we’re not the first to write a guide to blogging. there’s a lot more information out there, and it’s worth taking a look. For example:

Over at Smashing Magazine, they’ve created a guide to blogging and editorial calendars for designer types. If you’re not used to writing and publishing regularly, I suggest that you give it a look, whether you’re a designer or not.

At Problogger (a site you might start reading regularly), there’s an excellent article about how to get more work as a freelance writer. Since blogging sometimes leads to freelance writing, or at least guest blogging, it’s worth knowing how to promote yourself.

Then there’s the afore-mentioned Copyblogger. They publish tons of great advice, all the time. Just, start reading them. Now. Start with these:

• 7 Ways to Simplify Complex Content While Maintaining Sophistication and Nuance
• A Brief Guide to Fixing Your Old, Neglected, and Broken Content
• How to Immediately Become a More Productive (and Better) Writer
• The 7 Essential Elements of Effective Social Media Marketing

Anonymous blogging resources

Let’s not forget the people who need to blog anonymously, or at least as privately as possible. For you, we have two articles:

• An Anonymous Blogger Tells All: The author of Waiter Rant (full disclosure, that was one of my favorites for years) talks about how to stay anaonymous for as long as possible.
• 5 Reasons to Blog Anonymously (and 5 Reasons Not To): How to decide whether you want to blog anonymously or not in the first place.

Hosting recommendations

For the general blogger, most of the big-name hosts will do just fine. However, if you’ve chosen to run WordPress, you should keep in mind that it needs a few specific things to make it run as fast as it possibly can.

This list of the best WordPress hosts on Design Bombs is a great place to start. Keep in mind that most of these hosts can also run just about any other CMS, though some of them are basically resellers. (Even then, a reseller running on Amazon Web Services, for example, won’t do too bad at keeping your site up. Just don’t expect your data to be as private as it could be.)

For anyone who needs anonymous hosting, there are a few options. Some of them don’t require any information from you beyond a working e-mail address. Most accept payment in Bitcoin. If you want privacy fanatics to host your site, these are the guys to go to:

• IT Itch
• Orange Website
• Hosting by Anonymous Speech
• Vindo Hosting
• Bitcoin Web Hosting

Source

Designers, just like any other creative professionals, just cannot keep working mechanically. They need to be at the peak of their physical and mental state in order to deliver quality output. So, here are a few hacks that should help the designers improve their efficiency as well as the quality of their work. 1. Take

Do you like challenges? Are you willing to take on a task that you’ve never come across before, and do it under a deadline? What if, in carrying out the task, you encounter a problem that appears unsolvable? I want to share my experience of using CSS 3D effects for the first time in a real project and to inspire you to take on challenges.

It was an ordinary day when Eugene, a manager at CreativePeople, wrote to me. He sent me a video and explained that he was developing a concept for a new project and was wondering if it was possible for me to develop something like what was in the video.

The post Front-End Challenge Accepted: CSS 3D Cube appeared first on Smashing Magazine.