twitMate

This is the really boring but necessary stuff - glad it is out of the way now!

This is the sort of job that I normally leave until something stops working and I can't work out what the error is.

This time I have set up the tweet engine script to email me if a scheduled Tweet fails to post, and include the details

Hoping to go live with this tomorrow 🚀

I converted the designs from yesterday into a working webpage including responsiveness for all screen sizes.

Next up some JavaScript to toggle between yearly and quarterly plans.

Here's a sneak preview:

To do this I first had a good look at competitor pricing and then made 4 different plans based on the features I will offer. I am struggling a bit with naming the plans though, so far I have:

Audience Only, twitMate Lite, twitMate Plus, twitMate Premium

At the end of any beta testing I make a point of reviewing things. To be honest the twitMate algorithms worked fine and didn't need much changing - I tidied up the scripts a little to make them more readable, then thought I'd found a bug but after digging into the code found it wasn't one :)

For the latest news section I pull the pertinent details from the latest 2 blog posts and show them along with the date.

I think it's good to have this if you are active on the site as it shows the site is current (both to customers and Google)

I hope to go live with this tomorrow!

I'm offering a limited number of heavily discounted plans for early-adopters of twitMate and wrote copy for it.

It's just a few lines but I feel that it's important to get right. Looking forward to showing it off soon...

I have just completed the mobile responsiveness for the twitMate homepage.

I tested on screen sizes: 414px and 360px and used breakpoints at 750px and 500px.

Looking forward to getting this live as a single landing page while I build the other pages... but before then I have a bit of content to change.

This would take me several hours to do manually but took less than 10 seconds and just one click using twitMate.

Even if no-one pays for twitMate in the future I've saved myself a ton of time :)

I have completed the responsiveness for tablets for the upcoming #twitMate landing page. I tested for the following screen sizes: 1024px and 768px and used breakpoints at 1260px and 1020px.

Next up mobile...

I have written the media queries for all desktop breakpoints. I developed for large screens first them worked down adding breakpoints. I tested for the most popular screen sizes:

1920×1080, 1536×864, 1440×900, 1366×768, 1280×720

However, not all needed their own breakpoints so I used these breakpoints:

1530px, 1430px, 1340px

Next up tablet and mobile...

Carrying on with the front end design I have converted all images to SVG from PNG so they look better when resized. I used Illustrator to do this.

On a side note I am moving away from Font Awesome and using SVGs instead due to accessibility difficulties with icon fonts.

Footer, latest news, currency selector, svg Twitter icon.

I got stuck for what felt like ages styling the currency selector form. In the end I accepted one border that I'm not happy with because it can't be styled with css and I am trying to focus on getting this launched and letting go of being too OCD 😊

Completed for desktop:
- Top Navigation (when user not logged in)
- Header
- Typography
- Bulleted Lists
- Main content

I'm aiming to get some interest in twitMate pre-launch so we are ready to go with a few accounts from the off.

I'm going to offer some heavy lifetime discounts for a limited number of customers so I pinned this tweet: