Welcome to the Tidy Design News Blog
A blog for developers, marketing gurus, designers and clients... Articles and news on SEO, JavaScript, CSS, XHTML, PHP, Photoshop...

Archive for August, 2010

The Kite Society of Great Britain visits Southsea, Portsmouth

Sunday, August 29th, 2010

The Kite Society of Great Britain

The bank holiday weekend has been very busy for Tidy Design, and it is not over yet! Ok, we have done a little bit of web design work however this weekend our mission is to chill out and re-charge! Yesterday was a lovely day, Rosie and I met up with some friends at the Queen Elizabeth Country Park, for a small fee you can hire a BBQ in the forest and become one with nature!

Today we walked miles and stumbled across an international kite festival. If you follow me on twitter (twitter.com/mjwarduk) you will see a couple of photos I posted of The Kite Society of Great Britain in action. The show they put on was very impressive and the breezy / sunny weather resulted in a massive turnout for the event. Ok, my wife and I don’t own a kite or know much about the sport / hobby however it was a visual delight! We bumped into some friends buying a kite for there young child from one of the many marquee stalls… The faces of young children seeing kites above their heads the size of houses, shaped like sharks, monkeys and reptiles etc created a great atmosphere.

So to conclude, living in Southsea, Portsmouth has many advantages for individuals, families and businesses. Almost every weekend something different is going on at Southsea common, Gunwharf Quays or Portsmouth Harbour etc

Portsmouth has had a massive impact on my life! I came down to Portsmouth in 2002 to study at its University… I later met my wife whilst working for Portsmouth Uni… The brand / idea of Tidy Design started in Portsmouth… I even learnt to drive in Portsmouth! So a lot has happened since I arrived at Southsea train station with one bag on my back and some savings in the bank! Over the years it has become a great home and the perfect location for our web design and marketing business.

Hiding DIVS with CSS

Saturday, August 28th, 2010

This tutorial will show you how to create a DIV, add some tidy CSS and Java Script to create a hidden area on your webpage! Here you could add some promotional offers or extra content for your readers. (To see this code in action please click on the two blue raindrops on our Tidy Design homepage, enjoy!)

So step one is the Java Script, this can be pasted into the header section of your webpage:

<script type=”text/javascript”>
$(document).ready(function(){
$(“.btn-slide”).click(function(){
$(“#panel”).slideToggle(“slow”);
$(this).toggleClass(“active”); return false;
});  
});
</script>

You will also need to link to a jQuery file such as:

<script type=”text/javascript” src=”http://www.tidydesign.com/jquery.js”></script>

Now you have the above in place please locate an area on your webpage that you would like to add this tidy effect. You will then need to create the hidden DIV

<div id=”panel”>
Tidy Web Content
</div>

And create a text link that will open it, making content visible to the reader.

<a href=”#”>Click here to view Tidy Web Content</a>

Now the fun / creative bit, lets add some tidy CSS to the panel and btn-slide.

#panel {
background: #333;
height: 250px;
display: none;
text-align: center;
color:#FFF;
}
.btn-slide {
background-color: ebebeb;
text-align: center;
width: 200px;
padding: 10px;
margin: 0 auto;
display: block;
text-decoration:none;
color: #666;
border: 2px solid #B5B5B5;
}

Now you have all the components in place your webpage with ‘hidden DIV’ should something like the following… Please click here to download a sample page.

Our Latest Website Creation

Thursday, August 26th, 2010

Large and Gibson Solicitors

Over the weekend we were very happy to see our latest website design launched for a local solicitors firm. The specification was for a smart, corporate and professional website that would be informative and easy to navigate. After many emails to and from the client we have created a site that we believe fulfils all these criteria’s.

Many thanks to Dan for all his feedback and helping us to make this project into a successful site that we are very proud of. Dan was very kind to give us this lovely testimonial:

‘A massive thank you to Tidy Design for creating our new website. You always answered all of my calls and/or emails promptly (even on weekends) and were helpful and very hardworking throughout. I am so pleased that my decision to use Tidy Design has paid off and I look forward to a long association between our businesses. I would certainly recommend Tidy Design to other businesses and individuals.’

Our next projects now are to complete a site for a dog kennels business and for a uniforms designer. Lets hope that these projects will be as successful as Large and Gibson have been.

Rosanna Ward

Designing websites for iPhones

Tuesday, August 24th, 2010

Today I have been learning how to build an alternate page, website and style sheet for the iPhone and iTouch. I found some great iPhone website tutorials on the web so I decided to put my own tidy twist on it… First I learnt we need to assign the iPhone browser type:

<script type=”text/javascript”>  
var browser=navigator.userAgent.toLowerCase();  
var users_browser = ((browser.indexOf(‘iPhone’)!=-1);  
if (users_browser)  
{  
    document.location.href=’www.tidydesign.com/iPhone’;  
}  
</script> 

Then we will need to use a conditional statement to hide the code from a regular browser such as IE or Firefox:

<!–#if expr=”(${HTTP_USER_AGENT} = /iPhone/)”–>   
<!– 
place iPhone code from above in here 
–> 
<!–#else –>  
<!– 
place standard code to be used by non iphone browser. 
–> 
<!–#endif –>

The above should now detect what browser is being used to view your webpage, we can therefore refer the viewer to a /iPhone directory which contains a site specifically designed for this mobile device. I have come across some very interesting information today about iPhones and portrait / landscape CSS files that link to window orientation! Over the next few days I will be post some more info about this.

Is client input always the best strategy?

Friday, August 20th, 2010

Our clients are a complete mix of different people. We have some who are very easy going and let us get on with the design without much input from them and we have others who are extremely particular and heavily get involved with the design process. A lot of our clients we have never met, and we just recognise their voices on the other end of the phone. Many of our other clients however have insisted on a meeting with us before they commit to any project.

In our opinion neither method is right or wrong. Some people like to meet the person face to face before paying them all their hard earned money, whereas others would rather pick up the phone and get the project signed off as soon as possible. From our experience it is usually the latter where the projects for us are most successful. As an example, we have had two projects earlier on this year where the client has phoned us up and due to another web company letting them down or a launch date has been pulled forward, they have asked if we could build a site for them within a matter of 5 days.

Cases like these remind me of my school days, where you have an exam and don’t revise for it until the very last minute. Pressure is what some people thrive on, and often under pressure you work better. People who insist on having meetings, usually means they are unsure of what exactly they want. This can therefore prolong the design stage, and a site that would normally take one or two weeks to build, can take one to two months. Either way the project always gets completed, which results in happy customers.

Rosanna Ward

Are websites for mobile devices, the future of web design?

Thursday, August 19th, 2010

Today we have been asked by one of our clients if we can build a website that can be viewed specifically for iPhones. We are very excited about this project, as this will be our first purpose built site for phones.

I am particularly excited about this project, as it means lots of testing is needed, so potentially this could be a very good excuse for my hubby to purchase me one.

Putting all that aside for one moment, and thinking about how technology has advanced within such a short time is astonishing. I remember watching Back to the Future 2 when they thought watching someone on a screen whilst having a phone conversation with them was something totally futuristic.

With technology advancing so quickly, has anyone stopped to think about potential consequences. Ok, I know your head won’t blow off if you are using a phone, but only a few decades ago people didn’t know that smoking was bad for you.

Maybe the script writers of Terminator were right…..maybe technology will take over the world without us even realising it.

……Still want an iPhone though!

Rosanna Ward

Ten tips for working from home:

Wednesday, August 18th, 2010

1) Every morning get dressed into something casual/smart. If you’re a girl, do you hair and put on some makeup. Going to work in your pyjamas with sleepy eyes is definitely not something that will help your work progress.

2) Before work, go out to the shops to buy some milk, drop the kids off at school, or walk the dog. This way you will feel like you are actually commuting to work.

3) Never eat breakfast or lunch in the office. Clearly distinguish between the work place and your home.

4) Once you clock off from work, try to resist going back into the office to check emails and do odd jobs. Evening and weekend time is play time.

5) Try to resist doing housework during work time. If needs be, put the wash on in the morning, and take it out during lunch time.

6) Separate the work landline from the home landline. It is not professional if you are talking for an hour to a friend on the work phone, and clients cannot contact you.

7) Do something in the evenings. Whether it is a walk or doing some gardening, make sure you get out the house!

8) Write To Do lists first thing in the morning, or just before you clock off ready for the next day. Seeing a list which has lots of ticks or highlights through it is very motivational.

9) Try to avoid having clients come to the house. It is better to go and visit them.

10) Don’t be ashamed that you work from home. Working from home can be a very practical and economical way of working.

Rosanna Ward

Keeping Design Tidy

Tuesday, August 17th, 2010

Keeping Design Tidy

So what does this mean? Keeping design tidy? Well, at Tidy Design it means good communication and the positive promotion of a brands identity. Think of it like this… You have a business that sells shoes; my wife (who loves shoes by the way) gets a flyer or email with some promotional offers and a link to your website. What will make her keep the flyer out of our recycle bin or email out of her trash can? It would need to be a tidy design, not a DIY job using clipart or your company history squeezed onto A5! Think about your audience, would a student keep the same flyer that Mrs Jones, the 85 year old who attends bingo twice a week?

Keeping design tidy is more than graphics, typography or slogans… It is about identifying your audience and asking: What do they like? What do they need? What would you want if in their shoes? If you can find these answers then you should be able to find the business. It is not rocket science, understanding your customers needs, expectations and requirements is the foundation of any tidy design.

How to put text into a Transparent Box using CSS

Monday, August 16th, 2010

Step one of this tidy tutorial is creating a div element (class=”background”) with a fixed height and width, a background image, and a border.

div.background
{
width:730px;
height:400px;
background:url(bg.jpg) repeat;
border:5px solid #CCC;
}

Then we create a smaller div (class=”transbox”) inside the first.

div.transbox
{
width:620px;
height:200px;
margin:30px 50px;
background-color:#000;
border:1px solid black;

In addition we need to make this div transparent.

div.transbox
{
width:620px;
height:200px;
margin:30px 50px;
background-color:#000;
border:1px solid black;
/* for IE */
filter:alpha(opacity=60);
/* CSS3 standard */
opacity:0.6;
}

Inside the transparent div, we add some text inside a p element.

div.transbox p
{
margin:30px 40px;
font-weight:bold;
color:#fff;
}

So your page should look something like:

<html>
<head>
<style type=”text/css”>
div.background
{
width:730px;
height:400px;
background:url(bg.jpg) repeat;
border:5px solid #CCC;
}
div.transbox
{
width:620px;
height:200px;
margin:30px 50px;
background-color:#000;
border:1px solid black;
/* for IE */
filter:alpha(opacity=60);
/* CSS3 standard */
opacity:0.6;
}
div.transbox p
{
margin:30px 40px;
font-weight:bold;
color:#fff;
}
</style>
</head>
<body>
<div>
<div>
<p>Tidy text in here…
</div>
</div>
</body>
</html>

Download sample

Strictly Come Tidy

Saturday, August 14th, 2010

Rosie with Anton Du Beke

Yesterday Tidy Design hit the road travelling from Portsmouth, to Birmingham, to south west Wales visiting both clients and family. Luckily for us we recently exchanged our old car for something more modern, comfortable, and with no shortage of CD’s / conversation the drive was great!

The first of our meetings was at a magnificent Victorian hotel, which exudes elegance in its 27 acre estate. The meeting was to discuss a website re-design and our bespoke hotel booking reservation system which is already being used by hotels in the UK. More info at www.hotelbookingreservationsystem.com

Before our meeting got under-way we bumped into strictly come dancing star Anton Du Beke who was a gentleman and a pleasure to speak with. After a two hour brainstorming session (with the hotel not Anton) we hope to next week get phase one of this project under way… Stay tuned!

We like to keep busy!

We have developed and licensed out a Hotel Booking System.

We created Montgomery Moon and setup the site Business Networking Link to help support start-ups.

To find out more about our other tidy adventures and business ideas please visit MJWARD UK

About Tidy Design

Based in Southsea, Portsmouth we are a small but highly motivated team of web design and SEO dudes who love what we do!

Our aim is to provide real value and inspiration to people looking to get on the web and grow their business.

Read more.

Blog Admin

© 2012 Tidy Design
Log in

 twitter icon