Archive for Data Management

Explore ideas with pen and paper

Pen to paper is a great way to start creating user flows and low fidelity sketches for your design work. As a design medium, paper is very forgiving and allows you to explore ideas and test concepts. Solve problems freely on paper without having to think about how the problem will be solved by applications or code. Sketching allows you to generate a large number of ideas in little time. Don’t be concerned with how rough or unstructured your initial sketches are; simply capture your initial ideas and thoughts, as well as define the concepts. You can later take the best elements and refine your ideas.

Designer develop a mobile application usability and drawing its framework on a paper.

One of my favorite techniques is to photocopy some of my sketches, cut them up into the base components, as described in Brad Frost’s Atomic Design, and then begin fleshing out the design concept by grouping and reshuffling components.

IMG_20150621_175934

I find that by physically moving the pieces of paper around, it allows me to identify patterns and think about how the user will interact with the design solution and interpret my messaging.

“We’re not designing pages, we’re designing systems of components.”—Stephen Hay

Recently I started using with the Creative Cloud connected notebook for importing sketches quickly into applications for further refining and rapid prototyping.

creative cloud moleskin

Iteration and evaluation of your design solution takes practice. Sketch daily, sketch often and prototype. Follow the ABCs – “Always Be Creating.”

The Design Funnel

Sketching and repeating the iterative process helps you move through the design funnel, getting your ideas and design solutions from low to high fidelity and allowing you to tailor the design to the communication message or digital product. The design funnel is based on Stuart Pugh’s Total Design, which separates activities into six iterative stages. For digital product design, I’ve simplified this into sketching, wireframing, mockups and prototypes. Remember, a sketch does not equal a wireframe.

Banners_5_3

Skip the Ipsum. Use real content.

The design of any digital solution should always begin with real curated content. Placeholder text is only an estimation of any possible design solution. Your design should provide context to the content for users (and your client). Using placeholder content can lead to making wrong design decisions that can affect design and further development. I’ve seen countless mockups or prototypes referring to “Bob Smith, job title here.” Use real copy to know how your design will look like once it’s been fully implemented. Real copy will help you define the lengths of form fields and how long sections and sidebars will be. Lorem ipsum will give you a false sense of security and lead to unrealistic assumptions about your design work. You will design to an ideal amount of copy or content, neither of which occurs in the real world. Make design decisions that support the content.

loremipsum-compare

Design is How it Works

Simplicity is the goal when designing user interfaces and user experiences.Reviewing use cases and job stories can help shape interfaces and strip away unnecessary friction points within the interaction. However, we still do not truly know who the end user will be or how they will interact with the interface.

As UI and UX professionals, it is important to create user interfaces that satisfy the needs of both novice and expert users, interfaces that are easy to learn without being condescending. Getting from point A to B requires us to bridge the knowledge gap for novice users through visual cues and feedback while providing advanced, learnable and explorable features for advanced users.

Test Assumptions in the Browser

Test, early. Test often. Provide context of use. Build prototypes that can be used in the browser or on mobile devices to test your design assumptions through prototyping to validate your ideas and solutions.

Through prototyping, design “hand ready” user experiences, creating tools and interfaces that users don’t notice they are using – tools and interactions that become extensions of the user. Set the stage for engagement and maintaining an interaction flow that is simple, quick and natural. Ultimately, you should design for touch.

designer drawing website development wireframe

UX Design Tool Kit Checklist:

  1. Pencil & eraser
  2. Gel ink pens (my favorite)
  3. A ruler
  4. Sketchbook (grid or blank)
  5. Grey tone makers
  6. UI stencil
  7. Post-it notes
  8. Sharpie markers

Anything else you’d add to this list? Let me know in the comments.

Happy designing!

Comments (0)
Jun
23

Creating Realistic Text with CSS

Posted by: | Comments (0)

Today I’ll show how to make a realistic text effect with a tilt-shift blur, using CSS and JavaScript. This effect is nice for mockups, demos, and the like.

See the Pen Kinda Realistic Text by Lucas Bebber (@lbebber) on CodePen.

How it Works

First, let me explain how the technique works. Since there’s no tilt-shift filter effect, we’ll have to cheat a bit. We start by putting our text onto a 3D plane. how1 Now, here’s the trick: we clone that plane multiple times, and then rotate (3d rotation, on the X axis) each one by a small amount around an arbitrary origin, which will be the focal point. We also have to reduce the opacity of each layer, since we are overlaying them. how2 Finally, in order to make the blur smooth, we just make more clones of the text and reduce the angle difference between each layer. how3 Now, let’s see how to implement this effect…

The Code

    <div class="container">
      <div class="layer">
        Insert your text here.
      </div>
    </div>
    .container{
      position:absolute;
      transform-origin:50% 0%;
      transform: perspective(1000px) scale(0.9) rotateX(60deg);
      transform-style:preserve-3d;
    }
    .layer{
      position:absolute;
      top:0;
      left:0;
      transform-origin:50% 30vh;
    }

So far, the code creates a text layer, places it inside a container, and rotates the container to the position we want our “camera” in. Here we are also setting up the focal point, through the transform-origin property in the .layer class – the 30vh value which means that the focus will be set at 30% the viewport height. Pay attention to the transform-style:preserve-3d property on the .container class as well. That will be necessary since we will be rotating the layers inside the container while keeping its 3D transform. Now let’s see how to clone the layers and create the tilt-shift blur effect. Here we’ll use JavaScript, with a little help from jQuery:

    $(document).ready(function(){
      // how many clones of the text layer we will make
      // the more, the smoother, but it also makes it heavier, so we'll have to strike a balance
      var steps=13; 

      // the total angle difference between the first and the last layers.
      // the bigger, the more pronounced the blur effect will be, but will also require more layers for it to be smooth
      var angle=6;

      // the angle variation between each layer
      var angleDiff=angle/steps;

      // the angle of the first layer
      var startAngle=-angle/2;

      // the opacity of each layer
      var opacityDiff=(1/steps)+0.07;

      var $container=$(".container");

      // the original layer that we will clone and later remove
      var $original=$(".layer");

      // making all the clones
      for(var i=0;i<steps;i++){
          // angle of the current layer
        var a=startAngle+(angleDiff*i);
        var $newLayer=$original
          .clone()
          .appendTo($container)
          .css({
            transform:"rotateX("+a+"deg)",
            opacity:opacityDiff
          }) ;
      }
      // remove the original layer
      $original.remove();
    });

This covers the basics of what we need to get the effect working. Then, we should set the element’s size, position, rotation, color, etc. Here’s a demo of what we’ve made so far, with a few guides to help you understand what is going on.

See the Pen Realistic Text Effect (updated, simple version) by Lucas Bebber (@lbebber) on CodePen.

Getting Fancy

After that, you can tweak the effect to your liking – for instance, adding shading to the text by overlaying it with a gradient, putting a paper texture as background, and so on. I made a few examples to give you an idea.

There are a couple of details in action here: there’s a shading overlay over the text (and the background has a slight shading as well), and there’s a subtle appearance of flipped text behind the main text, to simulate the backside of a somewhat thin paper.

See the Pen Realistic Text Effect (updated, simple version) by Lucas Bebber (@lbebber) on CodePen.

We can also scroll the text and continually change the focus to make an infinite scrolling animation with this effect (currently this demo works best on Chrome).

See the Pen Realistic Text Effect (updated) by Lucas Bebber (@lbebber) on CodePen.

Finally, we can change the focus of the text according to, for example, the mouse’s position. Besides, text is editable in this example: to accomplish that, we set our layers as contenteditable, listen for changes, and update all layers when there’s a change in the text.

And here we’re done:

See the Pen Kinda Realistic Text (with changeable focal center) by Lucas Bebber (@lbebber) on CodePen.

Hope this has been interesting and useful!

Comments (0)

Need to build responsive websites? Bet you do! We’re thrilled to announce that the newest release of Dreamweaver helps you create responsive websites faster than ever.

Whether you’re starting a new project from scratch or getting a head-start with one of our new Bootstrap templates, making your content adapt to any browser is now seamless in Dreamweaver.

Extract design info from a PSD directly into your project, and preview or test content on your mobile devices — in real-time…and that’s not all!

Here’s a rundown of the major features to look out for…

Responsive Design: Layout, build and test responsive websites

Layout_build_test responsive_websites

We’ve integrated Bootstrap, the most popular framework for responsive design, so you can  create websites that dynamically adapt to any browser’s size. Responsive design is more approachable than ever, so it should become second nature to you as you’re building your website.

  • Visual media-query breakpoints make it painless to create and manipulate your design based on content, rather than predefined settings.
  • Resizable Live View lets you preview how your content will adapt to different screen sizes.

Get started

Device Preview: Test and inspect your websites on multiple phones and tablets

Device_Preview

Preview and test interactivity of your websites on iOS, Android, and Windows devices, in real-time, so you can see how your design will look and adapt on an actual mobile browser. Did we mention you can do this on multiple devices simultaneously? Think of the time you’ll save!

All you need to do is type a short URL into your mobile device’s browser or scan a QR code to preview your web page.

Get started

Batch Export from PSDs

Batch_Extract

Now you can batch extract web-optimized images with multiple resolutions from a Photoshop document, for Hi-DPI screens. Say goodbye the tedious task of manually extracting images one at a time.

Get started

Code Editor Improvements

Code_Editor_Imporvments

We’ve made our code editor better to help you write HTML, CSS, and JavaScript faster:

  • Tab to autocomplete simple abbreviations into complex HTML and CSS code snippets with Emmet support.
  • Built-in Linter support which highlights errors in real-time.
  • Built-in themes to customize the code editor surface (background color, highlight color, font color, tag color and more).

Get started

Update Dreamweaver now!

To update Dreamweaver, launch your Creative Cloud app manager and click the update button. If you’re already logged in, sign out and log back in for the prompt. You will have the option to override Creative Cloud 2014 or keep both versions.

Don’t forget that we’re always here to help!

Catch support on chat, find help on the Dreamweaver forum, contact us on Twitter or Facebook and be sure to find all the latest Dreamweaver CC Learn content over on our website.

On behalf of the Dreamweaver team, thanks for your support and happy creating!

Comments (0)

 

The Dreamweaver team is conducting a customer feedback survey. The objective of this survey is to connect with you, our users, and find out from as many of you as possible the preferred responsive layout framework that you use as part of your workflow.

Your feedback is important to us. Participation in this survey is voluntary and your responses are completely confidential.

The survey should take no more than a few minutes to complete. Once you have completed all the survey questions, please remember to click the “Submit” button to send your response.

We know your time is valuable, and we appreciate your participation. Thank you very much for helping to improve Adobe Dreamweaver.

Please click here to take the survey.

Best,

The Dreamweaver Team

Comments (0)

While the Internet is a buzz with numerous web designs trends, this one definitely has our attention – minimalism.

Minimalism is a web design style that is focused on simplicity and the elimination of unnecessary and superfluous elements. It strips the website down to its fundamental colors, shapes, textures and elements. It keeps only what truly matters. And the result is a design and a site that is clean, concise and intuitive.

Growing in popularity, minimalist design is based on three basic fundamentals – alignment, contrast and balance. Minimalist designs make great use of outstanding creative play and use of simplicity, striking typography and whitespace.

bike

Nua Bikes by Alicia Gomez

The aim of a minimalism design is to bring the most important content to the front, to reduce or eliminate distractions and noise for the reader. With too many elements, the reader becomes confused about what to take in and can easily misunderstand the priority of each element. Minimalist design helps the reader to focus on the most important element.

Minimalism web design works for a range of applications, including:

  • Business websites
  • Portfolios
  • Blogs
  • Magazines
brack

Tim Brack

Trends within the Minimalism Trend

Minimalism design doesn’t stop with the imagery but extends further to include content, form, color, simple language and a single yet strong CTA.  You can create a website that is stunning without needing to use heavy effects and design elements. Often with a minimalistic design, readers are ‘forced’ into reading the limited content on offer and message is in fact amplified by its simplicity. Current ‘sub-­‐trends’ within minimalism:

Black & White versus Color

While many minimalist designs seem quite grayscale; there is an extensive use of just black and white, a splash of color can add creative elements to a still clean design, one that expresses a brand or a business in a conceptually stark and yet appealing manner. Use of a strong color can ensure your minimalist designs stands out while remaining simple and true to the minimalistic style.

city guides

Rally Interactive by Rally Interactive

Typography

Typography-­‐based web design is closely tied to minimalism where very little is used to excite the reader – you can even use interesting typography as the sole visual element.

maaemo

Maaemo Restaurant by Bielke+Yang

Minimal Content

Creating a minimalist web design is not simply cutting out all the elements but rather rethinking the content and allowing it to shine. Determine the content the site absolutely must have and get rid of the rest. Eliminate any content not considered essential to the website and its goals, such as:

  • Social media section, graphics and icons
  • Secondary navigation pages
  • ‘Featured’, ‘recent’ and ‘popular’ element including RSS and Twitter feed lists
  • Taglines, introductions and supplementary descriptions

The aim is not to make the website less functional just to remove unnecessary elements. You can consider combining sections into a simpler layout or dividing content into separate pages to give due attention to the important content.

danish

Danish by Spring/Summer

Already implementing simplified designs? Chances are there is further you can go, more you can do. With there being so much ‘noise’ on the web, being visually quiet is extremely powerful and creates maximum impact. Eliminate clutter and create a purposeful and clear design and content elements – everything needs to be presented in a clear and concise fashion. Use imagery where possible to create an impact and keep words to a minimum.

Minimalist designs should have little texture, color, shape, lines, content or type.

Go toobare, though, and the design will be boring. Rather than dumping everything out, give the design appeal by making just one important feature the focal point.

Choose what that focus will be, and keep the tips below in mind as you work through your design.

And when you think you have achieved a minimalist web design heed the advice of one of the most stylish and striking women of all time:

“Before you leave the house, remove one piece.” – Coco Chanel

Minimalist web design can be stunning and is likely to be around for years to some, so understanding some of the techniques will be increasingly beneficial for both your own projects and those of your clients. Even if you don’t want to create websites strictly in the minimalism style, the principles can help you to simplify your designs; never a bad thing.

Comments (0)

I know what you’re probably thinking right now:

“Wow! 20 is a big number for a list of unacceptable freelance web design behaviors, isn’t it?!”

And you are right, 20 is … a lot. But my goal when compiling this list wasn’t to go for volume just for the sake of it.

The reason I’ve taken this approach is to guide your attention towards as many harmful practices as possible, just so you can have an honest deep look into your own method of handling projects, and evaluate if perhaps you’re not setting yourself up for trouble later down the road.

Okay, with the disclaimer out of the way, let’s start by looking into the biggest issue of them all:

1. Not charging enough

Staying underpaid is a common mistake among freelance web designers, and mostly the ones who are just starting out. At first, offering cheaper rates might sound like a good marketing strategy. After all, the less you charge, the more people will want to hire you, right?

Unfortunately, it doesn’t always play out like that (more like never). First of all, selling your time for less than it’s worth makes work very uncomfortable. And the further into the future this continues, the more uncomfortable it gets.

Secondly, as it turns out, it’s not necessarily harder to find clients that are willing to pay more for your services. There’s place for everyone on the market. When you think about it, there’s more than enough people willing to buy $10,000 Rolexes.

So instead of constructing your rates based on fear that you won’t be able to find work, try doing the following:

  • a) Set a per-hour rate that satisfies you as a professional. It should be an amount that makes work comfortable.
  • and then b) for every new project proposal you work on, make sure that the final price tag on the project reflects the estimated number of hours that the project will require of you times your hourly rate.

It sounds really basic, but it’s the only way to stay satisfied with where your career is going.

2. Not doing work for free

Okay, so I just spent the whole previous section telling you how you should be charging more, and now I’m going to tell you to work for free?!

Yes, but please bear with me. This isn’t about offering free favors left and right. This is about giving back to the community and/or doing charity work.

For example, maybe some local NGA needs a website to promote their next event? Why not designing it for them just because you can, and because you know how. It doesn’t need to be anything fancy, but it’ll surely be better than what they would build on their own.

I guess what I’m trying to say is that once you decide to bill, bill accordingly to what you’re worth. But if you want to do someone a favor, do it for free.

3. Biting off more than you can chew

This is something that freelancers all across the board are guilty of, not just web designers.

In a scenario where there’s no one boss, and where we can’t predict the exact amount of money we’ll make in a given month, it’s very hard to say “no” to our prospective clients.

Sometimes this drives us into a blind alley and causes us to either work late into the night or drop the ball completely. Neither is good.

Simple solution? Set a cap on the amount of work you can do every month. Once it’s exceeded, schedule every new client for the next month. You’ll be surprised that most clients are generally willing to wait once they’ve trusted you with the job.

4. Offering discounts for no reason

Discounts are an effective marketing method. They have been so in any niche or market, so clients have grown quite used to the concept of getting a discount just … because.

However, offering discounts out of the blue devalues your work. After all, you’re portraying your proposal as something that was built on top of the actual workload that the project will require, so in a scenario like that there’s not much room for discounts, is there?

A better solution? If a client asks for a discount, agree but also propose a part of the project that will be left out to accommodate the lower price.

If you’re not entirely familiar with the concept of client proposals and how to craft them properly, you can check the resources created by the guys at Bidsketch (they’ve built their whole business around teaching others how to write proposals).

5. Designing what you think is right, not what the client needs

One of the more difficult mind shifts to go through as a freelance web designer is understanding that what you’re building has to be tailor-made for the client first, and only then should satisfy your own ego.

So whenever a client suggests a change that you’re not fond of, ask yourself if perhaps what drives you is a personal bias and not an objective point of view on what’s good for the project and what isn’t.

6. Going too heavy on stock imagery

Whoever invented stock imagery deserves a medal, really, no joke!

However, you need to be very careful when using such things. A general rule of thumb is to use stocks only for non-crucial elements of the design.

In other words, if an image is to be one of the main elements of the design, it shouldn’t be a stock.

Nowadays, users can spot stock images a mile away and they are just not impressed with them at all. Using stocks for everything is just lazy.

7. Not understanding the target audience

At the end of the day, your client doesn’t want to have a website for the sake of it. They want to cater to their audience or customer base.

Therefore, it’s incredibly crucial to make sure that your design is in tune with the client’s expected audience. Pay close attention to the demographics, habits, and other general characteristics of that audience. In fact, make them your actual “client.”

8. Not following the trends

Although this might sound a bit counterintuitive (after all, trends are bad, right?), you really should keep your finger on the pulse and always be familiar with what’s new and interesting in web design as a whole (material design, anyone?).

Designing according to the trends will make your clients happier and will also play a huge role in your education and growth as a web designer.

9. Not having a contract

This still happens a lot. I think there’s no need explaining why contracts matter, so I’m only including this point here as a reminder.

Please, make yourself a favor and never take a mid or large web design project without a contract. It’s only a matter of time before it backfires.

10. Not getting feedback from the client mid-project

Sometimes, clients have a tendency to not agree with your design vision, even though it seemed like you were on the same page when you talked over the initial details and goals of the project.

For that reason, set some milestones during the project’s runtime, deliver your work in parts and make sure that the client is happy with what you’ve been doing so far. This will save you a lot of headache when it’s time to deliver the final version.

11. Not getting feedback from another designer

Asking a fellow designer about their opinion of your work can be a great helper. Another professional with a fresh pair of eyes can shed some new light on your work’s shortcomings and possible issues – the things you wouldn’t have noticed on your own.

12. Not getting half of the money up front

There are three main reasons why you should ask for half of the money up front:

  • It’s a great way to make sure that the client is serious and that they are ready to get the project going.
  • It also ensures you that the client actually has money.
  • It’s great motivation to start working.

Most importantly, no serious client will ever oppose paying you in advance.

13. Not using the latest technologies

Designing websites today is much easier than it used to be even five years ago. We have access to quality tools, frameworks, and technologies. Refusing to take advantage of them is just unproductive.

For instance, have you seen what the current version of Adobe Muse can do for you?

14. Building a portfolio the wrong way

A web designer’s portfolio is just like a photo model’s portfolio … you need to have a great one to land some top-level clients. However, a common mistake among freelancers is going for volume and featuring every website they’ve ever created.

This isn’t the point of a portfolio. Feature just your best work, not all of your work.

15. Taking on all clients that come your way

Are there any red flags about this new client who has just contacted you? Are their expectations a bit unrealistic? How about the deadlines, are they just about … what’s the word … undoable?

What I’m getting at is that sometimes saying “no” to a client is the right thing to do, regardless of what they promise in terms of financial remuneration.

16. Not providing a guarantee and/or support

Although web designs hardly ever “break” (so to speak), in your client’s mind, they’re still buying a service that’s just like any other service they’ve ever bought.

Therefore, offer them a guarantee and X months of free support after the project is done. Most of the time, this costs you nothing, but it can very well be this one final thing that convinces the client to work with you vs. with your competition.

17. Taking criticism personally

Some web design clients have a rather direct way of voicing their negative opinions, which can sometimes get under our skin. So just try to keep in mind that no matter what the client says, what actually guides them is that they want what’s best for their business.

Your approach should simply be about always staying respectful, not taking things personally, and remembering that it’s all business.

18. Overworking

Overworking is a plague these days. It’s just way too easy to spend endless hours by your desk, trying to improve “just this one thing and then you’re done.”

Instead of being in an “on state” round the clock, set a fixed schedule and only work from a certain hour to a certain hour, exactly how people on 9-5 jobs do it.

19. Not backing up your data

“Back up your data” is my no.1 computer-related advice to anyone, not just in relation to freelancing. Really, having a safe copy of your work-related files is the best way to secure yourself against any possible disk-related issues.

Did you know that experiments done by Backblaze indicate that 22 percent of hard drives fail in their first four years? That’s why backing up is so crucial.

20. Trying to do everything yourself

Web design is a process that involves a lot of different small jobs. For instance, apart from getting the general design together, there are also logos, photography, copywriting, custom content creation, and etc.

In theory, yes, you can do all of those yourself. But it’ll be much more effective to either outsource those tasks (for instance through Upwork), or to bring some of your peers on board who might be more skilled in some work areas (you can find some great folks over at Behance).

21. ?

Okay, that was a lot of unacceptable freelance web design behaviors for a single serving! So what do you think? Is there anything that should have its place as the 21st entry here?

Comments (0)

Responsive design has made us rethink how we look at design and interact with content on the web. We are designing for a multi-device world and ever growing mobile user base. Many countries around the world are skipping over the traditional use of the desktop as a way to access the internet and are adopting mobile as the primary way to interact with digital content. Even most pre-school children use tablets and other mobile devices over standard desktop computers.

Think about the reach your content will have when it is accessible on a wide range of devices and platforms.

Device Shifting is the New Normal

One of the largest segments of digital content consumers are kids. Today’s kids are the digital first generation and will often interact with several devices throughout the day. The are now more mobile devices than people on the planet and most are used at some point in the day to access content. From tablets at school to a parent’s smartphone or even their own mobile device, kids have unprecedented access to digital content). Pre-teens and tweens are actively engaged in device shifting, with video viewing playing a major role in kids digital consumption habits. Mobile accounts for 22 percent of all digital video consumption according to one report.

Boy that use the mobile phone sitting on a tree branch

Scrolling is a Continuum

So why is responsive design an important consideration? It is accessible and incredibly user-friendly for kids. If you watch a child interact with the world around them, it is based on pointing, tapping, touching and swiping. These are natural gestures. Responsive content allows kids to maximize their interaction with digital content without having to rethink interactions when moving from device to device.

Responsive is kid-friendly because it presents content up front in the largest format as possible, creating an unbroken and immersive experience, and it avoids using “pinch and zoom” as a means of interacting with content. LEGO’s Mini Figures is a great device friendly site, right down to easy login and the personal MiniFig collection checklist and thumb (or full finger) ready “I Have It” buttons.

lego-minifig-screengrab

Hasbro’s My Little Pony site offers a similar set up with large product images, full finger/thumb ready buttons and character driven content. Recognizable visual cues and markers are key design considerations for great small screen experience. Use your screen real estate wisely. Maximize content presentation and don’t worry about “the fold”, kids will naturally swipe and scroll through the content. Keep tasks and interactions short and simple. The My Little Pony site uses arrows and character images to help kids navigate the site.

mylittlepony_screengrab

Design for touch, plan for the thumb

A child’s fingers are smaller than that of adults, but one thing to consider is that the content will most likely be used by both the child and the parent. According to an MIT study, the average adult index finger is 44 to 57 pixels (1.5 cm to 2 cm) while the adult thumb is approximately 72 pixels (or 2.5 cm). Your buttons and user interface should be designed for the touch, with the primary means of input, the thumb. Even though kids fingers are smaller, children tend to press  with the entire finger pad (and press harder) than adults.

If it looks like a button, it should be a button. Kids will not read labels or identify features as quickly as adults and will press and tap as a means of exploring the interface. Features that look pressable will be pressed and if their is no interactivity or action, kids will press harder. When using advanced features driven by javascript, consider using onPress events rather than onRelease events to help move the interaction through the content forward. A child’s natural gesture interactions will be to press and hold, rather than press and release.

Quality Content, Quality Screen Time

There will always be arguments over screen time whether it’s the television or mobile devices. When designing your responsive project, think about producing high-quality content and high-quality screen time. A kids interaction with your site maybe short. By creating better experiences and content, you increase future engagement, bringing the kids back to interact with your content over and over again. Remember kids are not just interested in playing games. Video content and the social aspects of your content should be considered high priority. Keep tasks and interactions simple and short.

Preschool boys playing on smartphone

Maintain a consistent user experience. Kids interact with content and navigation through learned bias, meaning they will use the same actions or methods that were successful in the past. The sequence of tasks or identifying content by landmarking will be repeated with each visit.

Ask Your Users, Ask the Parents

User testing with kids does not need to be difficult. Ask your friends, co-workers, relatives to show your mockups on a mobile device to their kids and have them note the amount of time kids interact with the mockups. Kids will give you very quick and honest feedback. You will get some interesting responses, “Why is this blue?”; “What is this? (pointing to an icon)” or “I don’t like it!”. Question, why did you make it blue? For icons, try to be clear first, clever second. And for the “don’t like it”, time to do some research and find the answer(s).

While working on a project for a television network, I was given the “I don’t like it” answer. After a little coaxing, the generic “I don’t like it” turned into a laundry list of things to correct, from menu systems, off canvas content and background colors.

Older users will have the same reactions, however, adults tend to curb their feedback. Go for the honest feedback and act on the feedback. Designing for kids can be difficult, but it is rewarding. Take the time to learn from your user base and allow them to give you the proper feedback you need to build engaging responsive content.

Comments (0)
Jun
05

The State of SVG Animation

Posted by: | Comments (0)

The world of SVG (Scalable Vector Graphics) is fascinating, and with everything you can do with it and all the options you have it is overwhelming.

SVG is an XML-based vector image format for two-dimensional graphics, with support for interactivity and animation. In other words, SVGs are XML tags that render shapes and graphics, and these shapes and graphics can be interacted with and animated much like HTML elements can be.

One of the frequently asked questions I get on SVG is about animating SVG images—not only the how, but the what. So let’s have a look at the current (and future) state of animating SVG, and while we’re at it, mention some tips and tools that help you do it painlessly today.

Synchronized Multimedia Integration Language , a.k.a SMIL

Pronounced “smile”, SMIL is an XML-based language that was created to enable authors to write declarative animations to create interactive multimedia presentations. These animations could then be reused to animate other XML-based languages such as HTML and SVG.

In the past as well as the recent present, SMIL has been mostly known in the web community as one of the three ways to animate SVG images.

SMIL comes with a set of animation elements that allow you to animate SVG content. Some of these elements are:

  • <animate> – which allows you to animate scalar attributes and properties over a period of time.
  • <set> – which is a convenient shorthand for animate, which is useful for assigning animation values to non-numeric attributes and properties, such as the visibility property.
  • <animateMotion> – which moves an element along a motion path.
  • <animateColor> – which modifies the color value of particular attributes or properties over time. Note that the element has been deprecated in favour of simply using the animate element to target properties that can take color values.

More elements have then been defined in SVG and more attributes added to extend the functionality of the above elements. The most important animation element defined in SVG was <animateTransform>, which you can use to animate the transformations on an SVG element—such as scale, rotation, skew, etc.

The syntax required to animate an element using SMIL is generally straightforward and human-readable. The attributes—just like the animation elements—are conveniently named so that they are also self-explanatory in most cases.

For example, the syntax to move an SVG element along a certain arbitrary path can look like this:

<animateMotion 
    xlink:href=“#circle”
    dur=“1s”
    begin=“click”
    fill=“freeze”
    path=“M0,0c3.2-3.4,18.4-0.6,23.4-0.6c5.7,0.1,10.8,0.9,16.3,2.3    c13.5,3.5,26.1,9.6,38.5,16.2c12.3,6.5,21.3,16.8,31.9,25.4c10.8,8.7,21,18.3,31.7,26.9c9.3,7.4,20.9,11.5,31.4,16.7 c13.7,6.8,26.8,9.7,41.8,9c21.4-1,40.8-3.7,61.3-10.4c10.9-3.5,18.9-11.3,28.5-17.8c5.4-3.7,10.4-6.7,14.8-11.5
    c1.9-2.1,3.7-5.5,6.5-6.5” />

And for sake of reusability, the above code can be rewritten like this:

<path id=“motionPath” d=“M0,0c3.2-3.4,18.4-0.6,23.4-0.6c5.7,0.1,10.8,0.9,16.3,2.3    c13.5,3.5,26.1,9.6,38.5,16.2c12.3,6.5,21.3,16.8,31.9,25.4c10.8,8.7,21,18.3,31.7,26.9c9.3,7.4,20.9,11.5,31.4,16.7 c13.7,6.8,26.8,9.7,41.8,9c21.4-1,40.8-3.7,61.3-10.4c10.9-3.5,18.9-11.3,28.5-17.8c5.4-3.7,10.4-6.7,14.8-11.5
    c1.9-2.1,3.7-5.5,6.5-6.5”></path> 
<animateMotion xlink:href=“#circle” dur=“1s” begin=“click” fill=“freeze”>
  <mpath xlink:href=“#motionPath” />
</animateMotion>

The difference between the second and first example is that in the second example you separate the path definition and reference it using the <mpath> element; this allows you to reference the same path in multiple <animateMotion> elements, in addition to displaying the path on the canvas, which is what we did in the second example.

The <animateMotion> element in both example could go inside an element that you want to animate, or you can specify the target of the animation using the xlink:href attribute on <animateMotion>.

You can check the live demo for the above example out here.

Motion along arbitrary paths is just one of many examples that can be created using SMIL. These native SVG animation elements can be used to create a diverse range of effects because they allow us to animate practically any animatable attribute in SVG—and this is one of SMIL’s most powerful features.

For example, using the <animate> element, you can animate an element’s color, position, dimensions, and more.

You can also use it to animate path data (the d attribute), thus allowing you to create a shape tweeting effect like the one shown in the image below.

A series of shapes morphine into one another. Image Credit: Noah Blon.

A series of shapes morphine into one another. Image Credit: Noah Blon.

The above example is one created by Noah Blon and is using SMIL to animate the path data from one shape to another. The code in Noah’s example looks like this:

<path fill=“#1EB287”>
    <animate 
             attributeName=“d” 
             dur=“1440ms” 
             repeatCount=“indefinite”
             keyTimes=“0;
                       .0625;
                       .208333333;
                       .3125;
                       .395833333;
                       .645833333;
                       .833333333;
                       1”
             calcMode=“spline” 
             keySplines=“0,0,1,1;
                         .42,0,.58,1;
                         .42,0,1,1;
                         0,0,.58,1;
                         .42,0,.58,1;
                         .42,0,.58,1;
                         .42,0,.58,1”
             values=“M 0,0 
                     C 50,0 50,0 100,0
                     100,50 100,50 100,100
                     50,100 50,100 0,100
                     0,50 0,50 0,0
                     Z;

                     M 0,0 
                     C 50,0 50,0 100,0
                     100,50 100,50 100,100
                     50,100 50,100 0,100
                     0,50 0,50 0,0
                     Z;

                     M 50,0 
                     C 75,25 75,25 100,50 
                     75,75 75,75 50,100
                     25,75 25,75 0,50
                     25,25 25,25 50,0
                     Z;

                     M 25,50 
                     C 37.5,25 37.5,25 50,0 
                     75,50 75,50 100,100
                     50,100 50,100 0,100
                     12.5,75 12.5,75 25,50
                     Z;

                     M 25,50 
                     C 37.5,25 37.5,25 50,0 
                     75,50 75,50 100,100
                     50,100 50,100 0,100
                     12.5,75 12.5,75 25,50
                     Z;

                     M 50,0
                     C 77.6,0 100,22.4 100,50 
                     100,77.6 77.6,100 50,100
                     22.4,100, 0,77.6, 0,50
                     0,22.4, 22.4,0, 50,0
                     Z;
                     
                     M 50,0
                     C 77.6,0 100,22.4 100,50 
                     100,77.6 77.6,100 50,100
                     22.4,100, 0,77.6, 0,50
                     0,22.4, 22.4,0, 50,0
                     Z;
                     
                     M 100,0 
                     C 100,50 100,50 100,100
                     50,100 50,100 0,100
                     0,50 0,50 0,0
                     50,0 50,0 100,0
                     Z;”/>
  </path>

The above code allows you to achieve an effect similar to the one in the following GIF:

tweener

You can have a look at the full code and a live demo here.

What Noah did is specify multiple path shapes inside the values attribute, and then the browser animates between these values—this is possible because these values are numerical and because they are made up of exactly the same number of points; so, practically, it is the point making the path up that are being animated.

The attribute names are almost always self-explanatory, but some of them are not. I have written an extensive article over an CSS-Tricks about SMIL, that contains everything you need to know to get started with it today—should you decide to use it. You can read the article here.

The CSS-Tricks article explains SMIL animation elements and attributes well, but if you want a comparison between SMIL syntax and CSS animation properties syntax that can help you understand SMIL better, you can check out these talk slides from a talk I gave about the topic as well.

SMIL is quite powerful and its performance great, but it was never supported by all browsers. Internet Explorer never supported SMIL—no version of it, and there is currently no intention to do so.

Moreover, SMIL has been intended to be deprecated in Blink (Chrome) as well, in favour of CSS and Web Animations, so the future does not look too bright for these animations.

Deprecating SMIL means losing the ability to animate SVGs embedded as images, without a current alternative. We will talk more about this later in the article.

Animating SVGs with CSS

You can style and animate SVG images using CSS, and animating SVG elements with CSS works almost exactly the same as it does with HTML elements, with the only difference being the type selector names and some property names.

SVG 1.1 did not require any CSS to style SVG elements, so all the styles were applied using presentation attributes. Presentation attribute examples include fill, stroke, stroke-width, opacity, etc.

The following example shows an SVG snippet that uses presentation attributes to style the “border” (stroke) and “background color” (fill) of a star-shaped polygon:

<svg xmlns=“http://www.w3.org/2000/svg” version=“1.1” width=“300px” height=“300px” viewBox=“0 0 300 300”>
  <polygon
fill = “#FF931E”
stroke = “#ED1C24”
stroke-width = “5”
points = “279.1,160.8 195.2,193.3 174.4,280.8   117.6,211.1 27.9,218.3 76.7,142.7 42.1,59.6 129.1,82.7 197.4,24.1 202.3,114 “/>
</svg>

Presentation attributes are a special kind of properties and are used to style SVG elements, and they even contribute to the style cascade in that they override inherited styles on an element, including styles specified in the user agent (e.g. browser) style sheet.

There is a long list of available presentation attributes in SVG. But what we’re interested in is the attributes that can be set and animated via CSS.

Not all presentation attributes can be set in CSS because not all attributes are available as properties in CSS. Only presentation attributes that are available as CSS properties can be set and animated in CSS. A list of all currently available presentation attributes as CSS properties can be found in the SVG 1.1 specification here.

So, if we were to go back to the previous code example and turn the presentation attributes into CSS properties, we can rewrite the code as follows:

<svg xmlns=“http://www.w3.org/2000/svg” version=“1.1” style=“width: 300px; height: 300px;” viewBox=“0 0 300 300”>
<polygon
  style = “fill: #FF931E; stroke: #ED1C24; stroke-width: 5;”
  points = “279.1,160.8 195.2,193.3 174.4,280.8   117.6,211.1 27.9,218.3 76.7,142.7 42.1,59.6 129.1,82.7 197.4,24.1 202.3,114 “/>
</svg>

The styles can also be moved out into their own <style> “island”, just like HTML styles can be. Now, in the above example, if the width and height were set on a <rect> element inside the SVG, we wouldn’t have been able to set those attributes in CSS on the <rect> element because it’s still not possible.

In the new SVG 2 specification, the list of SVG styling properties is extended to include more properties such as content size and geometry properties including—but not limited to—x, y, width, height, cx, cy, r, and more. The new list can be found in the SVG 2 specification here.

Note that some of these properties are already available in Chrome, so you can test them in that browser if you want.

It only makes sense that if some properties can be set in CSS and their values are animatable then the properties can also be animated in CSS, and thus the SVG elements these properties are applied to can also be animated via CSS…

CSS Transitions and Animations on SVG Elements

Indeed, you can apply CSS animations and transitions to the animatable SVG properties in CSS. This allows you to create nice hover interactions such as changing the fill color of an icon, for example, and more complex animations such as transformations in both the second and third dimensions.

For example, to change the fill color of an SVG icon on hover using CSS, you would do it just as you might expect, like so:

.icon—twitter {
    fill: #eee;
}
.icon—twitter:hover {
    fill: #55ACEE;
}

As a matter of fact, CSS is perfect for simple animations and interactions like hover interactions, and it also generally performs very well, though not in all browsers, since CSS animations on SVG elements are currently not hard-ware accelerated in all browsers, so performance can be better—and hopefully will improve in the future.

Moreover, note that CSS animations (using @keyframe, for example) do not work in IE9 and below.

CSS Transforms on SVG Elements

The most impressive kinds of effects usually include some kind of transformation animation that either rotates, scales, skews, or simply translates an element. A simple example using transformation animations is the following set of weather icons also created by Noah Blon and available on Codepen.

See the Pen SVG Icons Animated with CSS by Noah Blon (@noahblon) on CodePen.

Some of the icons translate a group of shapes (e.g. the rain drops) from their initial position “in the cloud” downwards, infinitely, others use a rotation transformation to rotate the sun about itself, etc.

Now, if you are viewing the above demo in Firefox, you will notice that some of the animations are broken. There is a reason for that.

Animating SVG elements using CSS is very similar to animating HTML elements with CSS, with one major difference when it comes to transformations: by default, the initial default transform origin of an HTML element is (50%, 50%), which is the element’s center. By contrast, an SVG element’s transform origin is positioned at the origin of the current user coordinate system, which is the (0, 0) point in the top-left corner of the canvas.

So, suppose we have an HTML <div> and an SVG <rect> element:

<!DOCTYPE html>
…
<div style=“width: 100px; height: 100px; background-color: orange”> </div>
<svg style=“width: 150px; height: 150px; background-color: #eee”>
  <rect width=“100” height=“100” x=“25” y=“25” fill=“orange” />
</svg>

If were were to rotate both of them by 45 degrees, without changing the default transform origin, we would get the following result (the red circle indicates the position of the transform origin):

initial-to

So, if you want to animate an SVG element around its own center, you need to explicitly set the transform origin using the transform-origin property.

rect {
  transform-origin: 50% 50%;
}

Changing the transform origin on the SVG element like that would give you the following result:

set-to

That being said, this does not currently work in Firefox. It is a known bug.

Noah’s demo uses percentage values to set the transform origin to be the center of the animated elements, and this is why it is broken in Firefox. The way to make a rotation work in Firefox as you would expect it to is to use absolute values (pixels, ems, etc.) to set the transform origin. And when you do that, the origin will be specified relative to the SVG canvas’ user current coordinate system. For example, if you specify 50px 50px as a transform origin, it will be the point at 50px 50px from the top left corner of the SVG, not relative to the element itself.

In most cases, this is not how you want to set a transform origin, but it is necessary at the time being to make it work in Firefox.

In addition to the problem in Firefox, IE and Opera have a problem which is that they do not honor CSS transforms at all on SVG elements. And there are quite a few more issues that we will mention in a later section in the article.

Much more complex animation effects can be created by animating SVG using CSS, but these effects mostly rely on transformations to look great, and CSS transformations are currently limited, buggy and inconsistent across browsers.

However, you can do more with CSS than simply transition colors or transform elements…

SVG Line Drawing Effect with CSS

One of the most impressive and popular SVG animation effects is the line drawing effect. An example of the line drawing effect was first seen on the Xbox website and is explained in this article on the Vox media blog. The animation can be seen in the following recording:

xbox

This effect is created by animating two specific SVG properties—namely stroke-dasharray and stroke-dashoffset. The first property allows you to turn your solid line “border” (stroke) into a dashed line, by specifying the length of the dashes and spaces in between them, and the second property allows you to change the offset—that is, the position at which these dashes start along the path’s line length. Both of these properties are available in CSS and are animatable.

By turning the path you have at hand into one long dash and then animating the offset of that dash along the path, you can mimic a line drawing effect using nothing but CSS and an SVG path.

This effect was first explained by Jake Archibald in this article over on his blog. The article also included an interactive demo that explained how this technique works. The following is a recording using that demo to show the effect of the two properties:

line-drawing-demo

You can play with the demo yourself in Jake’s article.

The trick behind this technique is to know the exact length of the path so you can turn it into one dash of that same length, and then use that same length as an offset value to “pull” the dash outside the visible boundaries of the path (backwards), and then animate it back in.

The formula to create this effect in CSS thus looks like so:

#path {
    stroke-dasharray: pathLength;
    stroke-dashoffset: pathLength;
    /* transition stroke-dashoffset */
    transition: stroke-dashoffset 2s linear;
}

svg:hover #path{
    stroke-dashoffset: 0;
}

This line drawing effect is very effective in creating more expressive UI elements. You can see a whole lot of examples using this technique to improve common UI elements and interactions on Codrops. A couple of examples are:

Now, in a lot of cases, you may not know the exact length of the path you want to animate, and if you have many paths you’re animating, it can become tedious to know and then set and animate the length for each one. This is where a JavaScript solution is a better option.

In fact, JavaScript enables you to overcome many of CSS and SMIL’s animation limitations, especially when it comes to animation timing and synchronization capabilities…

Animating SVGs with JavaScript

Using JavaScript to animate SVGs, you get the same capabilities you would get with SMIL and CSS, and more. There is only one limitation I can think of when you use JS to animate SVGs—we will talk more about that in the next section.

If we were to get back to the last example in the previous section where we created the line drawing animation using CSS, we can do the same thing using JavaScript, and thanks to the SVG DOM method getTotalLength(), we can always know the length of the path we’re working on by simply selecting that path and using this method to retrieve that value:

var path = document.querySelector(‘.drawing-path’);
path.getTotalLength();
//set CSS properties up
path.style.strokeDasharray = length;
path.style.strokeDashoffset = length;
//set transition up
path.style.transition = ‘stroke-dashoffset 2s ease-in-out’;
// animate
path.style.strokeDashoffset = ‘0’;

In most cases, and unless the animation is very simple, you will want to use JavaScript to create this effect. Some plugins that help you do this already exist—example here and here; the latter is a plugin for the very popular animation library: Greensock.

If you animate SVGs using vanilla JavaScript from scratch, you will still face some of the browser inconsistencies and bugs mentioned earlier. Some of the available SVG animation libraries can help you avoid that because they take care of all of this for you.

There are many SVG animation libraries out there; the three most popular ones are: Greensock, Snap.svg and Velocity.js. I’m sure that if you work with SVG animations, you can think of a couple more (for example, D3.js), but these are the three most popular ones today.

Using JavaScript, you can animate SVG path data (d attribute) too. This allows you to create some really impressive animations that can literally take your animations and UIs to the next level.

For example, the following recording shows an effect created by Codrops’s Manoela Ilic, which recreates Mac OS X’s genie effect by animating the shape of a path (the lime green area):

genie-sm

Even more creative effects can be created that can improve upon the general user experience of a user interface by leveraging proper animation effects to help hint the user on the whereabouts of elements, in addition to creating more realistic interface effects.

You can also use JavaScript to create simple transitions and animations that you can do in CSS, but without the browser bugs. Greensock, for example, provides you with a cross-browser way to do so, because it takes care of providing the appropriate technique to create those animations in Internet Explorer, for example, by falling back to SVG attribute animations instead of CSS property animations which are not supported in IE.

The Web Animations API—a JavaScript animation API—is meant to fill in the gap for some (if not all) of the functionality that SMIL provided—and that is fantastic, but it still will be limited in the case where the SVG is embedded as an image. Read along for details.

SMIL vs CSS vs JavaScript

The current and future state of browser support for SMIL is the main reason why I neither use it nor recommend using it anymore today. Unless the state of support changes so that more browsers support is, not less, then I don’t see this changing any time soon, and I expect SMIL usage to drop even more in the future.

As for CSS, it can only animate so many SVG properties, not all of them. Attributes such as the data attribute d of a path cannot be animated in CSS—at least not yet. So no shape tweeting effects can be established using CSS at the time being, or any other path animation effects for the matter.

Not to mention that Internet Explorer up to version 11 did not support CSS animations and transitions on SVG elements, and the new MS Edge browser still does not support CSS transformations on SVG elements. All this and the transform origin bug in Firefox along with a lot of browser inconsistencies when animating SVG with CSS are a reason why I only recommend using CSS for simple, possibly trivial animations that are not vital to the functionality of whatever you’re working on. If the animation is crucial to the image, page or application, I certainly recommend using JavaScript.

Note: Jack Doyle wrote an extensive article on CSS-Tricks explaining the browser bugs and inconsistencies when it comes to applying CSS transformations to SVG elements. You can read the article here.

All that being said, CSS is already getting more capabilities that spawn from SVG SMIL animations. Today, we have a CSS Motion Path Module which imports SMIL’s motion along a path capability into CSS, so we can animate SVG and HTML elements along paths using nothing but CSS. The Web Animations API previously included this functionality, but it was later on removed with the introduction of the CSS Motion Path Module.

However, with SMIL being deprecated, CSS is going to need more than the motion path module to fill in the gaps, because we still can’t animate SVG paths in CSS, and CSS also does not let you sequence and group animations so they play perfectly together. SMIL’s animation triggering and synchronisation capabilities are superb, and CSS still comes short in this aspect.

This is why JavaScript is currently my go-to tool for animating SVG, and my library of choice is Greensock. Greensock has a lot of features that focus on SVG animations, and allow you to write and create SVG animations without having to worry about browser inconsistencies. Greensock also adds more to the animation methods and properties so you can create animations that behave just as you would expect them to, by working around some non-intuitive default animation behaviour in SVG.

Snap.svg is the go-to library for SVG manipulation and is known as the jQuery is SVG, but Greensock’s timeline feature and other features it has makes it more powerful when it comes to creating complex SVG animations.

That being said, JS comes with one major limitation when animating SVG: an SVG embedded as an image—using <img>, <picture> or a CSS background image—cannot be animated using JavaScript, for security reasons.

What does this mean? It means that if your SVG is embedded as an image, any JavaScript animations you define on it will not work. Only CSS and SMIL animations work, and the former need to be defined inside of the <svg>, not externally. Interactions (such as :hover) will not work either way.

SMIL allows us to create complex path animations and have them work in SVGs embedded as images; but SMIL is going to be deprecated, and CSS does not yet have this ability, so we need to wait till CSS gets more features to fill in SMIL’s shoes; until then, animating an SVG as an image will be very limited.

Mozilla’s Brian Birtles has written an article where he discusses the most common use cases of SMIL, and lists some features that CSS needs to getting order to fill in the gap created by SMIL’s deprecation. But until then, you can either use SMIL and drop support for IE and Chrome in your images, or simply settle for simple animations using CSS, or use JavaScript to create awesome effects and embed your SVG in one of the other possible embedding techniques.

In addition to what each animation technique can or cannot do, you can read more about how each of them performs in this excellent article by Sarah Drasner, where she weighs the different animation techniques with benchmarks, comparing CSS, SMIL and a couple of JavaScript animation libraries. Make sure you check the article out for details.

Final Words

SVG is a big world, with a lot of options and a lot of developments and changes happening on an almost daily basis. You need to weigh your options and your needs, and pick the technique that works best for you—from the creation stage, to optimization, to embedding and finally animation. I hope this article helped give you an overview of what’s currently possible and not possible in the world of SVG animation, hopefully making it easier for you to choose the appropriate animation technique for your next project. I certainly did not cover every aspect of this topic, but hopefully enough to help you make a better choice when choosing an SVG animation tool today.

Thank you for reading. :)

Comments (0)

Quantitative analytics are a useful tool for user experience designers. Metrics and numbers can make for compelling business cases, as well as being an input for setting goals and targets.

Qualitative research, such as usability testing and contextual inquiry, can provide insight into why and how users are doing things. Quantitative data gives us the what, in hard numbers and statistics. For optimal results, qualitative and quantitative analyses go hand in hand. Where possible, triangulating data sources and types will give the most robust understanding of a situation.

Quantitative web analytics can seem overwhelming, as the amount of data available through free tools such as Google Analytics is incredible. So what are some good places to start for a UXer looking to bring some data-flavour into their work?

Learn about your users

Analytics can be an excellent source for demographic information about your audience. Most analytics tools, including Google Analytics, can tell you where your users are coming from, geographically, and what language the user has set their browser to.

Other very useful data includes browser and operating system data. This data is a great input when making decisions about which technologies to support, and understanding the cost/benefit ratio of putting effort into compatibility and browser testing and support.

See the increase in mobile traffic for yourself and your stakeholders

It can seem moot to say that mobile traffic is increasing, but in some cases having numbers to back up the business case for moving toward responsive design is really helpful.

By comparing mobile traffic from one year to the next, analytics data can show you just how much these numbers are increasing. Google Analytics offers a “compare to” function in the date range setting that makes this type of discovery very quick and easy.

analytics

Setting a ‘compare to’ date range in Google Analytics

Search analytics

Search analytics gives insight into the types of terms that people are using to search on the site. Search Analytics for Your Site is an excellent resource on this topic. They can provide deep insight into the natural language of your users. This is an invaluable input into copywriting.

Search analytics can also be useful when defining IA and navigation structure. Knowing what users are looking for in their own words can inform a more user-friendly navigation. The results can be surprising! Bear in mind that this information does not tell you why someone is using a particular word or phrase, merely that they did.

A/B testing

A/B testing is a method of testing two different versions of a solution, and measuring which one achieves the desired goals best. An example would be testing the placement of the main CTA on a page. This type of testing is particularly popular when examining conversion rates. There are several different tools that can support this type of testing. The main points to note are that it is important to define the key metrics of success upfront, and to ensure that you run both versions simultaneously, by splitting traffic between the two options.

Quantitative metrics from web analytics tools will help to determine which version is the winner.

Key Analytics Terms

A session can be thought about as a visit to the site. Session definition is often time-based – after a period of inactivity the analytics tool will consider the session over. A session can consist of several interactions and page views.

Unique visitors refers to counting the number of distinct visitors to the site. For example, duplicate visits from the same IP address would only be counted once.

Bounce rate refers to the percentage of sessions with a single page view. As with all analytics, context is key – a high bounce rate could mean users found exactly what they needed on that one page, or it could be that there are problems on the page that cause users to disengage. Often, pages with high bounce rates are a good place to target for improved UX.

Exit rate is the percentage of page views on a certain page that were the last page of the session. Unlike the bounce rate, exit rates on a page can be part of a multi-page session.

Start Small, Learn More

There are many ways to learn from analytics and integrate them into your UX practice. It is best to pick one thing that feels manageable to start with, and apply it on a project. If you want to go deeper, there are many excellent online resources and courses. Google Analytics Academy is a great starting point for a deep dive. Happy data analyzing!

Comments (0)

Making fancy demos using only CSS might not be useful per se. However, it’s a good opportunity to explore the capabilities of CSS, to try new tools, and to practice working within constraints. Today, we will take a look at how to make a raindrops on window effect, using HAML and SASS.

View the CodePen demo.

Preprocessors

First of all, let me explain why we’re using HAML/SASS instead of plain HTML/CSS. Even though they are simply useful all-around, the reason we need preprocessors here is that they allow us to, among other things, use variables, create loops, and generate random values, so we don’t have to deal with hundreds of raindrops individually by hand.

More information about setup and syntax can be found on their respective webpages. Alternately, you can try this demo on Codepen, creating a new pen, and then selecting SCSS for the CSS preprocessor and HAML for HTML.

The Window

The first step is to display the window itself.

.container
    .window
// Our background image.
// Will be used for the window as well as
// for the raindrops themselves
$image: 'http://i.imgur.com/xQdYC7x.jpg';

// container width and height.
// 100vw/vh so it fills the entire window
$width:100vw;
$height:100vh;

.container{
  position:relative;
  width:$width;
  height:$height;
  overflow:hidden;
}
.window{
  position:absolute;
  width:$width;
  height:$height;
  background:url($image);
  background-size:cover;
  background-position:50%;
  filter:blur(10px);
}

window-optimized

Here we simply draw a div with the background image of your choice. We are also applying a blur filter to it so the drops will become more visible.

Notice that we are storing the background image URL on the variable $image. We are doing this because we’ll use the same image for the raindrops themselves. More on that later.

In Real Life

Before we proceed, let’s take a look at how a raindrop on a window looks in real life:

real

Source: Wikipedia

Due to refraction, the raindrop flips the image behind it. Also, when its shape is more or less that of a half sphere, it looks like it has a black border.

Raindrops

Based on what we’ve seen, let’s try to create a single raindrop:

.container
    .window
    .raindrop
$drop-width:15px;

// our raindrops are not going to be perfectly round, so we will stretch them a bit
// (not using transform:scale so our background doesn't get stretched)
$drop-stretch:1.1;
$drop-height:$drop-width*$drop-stretch;

.raindrop{
    position:absolute;
    top:$height/2;
    left:$width/2;

    width:$drop-width;
    height:$drop-height;

    // border radius 100% instead of 100px, so the raindrop is elliptical rather than a capsule-shaped
    border-radius:100%;
    background-image:url($image);
    background-size:$width*0.05 $height*0.05;
    transform:rotate(180deg);
}

borderless-optimized

This is pretty straightforward: all we do is draw an elliptical div, fill it with the background image we used before, scale the background down, and turn the object upside down.

Now we’re going to add a little border around it, to make it look like the raindrop has volume.


...

    .border
    .raindrop
...

.border{
    position:absolute;
    top:$height/2;
    left:$width/2;

    margin-left:2px; 
    margin-top:1px;

    width:$drop-width - 4;
    height:$drop-height;

    border-radius:100%;

    box-shadow:0 0 0 2px rgba(0,0,0,0.6);
}

bordered-optimized

Notice that we didn’t just add a perfect border around the drop, we shifted and squished it a bit so it looks more natural.

So now that our raindrop is looking pretty good, let’s see how we can add hundreds of them.

...

.raindrops
    .borders
        - (1..100).each do
            .border
    .drops
        - (1..100).each do
            .raindrop

This is the HAML syntax for loops. Here we are simply adding a hundred .raindrop and .border objects inside their respective wrappers.

The SASS part is trickier, so will look at it step by step.

First, here’s how we’ll create our loop and select each element individually:

@for $i from 1 through 100{

    // using the $i variable with the CSS nth-child pseudo-class
    .raindrop:nth-child(#{$i}){

    }

    .border:nth-child(#{$i}){

    }
}

Now, we’ll generate and apply random positions and sizes to our raindrops:

@for $i from 1 through 200{

    // generates a random number from 0 to 1, for the positioning
    $x:random();
      $y:random();

      // Random raindrop size and stretching.
      // Since each raindrop has different sizes, we'll do our sizing
      // calculations here instead of on the main .raindrop selector
     $drop-width:5px+random(11);
     $drop-stretch:0.7+(random()*0.5);
    $drop-height:$drop-width*$drop-stretch;

    .raindrop:nth-child(#{$i}){
        // multiply the random position value by the container's size
        left:$x * $width;
        top:$x * $height;

        width:$drop-width;
        height:$drop-height;
    }

    .border:nth-child(#{$i}){
        // we'll do the same positioning for the drop's border
        left:$x * $width;
        top:$x * $height;

        width:$drop-width - 4;
        height:$drop-height;
    }
}

raindrops-nopos-optimized

Finally, there’s an important detail missing: we have to change the position of the background of each raindrop according to the drop’s position, so our refraction effect looks nice.

...

.raindrop:nth-child(#{$i}){
    ...

    background-position:percentage($x) percentage($y);
}
...

raindrops-nofilter-optimized

And with that, the main effect is done! We can then add small details, like increasing the brightness of the raindrops a bit to make them look shiny, animate them falling, change the focus, change the image, and so on.

Here’s the demo of the version we made here, along with the complete code:

View the CodePen demo.

Hope you could learn something useful from this tutorial, and hope you enjoyed it!

Comments (0)

Database Design and Management

Cwebpro can design and develop a small business data management solution for you. We will provide professionally crafted entry screens and a database that will grow with your business.

Professional Web Designs

If you need a web site designed or updated contact Matthew at Cwebpro for quality work at a fair price. The Web Creation Zone (Cwebpro) can meet all of your business website design and data management needs.