<?xml version="1.0" encoding="UTF-8"?><rss xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:atom="http://www.w3.org/2005/Atom" version="2.0" xmlns:media="http://search.yahoo.com/mrss/"><channel><title><![CDATA[Testing - Stapps.io]]></title><description><![CDATA[Testing - Stapps.io]]></description><link>https://blog.stapps.io/</link><generator>Ghost 0.11</generator><lastBuildDate>Mon, 05 Jan 2026 13:37:04 GMT</lastBuildDate><atom:link href="https://blog.stapps.io/tag/testing/rss/" rel="self" type="application/rss+xml"/><ttl>60</ttl><item><title><![CDATA[REC Procedure for changes to an existing site]]></title><description><![CDATA[<p>Unlike a new site, making changes to an existing site doesn't require a full "go live" procedure as such, but that doesn't mean it doesn't have any process. <br>
It's just as important it goes smoothly, in fact it's more so as it's affecting a live site that the company depends</p>]]></description><link>https://blog.stapps.io/rec-proceedure-for-changes-to-an-existing-site/</link><guid isPermaLink="false">830a8e17-627f-472e-81e1-6e47dfd424bf</guid><category><![CDATA[REC]]></category><category><![CDATA[Design]]></category><category><![CDATA[Development]]></category><category><![CDATA[Testing]]></category><dc:creator><![CDATA[Andrew Stilliard]]></dc:creator><pubDate>Fri, 10 Jun 2016 08:44:50 GMT</pubDate><content:encoded><![CDATA[<p>Unlike a new site, making changes to an existing site doesn't require a full "go live" procedure as such, but that doesn't mean it doesn't have any process. <br>
It's just as important it goes smoothly, in fact it's more so as it's affecting a live site that the company depends on it. <br>
You need to be sure your changes won't lead to any loss of leads or sales the site may bring, especially if the client didn't sign off on it.</p>

<p>Here's a straight forward process cycle you can follow that's worked for me.</p>

<p><img src="https://blog.stapps.io/content/images/2016/06/agile-process.png" alt="Agile Process"></p>

<p>The flow here starts with the idea and ends only when the client has signed off on the project. Everything in between is a loop of design &amp; development shortly followed by testing &amp; feedback from the client. The more you work in iterations this way, the better you'll get at working out good logical places to break each sprint. You can even plan them in advance. <br>
You'll want to strike a balance between keeping the client updated and getting their feedback, but avoiding showing the client much broken / unfinished code. <br>
Generally the faster you get feedback though, the easier the process will be later on. </p>

<h2 id="ideastage">Idea stage</h2>

<ul>
<li>Before starting changes, engage with the client and review the brief of exactly what is needed. This is important to make sure you know what they are looking for. Sketches and simple mockups are very useful here to assure the client and yourself that you are both on the same page. </li>
<li>Is the site fully responsive? Or does it have a mobile only view? Make sure consideration to this is given in any mockups and estimates for the work.</li>
</ul>

<h2 id="firstiteration">First iteration</h2>

<p>Depending on the changes, the first iteration may be designing a mockup. Following the above image you would design the mockup and then contact the client for feedback. This could then go through several iterations before moving into development. </p>

<h2 id="followingiterations">Following iterations</h2>

<p>Each following iteration involves a sprint of work followed shortly by a review by the client. These are not formal reviews, more to keep the client informed that work is happening. It's also useful as clients often change their minds or can only work out what they truly want when they see it. This way you'll find out quickly if you're going the wrong way.</p>

<p>I wont intrude much into your design / development process here, I have <a href="https://blog.stapps.io/css-structure-anti-patterns-part1/">another post that does this already</a>, but make sure you're regularly involving the client for feedback.</p>

<h2 id="tipswhiledeveloping">Tips while developing</h2>

<ul>
<li>Try not to copy content directly from legacy templates into responsive, but instead apply a fresh design over the responsive-site. <br>
E.g. if this is a responsive redesign it's tempting to copy say a product page template file from legacy, but this likely wont work. Instead use the existing design as a mockup, you can reuse imagery but coding new css and additional html structure will be less work than you'd think.  </li>
<li>Keep track of new features you've added, you'll want this for testing later, and for your support documentation.</li>
</ul>

<h2 id="testing">Testing</h2>

<ul>
<li>Browser test main site + special new features that the client may have requested!</li>
<li>Google Analytics > Check browsers bringing in most visitors &amp; enquiries or orders. 
<strong><a href="https://blog.stapps.io/modern-browser-testing/">Check out my other post on Modern web design</a>.</strong></li>
</ul>

<h3 id="thingstolookoutforespeciallywhiletesting">Things to look out for especially while testing:</h3>

<ul>
<li>Check your site's performance and mobile friendliness with <a href="https://testmysite.thinkwithgoogle.com/">Google's new tool</a>.</li>
<li>Do the changes affect ecommerce? E.g. a responsive redesign? or changes to products etc. You'll need to test the full cart process: finding a product on the site, add to cart, registration, checkout page, payment processor (no need to pay, but at least get it into paypal or wherever to check the order values) and thanks page, this will help you spot anything weird or broken. Best to do so with the browser console</li>
<li>Any specific custom functionality already on the site? Such as a custom app. Make sure this is still working, or brought through into the new design. </li>
</ul>

<h3 id="gettingusefulfeedback">Getting useful feedback</h3>

<p>Try to make sure the client actually looks at the design of all changed pages. Sometimes they can just load the homepage up and that's all, later after release they then may complain that other things are not right. It's also easy for them to miss stuff too :). <br>
Set expectations during early iterations about exactly what functionality is loaded up and therefore for review. <br>
Get their feedback, make any changes, re-browser test the changes, etc. repeat! You can send them a link to a dev site if that's where you're working, or a preview link if working on the live site but in a different template folder. </p>

<h2 id="release">Release</h2>

<ul>
<li>Get written proof of client sign off on entire site before making it live.</li>
<li>Finally you're ready to go live, but wait it's Friday, DONT! DON’T DO IT! NOPE NOPE NOPE.
<img src="https://blog.stapps.io/content/images/2016/06/Nope-Meme-04.jpg" alt=""></li>
</ul>

<h3 id="relatedarticles">Related articles</h3>

<p>If you're interested in a more in-depth look at workflow and processes, I recommend Redesign the Web - The Smashing Book #3, chapter 10 is on workflow redesigned and really worth a read.  </p>

<ul>
<li><a href="https://blog.stapps.io/modern-browser-testing/">Modern web design</a></li>
<li><a href="https://blog.stapps.io/css-structure-anti-patterns-part1/">CSS structure &amp; anti patterns</a></li>
</ul>]]></content:encoded></item><item><title><![CDATA[Browser Support vs Testing]]></title><description><![CDATA[<p>To me there's a difference between these 2 topics, let me explain: </p>

<p><strong>Browser support</strong> is browsers you're willing to support. </p>

<p>While <strong>browser testing</strong> is the act of testing and maintaining support. </p>

<p>Browser testing need not involve testing the full browser support list. In fact I find a graded view browser</p>]]></description><link>https://blog.stapps.io/browser-support-vs-testing/</link><guid isPermaLink="false">20bd1c98-f7c0-40b0-8bc3-951a69c439dd</guid><category><![CDATA[Testing]]></category><category><![CDATA[Design]]></category><category><![CDATA[REC]]></category><category><![CDATA[Support]]></category><dc:creator><![CDATA[Andrew Stilliard]]></dc:creator><pubDate>Thu, 09 Jun 2016 10:11:43 GMT</pubDate><content:encoded><![CDATA[<p>To me there's a difference between these 2 topics, let me explain: </p>

<p><strong>Browser support</strong> is browsers you're willing to support. </p>

<p>While <strong>browser testing</strong> is the act of testing and maintaining support. </p>

<p>Browser testing need not involve testing the full browser support list. In fact I find a graded view browser support makes this a bit clearer. <br>
Testing every combination would take far too long and the client likely wont be paying for that extra time. </p>

<h3 id="butwhyisthisimportant">But why is this important?</h3>

<p>When a client calls you up and says:  </p>

<blockquote>
  <p>"There's a bug on OSX Firefox 23, why wasn't this picked up during browser testing?!"</p>
</blockquote>

<p>You'll need to let them know the difference to explain clearly to the client why this was likely untested but assumed working <em>(which is perfectly acceptable)</em>. </p>

<p>Eloquently put back to the client:  </p>

<blockquote>
  <p>"It is not practical to test every combination of Browser, version and OS as there are so many.
  Instead we follow standard industry practice of testing the latest range of browsers, plus typically those which make up the majority of your traffic and sales. " </p>
</blockquote>

<p>Depending on the browser support level, It's an a A or B grade browser, this would generally followed by:  </p>

<blockquote>
  <p>"We'll take a look into this right away for you." </p>
</blockquote>

<p>However in the case of a C grade browser, you would need to work out if this is a style tweak or core functionality. </p>

<blockquote>
  <p>"Unfortunately this is an older browser where fixing it can lead to complications. The cost of working on these older browsers is often not worth the return. If you'd still like us to work on it we can but we will need to quote for the time involved."</p>
</blockquote>

<p>You could also then offer a service to the client of checking and testing the current highest converting traffic browsers. This could even be an ongoing / regular process you could offer. </p>

<hr>

<h3 id="gradedsupport">Graded support</h3>

<p>Inspired by <a href="https://github.com/yui/yui3/wiki/Graded-Browser-Support">Yahoo</a>, we use A, B and C grades for our browser support, here's an example of this:</p>

<p><strong>"A" grade support</strong> <br>
These browsers should be actively tested on, along side browsers that bring in higher amounts of traffic and sales on the site:</p>

<ul>
<li>Google Chrome Desktop ~ latest</li>
<li>Google Chrome Mobile (Android) ~ latest</li>
<li>Firefox Desktop ~ latest</li>
<li>EDGE Desktop ~ latest</li>
<li>IE 11 Desktop</li>
<li>IE Mobile 11 (Windows Phone)</li>
<li>Safari Desktop (Mac OSX) ~ Latest</li>
<li>Safari Mobile (IOS / iPhone / iPad) ~ Latest</li>
</ul>

<p><strong>"B" grade support</strong> <br>
Though not actively tested on, these browsers should work fine, and bugs can be fixed when reported:</p>

<ul>
<li>Google Chrome ~ previous recent versions</li>
<li>Firefox ~ previous recent versions</li>
<li>IE 10</li>
<li>Opera ~ any modern version</li>
<li>Android browser version 4+</li>
<li>Mobile versions of the above browsers in recent versions, such as on IOS, Android and Windows Phone</li>
</ul>

<p><strong>"C" grade support</strong> <br>
Core functional support only. These browsers may not offer all the same effects and may visually look different, however any issues that cause functional issues will be fixed, such as an issue that hides or makes it impossible to click a call to action button.</p>

<ul>
<li>IE 8 &amp; 9</li>
<li>Older browser versions than mentioned. </li>
</ul>

<h3 id="relatedposts">Related posts</h3>

<ul>
<li><a href="https://blog.stapps.io/modern-browser-testing/">Modern browser testing</a></li>
<li><a href="https://blog.stapps.io/reading-list-for-modern-web-design/">Reading list for modern web design</a></li>
<li><a href="https://blog.stapps.io/css-structure-anti-patterns-part1/">CSS structure &amp; anti patterns</a></li>
</ul>]]></content:encoded></item><item><title><![CDATA[Responsive breakpoints preview tool]]></title><description><![CDATA[<p>I'll start by saying there really are loads of great tools out there to preview sites on different viewports / screen width. <br>
Such as: <a href="http://mattkersley.com/responsive/">http://mattkersley.com/responsive/</a>, <a href="https://www.responsinator.com/">https://www.responsinator.com/</a> and <a href="http://responsivedesignchecker.com/">http://responsivedesignchecker.com/</a>.</p>

<p>And even some tools that offer excellent detection of media queries / breakpoints and then automatically</p>]]></description><link>https://blog.stapps.io/responsive-breakpoints-preview-tool/</link><guid isPermaLink="false">6f7317d1-bd94-4146-bdf6-775238cf5661</guid><category><![CDATA[Responsive]]></category><category><![CDATA[Testing]]></category><category><![CDATA[Design]]></category><category><![CDATA[Development]]></category><category><![CDATA[CSS]]></category><category><![CDATA[REC]]></category><dc:creator><![CDATA[Andrew Stilliard]]></dc:creator><pubDate>Wed, 02 Dec 2015 23:59:00 GMT</pubDate><content:encoded><![CDATA[<p>I'll start by saying there really are loads of great tools out there to preview sites on different viewports / screen width. <br>
Such as: <a href="http://mattkersley.com/responsive/">http://mattkersley.com/responsive/</a>, <a href="https://www.responsinator.com/">https://www.responsinator.com/</a> and <a href="http://responsivedesignchecker.com/">http://responsivedesignchecker.com/</a>.</p>

<p>And even some tools that offer excellent detection of media queries / breakpoints and then automatically create iframes of each so you can quickly view them, such as: <a href="http://breakpointtester.com/">http://breakpointtester.com/</a> and <a href="http://re-view.emmet.io/">http://re-view.emmet.io/</a></p>

<p>The 1st set of tools are great, especially when demoing to clients to help them see different specific devices. <br>
While the 2nd set of tools are also really useful when developing to see the different breakpoints built in and to quickly demo them side by side too. <br>
The minor downside to these 2nd set of breakpoint tools however is they are either browser plugins or bookmarklets, which for some clients will not make a lot of sense. </p>

<p>Instead we need a tool like the 1st ones where you can link to it, but with breakpoint detection like the 2nd set of tools.</p>

<p>And so, here's a new tool you can use: <br>
<a href="http://responsive.stapps.io/">http://responsive.stapps.io/</a></p>

<p>Like the other tools, this only works on sites that don't block iframe access, e.g. google blocks it's site from being viewed in an iframe. </p>

<p>Also, unlike some of the other tools, it currently only works on sites with css breakpoints  / media queries. </p>

<p>It has 2 display modes, the default one is a slider of each display size, you can use the arrows on the side or keyboard to navigate between them. <br>
Then the other display mode is to show all the sizes next to each other, like the other breakpoint based tools, which is useful for quick comparisons. <br>
<em>You'll need to click "run" again to change the display modes.</em></p>

<p>It's pretty new so message me about any bugs, but enjoy :).</p>

<p><em>If you're an REC user, you can find a link to this under the preview url in Admin > Templates > Open/Edit Template</em></p>]]></content:encoded></item></channel></rss>