Month: March 2016

Accelerated Mobile Pages (AMP)

Google recently introduced Accelerated Mobile Pages and really put the pedal to the metal. They changed a lot and stripped a lot. Javascript is basically gone and you are left with very few tools to enhance your page. Think 1995 HTML class. All you need to do is make an AMP readable copy of all your pages. Word is that your pages will load up to 90% faster, but, these days, who wouldn’t go for a change of 20%?

The steps you need to take are:

<!doctype html>

<html amp lang=”en”>


<meta charset=”utf-8″>

<title>Hello, AMPs</title>

<link rel=”canonical” href=”” />

<meta name=”viewport” content=”width=device-width,minimum-scale=1,initial-scale=1″>

<script type=”application/ld+json”>


“@context”: “”,

“@type”: “NewsArticle”,

“headline”: “Open-source framework for publishing content”,

“datePublished”: “2015-10-07T12:02:41Z”,

“image”: [





<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>

<script async src=””></script>



<h1>Welcome to the mobile web</h1>




  • Get your meta data right to make sure your site is accessible to your target audience.
  • Add images and style the page
  • You’ll probably want to keep 2 versions of your pages so make canonical links on your AMP page.
  • Publish

Here is a before and after of a page in amp


It is a much simpler and much faster page. What do you think?

Here at Winzyweb we can convert all your pages into Accelerated Mobile Pages, contact us today.






Web Design for NGOs

After completing my web design for artists post, I decided to go ahead with another guide on web design for NGOs. When taking on a project like this you first have to consider that it is not going to be about the money. You are helping out someone who is helping out others. These are projects that you should want to do, part of trying to be a good person. In the end you will have the appreciation of the people in the NGO and you will be just as, if not more, proud of your work when you are done.


ABOUT US: NGOs can get complicated in this area, there are subdivisions, partners, and various levels of administration that you have to sort out. Consider having sections with who we are, departments (each department with its own sub-menus), Mission statements, Legal framework, and others.

WHAT WE DO: Don’t assume that the user will know what the NGO is about. Here is where you list past and present projects that the NGO is doing and/or wants to highlight.

EVENTS: Depending on the NGO, you could include this under What We Do. However, if the NGO organizes functions, clean-ups, sit-ins, concerts etc, they should be in their own section.

PUBLICATIONS: Many NGOs possess a vast library of publications. A section dedicated to this could be essential. A searchable database of records is a must and perhaps the creation of an e-shop if they wish to sell their publications.

VOLUNTEER/DONATE: Depending on the goals of the NGO this could be one of the main features of the website.

CONTACT US: The usual complete contact us section with form, maps, address, phone numbers etc.

The design element

This is where you have to communicate with the NGO and come to an understanding before you open up your editor.

What is the main purpose of the web site? Once you have that you can begin.BLOG QUOTE SNIPPET TEMPLATE

If the NGO is heavily dependent on donations from the public, you can apply typical UX design strategy that you would use for a product site. Include elements such as a large call to action and a focus on getting the user to support the NGO. The same would apply for an NGO that need volunteers. This info has to be available throughout the site because this is how the organization survives.

Other NGOs receive funding from large organizations and do not need monetary support from the public, or it is not a crucial part of their functioning. Those NGOs have an informative nature and that should be the main focus of the design. Clean menus that make sure the user doesn’t get lost as they are searching through the site are very important. Think about how the information will accessed. Some organizations provide easily accessible pdf files, while others do not share their content.


Social media is the ultimate tool when considering web design for NGOs. This is where the activity is.

Facebook? Yes

Twitter? Yes

Instagram? Yes

LinkedIn? Yes

There is no limit really on how many social media outlets the NGO should use. This is the opportunity to really show what is being done. A tiny NGO that helps deliver food to shelters just delivered food? Photos, posts are a great way of showing and inspiring people about the NGO’s activity.

Arrange to have anything that is added to the website be automatically announce through many social media channels. Next Scripts provides a great way to do that.

So, again, yes to everything.


While working on the EDYM-NGO website I realized the amount of hard work that goes into creating and running an NGO. Often it seemed like a one man show (as the web designer often is), people juggling with many issues, trying to create something that is for the greater good. Web design for NGOs can be a rewarding experience and one to not pass up on.








Are you ready for a new website?

Yes, let's start!