TidyBlog

The place we write about web design, organic search and business...

Category Archives: Responsive Web Design

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?!?!

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!

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:

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…

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

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.

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.

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.

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.

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.

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…

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 :)

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…

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…

User experience (often referred to as UX) is how a person feels when using a system, app or website. When creating an application it is important to consider, study and evaluate how the end-user feels. Google has some cool tools for this, one example being ‘Page Speed Insights’…

Obviously the more advanced a system or complex a website the more time is required to map out pages, content, functionality and the user experience (UX). End-users are accessing your data in an increasing number of ways: smart phones, tablets, a vast landscape of browsers with different capabilities and connection speeds. To tick all these boxes takes time and money. UX is an investment…

You may have received a notification from Google, regarding the requirements to update your web site so that it is compliant and compatible with the ubiquitous mobile device.

Why is this happening? Well, most of us (if not all) have a smart phone, maybe a tablet device too. Using a website that has the additional code to allow mobile functionality now becomes a pleasure, rather than a chore.

Google have some key details with what it means for a website to be mobile compliant Mobile Usability if you would like further reading, but in summary this is:

A defined viewing area – this means that whether you’re using an older generation smart phone, a brand-new cutting-edge tablet device or a computer system with a high-resolution display, the website dynamically adjusts to fit (within reason, of course) the display of the device.

Content that flows – if you have browsed a website on a mobile device and had to move the screen around the read the contents, a mobile friendly site resolves these issues.

Fonts that scale – for easier reading on small screens.

Easy-to-touch-elements – buttons that are well-spaced from other touch elements

Visual design and motion – driven by mobile-friendly technology.

What we have here is Google reminding us, the designers and builders of your site that it isn’t ‘mobile friendly’ and a terse warning that the web-pages will not rank well in a mobile search.

Reading further into this, we expect a new mobile-site ranking algorithm to soon launch.

As you may expect, we are receiving a reasonable volume of the Google sent email and from both new and existing customers. If you would like us to implement mobile functionality with your site, please do not hesitate to contact us.

Tidy Design is looking to recruit a PHP Developer to join our tidy-team in Old Portsmouth. The ideal candidate will be proficient in PHP, JavaScript, RWD, MySQL, WordPress, HTML and CSS. Some knowledge and experience with Photoshop would be great but is not essential.

If you are self-motivated, love a challenge, enthusiastic about business, technology and web design then please get in touch. Send over some examples of your work with a CV and cover letter. We plan to make 2015 another awesome year for Tidy Design; we hope you can join us…

Some website tasks are more important than others; a good web designer will try to understand the intentions of a site, identifying which tasks take priority and why…

Twitter.com – These guys have a simple CTA (Call To Action)

Ok, the overall goal of any website is to deliver the best possible user experience. So remember; make your site easy to navigate and include call-to-action buttons / banners that help you obtain the desired end result – be it sales, bookings, new membership or general enquiries made through a contact form.

Choosing your words, slogan or a call-to-action tagline is also very important. Think about your website users, what would they suggest if you asked them what a banner or button should say. Also, ask yourself where on a web page would your call-to-action sit best, the positioning of your call-to-action is as important as its text.

Converting new website visitors into new enquiries, new sales or new members is big business. We all want a site that will work for us and not against us. So, asking the question; “What is my call-to-action?” is pretty important. Remember that websites, technology, businesses and customers will naturally evolve over time; it is therefore a good idea to re-visit this question, update and try out new call-to-actions…

I hope you found this an interesting read? Please do add your comments and feedback below – Thank you for visiting the Tidy Blog!

TidyDesign

Subscribe to our mailing list

TidyDesign

Here at Tidy Design our mission is simple; to deliver a return on investment, be it for our customers or the staff we employ, working together we will do better. Each day we set out to offer our customers a quality service, the goal being to leave a long lasting and positive impression. Happy customers result in repeat business.

The staff we employ are very important to Tidy Design, our ethos is to look after each other and grow together. We aim to learn and do better in all aspects of life, this mindset is key to growth and development.

TidyDesign

Please note that cookies cannot harm your computer. We do not store personal information such as credit card details within cookies, but we do use cookies to help improve your experience on a website. Cookies are small files that many web sites transfer to your computer when browsing the web. They can inform companies what pages you visit and your site preferences, which enable businesses to provide a more personalized user experience.