Category Archives: Web Design Portsmouth

The Beast from the East

We survived it…..’The Beast from the East’ followed by ‘Storm Emma’. What a whirlwind of a few days we have had. After leaving work early on Thursday to beat the snow, Mike made the decision that it was too treacherous to come into work on Friday. It was touch and go for a while as although the forecast predicted snow for our area, it took ages for it to finally arrive.

Finally Portsmouth had joined the rest of the country, and we were eventually ‘snowed in’. For us we enjoyed a lovely prolonged three day weekend. We had copious of snowball fights with like-minded neighbours, we played numerous games of Frustration with the kids (when we were not outside), and we doused ourselves with an ongoing supply of tea and hot chocolate. Even the cat, who has never seen snow before, had a mini fight in the garden with it. Evidently the snow won, as she promptly came back inside the warm house.

Back to work on Monday morning, and most evidence of the white powdery cold stuff has gone…..apart from a small sad remnant of the neighbours snowman in the front garden. For us I believe we have had the best scenario. A three day weekend with snow on Thursday, fun on Friday, and all gone by Saturday. We are well aware that other people in the UK however have had a very hard time of it. With the news reporting water shortage, power failures, school closures, food shortages and treacherous road conditions, I feel we have got off with it very lightly.

Fortunately for us, we have not had a major day of catching up because of our day off on Friday. The majority of our clients were also like minded and either took the day off, or had limited staff in. The kids are back to school, work is back to normal and we are back to our normal ‘Monday morning rush out the door’ routine.We can only hope that those in the worst affected parts of the UK will get back to normality as quickly as us. Looking out into the garden this morning was the welcome site of blooming daffodils…..nothing says ‘Spring and Hope’ more!

Rosie Ward

My Maternity Website

Over the past few months Tidy Design has been working closely with NHS England to design and develop a web based portal for expecting mums. It was great to receive some glowing feedback from the project manager yesterday…

“We chose to work with Tidy Design as they had designed another local maternity app ‘’. We have been so impressed with the experience we have had; having regular updates and contact with the team. When we have wanted changes made these have been undertaken in a timely manner and we always experienced a very professional and dedicated team… Thank you so much for your amazing work!” – Donna Evans (NHS NORTH EAST HAMPSHIRE AND FARNHAM)

You can find out more about My Maternity at Below I have uploaded a batch of illustrations I created for this project:

Have a great Feb and best wishes from us all here!


Goodbye January!

I think as February approaches, everyone sighs a relief that the long, cold and wet month of January is finally over. I think the only person that I know that likes January is my niece, as her birthday happens to be slap bang in the middle of the month.

So what has Team Tidy done to make this month a little more perkier?!? Well Jonno just recently returned from his first trip to Amsterdam…he loved it so much, that he is booking to go back in July.

Luke is hoping to book a trip to New York in April to watch the UFC (if like me, you have no idea what this stands for, a quick Google search confirms that is means ‘Ultimate Fighting Championship’). And Mike and I have a booked a family Summer holiday for us and the kids.

I have always been a firm believer that you need to have something to look forward to. You could argue that you should be living now and not in the future, but the the thought that in a few months time I will be sitting on a sandy beach where the only problem that may arise is the indecision of which cocktail to drink, does put a smile on my face.

After a long Christmas break and the passing of New Year, it always feels like a new beginning. New projects are coming in, old projects are drawing to a close, and new business ideas are circulating around the office. January is a tough month for most of us, but its also a month that gives life a major spring clean. Dry January is a big example of this, as is diets and exercise. So maybe we shouldn’t be too hard on the first month of the year. Just look at what its provided so far… Tidy projects, booked holidays and half price bedside cabinets. Not bad for a long, cold and wet month!


A quick festive update…

We are finally here… December! Since our last blog post, Team Tidy has been extremely busy with several new and existing projects. Jonno has been a trooper developing and supporting software for Kidney Research UK.

Luke has been busy designing a new and exciting web app, MyMaternity, which enables women to make informed decisions on where they can have their babies.

Mike’s feet rarely touch the ground and has had two meetings and a conference in the past week alone. And as for me, I have been dealing with VAT deadlines, payroll, invoicing and the incredibly important task of hanging the tinsel up.

We have settled nicely into our lovely new office at Port Solent, and we are building some nice friendships with other fellow businesses within the building. Julie, the manageress of Pure Offices regularly puts on a coffee morning, with the last one being held on Halloween. Each office could enter the pumpkin carving competition, and we are very proud to announce that Mike won the competition with his fantastic design!

I have now informed him that we will be entering the gingerbread house competition which is being held at the office Christmas get together, much to his dismay.

Mike has also put his creative flare to good use, with some amazing illustrations that he drew for the project MyMaternity. For all the parents out there who have had a baby of their own, we know that during pregnancy we become obsessed over how big our baby is compared to a fruit or vegetable. Mike has drawn 36 illustrations all of fruit and veg, which enables the user of MyMaternity to see what size her baby is during her weeks of pregnancy. We are still however unsure what a Swiss Chard is, even after several Google searches of it.

We now have less than 3 weeks left till the big day, and with home and the office decorated with all sorts of festive treats, we are ready for the main event. Our workload however is far from complete… With impending deadlines and more meetings in the diary, we are still firing on all cylinders and there is no chance of winding down just yet. But when it reaches the evening of the 22nd December, you can be sure that we will all be well and truly ‘clocked off’ for a gloriously long week and a bit.

Wishing everyone a Merry Christmas and a happy New Year, thank you for reading.


IMPORTANT NOTICE: Our Tidy Design office will be closing on Friday 22nd December (mid-day), and re-opening on Wednesday 3rd January 2018. If anything urgent crops up during the festive holidays then please do email support[at], we will get back to you ASAP!

Albatross Paragliding

We are very proud to see the launch of one of our new websites… Albatross Paragliding! This website was commissioned by a client whom we manage a couple of sites for. These include ET Games, and MonkeyPuzzle.

The spec for Albatross Paragliding, was to have something simple and to include a paragliding video as a central element within the site. The video sees Dave (the instructor) paraglide over the stunning scenery of Hampshire.

Overall, the new site and logo took Mike a few days, and we feel the simplistic look gives the site a fun, fresh and exhilarating look. The pictures and video have also provided a great topic of interest within the office….would you or wouldn’t you?!?!


Grapevine – Pen Sketch

Following my recent olive tree pen sketch post I thought I would upload these grapevine sketches, here I decided to record my illustration using a short photo time-lapse. Enjoy!

Grapevine Pen Sketch 01

Grapevine Pen Sketch 02

Grapevine Pen Sketch 03

Grapevine Pen Sketch 04

Grapevine Pen Sketch 05

Please feel free to post your comments below or check out our tidy illustration page. I am planning to add loads more sketches, paintings and other creative stuff over the coming weeks/months so please stay tuned – thanks for visiting!


Creating a Mobile Navigation

Today I’m going to give you a short tutorial on how to create a mobile navigation. This mobile navigation will slide in from the left side of the page. Here you will find everything you need to create the nav including how to animate the hamburger icon and the JavaScript needed to open and close the menu.

We will start with the html needed to create the menu:

The first step is to wrap the whole navigation in a ‘nav’ tag, this a new HTML5 tag which represents a section of code with the purpose of providing links. Next is the navigation toggle (the div which will be the trigger for opening and closing the nav), this will have a class of ‘nav-toggle’ and contain the hamburger icon to indicate where the user should click to open the menu. Three span elements will be placed into the ‘nav-toggle’ div, these will be used to create the hamburger bars. The main styling of these bars will be implemented using the ‘bar’ class and the positioning will be done through the ‘id’ assigned to them.

Finally we create a div with the class ‘nav’ that’ll hold the logo of the company as well as the ‘ul’ containing all the links needed. For now we will add a ‘#’ inside the ‘href’ as a placeholder, later this will be swapped for the url you’d like the link to direct to. This code will give you the very basic structure ready to be styled with CSS.

Moving on to the styling will start with the ‘nav toggle’. We want this to be set to ‘position: fixed’ so it follows us as we move down the page, if it wasn’t then the user would have to scroll up the page just to open the menu. Once the position is set to ‘fixed’ we can move the toggle to where we’d like it, I want mine to be sat at the top of the page to the left. Here is how:

If you’d like yours to sit to the right of the page swap ‘left: 10px’ for ‘right: 10px’.

Continuing the styling of the nav toggle we set a height and width of 40px along with a background colour. The colour we’re using in the tutorial is one which matches the clients colour scheme, but you can use any colour you choose. This will leave us with a small green square, we want our toggle to be a circle though so let’s add a border-radius of 50%. Add the following code to the previous block:

To finish of the main styles for the nav we will add a box-shadow to make it stand out from the page and a z-index so it stays above other elements on the page. Finally we need to set cursor to ‘pointer’, this changes the cursor on hover and without it iOS devices won’t trigger a JavaScript click event. Below is the complete css for ‘nav-toggle’ and how it should look in your browser:

Now we have the toggle styled we need to add the hamburger bars. This is a simple process as the ‘bar’ class has been added to all three necessary elements one block of code will style all three. The CSS is relatively straight forward. ‘Position’ needs to be set to ‘absolute’ so we can move them easily into place, and the ‘display’ set to ‘block’ so it can be given a height and width.

A nice trick here as they’re positioned absolute it to set the margin to auto and left and right to 0, this automatically centres them inside the nav toggle. Here are all the styles needed to make the hamburger bars.

If you were to refresh your page now you’d the nav toggle with one single bar at the very top, this is due to them currently set to the same position. All three bars are there they’re just sat on top of one another. This is where the ID’s come in, we need to target each bars ID and space them out evenly.

We can leave the nav toggle and return later when it comes to animating the hamburger ‘bars’.

Now for the navigation. We need the nav to stay on the side of page no matter how far the user has scrolled down, for this set the position of ‘.nav’ to fixed. Once the navigation is stuck to our scroll position it’s time to set the height and width. For the height a simple 100% is needed here for it to be the full height of the screen regardless of the device it’s viewed on. Width can be whatever you’d like, for the tutorial we’re going to use 230px. The starting code for the nav should look like this.

The final nav styles for now include a background colour which again is up to you what you choose, we will run with the colour scheme already in use and pick a lighter green that’s slightly transparent. The background colour style will be set to an rgba colour so we can specify the alpha, our is ‘rgba(126, 160, 97, .95)’. To make sure it always sits on top of the page elements a z-index of 5 needs to be set. The complete nav styles so far are:

Next is a very simple setup for the ul, only two styles needed here. First being ‘list-style: none’ this removes the the bullet points next the list items. The second style is for the padding, removing the default padding and adding a slight bit of padding to the right, we will use the shorthand here and set all 4 sides with one line ‘padding: 0 12px 0 0’.

For the list items themselves we only need another two styles, the font styling itself will be placed on the ‘a’ tag within the list items. Here we space out the list items with a margin bottom of .65em and align the text to the right.

On the ‘a’ tag we will set the font size, font colour and the remove the default underline an ‘a’ tag gives. You will see the sizes and colour we use below but you can pick your own to match the project you’re working on.

When it comes to nav logo depending on the size and content you may need to style this differently than us but for the logo the client uses to position it properly we use the following styles.

Now the nav is completely styled we can move on to making it functional. The first part of making it functional is to hide the nav from view, this is done with a transform style. We need to add ‘transform: translateX(-100%)’ to the ‘.nav’, this hides the nav off the page to the left.

We also need to create the class that we will add to the nav later with javascript. We add this class to the containing nav element in CSS and call this class open with the style ‘transform: translateX(0)’. When this class has been added the nav will sit where it did before we added the previous ‘transform: translateX(-100%)’.

The javascript is actually a very simple piece of code which once ‘.nav-toggle’ has been clicked toggles the class ‘open’ on the nav element. It’s the only piece of code needed and looks like this: (Make sure you have jQuery added to your project)

If you test this now you will notice two things, first being that when the nav shows it just jumps into place rather that sliding smoothly. Second, the nav toggle doesn’t indicate in anyway that it’s been clicked. We will change these two things now.

Starting with the animation side of things we will add a transition to a few elements to make sure that the nav slides in and the nav toggle bars will animate properly.

Another quick test and you will see the nav now slides in and out smoothly, you can either speed or slow down this transition by changing the .3s for whatever you’d like.

The very last part of this is to animate to nav toggle and hamburger bars on click. We need to add a few styles to the ‘.nav-toggle’ container, these being the position, background colour and box-shadow colour. We add a transform set to ‘transform: translateX(167px)’, if you changed the width of the nav you may need to adjust this. The background colour change is just to make it slightly more transparent and the box shadow is to change it to completely transparent. The styles for these changes are:

The styles for the hamburger bars are simple but effective, we start by adding a transition delay to ‘.bars’ which applies to all 3 and then move to individually styling each bar. The first bar takes a transform which moves it down 7px and rotates it 45 degrees. The second bar gets hidden by an opacity set to 0. And last but not least the third bar gives given the same styles applied as the first but swapped to negative, it’s moved up by -7px and rotated -45 degrees. All 4 style declarations are below for you to see.

If you’ve followed this tutorial through you should now have a fully functional nav bar that’ll work and look great on both mobile and desktops. We will shortly be adding a demo page where you can interact and dissect it if you curious about anything… Enjoy!


Out with the old…

It’s been a busy period here at Tidy Design. After several years being based in Old Portsmouth we’ve decided to move on to a more fitting web dev environment.

We’ve said goodbye to the seaside view and quirky Royal Naval Club building and replaced it with the brand new high tech offices at Pure Offices in Port Solent. It’s a very different feel from what we’re used to but the modern furnishing, high speed broadband, and opportunity to expand makes it a welcome transition.

It’s not only the move that’s been keeping us busy. Website updates, redesigns and software projects (Yes you read that right, Tidy Design do more than just web development) have been making sure the new office is filled with tapping keyboards. Some of our latest redesigns include The Queen’s Hotel Portsmouth and TEG English language colleges, be sure to take a look! On the software side of things Jonno has stepped up to the plate taking over the development reins on ASSIST-CKD, our Kidney Research UK project in partnership with the NHS and is doing a fantastic job.

Unfortunately as our focus has been placed on clients our own website has become slightly neglected. Not anymore though, we will be dedicating some time to this and soon you’ll find a fresh website with a updated portfolio so you can see all of our current up to date projects. Keep your eye out for our new website launch which will be coming soon…


Evolution of technology

I am from an era where the internet did not exist at one point in my lifetime. I have just turned 30, and by no means do I feel old….yet! I even remember listening to a debate over the radio which my parents had put on in the car many years ago, on encyclopedias v internet. Need I say more.

It still amazes me however, how technology and the web based world has evolved in the last three decades. Many of us will remember watching Back to the Future II, and thinking how amazing would it be to have a telephone conversation with someone where you can actually see them at the same time on the screen! Who knew that 28 years later, we would all be making those sort of phone calls on a daily basis and not have to worry about any extra charges for it.

I was also from a generation where the mobile phone was only just coming into popularity for both the old and young folk. I think I was 14 years old when I got my first phone. My 7 year old nephew has his own iPad!

With this advance in technology, it opens the world of possibility to people. It can create knowledge, power and even love. However it can also create a lot of issues that perhaps people never foresaw. As a Mum of two boys, I worry about giving them a facility where the world (good, bad and ugly) is at their fingertips.

For now though I have comfort that they do not know my password for my phone or iPad, and they have never asked for it….yet!

The only one advance in technology that still hasn’t come to fruition, is the expandable pizza that takes two seconds to cook. One can still live in hope.

Rosie Ward


As a start in a 2017 effort to update and revamp, we have upgraded to HTTPS, the security-concerned friend of HTTP.

HTTP stands for HyperText Transfer Protocol, and it denotes the set of rules computers use while communicating in HyperText (web pages) over the web. That HTTP’s rules underpin the web can be seen in the typical URL – “”. The prefix to that address denotes the protocol in use.

You may have noticed that more and more sites over the past decade are labelled with a different prefix – “”. This denotes that the site is accessed over HTTPS; or HyperText Transfer Protocol Secure. HTTPS adds security concerns to HTTP’s base ruleset, ensuring that all transferred data is encrypted, undamaged and travelling to an authenticated recipient (in other words, HTTPS helps ensure that you are actually browsing, not someone pretending to be Amazon).

For the modern web, HTTPS is important. There’s no way around it. HTTP doesn’t concern itself much with secure communication, because the original purpose of the web was just to share textual information. The modern web, by which we trade personal details millions of times a second, requires a more secure underlying ruleset. When you’re sending someone your credit card details to make a purchase, you’re going to want that to be encrypted – it’s as simple as that.

There are reasons other than adapting to industry standards to upgrade to HTTPS, from SEO to simple consumer reassurance. Google ranks secure sites higher than insecure sites by default, so upgrading is a good first-step for getting to page one. Consumers are becoming more aware of security concerns on the web, too – largely thanks to that green padlock you see next to secure web addresses in the browser – and are less likely to provide any details over an insecure connection. The sound theory is that if you provide a secure connection, your customer is much more likely to contribute to your business with confidence.

Implementation of HTTPS for a domain involves purchasing a certificate from a Certificate Authority, and some server configuration. Those certificates verify domains as being owned by the people who claim to own them, facilitating the green padlock your users will see. Here at Tidy, we’re happy to provide this service and set up secure connections, moving the web forward and growing your business – just give us a call, or send us an email.