Archive for Database Programming

“If you think math is hard, try web design.”

– Trish Parr

Working on a web design project can be a stressful experience.

First, you have to get through the initial stages of creating a brief, negotiating your rates, and getting the paperwork together. Then, you can finally begin the actual work and … design away, so to speak.

However, after weeks of effort, sometimes it can turn out that the result is less than satisfactory, to say the least. The client is not pleased and it’s becoming quite clear that the project has failed.

This can be a bit depressing. No one likes failing. We’d much rather try finding a solution and somehow still be able to fix things. But this is not always possible. Sometimes it’s just too late, and the only thing that can be done is coming to peace and getting some kind of a learning experience out of the situation. Such a lesson can help us avoid similar trouble in the future.

Therefore, what are the main causes of project failure in web design, and what can we do to save ourselves from failure as much as possible?

We fail due to insufficient research/planning

More often than not, web designers fail before they even fire up Photoshop for the very first time in a project.

Where the failure happens is during the initial stage of planning / researching the project (or lack thereof).

Actually, in one of their reports, PM Solutions points out issues with planning as one of the top five causes of project failure. Specifically, they name: insufficient data, missing items, insufficient details, poor estimates, as the leading components of failure.

The beginning stage of planning is, therefore, the most crucial part of any web design project. In fact, the time you don’t invest in planning in the beginning will almost certainly come back to bite you later on.

Quite simply, if the initial planning and research phase wasn’t done adequately then even the perfect design execution won’t save you, as the project will simply not be optimized for its actual requirements.

On the other hand, if the research was done properly then it should give you much more room to get out of trouble should anything pop out.

We fail because of the wrong mindset

“Ultimately, we are deluding ourselves if we think that the products that we design are the ‘things’ that we sell, rather than the individual, social and cultural experience that they engender, and the value and impact that they have. Design that ignores this is not worthy of the name.”

– Bill Buxton (excerpt from Chapter 1 of Why We Fail)

The quote above is as on-point as it can be.

Web design isn’t about “the thing” you’re designing. It’s about the experience that the end visitors get when interacting with the website.

It’s actually quite funny, but it turns out that the more we distance ourselves from the “product” – the website – the better overall service we can provide.

Note. As you can see, I’m not focusing all that much on discussing some possible things that the client did badly. And to be honest with you, I don’t think that the clients are ever guilty when we’re talking project failure.

At the end of the day, you are the pro in this scenario, and no matter what the client does, you should be the one who finds a solution and gets the project back on track. Therefore, if the project fails anyway, it’s on you. It may be tough to take the blame, but it’s just the right thing to do. It’s what makes us professionals.

Okay, so what to do with a failed web design project?

Look back and evaluate

Although it’s uncomfortable, it’s crucially important to take the time to discuss the failure.

I know it’s difficult. You’d much rather just swipe the bad things under the rug. But it needs to be done. Whenever possible, have the talk with the client. If that’s not an option, have the conversation with yourself, in your head. It’s still better than nothing.

Proceed to evaluate the things that happened throughout the project’s lifespan:

Did you do enough research?

As we said before, lack of research is very often the main cause of project failure, and that’s what we’re going to look into first.

Begin by examining the goals of the project and the characteristics of the website’s target audience.

Were the goals defined correctly? Or maybe it wasn’t all that clear why the website needed to be built and what goals it’s meant to achieve?

Taking a step back and answering these questions will give you clarity on some of the factors that possibly played their part in the failure.

Did you build the design for the right people?

A very valuable mindset to have as a web designer is to remember that you’re not building for the client, you’re building for their clients (the visitors).

So maybe the audience you’ve built the site for simply isn’t exactly the audience that’s valuable to the client? Maybe you’ve focused too much on making the client happy rather than looking at the job at hand from a higher ground and failing to notice the bigger picture?

Audience-related issues are very often the main causes of web design failure. In simple terms, even a beautiful design can still be a failure if it’s not optimized for the right audience.

So go back to your initial assumptions, demographics, and visitor personas. Is there perhaps anything that just doesn’t fit (while also considering the goals of the client)?

Take notes. Utilize them whenever working on any web design project that’s next in line for you.

Was communication to blame?

Oftentimes, a lot of problems can be traced back to lack of communication between you and the client.

On one hand, it’s easy to say that the client is just as guilty here as you are, but this sort of reasoning doesn’t get you very far in terms of learning a lesson.

So rather than simply listing everything that was wrong, focus on what you could have done better, and how you can improve your work process when it comes to communication.

For instance, maybe introduce weekly reports or calls so that you can talk things out with the client and make sure that everything stays on track.

Did you deliver on time?

Sometimes the cause of failure is really straightforward. Maybe you simply didn’t deliver on time.

And hold on, I know this sounds really basic, and not like a mistake that you would make.

However, this often happens when designers try to get their project to perfection prior to sending anything to the client.

You need to keep in mind that for some clients sticking to the deadlines is far more important than delivering a perfect result on the first try.

Therefore, make it a habit to always meet the deadlines no matter what, even if the work still has its flaws. You can always fix them afterwards.

Take criticism

Oh, criticism, web designer’s favorite thing in the whole wide world.

Admit it, you don’t like to be critiqued all that much. You’d much rather hear praise. But that’s okay. Everybody does.

However, when things don’t go as planned, it’s really important to be able to take a step forward and expose yourself to criticism.

Disconnecting and not taking things personally is difficult, and it will require some thick skin. To make this easier on yourself, try pretending that the criticism is towards someone else’s creation. Yes, I really mean it, pretend like it’s not your project that’s being critiqued.

This sort of trick makes it easier to break out a fresh pair of eyes and see if the claims make sense.

So listen to every bit of input that the client shared about the project. And even if you don’t agree with everything, take note of the things that do make sense.

Again, what you could have done better? How you can improve your work process to prevent similar situations from happening?

Notice the things that were good

No web design project is ever a complete failure. There are always some aspects of it that went well and that should be noticed.

So look for them, make a list of those things and try implementing them in your future projects too.

Additional tricks to prevent failure

There are two more things that I’d like to discuss here. They are both crucially important for your sanity when you’re on a job, and they both entertain the idea of putting the ground work in before you even fire up Photoshop.

Always track your time

Time tracking is an essential skill to learn as a freelancer, and not just for web designers.

It gives you clarity on how much time you’re spending at work (keeping track of your personal productivity), as well as it lets you know if a given project is ending up requiring more time than you initially estimated.

In result, this will save you from spending too many hours in relation to the rate you’re charging. Looking into your time tracking data over the long haul will prevent you from estimating projects too generously and ending up losing money instead of earning it.

(After all, if you haven’t earned any money then the project has to be considered a failure as well.)

Always set your deadlines “cleverly”

This is tricky, but this one technique alone has saved me multiple times from missing a deadline.

Here’s how it’s done:

Let’s say that you’ve estimated a given part of the project to take 100 hours of work. It would be therefore reasonable to set the deadline at however many days it takes you to put in those 100 hours of work, right?

Well, not quite. A much better approach is to multiply this number by a factor of at least 1.5 or even 2.

In almost 100 percent of the cases, the client won’t mind a later deadline as long as it’s set in advance. And you also get some cushion in case anything unexpected pops out.

Conclusion

In the end, failing (in web design) isn’t necessarily something we should be afraid of.

And don’t get me wrong. Of course we need to do everything we can to make the project a success. But should things not play out that well for one reason or the other, we can always get a valuable lesson out of the whole experience and improve over time.

Your turn to share. What do you think, and what’s your in-case-of-failure action plan? Do you have any?

Comments (0)

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)

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.