Category Archives: Web Design Winchester

2019 Marketing Budgets

Are you thinking about your marketing budget for 2019? A general rule of thumb is to invest 5% of your revenue, this would go towards developing your website, employing someone to maintain (or contribute towards) a blog or social media account, attending events and more…

Investing 5% should retain your position, company awareness and visibility online. Investing 10% or more is suggested for growth and gaining a bigger market share. Economists and business owners will debate over the exact percentage to invest, so lets say most small businesses will allocate between 5 to 10 percent to marketing in 2019.

Sample Marketing Plan

Planning ahead in life (and business) is difficult, we don’t know what is around the corner. That said; planning ahead and having a goal is super important. I recently allocated some time Tidy Design, mapping out the next five years and how I’d like things to pan out – it was a worthwhile exercise, offering much value. A marketing budget will need similar thought and planning applied; if we invest too much then we may break the bank, if we invest too little then we may disappear.

When I think of the term “marketing budget” I think ROI (return on investment). As business owners we all seek a ROI but this is not always easy. ROI’s require a mix of research, insights, planning and data analysis – this takes time and small businesses rarely have free time! It is easy to fall into a trap, too busy to plan!

Expectations…

You will need to know your marketing budget and set a clear plan within that budget (keeping realistic exceptions). Whether your budget is based on a fixed amount per annum or a percentage of revenue per month, knowing these figures is important.

So to conclude; when mapping out your 2019 marketing budget do your research and find out what type of campaign will have the best impact (ROI) for you / your business. It is a good idea to work backwards, identifying what you hope to accomplish at the end of it.

Rest assured that Tidy Design is on hand to help, we’d be more than happy to review your website (its design, performance and bounce rates), putting forward suggestions and ideas on how to improve it. Building a bigger customer base next year will require an upfront investment, we too are looking to develop and grow as a business in 2019, so lets do this together!

Thank you for reading, have a tidy week!

Mike

Elegant CSS Borders

This weeks Tidy tutorial is going to look at borders. Adding a little flair to a border can really add something extra to the feel of a website.

We’ve recently started working with a client with whose target audience is middle aged and older women, we wanted to give this website an elegant feeling, and we think we’ve achieved just that with additions such as these borders we’re going to talk about today.

This is a nice and quick tutorial, and we know you like that, you don’t always need to write lines upon lines of CSS to get great effects. So let’s jump in! We’ll start with the HTML markup needed:

That’s all we need, a simple div with the class of ‘border’ wrapped in a container. We’re placing it a container so we can make this box responsive and add some padding to stop it hitting the sides of the page. The initial styling will look a little something like this:

.container {
	padding: 2em;
}
.border {
	position: relative;
	width: 100%;
	max-width: 550px;
	height: 340px;
	/* We're picking out a colour from the background image we're using but you can pick any colour */
	background-color: #ccaeb9;
}

Here’s what you should be seeing, bear in mind we’ve got a couple of extra generic styles here but the fundamentals will be the same:

We’ll make the start on the borders themselves now, to get this effect we’re going to make use of the before and after pseudo elements. Targeting both before and after first for the generic styles this is what we’ll need:

.border::before,
.border::after {
	content: '';
	position: absolute;
	border: solid 2px #ccaeb9;
}

After this change we aren’t going to see a difference, it’ll look exactly the same until we target the pseudo elements separately to do the positioning of each border. Before we get to the next step make sure the ‘.border’ is set to position relative and that you’ve got some box-sizing styles set up like this:

*, ::after, ::before {
    box-sizing: border-box;
}

Now moving back to the borders, let’s start with the before:

.border::before {
	left: -20px;
	width: calc(100% + 40px);
	height: 100%;
}

Before we break it down, here’s what you should be seeing:

Right, now let’s look at that CSS block. Starting with the height, this is clear, we want the height of the border to be exactly that of the box. The width, we want 20px each side of the box for the overlapping border style, we do this in a way which can stay responsive. Using calc we add the overflow of the box to the 100% width. Now to finish the before section off we use left to move the border left, giving each side an equal space around the box. Another way this can be visualised is like this:

.border::before {
	height: 100%;
	width: calc(100% + (space on the left side desired + space on the right side desired));
	left: - space on the left side desired;
}

The after is going to look similar to above, but the width and height is going to be reversed:

.border::after {
	top: -20px;
	width: 100%;
	height: calc(100% + 40px);
}

The opposite effect should be given here, looking like this:

And that’s it, nice and simple here. Playing with pixels added to the 100% in the calc and also the left we can make the spacing of the borders around the box smaller and larger. I’m sure you can also think of ways to make this look even better with hover animations too! Have a play around on the Pen and share what you make.

codepen.io/TidyDesign/pen/qMMBoL/

Thanks for reading, catch you again soon.

Luke

Curtain Mobile Nav

Today’s Tidy Tutorial is going to look at a take on a mobile nav, showcasing a curtain style open and close animation with fading nav links.

We’ve got a couple of elements here that are pretty standard and won’t be covered but you can check the Pen to see these (mainly the nav toggles). Before we jump into the nitty-gritty let’s look at the setup…

A FREE Mobile Nav Tutorial

We’re going to need a HTML structure of the nav, it’s going to look a little like this:

There’s nothing out of the ordinary here, looking at the above code block it’s a pretty standard structure. The only item which could be considered an oddity is the toggle bars being the first nav item – this is purely for some automatically calculated spacing for the closing toggle. Now we just need some initial styling:

This first CSS block will place the nav above the page’s content when we’re ready to show it. Also you’ll see the comment above the ‘height’ declaration, we’re placing this here so we can style the nav. We will need to take this away to hide the nav, but first, before we completely hide the nav we need to write a quick fix to space out the close toggle bar properly and move onto some styling:

Nothing complex here, it just places the cross to the left and moves it into the centre of the li. The reason it originally seems out of line is due to the transforms moving the spans into the cross shape. To see how we’ve created to toggles please see the Codepen Pen of this tutorial.

Everything is quite squished right now, so we need to make the ul the same height as the nav and also space out the links:

Here we’re using the beauty of flex to automatically evenly space out the links, flex direction states we want the links in a column. If you’re unsure on any of the styles around flex then check this post from CSS Tricks, everything you’ll need to know will be covered: css-tricks.com/snippets/css/a-guide-to-flexbox/

Time to add in the curtain effects styles, we’re going to use pseudo elements. We’ll start by creating both and move the positioning of each after:

You’re going to see a rectangle now that takes up half of the page…

::before is our left “curtain”, ::after will be the right. We need to move the ::after pseudo element to the right side. We will do this with the following style:

Now your whole screen should be covered by the “curtains”. These need to be hidden off screen though so they can be animated in later:

Simple transforms are how we do this, adding a minus to the ::before’s style to move this to the left.

Now the majority of styles have been completed but before we move on we need to hide the nav when we don’t need it. A simple few lines will do this:

On our page we should just see the hamburger and whatever other content we’ve placed on the page, for us just a header:

Next we’re going to need to add the only JS side to this tutorial, a simple class added to the nav element will be what triggers the opening and closing of the nav. We just need one event listener which is going to toggle the class, it doesn’t get much simpler than this:

That’s the JS done, everything else is going to run through CSS. All the styles which deal with the open nav are going to be prefaced with ‘.nav-open’. Starting with these following few styles we make it so the mobile nav is able to be opened, the page once you click on the nav toggle will be covered by the “curtain” elements.

Two problems here though – first, we’re stuck here; we’ve not shown the links so you can’t go back. Second, the curtain elements jumped in rather than animated in. Let’s fix the latter first:

You can tweak this style however you like, the timings can make a big difference but the biggest impact can be made through the timing function, we’re using ease-out but play around with other standard timings and even try creating your own cubic bezier (here’s a great site for helping you create your own cubic-bezier.com).

This is where things get a little finicky, if you were to close the nav now you’ll see the whole thing instantly disappears. This is down to the measures taken to completely hide the nav when it’s not in use. To fix this we have to get creative with transitions:

Toggle between the open and closed state now and you’ll see the curtain elements open and close properly. Once the curtains move in we can tackle the links, currently they show and hide instantly, we want these to appear after the curtains have shown.

We’ll start by getting the nav links to show once the curtains have closed, to do this is pretty similar to the above, on the ‘.nav-item’ class we set the transition duration and delay. The delay needs to be set for longer than the curtains’ transition duration:

The reason we’re breaking out the transition declarations into their long form is so we can override them individually. Also as mentioned above, setting the delay on the nav-open class means we can provide different times for both the opening and closing sections of this transitions. We want the nav items to fade out first on the closing – to do this we’ll set the transition delay to 0 on the just the ‘.nav-item’ class:

We’re nearly there! We just need a few final tweaks. The first one to tackle is getting the curtains to transition out after the links have faded out. We need to add the delay onto the nav before and afters, also adding a delay to the nav-open before and after of 0s to keep the curtains opening first on the initial menu opening:

The very last bits run of the same ideas as the previous couple of CSS code blocks, we need to update the time on the nav elements’ transition duration to the total time of the closing transition. This is the nav pseudo elements’ transition duration (.5s) + nav links’ transition duration (.5s) + transition delay difference (.15) which equals 1.15s.

Finally let’s do the double transition timing trick to get the padding of the main nav to visible as soon as the nav opens and be removed once the links fade out – this stops a glitchy looking jump. The reason it’s added after is to help make the nav hide completely, if we were to use display none on the container then the children (nav items) would lose their ability to transition their opacity. The last code block is:

There we have it, a completed mobile curtain like navigation. There’re a few quirks of CSS to overcome along the way but the final product is worthy of that extra effort. Have a play around with the styles in the Pen and see what you can come up with!

codepen.io/TidyDesign/pen/gdvqPp/

Thank you for reading, we hope you enjoyed this FREE mobile nav tutorial, until next time!

Luke

UX Design Hampshire

UX stands for User Experience, some refer to this as UXD also known as User Experience Design. This process is all about enhancing user satisfaction, be it lowering the bounce rate of a web page or increasing the chance of an online sale through subtle call to actions / offers.

The process of UX design includes reviewing elements of interaction, we’d ask questions such as (1) who is your target audience (2) who is the competition and (3) what is your primary goal for the website / application we develop for you?

Before starting any UX design work we’d need to review and understand above. Some experimentation (visual design work) would follow, these would be concepts only, an idea of how things could look and move forwards. Your feedback on these designs would be taken into consideration, working together (and performing further research) these designs would evolve.

A review of information architecture (the structural design), users / user research, current trends (be it technology or browsing habits) is also advised. A good question to ask is “who is currently doing it well and why?”

In terms of UX this forms part of everything we do as a business, from sales to site development. Reflecting back; some clients had their own UX visions, views, ideas or a direction for us to follow, others simply leave us to it… Sadly “visual candy” is subjective, what works for one individual may not work for another. So with this in mind, a sufficient time allocation (UX development budget) is recommended plus we have to factor in trends. Concept work, competitor analysis and a collaborative approach will work best.

So what should you be looking for in a UX designer? Should you be employing a graphic design agency or a web design agency? Is UX design the same as web design? How much can you learn from the competition? What is a UX deliverable? Who is responsible for usability testing? These are just a few questions that spring to mind what I think “UX designer”.

Personally I would look for the following;

Natural ability

As humans we can learn to do a lot of different things, a simple formula of “time + dedication + hard work”, however natural ability (our genetics) are with us from day one. Before entering this crazy pace world of web dev I studied art at school / college, this evolved into a University degree called “BA Communication Design”. My point is this; an eye for detail and creative flair has been with me since I was little, long before web design. Some folk are natural runners, others great swimmers, my talent has always been art. UX design requires a combination of both technical and creative thinking, I’d suggest you look for someone (or a company) that caters for both. A lot of UX design boils down to common sense and an eye for detail – this is important to remember.


Check out some of my artwork here

Understanding usability

Usability and UX design go hand in hand, an ability to use a system, application or an object correctly without weeks of training is very important (time is money). Personally I think Apple do this so well, you receive a new iPhone, there is no 300 page user manual, simply a card with two or three instructions – boom, job done!

Good usability (and also first impressions) is essential to a positive user experience, but this alone does not guarantee a successful product… Usability testing forms part of this process, we have been involved with many focus groups (MyBirthplace.org and a room full of midwives spring to mind), understanding and working with user feedback is important. When I think of usability and usability testing I think of an object (be it a web page or application) designed with an end-user in mind, however end-users will vary. A good UX designer will want to make an object effective, easy to use (or learn), satisfying and faultless – catering for all (or should I say most) end-users.

As a UX designer, our main goal will be to solve problems, making “the process” as pleasant as possible. UX designers will need to be a jack of all trades or have people around them that bring certain skills to the table. For example; A pretty user interface may look nice (visually pleasing) however if its code base is buggy then application performance (speed and stability) may result in a bad UX. So, it is more than just looking pretty.

Personally I’d suggest you avoid listing out unnecessary product features and think more like Apple, less is more! Simplify your designs and documentation, incorporate your business and its mission statements to build trust. Getting a grasp on the user’s needs and goals is a must, from here we can begin to map out unique selling points or interaction frameworks / wireframes.

Anyway, I hope you enjoyed this post on UX design. If you have any questions for Tidy Design then please do not hesitate to contact us, we’d be happy to help.

Mike

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

Why HTTPS?

As a start in a 2017 effort to update and revamp TidyDesign.com, 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 – “http://website.com”. 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 – “https://website.com”. 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 Amazon.com, 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.

Jonno

The importance of Title and Meta tags

HTML documents are not all about text and content. While the bulk of an HTML document will denote the content seen on a webpage and how that content is displayed, some of the most key facets of these documents are not shown to the user in the conventional way – instead, these elements are shown to search engines and browsers.

web-designer-in-portsmouth

Two of the most important of these “hidden” elements are the <title> and <meta> tags. Both serve to improve the general usability of search engines, and attract new traffic by way of advertising a page and its content more accurately.

<title> tags – you guessed it – define the title of a page. This will be used both by the browser (to name the tab and window), and by the search engine (to name the Search Engine Results Page entry for the page). This is your user’s first contact point with your site and should be unique and descriptive to avoid being lost in the crowd.

A great example of a unique title tag could be:

title-tag-html

<meta> tags are a little more complex. They are designed to contain “information about the information” – character encodings, geographic locations, authors and many more fields can be defined with a meta tag. One of the most important pieces of meta information is a “meta description” which should be a short (150-160) character description of the page.

This description will appear as a snippet underneath the page’s title on the Result Page, and serves to bring more traffic to the page from users who will actually benefit from visiting your page.

A typical meta description for the About page defined above might take the following form:

meta-description-tag

Note that if a page lacks a meta description, the search engine will usually take the first content on the page for this field – this is almost never ideal, and can detract from the professional look, feel and usability of the site – usability starts at the Results Page, not at your actual site!

Jonathan

New Solent Fire Website

A few weeks ago Solent Fire contact us to discuss their website, it was pretty dated and required a complete re-design. Working with Solent Fire we put together a couple of design concepts, these soon evolved into the new website, please see below:

solent-fire-services

solent-fire-services-02

We hope you like the look and feel of SolentFire.co.uk, Tidy Design is delighted with the end result. We are now discussing the next phase of website development, please stay tuned…

solent-fire-services-03

Finally, it was great to receive such positive feedback from Solent Fire on this project, thank you so much for choosing Tidy Design.

A Recent Testimonial

Working with an array of different clients in different sectors is great, there is never a dull moment. Many thanks to Portsmouth NHS for their glowing testimonial; we look forward to working with you on future projects:

portsmouth-nhs-logo

“We asked Tidy Design to help us to develop an interactive, informative and user-friendly App to help expectant mothers choose where they would prefer to birth their baby. This is what they did. Mike and the team at Tidy Design were invaluable; their passion and expertise helped us achieve our vision.

The project was completed to an exceptional standard whilst maintaining timescales and financial targets. It was a pleasure working with Mike, Rosie and Blayne and we would not hesitate in recommending their services.”

gill-walton

Thanks again to Portsmouth NHS, here is a link to the project MyBirthplace.org

4 Modern Website Layout Examples

Layouts have not changed an awful lot since the release of CSS3 and HTML5. The days of using tables to layout a website are long gone yet websites still feel table like. There are benefits of having an unorthodox layout. No matter your trade you will always have competitors and I bet a lot of those competitors have similar websites (table like). Will a user remember one hundred similar layouts or the one that was different?

Diamonds

CSS3 has really changed the way we can style elements on a page. Using transform we can alter the appearance of nearly any element. Giving us the power to create some really unique layouts. Rotating squares into diamonds is one of the more basic examples; nonetheless very unique compared to its square cousin.

diamond-layout

The layout I have created can be used in a number of ways. An e-commerce store may use the two side diamonds as links for either men or women. They could be used as image placeholders to accompany the text in the centre. Whatever you choose this is a sure fired way to ensure a memorable site.

Box Overlay

Overlaying boxes on a traditional looking website can really impact its appearance and break the mould. Using shadows you can effectively turn the content inside into high priority areas for your call to actions (cta). Users are more likely to scan those areas of the page before anywhere else. Overlapping the boundaries of the layout beneath can also add to the effect.

overlaying-blocks

This layout would be great for a personal blog, the longer box to the left can act as an effective side bar while the posts can be placed to the right. The featured post can occupy the top of the page, its image being inside of the overlaying square.

Masonry

There are a couple of ways to achieving this effect. The easiest is to use a Javascript grid layout library called Masonry, it sorts all of the boxes into optimal positions to prevent huge vertical spaces. As quoted from their website “sort of like a mason fitting stones into a wall”. This means you can have many different shapes and sizes all fitting nicely next to and beneath one another.

The sidebar is also a less common feature and takes up a fraction of the space compared to more traditional versions. Using icons and single words allows the sidebar to become less of a prominent feature but remaining just as useful.

masonry-layout

This layout again can be used for blogs but also for dashboards. The boxes can contain important information for the website owner such as statistics or quick actions etc.

Marginless

This final concept is the most traditional looking of them all but it still has its unique qualities. The majority of websites use CSS to include margin between their sections. A marginless layout throws that out of the window and uses padding instead to create its white space. If you can get the correct colours and images then these layouts can look amazing.

no-margin-layout

These types of sites are great if your trying to sell a single product or advertise your business online.

Hopefully by now you have a few ideas you can take away with you to start building some truly unique looking layouts. It does however take more then just a great layout to build a memorable website but its the foundation on which everything else will be placed. Have a favourite layout? let us know in the comments.

Blayne Phillips