Category: WordPress Insights

  • 5 Reasons Why Whitespace Matters

    Reasons-Why-Whitespace-MattersBasically, whitespace, at its most basic definition, is the space around and between all the elements of a composition that is left unmarked. It’s not just a waste of screen space, as most websites owners think. When used well, whitespaces can actually provide benefits to better promote a product. It is an important key to creating good design and it makes a website better in every way.

    Although the name whitespace implies that the space is white, it doesn’t always have to be literally white. Whitespace can actually be any color—It can even have a subtle pattern or texture. It’s an area that you don’t want the eye to focus on. Alternatively, it’s called a negative space.

    So, why does whitespace matter?

    newsfeed
    Image Source: News Feed

    Reason #1: Improves readability

    Whitespace between baselines and paragraphs actually help people comfortably read all of the content on the site. Adjusting small details of your site (like line-spacing/leading or the letter-spacing) could make a huge difference in make reading easier.

    The goal is to make people want to keep reading by designing layouts that are easy on the eyes.

    hpmagicwords
    Image Source: HP Magic Words

    Reason #2: Speeds up interaction

    Let’s be honest: most of your visitors won’t have enough patience to look thoroughly when browsing through websites. When a website looks cluttered, it keeps users distracted from finding what they are looking for.

    Whitespaces should help lead the viewer around the page. Less elements competing for attention plus proper use of whitespaces can prevent distractions that slows visitors down.

    google
    Image Source: Google

    Reason #3: Drive attention to the right elements

    Whitespace can give users visual cues on where they should be looking. When used in a correct manner, whitespaces help emphasize information and draw attention to a particular area on you website.

    Remember, if everything stands out, nothing does.

    Image Source: Pocket Penguins

    Reason #4: First impressions matter

    The look and feel of a website is the main key to good first impressions. Good first impressions often leads to longer visit duration. Too little whitespace can make your website look cheap and unreliable. Visitors won’t think the site or the brand is credible unless it looks attractive. Having a good amount of whitespace helps create the right tone for your website. Whitespace can be a way to communicate ingenuity, freshness, and sometimes, elegance.

    Tip: Here’s an idea on how to make your web design simple and familiar.

    flockknitwear
    Image Source: Flock Knitwear

    Reason #5: Helps create breathing room and balance

    A balanced design doesn’t mean symmetrical. A large design element can be balanced by a few smaller once. Adding whitespace is a great way to balance different-sized design elements on your page. Create a flow so the users eyes won’t dart all over the place. A good design should be able to guide the user from one point to another without confusing the visitor.

    Conclusion

    Next time you visit a website and find yourself staying a while, think about what made you stay and read. Do you think the line-spacing makes an article easier to read? Does the experience make you want to keep coming back for more? Did you have a hard time looking for the navigation?

    Take note of the good application of whitespace on the website. If you think it can also work in your website, learn to apply and manage how much space you should allocate on your element until you think you’ve conveyed the right tone and readability without sacrificing the “flow” you want for your website.

    The ultimate goal of any website is communication. Visual appeal goes hand in hand with the success of your website.

  • The Unspoken Problem of Shortcodes

    The-Unspoken-Problem-of-Shortcodes

    Shortcodes are one of the pinnacles of wordpress. Shortcodes are the bridge between developers and site creators, allowing people to place elaborate pieces of content almost anywhere they wish. Plugin creators love shortcodes since this allows more flexibility in the way how and where their users display their content.

    If you don’t know what shortcodes are and what they look like, they’re those archaic code-like text wrapped in square brackets. They look something like this:

    This specific one is called the embed shortcode and is built-in by default in WordPress. This specific one embeds the video from the URL into your content. Just copy and paste the above shortcode in your site if you want to give it a spin.

    Behind the scenes, what happens is that when WordPress encounters a shortcode in your content, it gets processed and converted into something else. In our case above, whenever an

    shortcode is detected, WordPress takes the URL in the shortcode and checks it against a number of content providers that it has. When it finds one, it then gets the appropriate iframe embed code and displays that instead.

    So what’s the problem here? It sounds easy enough, you just enter a short text with brackets and you’re done.

    Enter the Shortcode API..

    Shortcodes Galore

    The Shortcode API opens up the creation of shortcodes to developers. Because of this, developers can add their very own shortcodes inside their plugins.

    This is great, now with just a short code-like snippet (hence the name “shortcode”), beginners and advanced users alike can put virtually any type of content they wish anywhere.

    WordPress by default only has a handful of shortcodes. It’s easy to type them out from memory because there’re just a few of them. But if you install a few plugins, the number of shortcodes quickly jump up to a dozen or more, and in some cases more than a hundred. Each shortcode has their own set of attributes and instructions on how to use them. Each plugin most likely has some sort of documentation on how all of their shortcodes work and lists all of the parameters available in each one. But you’d be nuts if you try and memorize all of the shortcodes and their attributes.

    The problem is that there is no centralized area on which you can find out all the shortcodes available on your site and how to use them.

    Some Try and solve the problem

    Some plugins try and solve this problem by presenting all of their own shortcodes in a easy to access drop down. Then clicking on one would print out the shortcode, complete with all the possible attributes for it. There’s no more need to memorize it, which is a good thing.

    Screen-Shot-2016-06-22-at-11.27.09-AM

    Some go farther and add in a settings popup form that has checkboxes and color pickers to populate the shortcode’s attributes.

    Screen-Shot-2016-06-22-at-11.28.54-AM

    This solution sort of works. However, each plugin only enumerates their own shortcodes. So if each plugin creates their own form of shortcode picker, you’re bound to run into times when you have multiple shortcode pickers on your screen (This has happened to me before).

    Screen-Shot-2016-06-22-at-11.22.41-AM

    In other words, each plugin does their own does their own thing and implements their own solution for their own shortcodes. Some plugins add either a new button beside the “Add Media” button, or a new one inside TinyMCE.

    So now you might be thinking, “Why not just also gather the shortcodes of other plugins and include that in your dropdown / shortcode picker too?” Well, that’s exactly what I thought. But, this is easier said than done. I’ll explain why in a bit, but first let’s look at what an ideal solution would look like.

    The Ideal Solution

    The perfect plan would be to create a plugin that gathers all of the available shortcodes in your site, then presents you with the list and also help you fill up all the attributes. And every time you install a new plugin, all of those newly introduced shortcodes would be presented to you as well.

    Imagine a central place where all your shortcodes would be placed for easy access. Each shortcode would describe what they do and what plugin they belong to. Then for each available attribute, imagine each of those would have a label, a proper way to select a value for them and a description. You’ll be shown drop downs, color pickers, radio buttons, toggles and whatnot.

    Something like this would make our lives as website and content creators easier. No more checking different documentations, or different parts of your admin just to copy a generated shortcode for a slider that you want to use.

    The Caveat

    Unfortunately, it’s quite difficult to do something like that right now. There is no sure-fire way to know all the details of a shortcode. You can get a list of all shortcodes, but only their actual tags/names, you can’t get any additional details about them such as a kist of attributes, what they do and their types – like a string, a color or a number. Nor can you get a semblance of a description for each attribute.

    Note to the developers out there: yes there’s a newly added third argument for the shortcode_atts function, but it’s not a required argument. So unless every plugin developer in the world implements it, then we still won’t have a sure way to determine all of a shortcode’s attributes.

    The Shortcode API doesn’t provide any facility for adding shortcode descriptions, type casting attributes or attribute descriptions. And unless WordPress itself adds a central area for accessing shortcodes, I doubt this facility would be created.

    Conclusion

    Right now the task of organizing shortcodes is left to each developer. Unless a central method is developed within WordPress, expect to continue to see multiple “Add Shortcode” buttons in your backend. Whether something like this should be added into the WordPress Core or not is another huge discussion in itself.

    An Alternative

    There are page builder plugins that address this differently. Instead of programmatically detecting shortcodes, they have shortcode mappers where users can manually input every detail of a shortcode. Once done, it would then become available within the page builder. While  this works, those are only available in your own site.

    We here at Page Builder Sandwich are creating something that can hopefully solve this shortcode conundrum. Subscribe to our newsletter below to get notified on our progress.