Category Archives: Web Design Portsmouth

Web Designer Jobs 2019

We are looking for someone to join our small but highly motivated web dev team based in Port Solent, Portsmouth. Your day-to-day tasks will include working on a mix of new and existing projects, these include small bespoke brochure sites (HTML5, CSS3, JS, PHP) to working on larger projects (WordPress, WooCommerce).

There will be a mixed bag of tasks fuelled by an office Nespresso machine. If you enjoy programming, quality coffee, new web technologies and a quirky office environment then please contact us today.

Required:

Experience with PHP, HTML, CSS and Javascript.
Bespoke WordPress development
Passion for technology and development
Ability to work independently and as part of a team
Excellent communication skills, written and verbal
Mobile first responsive design

Desired but not essential:

Experience using Git
An understanding of build tools such as Gulp
Experience and knowledge of SASS
Ability to work with an FTP client

You’re a good fit if:

You like to be challenged, taking the initiative and figuring out solutions. You enjoy working in open and fun office environment.

Benefits:

A competitive salary
A voice in an established small business
Proper coffee machine
Vibrant working environment
Well equipped high-end offices
Port Solent shops/restaurants and sea walks

If you believe that you would be a suitable candidate and would like to be part of our fun and quirky team, please email your CV to rosie@tidydesign.com. We also request that you send a portfolio containing recent examples of your work.

We look forward to hearing from you!

Her Garden Gym

Check out our latest fitness related website for a personal trainer in Bognor Regis, hergardengym.co.uk.

The customer:

Jacqueline is a fitness tutor and personal trainer, who has developed her own personal training studio at home. Jacqueline provides personal training sessions, and offers support and knowledge to make beneficial choices and optimise health and fitness. The sessions are carried out in the comfort of her own training studio, a peaceful haven where women can train in peace and not feel judged as often can be the case in busy gyms. In 2019, Jacqueline will also offer nutritional advice as part of her training packages.

The Spec:

To create a bespoke CMS (WordPress) site that promotes facilities and services on offer. The feel of the site should be feminine, as the target audience is specifically for women. The logo has already been designed, so implementation of this will be incorporated into the site. Source code including images names and page URLs will be constructed with search results in mind. Keyword analysis and integration will form part of the project development. The blog will form a big part of its online success.  

The result:

We have used soft pastel colours to give the site a feminine and stylish feel. We have also integrated the logo provided into the design of the site, which also adds to the soft, natural, feminine impression. The FAQs page has also been integral to the site, detailing all potential questions for Jacqueline clients. We have made full use of the photos provided, which will be essential for Jacqueline to showcase her studio to potential clients. The blog is to be an important element to the site, where she will be able to pen her knowledge of training and nutrition counselling.

Feedback:

Thanks for your work on this, I am very happy with the way the website is looking…

Fitness Website Designs

We are delighted that we were able to launch our latest project procalisthenics.co.uk earlier this week.

The customer:

Paul is a personal trainer with experience training with calisthenics. Initially Paul will provide personal training sessions specialising in calisthenics, and is aiming to open a calisthenics gym within Portsmouth. It will offer structured classes covering a variation of training, and aims to be a community lead gym.

The spec:

WordPress development area with bespoke custom theme. Single page site containing all information on services divided into five main sections. One section to include pricing cards to display packages and prices. These will be editable via the CMS system. Another section will be available to show case future projects including the gym, and capture user emails for potential customers.

The result:

A sleek, stylish and simple one paged site. This is entirely editable so that the customer can control all his content including photos. The site also has elements in which it has scope to evolve once Paul has set up his gym. This was a factor taken into consideration at the start of the project. It allows for expansion and flexibility.

Feedback:

Thanks again for being very supportive and working in a timely manner, it’s taken a lot of stress off me knowing that you guys are on it, cheers. Paul

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 to 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

Creating a Responsive SVG Overlay

Today I’m going to show you a way to change up the standard straight lines below your header images, we’re going to use a wave in this tutorial but any shapes you like will be suitable.

This process is done by creating an SVG and placing this into the HTML file below your header> (or whatever container you’d like). I’ll be using Figma to create my SVG overlay, but you can use any SVG editor to achieve these results, just note that some steps may be slightly different. There’s a couple other SVG editors you can choose from if you haven’t got Figma (a free piece of software), one being Adobe Illustrator and another the free editor InkScape. Now we’re sorted on what we’ll need to continue, let’s jump in!

I’ve placed in a background image on the pages to replicate a header area, this is purely to keep a nice visual representation of how it’ll look once live. The first step will be to place a rectangle on top the header image, let’s put this at the bottom of the image. I made the rectangle 6px high choosing a bright red to help it stand out. I also added some guidelines to visually separate the page into 3 sections.

From here you’ll need to double click the red rectangle, you should now see diagonal lines over the shape when hovered over. With that done move up to the toolbar at the top and select the pen tool.

Zoom into the first of the guidelines and click on the intersect between the guideline and the top of the rectangle, make sure to hit the escape key to create just one single point. Scroll along and do the same on the second guideline.

Before you zoom out head all the way to the right, use the move/select tool and drag the top right point of the rectangle up 10px – 15px.

Now zoom back out and you should see something similar to this…

Still using the move/select tool grab the point on the first guideline and drag it up in straight line. How high you drag this up determines how big your wave will be.

This next step is where we’ll see the curve of the wave taking shape. Double click on the red shape and move up to the toolbar in the top left to select the bend tool. The next step is to click on the two points over the guidelines…

Simple, right? Now you’ve got a crisp wave like topped rectangle, we just need to export it to be used on the web. With the wave selected look to the sidebar on the right of the page, the last option you should see under the Design tab is Export, select SVG from the drop down, hit export and now it’s saved ready for use.

Here’s the SVG code I’m left with, you should see something similar:

We just need to make a couple of changes to this, one so we can easily refer to it and the other to help make it responsive. These changes are only on the first line, we need to add an ID and also remove both the width and height attributes (the fill attribute is unnecessary and can go too):

Right! We’re ready to get to the code now… We’re going to need a header tag with a background image, and a container for our SVG code:

The container is needed to keep the SVG to the right aspect ratio, without it you’ll be able to get the SVG to be as wide as the container but it’ll also take up the height of the container. So paste in the SVG code into the container and we’re a handful of CSS lines away from completing this. First, we need to make the header tag position relative, and add the following styles to the SVG container:

#svg-container {
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 0;
}

You’re probably thinking “I’m not seeing the SVG!”, the last piece to finish this off is taking advantage of the old padding bottom trick. We need to calculate the aspect ratio, a simple formula by multiplying the percentage width by the viewBox height, divided by the viewBox width. Let’s break that down, our percentage width, as we want it to be full screen, is 100%, our viewBox is ‘viewBox=”0 0 1440 45″‘ therefore the CSS value will be: padding-bottom: calc(100% * 45 / 1400);

Change the values to what yours needs to be a boom! Now you’ll see the wave sat perfectly at the bottom of the header. If you want to see a live example, please see this Codepen Pen;

https://codepen.io/TidyDesign/pen/xaPVoR

Luke

Creating a Cut Out Text Effect

Before we start, there’s a couple of small caveats to this incredibly visually pleasing (and simple) CSS trick, but don’t let that put you off!

First of all, there’s only two colours that this trick correctly works with – white on black, and black on white. The second of these caveats is browser support, it’s not available on all browsers, but it’s natural fallback is actually a perfectly suitable mid-ground. The blend mode stops working and you’re left with either black text on a white background, or white text on a black background, still completely legible and not out of the ordinary to see on the web. Check here to see where it will and won’t work – https://caniuse.com/#feat=css-mixblendmode.

Now, on to the trick itself…

This trick relies on mix-blend-mode. Simply put, the mix-blend-mode style describes how an element’s content should blend with the content of the element’s direct parent and the element’s background. There’s many different mix-blend-mode options, but the two we are using today will be ‘multiply’ and ‘screen’.

As I’m sure you’ll already know the majority of the CSS used to create this set up I won’t bloat out the examples with unnecessary code, but there’s a CodePen you can view which holds all of the CSS used https://codepen.io/TidyDesign.

We will start with black text on a white background. So create a h1 element and let’s give this a background colour of white, and a colour of black.

h1.cutout {
	background: white;
	color: black;
}


With this set up we can add the magic…

h1.cutout {
	background: white;
	color: black;
	mix-blend-mode: screen;
}

How simple is that, 3 lines of code and we’ve got a great cut out text effect!

Now, if you want to switch the colours to be white on black all we have to do is change these three styles. Swap over the colour and background values and change ‘mix-blend-mode: screen;’ to ‘mix-blend-mode: multiply;’.

That’s all, who doesn’t like effects this striking which are so easy to create! CSS is full of little secrets like this, try playing around with the colours and blend modes in the Pen to see what other things you can create…

https://codepen.io/TidyDesign/pen/aamweL/

Thank you for reading

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

Structured Data – Breadcrumbs

A breadcrumb trail is an indication of hierarchy, the position and importance of a web page within your website. Google will use a breadcrumb markup in the body of a web page to help it digest this information (site structure and pages of relevance).

Below is an example of some structured data I created for TidyDesign.com, code based on Google’s JSON-LD markup and covering a few key web pages on our site;

{
  "@context": "http://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [{
    "@type": "ListItem",
    "position": 1,
    "item": {
      "@id": "https://www.tidydesign.com",
      "name": "Tidy Design",
      "image": "https://www.tidydesign.com/img/og/web-design-portsmouth.jpg"
    }
  },{
    "@type": "ListItem",
    "position": 2,
    "item": {
      "@id": "https://www.tidydesign.com/about",
      "name": "About",
      "image": "https://www.tidydesign.com/img/og/about-tidy-design.jpg"
    }
  },{
    "@type": "ListItem",
    "position": 3,
    "item": {
      "@id": "https://www.tidydesign.com/portfolio",
      "name": "Portfolio",
      "image": "https://www.tidydesign.com/img/og/image.jpg"
    }
  },{
    "@type": "ListItem",
    "position": 4,
    "item": {
      "@id": "https://www.tidydesign.com/web-design-process",
      "name": "Web Design Process",
      "image": "https://www.tidydesign.com/img/og/web-dev-process-tidy-design.jpg"
     }
  }]
}

Your structured data (breadcrumbs) should be a true representation of page content. By adding structured data to your website, you can enable more of your site’s functional and visual content to appear directly in Googles search results. This is a win win, it may give your site an edge over its competition plus help boost your organic search results.

If you would like to discuss Structured Data and implementing this on your own website then please contact Tidy Design today, we’d be happy to help.

Thanks for reading, have a good one!

Mike