web

How to purchase your own domain name and set up a web server from $5 a month

March 28, 2018 by Simon

This guide will show technically minded people how you can purchase your own domain name, set up a web server on Vultr with an online store using WordPress/WooCommerce from $5 a month. Warning this post is technical (if you have never used SSH, Ubuntu, Linux Command Line, hate risk or are not patient then this is NOT the guide you are after).

I personally recommend (not a paid endorsement) the free WooCommerce plugin for the free WordPress.org CMS on the free Ubuntu Operating system with the free NGINX web server and the free MYSQL database engine and free SSL certificates from Lets Encrypt.

Update 2018: For the best performing VM host (UpCloud) read my guide on the awesome UpCloud VM hosts (get $25 free credit by signing up here).

Buy a domain name from Namecheap here.

Sorry for using the word free a lot but I like free things. One of the benefits of a using a self-managed server is you get the option to install free software and configure the server how you want and secure it how you want. Truth be told managed ho (e.g CPanel, etc) are in the business of making money via monthly feed, expensive SSL certificates, taxing your transactions or pushing you to higher-priced tiers.

Legend:

Self Managed Server = A server that you create, you configure patch and support (all the reward and risk is owned by you and costs are low).
Hosted Server = A server you have partial control of and the hosts manage the server and support (You hand away all risk and most of the control and pay for support/features).

I moved to a self-managed server after I was paying $25/m for a poorly performing website and $150/y for a poor quality SSL certificate and a slice of a server that seemed to always say “Usage Limit Exceeded”. Why pay for an insecure website that my visitors could not view because the usage limit was exceeded.

fyi: Fearby.com costs me $10 a month for a server and $5/m for CDN abilities.

CPanel hosts are an option when you don’t want to self-manage a service and take on the hassle but be prepared for server limitations (The image below was taken on an older CPanel based hosts before I moved to a self-managed Vultr server)

I recently discovered a well known and established website hosting service (that I used to use) and a friend is still using is insecure. My friend’s site has a static website on it but the server underneath was very old and insecure. Having a secure web server should be at the top of your list with any self-managed or hosted website (this will help search engine optimization and prevent risks to your website visitors).

Sites like Virus Total, SSL Labs and Alexa Site Info , Qualys are good ways to review a site’s credibility.

fyi: The awesome https://seositecheckup.com/ is awesome for evaluating our sites SEO score.

Before we set up a server with WordPress on your own server let’s quickly look at the alternative commercial ready to go website builders.

Alternative (paid) DIY Website Builders

The following leading commercial sites will allow you to build a site online.

In my opinion, five things matter with setting up site online website.

Setup Costs, Monthly Cost and Commissions (what are the hidden charges)
Security (having a food SSL Certificate is key to having a good organic traffic from search engines)
Site Speed (Having a slow site will impact search engine optimization and drive visitors away)
Accessibility (if your site is not WCAG accessible it will not rank high on search engines).
Control (will you be able to do everything you want too, nothing worse than going so far and being limited)

Ok, let’s see how much it will cost to set up a simple business site on the sites above.

Wix

Setup: Goto https://www.wix.com/, Login to Wix, click Create Site, click Business, Click Choose a Template, Edit the page, Click Save, Click “Connect your own customized domain“, Click “Connect a domain you already own“.

I was redirected to a Wix plan pricing page where I need to choose a plan to continue. From what I researched you cant control HTML on Wix so can’t add a MailChimp newsletter signup form so you would have to go with the $24.5/m option to enable Email Campaigns.

I could not see information about included SSL certificates, SEO or other chargers. SSL is free after you pay right?

The Wix editor appears OK (it may take a bit of learning though).

I clicked publish and the site was live

A quick check of the SSL, Accessibility and SEO and no obvious deal breakers here apart from the price and platform lock-in.

I performed a security check on the site with https://freescan.qualys.com (passed)

Conclusion: I hear Wix templates are hard to change so choose your template wisely, A large collection of apps are available that you can add to the site.

Although Wix was nice and it does include a full-featured look at the engine it is not for me ($24/m USD is too expensive).

Squarespace

Squarespace basic websites cost $16/$25 a month or $34/52 for online stores: https://www.squarespace.com/pricing/

Setup a Squarespace website: Goto https://www.squarespace.com/, Click Start a Free Trial, Choose a Template, Create an Account (a quick read of the terms of service and privacy policy, #scary), SpareSpace sites are pre-published?

Loading the webpage on a non-logged-in (with SquareSpace login) browser displays a trial warning. Trial pages are essentially restricted (unlike Wix).

The mobile view does not match the template? I guess the chosen template is more of a vibe and not a template.

Setting up a Squarespace website may take some time. Squarespace does have some nifty advance options in a slide-out menu though.

Because the public view of the page is restricted I cannot scan it with WCAG accessibility tools. Scanning the site performance speeds with gtmetrix also fails.

Squarespace is well known to be difficult to set up a website when compared to other drag and drop editors (but Squarespace sites do look nice).

I am not paying $54/m for a website so let’s move on.

Shopify

Shopify Setup: Goto https://shopify.com and click Create, Sign up and enter your store name. Complete the wizard.

Choose a Shopify Plan

Scalping transactions, no thanks. let’s move on.

Weebly

Weebly Setup: Goto https://www.weebly.com/au and click Get Started under Create Store. Enter your account details and click Create Your Site, enter the name of the store, Click I’m just trying Weebly, click the type of product you will be selling.

Weebly Site Setup

Theme Selection

Choose a Domain

Publish the site

Clicking publish appears to be a dead end.

“Please contact Weebly Support to verify your account”, No Thanks, let’s move on.

One candidate remains and that is WordPress hosted (wordpress.com not wordpress.org).

WordPress.com

WordPress.com offer hosted plans for WordPress in the cloud.

Setup a WordPress site, the only one that removes WordPress branding and allows third-party plugins to be installed it the Business plans for $33 a month.

Setup Basics

Choose a WordPress theme.

Assign a Domain

In order to buy a domain, you need to log in (top right) with an account

My working WordPress account (is no longer working), it was in my password manager.

I seem to be stuck in a signup loop

Time to move on. Time to set up my own server on Vultr and setup WordPress and WooCommerce,

But, before we do, let’s ensure our name is secure online.

Search for your Name/Brand

Do search for your website (or thing) in search engines to see if your name is already taken, don’t buy a domain that is owned or has IP or trademark presence. It is a good idea to use sites like https://namechk.com/ to see if your site or social media is already taken.

namechk.com will allow you to search for name availability online. The name “mything” is not fully available online.

You will want to see all green squares (name available) below before buying a domain name. This looks better.

I would recommend you create your social media accounts before or right after buying your domain. Sites like Twitter will insist on short usernames names so get your social media sites first.

Trademark and Brand Search

Also, perform a trademark and IP search.

Australian Trademark Search: https://search.ipaustralia.gov.au/trademarks/search/quick

United States Trademark Database: https://www.uspto.gov/trademarks-application-process/search-trademark-database

Global brand Search: http://www.wipo.int/branddb/en/

etc

Self Managed Warning

I tend to go the “self-managed server route” and install the free WordPress CMS because:

I can.
I am tight.
I like having full control (usually the best features for online web hosts are hidden behind subscriber tiers, you can install and do whatever you want on your own server like build API’s, distributed MySQL servers, install MongoDB or Redis , use up to date PHP etc).
I have been stung by CPanel hosts charging $150/y for a crappy SSL certificate (You can set up your own SSL certificate for $0 and set up super secure SSL rules).
I can manage WordPress via the command line
I can upgrade the server and restore it whenever I want.
I can manage my own server performance (e.g setup PHP child workers) or install a Content Delivery Network.
I can direct domain email to google G Suite, see pricing here.
etc.

There are many reasons why you would not want to “self-manage” your own server

Technical Requirements (and time to support).
Higher Risk.
Applying Updates and Patches.
etc.

Being technically minded and choosing a “self-managed web servers” can take away time from the fun stuff like SEO, Site Design, customer needs, branding etc.

Self Managed Costs

For $5 a month you can buy a server with enough memory to install WordPress (cheaper if you don’t need WordPress)

Vultr is great. Vultr does have ready to go servers that you can deploy that have WordPress all set up.

The Vultr template above does use the Centos OS (read my guide setting up Centos on a different service provider here) but I prefer to manually setup a server with Ubuntu 16.04 OS on Vultr.

With $5 server you can do what you want with it. I have blogged before about setting up your own Server. e.g Installing Centos and Ubuntu server on Digital Ocean. Digital Ocean does not have data centres in Australia and this kills scalability. AWS is good but 4x the price of Vultr. I have blogged about setting up and AWS server here (and upgrading an AWS instance). I tried to check out Alibaba Cloud but the verification process was broken so I decided to check our Vultr.

Manual Setup of Vultr on an Ubuntu 16.04 server

Deploy a Vultr Server – Guide here ($2.5/m to New Jersey or Florida or $5/m to Sydney, I would recommend you opt-in for the auto backup for $0.50c/m and $1/m respectively).
Setup NGINX.
Setup PHP and PHP-FPM (see guide above), consider adding PHP child workers.
Setup and secure MySQL (see guide above), create a database for WordPress to use.
Instal Adminder MySQL GUI (guide here).
Setup a free Lets Encrypt SSL certificate (guide here).
Install WordPress (and Jetpack plugin).
Install WordPress CLI.
Instal the WooCommerce Storefront WordPress Theme.
Install WooCommerce Plugin.
Secure Ubuntu.
Also consider linking your domain to Cloudflare to boost performance, scanning your site with Qualys Freescan and OWASP ZAP).
Consider setting up a WordPress image compressor and CDN plugin. like EWWW.io

Manual WooCommerce Plugin Setup

Once you setup Woocommerce you can set up the store defaults. Go to the WordPress dashboard and click WooCommerce Settings

Settings – General

Set Address, City and State and Postcode
Set allowed countries to sell in (e.g Australia)
Set allowed countries to ship items to (e.g Australia)
Set Enable Taxes
Set Currency
etc

Settings – Products

Set Weight
Set Dimensions
Enable Product Reviews
Enable Star Ratings on Reviews
etc

Settings – Shipping

Enable Shipping Calculator
Add Shipping Classes
Shipping Zones
etc.

Settings – Checkout

Force Secure Checkup
Create a Terms and Conditions page (and set).
etc

Settings – Account

Set Account Options
etc

Settings – Emails

Set Email Preferences
Set Email Header Image
Set Email Colour
Set Footer Text
etc

Settings – API

API can be disabled if you don’t need it.

Optional Actions

Setup Yoast Plugin
Setup other plugins

Instaling a Woo Commerce Child Theme

Go to https://woocommerce.com/product-category/themes/storefront-child-theme-themes/ and choose a theme.

Purchase and Install the desired child theme (I uploaded it to my /wp-content/themes/ folder with forklift). I chose a free deli theme.

Goto your WordPress then themes folder and activate your new child theme.

Post Site Setup

Just because your site is live does not mean you can rest.

SEO Optimization

Do use sites like https://seositecheckup.com/ and follow recommended actions to improve your SEO like updating meta tags.

More Reading

Attaching an email to your domain

You can pay $5 a month and link a G Suite email to your domain.

Dedicated professional Google G Suite email account for $5 a month with 30GB storage (If you don’t want ot to buy a G Suite email and link it to your domain then you don’t need this).

Once you have a G Suite account you can link other domains (and domain emails) to it. You can login to your G Suite emails via G Mail and send emails from apps or the command line.

Why Vultr

I use the server host Vultr as they have data centres all around the world and the support of great, Digital Ocean is good too but they don’t have data centres in my country (Australia). Vultr allows you to deploy all over the world upgrade servers, move servers, add storage and restore servers.

Alternatively, you can buy a $2.5/m server and generate a static website

I use the Platforma Web HTML generator to build mobile and WCAG compliant websites.

Buying a domain, I buy my domains from https://www.namecheap.com/ it is a good idea to look for coupons first at https://www.namecheap.com/promos/coupons.aspx before buying a domain.

Once you buy a domain you can point it to a Vultr server and upload your website.

I hope this helps someone.

Donate and make this blog better

Ask a question or recommend an article

[contact-form-7 id=”30″ title=”Ask a Question”]

Revision History

v.1.2 WordPress WooCommerce

v1.1 SEO

v1.0 Initial Draft

Using Chrome 65 to measure website Performance, Progressive Web Apps, Basic Practices, Accessibility and SEO

March 4, 2018 by Simon

Chrome 65 beta has added SEO to audits in the Developer Tools Audit tab.

I have a number of guides on moving hasting away form CPanel, Setting up VM’s on AWS, Vultr or Digital Ocean along with installing and managing WordPress from the command line.

When you develop any site you need to perform regular audits to ensure it is up-to-date and compliant. Google Chrome has audit tools built right in (Chrome 65 has SEO audit tools (yay)

Chrome 64Developer Tools – Audit tool.

Chrome 64 Audit Scan options

Chrome 64 Audit Results

The performance results seem off given I have set up a CDN, optimized WordPress.

Time to download Chrome 65 beta and get new audit tools.

Chrome version confirmed

Audit Options

Chrome 65 Audit Results

Hmmm, results are different (same website, network and time)

Chrome 64 Audit Results:

Performance: 45
Progressive Web App: 30
Accessibility: 86
Best Practice: 56
SEO: N/A

Chrome 65 BETA Audit Results:

Performance: 24
Progressive Web App: 45
Accessibility: 65
Best Practice: 63
SEO: 90

Google recommends you load pages in under 1s, I would suggest using multiple tools to indicate site speed.

https://gtmetrix.com is a great site for testing your sites speed. I used GT Metrix to move my site from 26s to 6 by setting up a WordPress CDN, moving away from CPanel to a self-managed server on Vultr then to 4s with optimising PHP by setting up child workers.

https://www.webpagetest.org is also good for testing websites.

I will continue to use Chrome Audit Tools for other results like SEO

That’s weird Chrome Audit Tools, I thought I did not have meta tags?

I downloaded the WP Meta SEO plugin, I use the wp command from the SLI (setup guide here)

cd /www/wp-content/plugins/
wget https://downloads.wordpress.org/plugin/wp-meta-seo.3.6.6.zip
unzip wp-meta-seo.3.6.6.zip
rm -R wp-meta-seo.3.6.6.zip

I activated the plugin in WordPress the loaded the dashboard. WP Meta SEO asked to import data from the Yoast plugin.

Now I can see my metadata is falling behind.

With WP Meta SEO I was able to apply individual page Meta tags.

I added the following meta tags with WP Meta SEO plugin for each page (the metadata below was for this page)

<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="twitter:image" content="https://fearby-com.exactdn.com/wp-content/uploads/2018/02/php_pool_featured.jpg" />
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@FearbySoftware" />
<meta name="twitter:domain" content="Programming, IoT and Server Stuff" />
<meta name="twitter:description" content="How to setup PHP FPM on demand child workers in PHP 7.x to increase website traffic" />
<meta name="twitter:title" content="Setup PHP FPM on demand child workers in PHP 7.x" />
<meta property="og:image" content="https://fearby-com.exactdn.com/wp-content/uploads/2018/02/php_pool_featured.jpg" />
<meta property="og:site_name" content="Programming, IoT and Server Stuff" />
<meta property="og:description" content="How to setup PHP FPM on demand child workers in PHP 7.x to increase website traffic" />
<meta property="og:url" content="https://fearby.com/article/how-to-setup-php-fpm-on-demand-child-workers-in-php-7-x-to-increase-website-traffic/" />
<meta property="og:type" content="article" />
<meta property="og:title" content="Setup PHP FPM on demand child workers in PHP 7.x" />
<meta name="description" content="How to setup PHP FPM on demand child workers in PHP 7.x to increase website traffic" />
<meta name="keywords" content="Setup PHP FPM on demand child workers in PHP 7.x" />
<meta name="title" content="Setup PHP FPM on demand child workers in PHP 7.x" />

fyi

I use the free version of the Yoast for SEO plugin in WordPress. The premium version has a lot more to offer, I might have to check Premium out.

I am now on the hunt for meta plugins for WordPress

I hope this guide helps someone.

Ask a question or recommend an article

[contact-form-7 id=”30″ title=”Ask a Question”]

Revision History

v1.2 WP-Meta SEO

v1.1 Added webpagetest.org link and results

v1.0 Initial post

Using Platforma Web Wireframe Kit to build a website (prototype)

November 24, 2017 by Simon

I have blogged before about building a server for users to install WordPress, optimizing images in WordPress, deploying WordPress via CLI, moving WordPress, speeding up WordPress and securing WordPress but what do you do if you want a non-WordPress site without the support hassles?

Recently I gave the https://platforma.ws iOS prototyping library extensions a test. I was delighted to find they had a Web Wireframe Kit (generation suite) for prototyping and exporting working websites. You can try the free version or buy a licence here.

Creating a Website with Platforma Web Wireframe Kit

Goto https://platforma.ws and click HTML Generator (or click here)

You will be presented with an empty website ready for your attention.

Adding Website Elements

It’s as simple as clicking a purple add button.

This reveals a number of HTML templates samples that you can drag and drop to your website design.

You can then choose a category (e.g “Header”) and see the elements of the available sample.

Simply drag and drop the elements out into your design.

Now, Let’s click the purple Add (in the top left) button and add a sample Header section, sample Contents, sample Slider, sample Body, sample first Call to Action section, sample Pricing Table, sample second Call to Action section, sample Footer section.

30 seconds later and I have generated designed a site ready to edit the exported HTML.

Exporting Your Site from Platforma

Click on the Export button (in the top right).

I was greeted with the following export screen, this page explains the difference in export options: http://app.platforma.ws/docs/

I don’t need “node.js” or “gulp” “Advanced Version” (PUG + STYLUS) so I’ll choose “Simple Version” (HTML + CSS + JS).

You will need to enter a licence key to continue the export.

The website export download came down just fine.

Code

The code looks ok, I did notice that images were missing alt tags so I added those in.

Any Errors in the Code (in Chrome)?

Nope, Chrome loads the code with no errors.

Testing Online

How about HTML5 and WCAG 2.0 AA

I uploaded the zip file to my server (using the scp command), I could have used SFTP.

scp /local/folder/local-file.zip [email protected]:/www/destination-folder/

I unzipped the site with

sudo apt-get install unzip
unzip filename.zip

The site loads just fine in a web browser

Accessibility

I used https://achecker.ca/checker/index.php to test the site with WCAG 2.0 AA, the only remaining issues I found were in relation to the multiple H1, H2 etc tags (this can be fixed by moving the H CSS code to custom classes and removing H1, H2 etc tags altogether (and reference the custom class matching the H* tags)).

fyi: The potential WCAG problems that were being alerted were in relation to…

My alt tags were potentially short
Potential Colour warnings
Potential Contrast warnings
Missing a “Skip to content” block
Reporting of placeholder graphics and alt tags (a checker is smart)
etc

I tested the sites HTML compliance with https://validator.w3.org/, the code passed with flying colours.

Customizing

I could not find a way to edit the elements in the http://app.platforma.ws/# like the Platforma iOS Adobe XD Kit but you can quickly edit in your HTML after exporting (using your editor of choice like Dreamweaver, Sublime or Notepad).

Conclusion

Platforma Web Wireframe Kit is an essential tool for anyone wanting to build quick web prototype (or even live sites) website for themselves, clients etc. I am very impressed with the code created.

Donate and make this blog better

Ask a question or recommend an article

[contact-form-7 id=”30″ title=”Ask a Question”]

Revision History

v1.1 Added more, fixed a bit.

etc

Using Adobe XD and Platforma Web Wireframe Kit to prototype an iOS app

November 23, 2017 by Simon

I have blogged about using Adobe XD to prototype mobile apps. Recently, I found an attractive collection of ready to go Wireframe screens from Proforma to use alongside Apple UI Kit elements in Adobe XD

Check Out Platforma

Platforma has been in the industry for years providing developers with prototype products for Mobile, Web and HTML templates. Check out https://greatsimple.io/ for other prototyping products.

You can buy (or try) versions of Platforma at https://platforma.ws/#buy Below are screenshots from the Bundle version.

Performa has loads of ready to go samples screens that you can use in Adobe XD like..

Start Screens
Sign up Screens
Walkthrough Screens
Loading Screens
Feed Screens
Activity Screens
Profiles Screens
Posts Screens
Chats Screens
Contacts Screens
Search Screens
Lists Screens
Settings Screens
Create Screens
Catalog Screens
Discover Screens
Products Screens
Shopping Carts
Check Out Screens
Filters Screens
Navigation Screens
Maps Screens
About Screens
Popovers Screens
Photos Screens
Media Screens
Social Screens
E-commerce Screens
Charts and More (there are over 100 screens)

Adobe XD, Platforma and iOS Prototypes

The post below will focus on creating iOS prototypes using Adobe XD and Platforma Wireframe kits.

Other posts will focus on creating Android, and Web Prototypes etc. After you purchase Platforma, you can download a zip file (I have the bundle) containing all related design files.

Tip: Save your activation code if you eceive one.

Extract the Zip file.

Files are located in each products folder (I will focus on XD in iOS assets until I learn the others).

Adobe XD iOS assets are in two files.

You can now open either Platforma .xd file to view prototype elements available.

You may get a Fonts Missing dialogue (install the fonts and the error goes away).

fyi

I downloaded Roboto font from here
SF UI * font can be downloaded from here
Apple San Francisco Font from here.

All font packs are free, the Apple San Francisco font needs you to run an install wizard, SF UI needs you to download and install TTF file from GitHub, Roboto needs you to double-click on a number of TTF files to install them in your fonts library.

The fonts are now installed (verified in my fonts app on OSX).

I am now free to open the iOS “Platforma for iOS – Categories.xd” file that came from Proforma.

Performa iOS Categories (Zoomed Out)

Oh my, there are loads of sample screens and elements you can use in an app prototype (I’d count them but I’d be here all day, I had to zoom out to 2.5% to see them all).

Now time to open the second file (“Platforma for iOS – Demos.xd”)

Performa iOS Categories (Zoomed In on Maps)

I had a look at the sample “Maps” screens and they are amazing.

Performa iOS Demos (Zoomed Out)

Here is a complete zoomed out view of the “Platforma for iOS – Demos.xd” file.

Performa iOS Demos (Zoomed in on Social Samples)

Here is a sample of some of the screens in the Social category in the “Platforma for iOS – Demos.xd” file.

Let’s Start an App Prototype in Adobe XD

I open the “./Platforma for iOS/XD/Platforma for IOS/Platforma for iOS – Categories.xd” and “./Platforma for iOS/XD/Platforma for iOS – Demos.xd” xd files that you downloaded from https://platforma.ws/

Also, start a new iOS blank project in Adobe XD.

I positioned windows so I could see all Adobe XD projects.

Tip: If you are using the Apple iOS (or Android etc) UI components then you can open them too (see my Adobe XD guide to see how to get the oficial iOS controls from Apple).

Personally, I would suggest before you start prototyping that you have a “validated list” of things that you want to prototype (if you are designing a prototype for a client then ask them what they want). Check out the awesome http://joinagile.com/lean-and-mean-agile-podcast/ for tips on Collecting, grooming, prioritizing app tasks. Don’t waste time developing unwanted features. Manage tasks around Outcomes and not tasks. I have blogged about developing software and staying on track and how to get feedback for your ideas.

Also, I have a so you have an idea for an app graphic and blog posts on Atlaz.io BETA Project Management Tool For Cross-Functional Teams the Trello and Atlassian JIRA Killer? and How to develop software ideas. I would suggest you listen to the Lean and Mean Agile Podcast to get extra product backlog grooming, prioritization tips etc.

TIP: I use the MoSCoW method for capturing and prioritizing tasks.

snip from: https://en.wikipedia.org/wiki/MoSCoW_method
Must have: Requirements labelled as Must have are critical to the current delivery timebox in order for it to be a success? If even one Must have requirement is not included, the project delivery should be considered a failure (note: requirements can be downgraded from Must have, by agreement with all relevant stakeholders; for example, when new requirements are deemed more important). MUST can also be considered an acronym for the Minimum Usable Subset.

Should have: Requirements labelled as Should have are important but not necessary for delivery in the current delivery timebox. While Should have requirements can be as important as Must have, they are often not as time-critical or there may be another way to satisfy the requirement so that it can be held back until a future delivery timebox.

Could have: Requirements labelled as Could have are desirable but not necessary, and could improve user experience or customer satisfaction for little development cost? These will typically be included if time and resources permit.

Won’t have (this time): Requirements labelled as Won’t have been agreed by stakeholders as the least-critical, lowest-payback items, or not appropriate at that time. As a result, Won’t have requirements are not planned into the schedule for the next delivery timebox. Won’t have requirements are either dropped or reconsidered for inclusion in a later timebox. (Note: occasionally the term Would like to have is used; however, that usage is incorrect, as this last priority is clearly stating something is outside the scope of delivery).

end snip.

Starting your Prototype in Adobe XD

Based on your MoSCoW list you can (I do) create empty screens ( I usually add a label in the top left indicating the screens MoSCoW status so I can prototype needed features now and start planning future versions later from the one prototype file). I am not a big fan of using multiple app prototype files.

Now you can copy and paste in example screens over the empty screens.

Within minutes you can have a nice mockup of your app using Adobe XD and Platforma assets.

Drag as needed, change as needed.

Customizing sample screens

Of course, you can edit the sample screens and rename, add, remove or change individual items in Adobe XD (Nice work Platforma/Adobe). Ignore the Yellow “Should Have” on the screen below, it looks out of place but I get in the habit of adding a floating “Must Have”, “Should Have”, “Could Have” and Won’t Have” labels to screens.

Preview

You can preview the rough prototype in Adobe XD on your desktop or on a real mobile device.

Don’t forget to wire up screens to generally goto and return to the main screen.

Or you can wire up individual screen elements to go to different screens. You will need to be in Prototype mode in XD first.

If you saved to the Adobe Cloud you can now open the prototype app on the Adobe XD app on a mobile device (or simulate it in Adobe XD on the desktop). Open Adobe XD on your mobile device and open your project from your Adobe Creative Cloud folder.

You can now view fabulous looking application prototypes on a mobile device screen with minimal invested time and effort.

Conclusion

I am very impressed with the https://platforma.ws Wireframe Kit, I’d strongly recommend app developers buy a copy and use the pre-setup templates look impressive and will save you loads of time (no more messing with UI Kits to make app prototypes look good). I can’t wait to check out and review the other assets in the Full Platforma Bundle.

Read More

Still reading?

Read: Quick guide to using Adobe XD CC to design a prototype iOS app.

More to come.

Donate and make this blog better

Ask a question or recommend an article

[contact-form-7 id=”30″ title=”Ask a Question”]

Revision History

v1.0 Initial Post

etc

Building faster web apps with google tools and exceed user expectations

November 4, 2017 by Simon

@jawache pointed me in the direction of twitter user @addyosmani and a talk at Chrome Dev Summit 2017 called “Fast By Default: Modern Loading Best Practices

Recently I blogged about speeding up my serves (by moving them closer to me and visitors) and Sped up WordPress by moving away from CPanel tp a self-managed server.

Update 2018: For the best performing VM host (UpCloud) read my guide on the awesome UpCloud VM hosts (get $25 free credit by signing up here).

RAIL: Measure Performance with the RAIL Model (Fast Integrated, Reliable and Engaging)

https://developers.google.com/web/fundamentals/

Focus on the user
Initial Response under 100ms
Animate, produce a frame in under 10ms
Idle maximize idle time
Deliver all content in under 1000ms

Replaced with: User happiness metrics

First Paint
First content Paint
First Meaningful Paint
Time to interactive

Potential Impacts

Network ( See my scalability on a journey on a budget blog post)
CPU throttling
Client Heavy Frameworks (JavaScript is heavy parsing)
Shared hosts (Moving away from a shared host to AWS from CPanel or other shared hosts can be a good thing for performance. )
Network Latency
Size (number and file size)
HTTP ASync Downloads Limit (2)
Device Speed
Parsing JavaScript.
3r party libraries
Caching (web server (NGINX caching https://www.nginx.com/blog/nginx-caching-guide/ ) or local browser cache)
User Limitations
etc

Do’s

Less JavaScript
More Caching
Lazy Loading ( I use the BJ Lazy Load plugin in WordPress )
Develop on Slow Devices/Links
CDN
DNS
Minify Code ( fyi )
Optimize Images ( fyi )
Respect Visitor Data Plans/Devices (offer low data version)

Use online tools (Browser dev audit tools) to measure performance metrics.

Consider in-memory caching solutions

Nginx Caching
OpCache if you are using PHP.
Node-cache – In memory caching.
Redis – In memory caching.

Use the following third-party tools while developing.

These are highly recommended tools.

Siege Command Line Benchmarking tool (Read guide here)

https://calibreapp.com/

https://speedcurve.com/

https://github.com/siddharthkp/bundlesize

http://loader.io/ – External Benchmarker

State of the Web:

Use http://beta.httparchive.org/ to see the average website stats and trends, is your site average or abusing the code type/size you push?

Sample httparchive.org Reports:

Average TCP Connection Per Page

The average percent of HTTPS requests (now over 50%)

Time in seconds to first meaningful paint

Average time to first interactive paint

Average time to first on load (finished)

Netcraft: October 2017 Web Server Survey:

https://news.netcraft.com/archives/2017/10/26/october-2017-web-server-survey-13.html

Web Server Technology Share

(Image credit: netcraft.com)

Active Web Sites v Hostnames

(Image credit: netcraft.com)

State of Desktops (Gamers Survey)

Steam conducts a monthly survey to collect data about what kinds of computer hardware and software our customers are using. Participation in the survey is optional, and anonymous via the steam app.

This gives a rough (biased) breakdown of high-end machines (gamers) but does reveal valid stats on installed memory and product share.

http://store.steampowered.com/hwsurvey

Don’t forget to track the visitors (location, time, devices, speed, gender etc.) to your site with Google Analytics https://support.google.com/sites/answer/97459?hl=en

Google Progressive Web APP LightHouse Site Audit (Chrome Dev Tools)

You can now run Audits in the Chrome DevTools. To run a report (Read More: https://developers.google.com/web/tools/lighthouse/#devtools )

Click Perform and Audit (in the Chrome Developer Tools) on the site you have loaded.

Audit in Progress

My Report

FYI: Report scores will depend on the time of day and the speed of your computer, A 55 score maybe 65 or 45 the following day.

Read the Progressive Web App Check List to help understand how to boost your score.

https://developers.google.com/web/progressive-web-apps/checklist

Google Mobile-Friendly Check List

Also, run the mobile-friendly tesh over your site here.

https://search.google.com/test/mobile-friendly

Google Page Speed Insights

Goto PageSpeed Insights and scan your site.

Page Speed Insights Report Results

FYI: My site is a WordPress site and I speed up the sight by.

Moving away from a shared CPanel server
Optimized Images in WordPress with the EWWW plugin
Made speed improvements in WordPress
Wordfence Security Plugin for WordPress buy also set up a WordFence firewall (slowing things down)
etc

The next thing I want to try is (Sponsors needed).

Setting up self-managed Sub Domain CDN’s (https://img01cdn.fearby.com, https://img02cdn.feearby.com etc). – See Vultr and Digital Ocean Ubuntu Server setup guides.
Third Party CDN’s.
DNS optimizations.
Setup NGINX Caching.

Google User Experience Report (Advanced):

The Google User Experience Report (SQL like query and reporting system) is a public dataset of key user experience metrics for top origins on the web. All performance data included in the report is from real-world conditions, aggregated from Chrome users who have opted-in to syncing their browsing history and have usage statistic reporting enabled ( https://www.google.com/chrome/browser/privacy/whitepaper.html#usagestats ) .(end snip from https://blog.chromium.org/2017/10/introducing-chrome-user-experience-report.html )

Getting started with Chrome User Experience Report Tool: https://developers.google.com/web/tools/chrome-user-experience-report/getting-started
Chrome User Experience Report Tool will allow you to query datasets on page load times.

Why

Better able to compete and deliver measurable advantages to your customers.

Conclusion

Know data – MOM (Measure, Optimise and Monitor).
Improve over time or before launch.
Set budgets on file sizes and page times.
Develop on slow devices/links.
Consider using PageSpeed Module on your server https://developers.google.com/speed/pagespeed/module/
Consider using the RPRL Pattern (https://developers.google.com/web/fundamentals/performance/prpl-pattern/ ) to split and cache code to speed up the time to interactivity.
Scale up or out?
Enabling web server caching (NGINX: https://www.nginx.com/blog/nginx-caching-guide/

Still Reading?

View more Google Dev Summit 2017 talks: https://www.youtube.com/playlist?list=PLNYkxOF6rcICUD5nBfRdAR6Fveosnqa5m

Also read: Can You Afford It?: Real-world Web Performance Budgets: https://infrequently.org/2017/10/can-you-afford-it-real-world-web-performance-budgets/

Still Reading:

Check out Googles HTTPS Transparency Report https://transparencyreport.google.com/https/overview

Read the introduction blog at Chromium Blog https://blog.chromium.org/2017/10/introducing-chrome-user-experience-report.html

Bookmark https://blog.chromium.org/

Update Jan 2018

Google begins mobile-first indexing of sites to improve mobile search results

What Crawl Budget Means for Googlebot

More to come.

Donate and make this blog better

Ask a question or recommend an article
[contact-form-7 id=”30″ title=”Ask a Question”]

v1.2 Jan 2018 additions on Google’s mobile first approach and increasing crawl rates.

v1.1 fixed typos

Personal Development Blog...

Coding for fun since 1996, Learn by doing and sharing.

Buy a domain name, then create your own server (get $25 free credit)

View all of my posts.

web

How to purchase your own domain name and set up a web server from $5 a month

Using Chrome 65 to measure website Performance, Progressive Web Apps, Basic Practices, Accessibility and SEO

Using Platforma Web Wireframe Kit to build a website (prototype)

Using Adobe XD and Platforma Web Wireframe Kit to prototype an iOS app

Building faster web apps with google tools and exceed user expectations

Popular

Security

Code

Tech

Wordpress

General