Category Archives: Web Design Southampton

FREE Profile Icons

To celebrate its Friday we have created some FREE profile picture icons. These FREE icons are ideal placeholders for staff or user profiles, enjoy!

free-profile-icons
Download Icons

Please note all Tidy Design FREE Stuff (including these super awesome profile pictures) can be used on both commercial and 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 your web project then please remember; sharing is caring, please tweet or post a link to this page…

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.

img{
display: block;
width:500px;
height: auto;
margin: 100px auto 0;
}

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:

img:hover{
-ms-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}

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:

img{
display: block;
width:500px;
height: auto;
margin: 200px auto 0;
-ms-transition:all 500ms linear;
-webkit-transition:all 500ms linear;
-moz-transition:all 500ms linear;
-o-transition:all 500ms linear;
transition:all 500ms linear;
}

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

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:

<?php /* Template Name: Full Width */ ?>

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.

.page-template-page-full-width{
width:100%;
}

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

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…

Back to blogging…

Well, it has been a while my Tidy Blog readers – In recent weeks (or should I say months) Tidy Design has been manic… If we then throw in (not literally) a new born baby, a complete property renovation project, moving house, copious client updates, several big meetings / projects and some biz development work, there has literally been no time to blog.

The youngest - Jamie Leon Ward

The youngest – Jamie Leon Ward

Firstly I must say a big thanks to my wingman Jordan Terry who has been putting in the hours. With several new and pretty big chapters started this year; Jordan has been an absolute legend manning the Tidy Design fort. Clients have certainly kept us busy this year, probably a little too busy at times, but this is a good thing – I would like to thank them all!

And on that note it is time for some more client work, we have lots to tick off our to-do list before month-end – Another busy week ahead…

Is Google Authorship still important?

I was kind of upset when Google dropped authorship photos from most search results last month, the potential to increase click-through rates and have your face appear in a Google search was pretty cool.

Is Google Authorship still important

So, is Google Authorship still worth it? Well, an authors name will still appear in Google’s search results, these linking to a Google+ profile page. Even though this small tagline is much less visible than a profile pic, these extra snippets of text add something extra… From what I read online, Google is working hard on promoting real people in its organic search results; authorship is therefore a great tool to establish your identity with Google.

Ok, it is sad authorship photos have gone – In a statement made by John Mueller Google are looking to tidy up its search result pages, the overall mission to provide a “better mobile experience and a more consistent design across devices.”

FREE Calendar Icon PNG

As it has been such a productive day at Tidy HQ, we have created another freebie! Some free calendar icons to use on commercial or non-commercial projects…

FREE Calendar Icon PNG

Download Icons

Here you have three tidy calendars all in PNG format, 1000 x 1000 pixels – Ideal for an app or web project. These free calendar icons could be used to represent an important date, news item, upcoming event or schedule. We hope you find a good home for them.

Please note you are not permitted to resell or distribute these FREE calendar icons via any third party sites, if you like them please link back to this page – Thank you for visiting the Tidy Blog, we hope you enjoyed your stay and find time to comment below.

Check out our FREE Stuff page…