New Projects

tidy-design-offices-portsmouth

We have many different clients ranging from architects and haulage companies to hairdressers and amusements parks. We love the fact that our company is so diverse, and with each project, we get a sneaky inside view to what each company does. Our main breadline throughout the year is continual updates for all of our clients, however when we get a new customer, we always find this an exciting time. This year has been no exception, as we have been lucky enough to have new customers each month so far since the beginning of spring.

tidy-design-website-mapping

With each new project confirmed, it’s like a game of three way tennis in our office. Mike has handed the baton over to Blayne, and he is now the front designer whist Mike deals with customers, updates and sales. As soon as a new design is under way, we all like to pitch in our ideas and opinions. It works well, as we all have something different to offer, although I have been told I’m too bossy…something that isn’t new to me!

rosie-ward-tidy-design

Designing a site is something personal and it takes great trust from our customers’ part when they leave the designing process to us and handing over content and photos that they have no doubt taken hours and sometimes weeks to perfect. With each project, no matter how big or how small, we take pride in everything we do, and we hope that this depicted in our designs.

Rosie Ward

CSS Rotate

The CSS transform property has many different outcomes: skew, rotate, scale, translate etc. Today we are going to focus on the rotate effect, showing how it is used and an example of its use.

We are going to rotate an image 360 degree on hover to demonstrate its effect. A basic page has been set up with the image in the centre:

css-rotate

To rotate the image on hover we will need to add this code to our IMG styling in our CSS. For convenience my styling is in the head but note styling should go in an external CSS file. Below is my styling for the image above.

Rotating the image is actually pretty simple and requires two extra pieces of CSS styling. The first is to add the :hover pseudo class to our img tag. Once we have this in place we can add the transform style. See below:

I have included all browser prefixes: Chrome, IE, Firefox, Opera, to ensure it functions on the up to date browsers. As you can see the transform property itself takes different styles and rotate is one of them. The rotate style uses degrees to move an element, 360deg as shown above rotates the element around once.

The final property that needs to be inserted is the transition property. This allows us to see the element rotate. Without it there would be no smooth transition from one state to the next. See below:

We have added to our previous code above and again included the vendor prefixes. Check it out in your browser and see how it works. Cool effects and styling can be accomplished with the transform property. No need to add hover effects and instead can have more than just vertical and horizontal lines on a page… Preview CSS Rotate

Blayne Phillips

FREE Server Icon

Earlier this year we created several different server icons for a new client. As some of these server icons did not get used, we have uploaded a couple for you to download. Yes you guest it, another tidy freebie…

free-flat-server-icons
Download (PNGs)

Please note these FREE server icons can be used on commercial or non-commercial projects, all we ask in return is not to re-sell or distribute our work. If you decide to use these icons as part of a project, please be cool and share a link to this page – Thank you!

You will find lots more FREE Stuff on our site, enjoy!

Good First Impressions

When marketing a site online you need to remember the importance of a good first impression. Most landing pages will consist of a pretty photo, heading, sub-heading, the must-know information about a service or product followed by the nice-to-know stuff…

wire-frame-web-page

The target audience of your landing page is the first thing you will need to identify and understand; this will determine how copy is displayed. Should you compress data (keep it simple) or be really informative.

Whilst on the topic of copy, try to avoid multiple CTA’s (Call To Actions) on a page. If time/energy is focused on one goal you are more likely to convert. What goal is most important to you – Are you looking for online enquires, sales, customer data, new members, increased brand awareness etc…

A good first impression is very important, below is a page we recently created for a client and his PPC (Pay Per Click) campaign. It takes into account the points mentioned above, offering basic information on a service they offer with a clear call to action.

iso-certification-consultancy

Please do not hesitate to contact us with any questions, the team at Tidy Design would be delighted to discuss and assist in any brand development work you may have. Thank you for reading.

WordPress Page Templates

wordpress-blog-theme

In a recent project which involved WordPress we needed to implement different page templates. The spec was to have a page with a sidebar and one which was full screen without a sidebar. Luckily for us WordPress incorporates a system to achieve this. The method behind this is also fairly simple to complete and allows for a great degree of flexibility.

So first things first your going to want to make a duplicate file of the standard page.php. This default page can be either of the two templates that we want. The WordPress twenty fifteen theme defaults to a sidebar included page. Lets continue with that in mind meaning our template will be the full screen version.

Now that you have a duplicate of the default sidebar page template you need to open it up in your editor. Above all of the content on the page insert a comment tag with the template name, like this:

Watch for capital letters as these are important and it wont work without them. The template name itself can be any selection of characters you like. To finish things off in the php file itself you will want to remove the default sidebar include.

Open up your style.css file so that we can add some specific styling for the new page template. This is needed because in the default theme the main content itself wont be 100% wide. Due to the fact that it had to surrender some of its width to the sidebar. Luckily when creating the page template WordPress creates a new class on the body tag. This class will take the form of .page-template-[file name], for example our file was called page-full-width.php meaning our class is .page-template-page-full-width. With this class we can specifically target the same element and overwrite the default code.

Now you have both the styles.css and your template file completed you need to save them. The style.css is easy enough but what do you call the template file? Always start with the word page and then add your prefix to it. Like as we used above page-full-width.php. It always helps to use a name linked to its purpose. Finally make a folder called page-templates and place it in the root directory of the theme. place any templates you create inside of this folder so our new template will go here.

To test if what you have done is working create a new page and look at the page attributes. In this section you should see a template title with a drop down underneath. Click this drop down and see if the template name you created is visible. Check out this image for reference:

wordpress-page-template-code

I hope you enjoyed this quick WordPress tutorial, thanks for visiting…

Blayne Phillips

Helideck Agency

Last month we attended a meeting with Helideck Agency, a new company looking to modernise the helideck inspection, auditing and compliance services offered to offshore vessels.

Helideck Agency

We started by creating a couple of logo designs and branding concepts, following this we got stuck into the frontend design and development of their website. We are all very excited about this new venture; phase one is being uploaded to the web as I type so please visit Helideck Agency to find out more about this web project…

Fancy a chat?

In the industry that we are in, everything is pretty much digital, done online and emailed. As Mike will state on a daily basis, his inbox is forever full and pinging with fresh emails. Even in our personal life, we are constantly checking our phones for texts and emails. My boys have a toy telephone that has one of those vintage rotary dials. Bizarrely, they both know it’s a phone and that you need to put your finger in the dial to turn the numbers. I vaguely remember my parents having one of these phones many, many years ago, and picking it up and hanging up on the poor person on the other end of the line.

lets-talk-web-design

In this generation, telephone calls are now visual. The world is almost becoming more silent, as we are reading conversations, rather than having audible ones. Does this save time? Well that is probably relevant to the person. If I email my Mum, I will get a two liner sentence in return. Whereas if I pick up the phone or Facetime her, I’m guaranteed to be on the line to her for a good twenty to thirty minutes.

Dame Esther Rantzen, recently set up the brilliant free confidential helpline for elderly people, The Silver Line. It’s a 24 hour line, where older and isolated people can phone up and chat about anything. It’s such a simple, yet brilliant idea.

I do worry that sometimes, we are all guilty of heading straight to our emails, rather than picking up the phone and talking to someone. We have some clients, where our relationship is built over time by emailing. We are happy as long as the customer is happy, but it is so refreshing at times to have a one to one chat in person. Just recently, we have had two long term clients come to visit us for the first time in five years of knowing them, and it was so nice to put a name to a face.

Emailing and texting will always be an invaluable tool, but all humans need interaction. Sometimes picking up the phone or going to see someone will mean more than we know.

Rosie Ward

Link Building in 2015

The Penguin algorithm (an update to Google search in April 2012) transformed link building and SEO. Google Penguin targeted spammy links, punishing sites looking to manipulate organic search results with poor quality links alone…

google-penguin

Sadly Google Penguin can’t identify every bad link or bad site on the web, big “G” is however rolling out more updates to tackle this. Google’s ability to detect spam and link manipulation is only going to get better so box clever! When it comes to SEO and backlinks Google has a dream, to wipe out any manipulative linking practices. Quality links are key, they are harder to obtain, and they are the way forward.

I have listed a few links below you may find interesting, these covering the topic of backlinks, Penguin and link building:

The Future of Backlinks in SEO
How to Find Quality Backlinks
Poor Quality Links and Penguin
What are Backlinks?

So what about link building in 2015, what kind of links should we all be looking for? Well, Google wants to see genuine links, relevant links, links that add value to the web and its users. Think an original source of content or resource, further information, people or business. You should create something of value and then get people to link or talk about it – Post comments on multiple blogs / forums / social sites referencing this content you created.

The days of link manipulation have long gone; there is no quick fix. Link building is now about marketing your business online correctly, building links for people and not web crawlers.

I hope the above info on link building has helped; please do not hesitate to contact us with any questions, we’d be happy to help. Thank you for reading, your comments / feedback on this article would be much appreciated…

Interactive Map Design

interactive-map-js

A project that is currently being developed required in its spec a map of the counties that it covers. We could have simply put in a static map and been done with it. Taking that route however would have diminished the user experience (UX) and interface (UI). So at Tidy Design we decided to incorporate some interactive elements into our map. This has enriched the UX and UI creating some cool effects.

How did we accomplish this and with what tools? To start with we had to use Photoshop to edit the map of Great Britain so that each county can be identified. Using different variants of the client’s colours enabled each county to stand out. The second element of the map is the markers, which are separate image files. Map marker icons from our “Free Stuff” page.

All that was left to do was to incorporate the UX, this consisted of a hover effect over both the markers and county names. Hovering over a county name enables the corresponding map marker to bounce, indicating its location. Vice versa made the county name standout by a change in background colour, text position and a pulsating animation.

Using CSS we placed the map markers into position. Em’s allowed the map to be more responsive and keep the markers in place, no matter the screen size. Animate.css a free to use CSS file provided the bouncing and pulsing animations. Finally the incorporation of jQuery created the hover event listener, which triggered the appropriate classes to be added. The classes being added are what create the visual effects you see…

Please stay tuned for more on this project.

Blayne Phillips

Mapping out a website

There are many ways to start developing a new website; you could start writing the code, create a couple of mock-ups in Photoshop, map out page layouts on a whiteboard or in a notepad…

mapping-out-a-website

Information architecture (IA) is an important part of web design however it can often get overlooked. This could be the result of a small development budget or an “ASAP” deadline. How developers allocate their time will certainly impact the overall cost and ETA of a project.

A lot of thought/planning should go into a new website, be it a single page site or full-blown web application – Structural design and information is very important. If you require assistance mapping out a website then please visit our Web Design Process page. Good luck and thanks for visiting…