Category Archives: iPad

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

Working with the NHS

Today we have been putting the finishing touches to a new NHS web application; My Birthplace is a great little app with lots of potential and lots planned for 2014!

My Birthplace

My Birthplace – mybirthplace.org

Working with Portsmouth Hospitals NHS Trust has been pretty awesome, it took a few meetings and a design concept or two to get this project confirmed however we have built up a great working relationship. Stay tuned for more news on My Birthplace plus a couple of other NHS apps we are now discussing – Exciting times for all involved!

Visit My Birthplace

FREE iPad Icon PSD

Looking for a FREE iPad icon to use as part of your web or graphic design project? Tidy Design is pleased to announce yet another freebie for you to download!

FREE iPad Icon PSD

Download (PSD)

Please note this FREE iPad Icon PSD file can be used for commercial or non-commercial projects, all we ask in return is not to re-sell or distribute our work. If you like this free iPad icon and decide to use it as part of a project, please be a tidy dude and share a link to this page – Thank you!

Another Mobile Friendly Website Goes Live!

Looking for a mobile friendly website then why not consider RWD (Responsive Web Design). It is pretty awesome how it all works; you can transform the design and layout of your site depending on which device is viewing it!

Mobile Friendly Websites Portsmouth

With an office in Old Portsmouth and a team of web developers eager to help, why not contact Tidy Design today to discuss your site requirements. Don’t panic if you already have a website, why not send us a link and we will price up making it responsive AKA mobile friendly for you!

Mobile Website Designers in Portsmouth

Since returning back to work in the New Year, the team at Tidy Design in Portsmouth have been busy with several mobile website designs AKA responsive updates.

Mobile Website Designers in Portsmouth

Personally I see 2013 being a big year for responsive website design with companies catering more and more for clients on a mobile web. Mobile phones and tablet devices have transformed the World we live. When it comes to future proofing your business, there are many advantages of a mobile website. Here are just three:

Firstly you have usability to consider, a mobile site will work, function and look better on a mobile than your everyday website. Google is also not stupid; I would put money on future SERPs (Search Engine Result Pages) being heavily influenced by this mobile customer experience.

Secondly there is data and download speed to consider, people don’t want to wait minutes for a website image to load when a mobile friendly image could load in seconds.

Finally we have customer interaction with websites on a mobile device, unique click-to-call or mapping functions could be used to encourage customer engagement. Done correctly a mobile website should help convert visitors into enquiries…

Ok, I hope the above has provided some food for thought. If you are looking to update your existing website, bolting on a mobile friendly version for people viewing it on a mobile device then please do get in touch.

iPad books for kids 2012

Although our core business is web design and SEO I do spend some evenings and weekends working on personal projects, one of these being Montgomery Moon, a children’s storybook that this month was approved by Apple as an iPad book for kids… Yippee!!!

iPad books for kids 2012

When Rosie (my wife and partner in the business) fell pregnant last year with our first, the knitting needles came out… It was at this point when I thought I should also do something for our baby boy, maybe build something he can keep and show his children… Anyway, Montgomery Moon was crafted in the summer of 2011, the spec to write and illustrate a kid’s book for him to enjoy.

iPad books for kids

With Tidy Design being primarily a service-based business, I’ve wanted for some time now to focus more on developing sellable products. I believe a mix of both services and products is better than one or the other; I also really enjoy creating new brands / products such as this iPad book for kids… Its what I enjoy, so helping others to do this through our core business Tidy Design makes my day job pretty awesome!

iPad books for Children

As a business we are lucky to have the tools, creativity and knowledge to create new products and take them to market… Ok, we also work very hard at this! This year I aim to write and illustrate another two Montgomery Moon books; this totaling three iPad books for kids in the App Store ready for Christmas 2012.

So, how will this new venture pan out, lots of people write kids books and develop amazing apps, can Montgomery Moon really compete? To be honest I am not sure, feedback so far from family and friends has been amazing so I am pretty excited to see how my iPad book for kids sells in the App Store… The thing to remember here is why I wrote the book, it was not for sales, merchandising contracts or to reach a million downloads in the App Store… This story is for my boy, and writing / illustrating books for kids will be great fun!

If you own an iPad and have a young child in your family looking for a fun new storybook to read and enjoy then please check out my book in the App Store… Thank you!