<?xml-stylesheet href="/pretty-feed-v2.xsl" type="text/xsl"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
  <channel>
    <title>Trys Mudford's Blog</title>
    <link>https://www.trysmudford.com/year/2014/</link>
    <description>Posts, thoughts, links and photos from Trys</description>
    <generator>Hugo -- gohugo.io</generator>
    <language>en-us</language>
    <lastBuildDate>Tue, 13 May 2014 00:00:00 +0000</lastBuildDate>
    <atom:link href="https://www.trysmudford.com/blog/index.xml" rel="self" type="application/rss+xml"/>
    
    <item>
      <title>Simple load more for WordPress</title>
      <link>https://www.trysmudford.com/blog/simple-load-more-for-wordpress/</link>
      <pubDate>Tue, 13 May 2014 00:00:00 +0000</pubDate>
      
      <guid>https://www.trysmudford.com/blog/simple-load-more-for-wordpress/</guid>
      <description><![CDATA[
<p>Below is a really handy load more script for WordPress giving you a simple way to do away with cumbersome old pagination. It works with categories, authors and archive pages and it’s very simple to implement.</p>
<p>The code is split into two sections, a JavaScript function and a one line addition to your index.php loop.</p>
<h2 id="javascript">JavaScript</h2>
<div class="highlight"><pre class="chroma"><code class="language-javascript" data-lang="javascript"><span class="kd">function</span> <span class="nx">loadMore</span><span class="p">(</span> <span class="nx">e</span> <span class="p">)</span> <span class="p">{</span>
    <span class="kd">var</span> <span class="nx">theGrid</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span> <span class="s1">&#39;.post-articles&#39;</span> <span class="p">),</span>
        <span class="nx">PostURL</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span> <span class="k">this</span> <span class="p">).</span><span class="nx">attr</span><span class="p">(</span> <span class="s1">&#39;href&#39;</span> <span class="p">);</span>

    <span class="nx">$</span><span class="p">(</span> <span class="k">this</span> <span class="p">).</span><span class="nx">parent</span><span class="p">().</span><span class="nx">remove</span><span class="p">();</span>
    <span class="nx">e</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span>

    <span class="nx">$</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span> <span class="nx">PostURL</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span> <span class="nx">data</span> <span class="p">)</span> <span class="p">{</span>
        <span class="kd">var</span> <span class="nx">jResult</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span> <span class="s2">&#34;&lt;div&gt;&lt;/div&gt;&#34;</span> <span class="p">).</span><span class="nx">append</span><span class="p">(</span> <span class="nx">data</span><span class="p">.</span><span class="nx">replace</span><span class="p">(</span> <span class="sr">/&lt;script\b[^&lt;]*(?:(?!&lt;\/script&gt;)&lt;[^&lt;]*)*&lt;\/script&gt;/gi</span><span class="p">,</span> <span class="s2">&#34;&#34;</span> <span class="p">)</span> <span class="p">);</span>
        <span class="nx">jResult</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span> <span class="s1">&#39;.post-articles&#39;</span> <span class="p">).</span><span class="nx">children</span><span class="p">().</span><span class="nx">appendTo</span><span class="p">(</span> <span class="nx">theGrid</span> <span class="p">);</span>
    <span class="p">});</span>
<span class="p">}</span>
<span class="nx">$</span><span class="p">(</span> <span class="nb">document</span><span class="p">.</span><span class="nx">body</span> <span class="p">).</span><span class="nx">on</span><span class="p">(</span> <span class="s1">&#39;click&#39;</span><span class="p">,</span> <span class="s1">&#39;.load-posts a&#39;</span><span class="p">,</span> <span class="nx">loadMore</span> <span class="p">);</span>
</code></pre></div><h2 id="php">PHP</h2>
<div class="highlight"><pre class="chroma"><code class="language-php" data-lang="php"><span class="o">&lt;</span><span class="nx">div</span> <span class="nx">class</span><span class="o">=</span><span class="s2">&#34;post-articles&#34;</span><span class="o">&gt;</span>
    <span class="o">&lt;?</span><span class="nx">php</span> <span class="k">while</span> <span class="p">(</span> <span class="nx">have_posts</span><span class="p">()</span> <span class="p">)</span> <span class="o">:</span> <span class="nx">the_post</span><span class="p">();</span>
        <span class="c1">// Loop content 
</span><span class="c1"></span>    <span class="k">endwhile</span><span class="p">;</span><span class="cp">?&gt;</span><span class="err">
</span><span class="err">    &lt;span class=&#34;load-posts&#34;&gt;&lt;?php next_posts_link( &#39;More news&#39; )?&gt;&lt;/span&gt;
</span><span class="err">&lt;/div&gt;
</span></code></pre></div><h2 id="finishing-touches">Finishing touches</h2>
<p>The final part to check is the pagination count set in your WordPress settings. Head to ‘Settings-&gt;Reading’ and choose the number of posts to show before the More News button is displayed.</p>
]]>
      </description>
    </item>
    
    <item>
      <title>BBC News redesign</title>
      <link>https://www.trysmudford.com/blog/bbc-news-redesign/</link>
      <pubDate>Thu, 24 Apr 2014 00:00:00 +0000</pubDate>
      
      <guid>https://www.trysmudford.com/blog/bbc-news-redesign/</guid>
      <description><![CDATA[
]]>
      </description>
    </item>
    
    <item>
      <title>The back button contradiction</title>
      <link>https://www.trysmudford.com/blog/the-back-button-contradiction/</link>
      <pubDate>Thu, 27 Mar 2014 00:00:00 +0000</pubDate>
      
      <guid>https://www.trysmudford.com/blog/the-back-button-contradiction/</guid>
      <description><![CDATA[
<p>An increasingly common development to many websites is the ‘back to …’ button. The concept is simple, take the user from their current page to the archive from which they came.</p>
<p>It’s a handy form of navigation, so handy in fact, that it has been <strong>built into every web browser available</strong>. So why a website should have a second back button concealed within the page is contentious. But is there a problem with duplicating this form of navigation?</p>
<h2 id="the-contradiction">The contradiction</h2>
<p>When you add a ‘back to …’ button; generally speaking, it will take your user to one of two places:</p>
<ol>
<li>The previous page that the user visited in their browser</li>
<li>The archive page that the current page is featured on</li>
</ol>
<p>The first option is preferable, it mirrors the default function of the browser back button and will cause minimal confusion to the user. However, when the owner of the site is concerned about the user leaving their site, the back button will often be made to function like option 2. And this is where the contradiction appears.</p>
<p>Suddenly your <strong>back button is a forward button</strong>, effectively just another hyperlink taking the user to a page that they didn’t come from. But the difference between this and a normal link is that it’s posing as a trusted form of navigation. Keeping trust with a user is paramount to making a conversion and this unexpected behaviour could just provide enough doubt to lose the user from the site altogether.</p>
<p>This method is especially common on eCommerce websites, keeping a user on the website is regularly seen as objective no.2 (second to making the sale itself). It’s the same reason why many sites choose to use target=”_blank” on all external links. Being afraid of a user leaving your site to the point of changing the way a browser works by default is a dangerous thing.</p>
<blockquote>
<p>Any navigation is good navigation surely?</p>
</blockquote>
<p>Although I agree to an extent with this, there is something to be said for keeping navigation simple. Giving too many options can lead to user confusion. Fewer, stronger navigation elements will fare better than multiple, weaker elements. Any link that a user can click on should invoke trust, by splitting navigation (or over-duplicating), trust barriers get breached.</p>
<h2 id="the-solution">The solution</h2>
<p>If you must have a back button, rather than make it a button that sometimes goes back to the previous page and other times to a completely new page, try checking to see where the user has come from and adjust accordingly. For example, if the aim is to take the user back to search results, check the previous URL to see if it matches with search result URL. If it matches, show the button, if not, hide it.</p>
<p>All web browsers have back buttons. They are trustworthy, consistent and universally accepted as a sure-fire way of navigating the web. Break that tradition at your own peril…</p>
]]>
      </description>
    </item>
    
    <item>
      <title>What’s the point of a home page?</title>
      <link>https://www.trysmudford.com/blog/whats-the-point-of-a-home-page/</link>
      <pubDate>Fri, 07 Mar 2014 00:00:00 +0000</pubDate>
      
      <guid>https://www.trysmudford.com/blog/whats-the-point-of-a-home-page/</guid>
      <description><![CDATA[
<p>Or more precisely, what is the point of <strong>your</strong> home page?</p>
<p>After a very interesting office discussion on the subject of ‘The problem with carousels’, spurred by some great articles by <a href="http://weedygarden.net/2013/01/carousel-stats/">Erik Runyon</a> and <a href="http://bradfrostweb.com/blog/post/carousels/">Brad Frost</a>, Mark proposed the following question:</p>
<blockquote>
<p>What is the point of a home page?</p>
</blockquote>
<p>It’s a great question, one that can be easily overlooked when starting on a web project but one that can have huge bearing on the final result if left unconsidered.</p>
<p>The answer should be different every time, each business is unique and their website should reflect that. The home page is often the highest traffic page the user hits, getting it right is of utmost importance.</p>
<h2 id="what-are-you-aiming-to-portray">What are you aiming to portray</h2>
<p>Whilst thinking about this question, I came up with some attributes, values and features that a ‘generic business’ might wish to depict on their home page:</p>
<h3 id="personality">Personality</h3>
<p>Are you fun, creative, traditional, fresh, well established? First impressions are a big deal on the web.</p>
<h3 id="intention">Intention</h3>
<p>Set tone of how the website fits into the business model. Is it: - To inform? - To sell? - To advertise? - To advise?</p>
<h3 id="authenticity">Authenticity</h3>
<p>‘Does this website belong to the company I think it belongs to?’ Don’t compromise on your brand to the point of user confusion. Strike that:</p>
<blockquote>
<p>Don&rsquo;t compromise on your brand at all.</p>
</blockquote>
<h3 id="integrity">Integrity</h3>
<p>‘Do I trust this website with these weight-loss advertisements and pop-ups?’ I’ll leave you to be the judge…</p>
<h3 id="benefit-to-the-user">Benefit to the user</h3>
<p>What will the user gain by reading the home page? Is your home page just going to be a funnel to pages with useful content or are you going to give the user the content right away?</p>
<h3 id="commitment">Commitment</h3>
<p>A fresh and up to date website shows a company that cares about their online presence. Blog feed looking a little ancient? Maybe it&rsquo;s time to give it an update.</p>
<h3 id="knowledge-and-usps">Knowledge and USPs</h3>
<p>What makes your website different. Why should the user stay on your site.</p>
<hr>
<p>Although these items should be included in the brand of a business, it’s far too easy to settle for ‘another website with a sticky navigation, full-width carousel, summary paragraph, services panels and a footer full of dull copyright information’ - we&rsquo;ve all done it. Don’t get me wrong, none of these are wrong, but they must be there for a reason. Question your home page, justify each element, don’t just jump to the defaults. Consider the following:</p>
<ul>
<li>Do you need a carousel taking up most of your page?</li>
<li>Why are the services panels situated where they are?</li>
<li>Do you need an opening paragraph on the home page if the About us page says the same thing?</li>
<li>What function does each element have? - If there isn’t a valid reason, should it be there?</li>
</ul>
<h2 id="your-research-is-the-best-research">Your research is the best research</h2>
<p>When you start to analyse your average and target user and the way they interact with your website, you may well be surprised at what they class as a ‘good’ home page. Industry statistics can give a reasonable understanding of user interaction but the best statistics are those gathered from your own website.</p>
<p>If you have a site up and running and you’re looking to replace or update it, add Google Analytics tracking events to your home page and watch how your current users interact. It will give great insight into the pitfalls of your current design and although it won’t necessarily give ideas on how to improve the page, it will stop you making the same mistakes again.</p>
]]>
      </description>
    </item>
    
    <item>
      <title>What is responsive design and why do I need it?</title>
      <link>https://www.trysmudford.com/blog/what-is-responsive-design/</link>
      <pubDate>Thu, 27 Feb 2014 00:00:00 +0000</pubDate>
      
      <guid>https://www.trysmudford.com/blog/what-is-responsive-design/</guid>
      <description><![CDATA[
]]>
      </description>
    </item>
    
    <item>
      <title>How to speed up your website – Deferred loading</title>
      <link>https://www.trysmudford.com/blog/deferred-loading/</link>
      <pubDate>Thu, 16 Jan 2014 00:00:00 +0000</pubDate>
      
      <guid>https://www.trysmudford.com/blog/deferred-loading/</guid>
      <description><![CDATA[
]]>
      </description>
    </item>
    
  </channel>
</rss>