Category Archives: Responsive Web Design

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

What is Mobile-First Indexing?

Google just announced that they’re beginning to implement a full-scale roll out of their “mobile-first indexing” protocol, after a long period of testing and experimentation with limited roll-outs.

Mobile Phone

By this, Google means that its system of crawlers that help the search engine discover and “index” (collect into a searchable list) websites will attempt to do so using the mobile-friendly version of a site first rather than the historically-used desktop version. Put simply – on the current desktop-first indexing system, Google will look at your site from a desktop perspective first and determine its ranking signals from what it finds, proving subsequent boosts for sites with mobile-friendly views. On the new system, Google will look at your site from a mobile perspective first and determine its ranking signals from what it finds. It will fall back to a site’s desktop view if no mobile-friendly view exists or in certain other scenarios.

Overall, this shift shouldn’t impact rankings much (in theory) – but it is a fundamental shift in how Google thinks about web content. To put it in perspective, Google is effectively now approaching the web as a mobile utility over a desktop utility. This is a natural progression given that since 2015, the majority of Google’s traffic and searches have come from mobile users. Google has advocated good mobile-friendly design for years by teaching and by ranking boosts.

This change will roll out in waves, with webmasters receiving notifications via Google Search Console when their property has made the switch.

So what should you do if you are switched to this new system? The answer, right now, is not to panic. As stated above – not much should change. Of course if your site isn’t responsive (adapts well to different screen sizes) or if you don’t have a dedicated mobile version, then your non-mobile-friendly desktop content will no longer rank quite as well and you may want to take some action to update the site in preparation. Thankfully, mobile-first and mobile-friendly design has been in the web developer’s consciousness for years, and Google has increasingly encouraged a mobile-friendly web – so this isn’t coming out of nowhere, and the majority of modern sites already meet the requirements for at least basic mobile friendliness.

So for the most part, everything should be fine. For webmasters and web developers, going forward an increased focus on responsive design (a good approach so as to ensure that mobile content and desktop content don’t differ in a significant way) and mobile-first optimisation (load times, page speed, navigation, readability, etc) will be important. Overall, this is just a natural step forward for Google and the web, and a long-term boon for the increasing number of mobile web users.

Jonno

Albatross Paragliding

We are very proud to see the launch of one of our new websites… Albatross Paragliding! This website was commissioned by a client whom we manage a couple of sites for. These include ET Games, and MonkeyPuzzle.

The spec for Albatross Paragliding, was to have something simple and to include a paragliding video as a central element within the site. The video sees Dave (the instructor) paraglide over the stunning scenery of Hampshire.

Overall, the new site and logo took Mike a few days, and we feel the simplistic look gives the site a fun, fresh and exhilarating look. The pictures and video have also provided a great topic of interest within the office….would you or wouldn’t you?!?!

Rosie

Creating a Mobile Navigation

Today I’m going to give you a short tutorial on how to create a mobile navigation. This mobile navigation will slide in from the left side of the page. Here you will find everything you need to create the nav including how to animate the hamburger icon and the JavaScript needed to open and close the menu.

We will start with the html needed to create the menu:

The first step is to wrap the whole navigation in a ‘nav’ tag, this a new HTML5 tag which represents a section of code with the purpose of providing links. Next is the navigation toggle (the div which will be the trigger for opening and closing the nav), this will have a class of ‘nav-toggle’ and contain the hamburger icon to indicate where the user should click to open the menu. Three span elements will be placed into the ‘nav-toggle’ div, these will be used to create the hamburger bars. The main styling of these bars will be implemented using the ‘bar’ class and the positioning will be done through the ‘id’ assigned to them.

Finally we create a div with the class ‘nav’ that’ll hold the logo of the company as well as the ‘ul’ containing all the links needed. For now we will add a ‘#’ inside the ‘href’ as a placeholder, later this will be swapped for the url you’d like the link to direct to. This code will give you the very basic structure ready to be styled with CSS.

Moving on to the styling will start with the ‘nav toggle’. We want this to be set to ‘position: fixed’ so it follows us as we move down the page, if it wasn’t then the user would have to scroll up the page just to open the menu. Once the position is set to ‘fixed’ we can move the toggle to where we’d like it, I want mine to be sat at the top of the page to the left. Here is how:

If you’d like yours to sit to the right of the page swap ‘left: 10px’ for ‘right: 10px’.

Continuing the styling of the nav toggle we set a height and width of 40px along with a background colour. The colour we’re using in the tutorial is one which matches the clients colour scheme, but you can use any colour you choose. This will leave us with a small green square, we want our toggle to be a circle though so let’s add a border-radius of 50%. Add the following code to the previous block:

To finish of the main styles for the nav we will add a box-shadow to make it stand out from the page and a z-index so it stays above other elements on the page. Finally we need to set cursor to ‘pointer’, this changes the cursor on hover and without it iOS devices won’t trigger a JavaScript click event. Below is the complete css for ‘nav-toggle’ and how it should look in your browser:

Now we have the toggle styled we need to add the hamburger bars. This is a simple process as the ‘bar’ class has been added to all three necessary elements one block of code will style all three. The CSS is relatively straight forward. ‘Position’ needs to be set to ‘absolute’ so we can move them easily into place, and the ‘display’ set to ‘block’ so it can be given a height and width.

A nice trick here as they’re positioned absolute it to set the margin to auto and left and right to 0, this automatically centres them inside the nav toggle. Here are all the styles needed to make the hamburger bars.

If you were to refresh your page now you’d the nav toggle with one single bar at the very top, this is due to them currently set to the same position. All three bars are there they’re just sat on top of one another. This is where the ID’s come in, we need to target each bars ID and space them out evenly.

We can leave the nav toggle and return later when it comes to animating the hamburger ‘bars’.

Now for the navigation. We need the nav to stay on the side of page no matter how far the user has scrolled down, for this set the position of ‘.nav’ to fixed. Once the navigation is stuck to our scroll position it’s time to set the height and width. For the height a simple 100% is needed here for it to be the full height of the screen regardless of the device it’s viewed on. Width can be whatever you’d like, for the tutorial we’re going to use 230px. The starting code for the nav should look like this.

The final nav styles for now include a background colour which again is up to you what you choose, we will run with the colour scheme already in use and pick a lighter green that’s slightly transparent. The background colour style will be set to an rgba colour so we can specify the alpha, our is ‘rgba(126, 160, 97, .95)’. To make sure it always sits on top of the page elements a z-index of 5 needs to be set. The complete nav styles so far are:

Next is a very simple setup for the ul, only two styles needed here. First being ‘list-style: none’ this removes the the bullet points next the list items. The second style is for the padding, removing the default padding and adding a slight bit of padding to the right, we will use the shorthand here and set all 4 sides with one line ‘padding: 0 12px 0 0’.

For the list items themselves we only need another two styles, the font styling itself will be placed on the ‘a’ tag within the list items. Here we space out the list items with a margin bottom of .65em and align the text to the right.

On the ‘a’ tag we will set the font size, font colour and the remove the default underline an ‘a’ tag gives. You will see the sizes and colour we use below but you can pick your own to match the project you’re working on.

When it comes to nav logo depending on the size and content you may need to style this differently than us but for the logo the client uses to position it properly we use the following styles.

Now the nav is completely styled we can move on to making it functional. The first part of making it functional is to hide the nav from view, this is done with a transform style. We need to add ‘transform: translateX(-100%)’ to the ‘.nav’, this hides the nav off the page to the left.

We also need to create the class that we will add to the nav later with javascript. We add this class to the containing nav element in CSS and call this class open with the style ‘transform: translateX(0)’. When this class has been added the nav will sit where it did before we added the previous ‘transform: translateX(-100%)’.

The javascript is actually a very simple piece of code which once ‘.nav-toggle’ has been clicked toggles the class ‘open’ on the nav element. It’s the only piece of code needed and looks like this: (Make sure you have jQuery added to your project)

If you test this now you will notice two things, first being that when the nav shows it just jumps into place rather that sliding smoothly. Second, the nav toggle doesn’t indicate in anyway that it’s been clicked. We will change these two things now.

Starting with the animation side of things we will add a transition to a few elements to make sure that the nav slides in and the nav toggle bars will animate properly.

Another quick test and you will see the nav now slides in and out smoothly, you can either speed or slow down this transition by changing the .3s for whatever you’d like.

The very last part of this is to animate to nav toggle and hamburger bars on click. We need to add a few styles to the ‘.nav-toggle’ container, these being the position, background colour and box-shadow colour. We add a transform set to ‘transform: translateX(167px)’, if you changed the width of the nav you may need to adjust this. The background colour change is just to make it slightly more transparent and the box shadow is to change it to completely transparent. The styles for these changes are:

The styles for the hamburger bars are simple but effective, we start by adding a transition delay to ‘.bars’ which applies to all 3 and then move to individually styling each bar. The first bar takes a transform which moves it down 7px and rotates it 45 degrees. The second bar gets hidden by an opacity set to 0. And last but not least the third bar gives given the same styles applied as the first but swapped to negative, it’s moved up by -7px and rotated -45 degrees. All 4 style declarations are below for you to see.

If you’ve followed this tutorial through you should now have a fully functional nav bar that’ll work and look great on both mobile and desktops. We will shortly be adding a demo page where you can interact and dissect it if you curious about anything… Enjoy!

Luke

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.

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

Website Layouts

Website layouts can be one of the easiest but also one of the trickiest components of website design – it may take a few minutes to map out a website structure and design, it could take a few hours…

website-layouts

Each web design project is unique; this calls for a unique solution and approach to our clients requirements. Ok, there are several website layout guidelines we can all follow to create user-friendly layouts, these include; a good use of whitespace, obvious (and easy to follow) call to actions, consistent font styles, alignments, positioning and device compatibility…

If you would like to find out more then please do not hesitate to contact us, our office in Old Portsmouth is open weekdays, 9am to 5pm :)

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…