In this quick tip I want to talk to you about one of HTML5s hidden beauties, the contextmenu. You have probably never heard of it before, but I assure you it is one of those attributes that could be really useful in certain situations.

What is the contextmenu attribute you may ask Basically, it allows you to add different options to a browsers ‘right-click menu’ with just a few lines of HTML and will even work with Javascript disabled. Although, and very sadly, it currently only works in Firefox.

Let me show you how it works:

Using contextmenu is a lot simpler than you may think. All you need is to add the contextmenu attribute like so:

 <section contextmenu="my-right-click-menu"> 
 <!-- 
     Add anything you want here
   -->
 </section>
 

As you can see you can add it just like you would add any id or class.

Next we create the menu:

 <menu type="context" id="my-right-click-menu">
 <!-- 
   Here we will add the new 'right-click' menu items 
   -->
 </menu>
 

As you can see the id of the menu must match the name of the contextmenu, this gives more flexibility allowing you to have more than one menu item on the page within different sections.

Next we will add the menu items. Firstly, I will add one menu item with just plain text and an icon, secondly I will add a link for sharing the current page on Facebook, and the third menu item will be a link for refreshing the page, creating a simple contextmenu with three menu items:

 <menu type="context" id="my-right-click-menu">
  <menuitem label="Please do not steal our images" icon="img/forbidden.png"></menuitem>
   <menuitem label="Share on Facebook" onclick="goTo('//facebook.com/sharer/sharer.phpu=' + window.location.href);"></menuitem>
     <menuitem label="Refresh" onclick="window.location.reload()"></menuitem>
   </menu>
 

You can also create sub menus just by adding another menu tag inside the existing one, like so:

 <menu type="context" id="my-right-click-menu">
  <menuitem label="Please do not steal our images" icon="img/forbidden.png"></menuitem>
 <menu label="Social Networks">
 <menuitem label="Share on Facebook" onclick="window.location.href = 'http://facebook.com/sharer/sharer.phpu=' + window.location.href;"></menuitem>
 </menu>
     <menuitem label="Refresh" onclick="window.location.reload()"></menuitem>
   </menu>
 

As you can see with basic HTML5 you can create something really useful. But please be very careful when using it, as it is currently only supported by Firefox.

Direct animations and motion are a big part of the user experience. Not every website will include dynamic animations, but these tend to draw in a crowd of interested users. Stunning visuals can also cross a line and turn into annoying distractions from your content. Building purposeful websites is all about finding a balance between the dynamic elements and static elements in your layout, and how these ultimately affect the user experience.

For this article I’d like to delve into some of the more common trends related to animations in web design. I want to share some ideas for what presents clever, intuitive design skills vs annoyances to the average user. Perspective is everything and you have to cater each project for the largest demographic.

Building animation also doesn’t require lots of complex codes or backend scripts. Many open source JavaScript and even CSS libraries exist for this very reason. As the developer it is up to you to forage around the Internet and see what you can find. I will present a few live examples and strategies you may follow to achieve extraordinary results.

Menus with Flair

Navigation menu designs are a bit more complicated to pair with animation. But when done properly these nav menus provide an exceptional detail onto a website’s interface. You will want to ensure that the speed is quick enough to keep your visitors’ attention, but not so quick as to appear distracting. The links should also be easy to access and provide plenty of space for clicking. All this attention to detail leaves developers focusing more on basic UI than motion effects.

However I will point out one nice example on Design Sensory which uses a top-level menu along with submenu links. As you hover over each top link the new submenu options will appear below. This allows for quick access to all the menu links, and there is plenty of space for clicking. The only problem might be users who have poor vision and must struggle to read the smaller font sizes. But this functionality can obviously be adapted to suit other layouts with larger typography.

The Cabedge web design studio has a dropdown animation effect which fits brilliantly into the layout style. In the top ribbon you may hover over any of the links and generate a nice background hover effect. If you stay over the link for 1-2 seconds then a sub-menu will begin to animate and drop downwards. It’s a surprising effect when you are not expecting it! Both pleasing to the eye and useful for displaying extra content to visitors.

Parallax Background Scrolling

Parallax motion is very popular and much different from other styles in web design. Parallax sites often have changing background images to offer the appearance of 3-D motion. Meanwhile the static page elements rarely change and can even stay fixed to follow the user down while scrolling the page.

One infamous example is the Atlantis World’s Fair website design. As you move down the screen you will notice the main elevator shaft continues along with you. Then content appears to waver in and out of the various page segments. It is a nice use of faux motion because of how the layout is structured. Not every webpage is built for this type of parallax scrolling, but it does add a very nifty design feature.

One other great example can be found on the iPad app website for the game Fingerbilliards. The background was designed so that it appears like some of the balls are fixed on the screen. And then as you scroll up and down the page, elements come into view like a static layout. I particularly enjoy their design because the motion effects are parodied in the game itself! This works great for marketing because users who find this page will also make the connection and possibly make a purchase for the mobile app.

It is crucial to find a balance between dynamic effects and useful interface functionality. Designing a website with purpose is what adds more credibility to your animations. Parallax scrolling is just one example to define how an entire website layout may be created around motion.

Webpage Transitions

Animated transition effects between content on your page is another purposeful use of dynamic motion. These effects may follow content blocks or sliding panels, but also tooltips or highlight effects switching between elements. This design trend is often used in website tours where you are guiding the user between different page elements.

This very same type of example may be found on Mustache which uses similar page transitions when moving between content. This is a nice Ajax styled effect and does not require refreshing the whole webpage. Of course, users without JavaScript will be out of luck but any basic fallback method should work in its place.

A different type of page transition may be seen on Think Moto which is a German digital design agency. Clicking between links in the menu will slide the entire page out of view to focus on a new set of data. This is important to understand because the navigation will stay fixed as you scroll. This allows users to move between entire page designs without losing access to other links in the menu.

Dynamic Input Forms

Another popular aspect of motion design can be found in webpage forms. More specifically signup forms and contact pages often use motion to signify advanced jQuery Ajax calls. This allows developers to pass frontend information into the backend code without refreshing the page. Consider the MediaFire registration page as one simple example.

But animation effects can also be used on the form elements themselves. Newer CSS3 properties such as box shadows and transitions allow developers to create frontend animation effects right within the browser. This also allows for hidden notification badges or basic form validation – such as e-mail addresses or matching passwords. The goal is to offer a sleek and helpful user interface without interrupting the user’s signup process.

One other really cool input animation effect can be seen in the WordPress Twenty Eleven theme demo. In the top right corner you’ll notice the search bar is much smaller than usual. However once you click the menu will expand open and update the background color to a darker shade of grey. Very purposeful to save space when not needed but also allows users to interact with the search bar dynamically.

Final Thoughts

I don’t want to encourage web designers to push for motion effects in every project. There are some design niches which simply do not require a whole lot of animation. But this isn’t to say that you shouldn’t try out new ideas, test the waters and see how your users respond. The beauty of web design is learning from common mistakes or finding happy coincidences by them.

I hope this article may provide some ideas for developers and user experience designers interested in website motion. Animated elements are quick to draw a user’s attention and may often provide some type of functionality into the layout. We have covered a lot of great ideas which should get you started on the right track. But if we have missed any topics or resources feel free to share with us in the post discussion area.

Comments and Reactions

Recently I received a request at work for our logo in HD, I work at a company which provides funding to a range of organisations and producing HD videos wouldn’t be covered under the grant, so I pointed them in the direction of our eps files and queried how the logos would be used. The response They want to use them in print banners.

Like me this response might have amused you for the rest of the day. But on reflection it also made me think is HD print work such a crazy idea And how HD ready am I

As a jack of all trades (even though my job title is Web Editor) I occasionally have to turn my hand to print, video, social media, and I need to make sure that I am up to date with all the latest developments. With the query for HD logos being raised and the amount of articles that I’ve read around Retina display and designing for high definition, it started me on a quest to find out more information.

HD for print, is it as crazy as it sounds

In a word, yes. It is probably is as crazy as it sounds. However with the introduction of Retina display there are changes that are taking place to keep up with these new developments. For example, Adobe announced in August last year that they would optimise a selection of their software to help improve the display of the package itself and also text and images that they create. To quote Maria Yap from Adobe’s blog ‘to enable HiDPI display support in Photoshop requires the replacement of 2500 icons and cursors’ and highlights the changes that companies are making to ensure they are ready for the Retina display.

But that is specifically looking at Retina display and the initial query I received was for HD logos. Looking at it from this point of view does sound crazy. While the improvements to software for use on Retina display devices makes sense, to need a HD logo (if indeed there is such a thing) doesn’t. I spoke to my friend, and creative partner, Jo about whether HD for print was possible. As she mentioned, it isn’t necessary to work to a higher resolution than 300 dpi for print work, it is an industry standard and works well for the majority of print sizes. Working with vectors also helps to ensure a high quality and print of graphics, in the case of the initial question, pointing the organisation in the direction of our eps files would enable them to produce a high quality print of any size.

HD for web, where do I begin

This is where being HD and Retina display seems, on first glance, a minefield. Especially when you think about the number of devices that can be used to view a website, from a mobile, to a traditional desktop, to a television, to a tablet, the list seems a lot longer than it did 5 years ago!

Given the range of devices and to, hopefully, help keep things simple I’m going to consider HD and Retina the same thing. I do realise some of you reading this might be about to lynch me with that remark, especially as Retina is an Apple trademark rather than an industry wide term such as high definition. This article on why your HDTV is already a Retina display explains things far better than I can, and for me, highlights why we can consider that the same principles for designing for Retina will apply for HD.

Helpfully it also simplifies things to an extent, as I think trying to design/develop for HD and Retina while maintaining a responsive design would potentially have sent me over the edge! Being able to concentrate on designing for screens that have a higher resolution than 72dpi and those that do, to me, seems to be the main outcome of this technology and one of the most commonly referenced techniques is using scalable vector graphics. Again, pointing the organisation towards our logo files, all of 300dpi (a similar resolution to a Retina display) would, potentially, be a good first step as well.

Are you HD ready

For me, I think the next thing to think about to make sure I am HD ready is to look at who is coming to the site I am designing and developing. While I would like to create something that works across all devices by looking closer at the user, the experience I want them to have, and thinking about how they will access my information should enable me to develop my site to their needs. This might be making the decision on whether I design for all devices or focus primarily on desktop or mobile.

While I don’t think I’m 100% HD ready yet, I think that I can learn a lot from other disciplines to improve my websites and other work, ensuring I keep up to date with user experience is essential. I can also see a link with graphic designers and how they utilise vectors to crossover with what could be achieved with SVG. I’m looking forward to not only putting these into practice in my next piece of work but also picking the brains of my colleagues, seeking the advice of Twitter and googling to see the latest tips and techniques.

Sometimes, more so on a day where I’ve been struggling with a piece of code, I do wonder where it will all end and how on earth to keep up with the latest developments. But, on the good days, this is what keeps the job interesting, creative and cutting edge.

Image Source(s): Photo Icons & Movie Icons via Sutterstock.

Comments and Reactions

This is our weekly column were we share our favorite design related articles, resources and cool tidbits from the past week. Enjoy 🙂 If you would like to receive our daily updates and keep up to date with the latest and greatest articles and resources from the design community, you can follow us on Twitter, on Facebook or by subscribing to our RSS feed. Our Weekly Design News has been…

Breathing life into digital design can be a tough call. A flat surface will always command less attention compared to the one that creates a 3D-feel. Adding depth to a flat page is a way to combat this. It creates a sense of realism and immediately adds interest. It’s also a helpful technique to emphasize particular elements within the page, such as interfaces or headlines, and helps create a hierarchy within the design. A lot of designers have produced unusual and creative ways to add depth, here is a look at some of these excellent examples plus some tips on how to add creative depth to your web designs:

Introduce a sense of perspective to boost realism, as can be seen in these cartoon-like designs.

Creating real looking interfaces and elements will make your design much easier to interact with. What’s more, in doing so you’ll increase the success of your call to action. As seen in the two examples below.

Layering your elements and playing with translucency is a brilliant way to add creative depth and interest, as can be seen in the two examples below, which uses the technique to create an unusual top-down perspective.

A wraparound is another technique to try. Check out the red ribbon and red thread seen in the examples below. It extends the real estate of the pages by giving the illusion of continuing behind it. It’s also an excellent way to accent a particular element on the page. You can use ribbons and threads for anything; dates, headlines, logos or featured items.

Just like you learnt back in your high school art class, creating a sense of depth-perspective follows a fairly basic set of rules. You need to follow consistent angles. You need to keep your horizontal alignment consistent. Keep tabs on your use of proportion and any changes across the horizontal space; check out these two creative classic examples.

Add a drop shadow to a non-uniform grid layout to enhance the effect even further.

0

By breaking your grid layout you can instantly add depth. Simply overlap a few elements on the page and depth, and a sense of order is created. It also stops the design from appearing too predictable.

1

2

Despite the flat elements of this design, the simple ribbon banner adds texture and depth.

3

Here is an example that uses all flat elements and sections, yet has still managed to create depth. It achieves this by overlapping the elements within the background across the entire design. By not employing this layering technique on the interfaces they are given excellent emphasis in contrast.

4

5

Using cut-out photography is a good technique to try. The application of drop shadows enhance the sense of realism and introduce a 3D quality, whether you’re using a lifelike element, as seen below, or a flat design feature.

6

7

Creative depth is achieved by the use of scenarios and stories, the 3D look is simple to achieve by taking offline design tactics and placing them online, for example symmetry and the use of prospective. If you are looking to create a unique web design think about what creative stories you can invent to add depth in web design.

You might also like…

Our 50 Favorite Web Designs from 2012