Motion in Web Design the Smart Way

If you’ve been around for a while then you probably remember those corny “site under construction” animations used back in the late ’90s. We all loved those, didn’t we?

Anyway, web design has surely come a long way since then. And so did web animation. Nowadays, it’s no longer corny. More so, it seems that it has finally found its own place among other design mechanisms and tools.

So let’s have a look at how to use animated motion effectively and what place it has in the modern web design space.

The role of motion for modern web

This might sound surprising at first, but when it comes to the core benefits that good motion animation can bring, nothing has changed over the last decade. Mainly because human brains still work more or less the same, regardless of the design trend that’s currently the most popular one.

For instance, it’s been proven that animation helps us get a grasp on what’s happening on the screen and what’s the most important element that we should pay attention to. Why? It’s just how we work. Thousands of years of evolution made us who we are, and made us pay attention to motion. Otherwise, we wouldn’t be able to survive a predator’s attack back when we were living in caves.

So quite interestingly, even in the era of flat design and minimalism, motion still has its place and it indeed can (and should) be used to enrich user experience and make our designs more understandable.

The only thing that has changed is the form in which we should use it effectively. From a technical point of view, good animation in 2015 looks nothing like the animations from the late ’90s or early 2000s.

Your Questions Answered: How do I create a responsive carousel using Bootstrap?

Creating an image carousel (slideshow) using HTML, CSS and Javascript is a challenging task that only advanced web designers and developers can accomplish, right? Wrong! In this Your Questions Answered post, we’ll be walking you through how to build a responsive carousel in Dreamweaver CC using the Bootstrap Carousel Plugin from w3school.com.

Unless you have been living under a rock for the past couple years, you’ve probably heard of the term responsive web design and you likely know what it is. However, in case you’re not sure it’s a technique for building websites that dynamically adapt to any screen or device based on the size, resolution and orientation.

Bootstrap is a HTML, CSS and JS framework for developing responsive, mobile first projects on the web.

Building a Responsive HTML Carousel Using Bootstrap

To get started:

  1. Launch Dreamweaver CC.
  2. Select Site > New Site.
  3. In the dialog box that appears, enter the following information:
    1. Site Name
    2. Local Site Folder: Click the Browse or Folder icon. Navigate to any of your local folders you want to use for this project.
    3. Click Save
  4. Create an image folder under the Site you just created and call it “img”.
  5. Copy your images to this folder.
  6. Select File > New.
  7. Select Blank Page, page type as HTML, and Layout as none.
  8. Save the page as slideshow.html.
  9. Open this page in your web browser.
  10. Copy the contents below Edit This Code.
  11. In Dreamweaver, select the content in Code view and paste the content that you copied.
  12. In the HTML section of the code, edit the <img> tag to read <img src=”img/<nameofimage.jpg>”> For instance, for the first image, I used <img src=”img/img_chania.jpg”>
  13. I have edited the H3 Tag and the P tags to add the relevant captions for the images. You could do that as well.
  14. Select File > Preview in Browser to preview in a browser of your choice.

Resize the browser window. The images and captions in the slideshow should resize to fit the new dimensions of the screen.

Tell me more

If you look in the <head> section of your code, you should see the following:

<meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

What is happening here is that the page is linked to CSS and JS files at remote locations. Dreamweaver gets the contents of these files and displays them for you. Because the files are at a remote location, you cannot edit them in Dreamweaver.

Feel free to click on each of the files to look at the code contained in each of them.

For a list of websites and applications built using Bootstrap, see http://bit.ly/1F1QArx.

Customer Spotlight: Babusi Nyoni’s Responsive Photography Website

Babusi Nyoni does not identify as a web developer despite the repertoire of work he’s created using Dreamweaver CC which now lives on the web. He’s the art director for all things digital at M&C SAATCHI ABEL, South Africa’s fastest growing agency which is part of the largest independent agency network in the world. His keen eye for design and experience working in web design is likely what drew us to his Behance profile.

“Development is something new that I took up out of curiosity and decided to pursue after discovering I had a talent for it,” said Nyoni.

Some people simply ooze creativity and need an outlet to express it for self-fulfillment. Nyoni built out his skill set to do just that, leveraging several apps from the Creative Cloud to bring his ideas to life. His passion was clear in his answer to our question, ‘what’s your favorite part of the job?’

“It’s the almost-tangible joy of bringing something new into the world as a creator,” said Nyoni. “Sometimes creatives take their ability to make stuff for granted but I’m forever enchanted with the prospect of birthing something unseen and unheard of to the world whenever I set out to create.”

Experts Weigh In: Hamburger Menus – To Do or Not To Do?

The hamburger menu. Three lines of navigation goodness, but does it share the cheesy, greasy qualities of its likeness? We asked some experts to weigh in on the chatter we’ve heard on the web to get to the bottom of whether or not you should or shouldn’t implement a hamburger menu in your next project.


Linn Vizard, User Experience Designer, Usability Matters

Linn

As is so often the case in UX (and in life!) the answer is: it depends. Increasing ubiquity of the hamburger menu is a symptom of UX design adapting to multi-platform, responsive, device agnostic environments. Some key considerations include: audience, goals and context.

–    Audience: some research suggests that users under 44 years old are more likely to understand this as navigation. Who is going to be using the interface?

–    Goals: what is the interface trying to achieve? Is navigation a key pathway to meeting those goals? Hiding menus on secondary screens can reduce discoverability of and engagement with those options.

–    Context: In a native mobile app context, tabbed bar menus may be more appropriate and could increase engagement. On a large screen view of a responsive site, it may make more sense to surface navigation, as screen real estate is at less of a premium.

Great UX design is always contextual and considers the many factors that make up the experience. Putting some thought to these considerations will assist with decision making.

A Primer To Background Positioning In CSS

Applying background images to elements is probably one of the most used features in CSS, and many background properties exist that allow us to control different aspects of an element’s background.

An element can have more than one background image. If you want to apply more than one background image, you can provide them as a comma-separated list of values for the background-image property. The background-position property is used to specify the position of the background image, and this property is worth a deeper look because its different possible values have different results, some of which might be new to you if you are not very deep into CSS.

To keep the code and concepts throughout this article simple, we’ll be positioning one background image throughout the examples. But what applies to one background image applies to multiple images as well.

Designing WordPress Child Themes with Dreamweaver CC

WordPress is by far the most wide-spread content management system (CMS) in use today. Much of what has helped WordPress become so ubiquitous can be contributed to its chameleon-like ability to radically change the look-and-feel of a site with, literally, the click of a button. And clicking that button activates a new theme.

dw-4

Tens of thousands of WordPress themes are available, from the absolutely free to the seriously expensive. Sure, a pre-made theme is the perfect solution for many situations—but how often is any template exactly what’s needed? The overwhelming chances are that some customization, whether to the layout, CSS or functionality, is required to satisfy your client, not to mention your own artistic cravings. In a previous blog post, I detailed how you could leverage the power of Dreamweaver CC to customize any WordPress site. Now I want to show you how you can personalize any existing WordPress theme to get the precise, desired final output through the wonder of child themes. All in Dreamweaver, all under your complete control.

Making Green and Creating Gold: 10 Tips for Freelancers

Freelancing is a tough business, but it’s also incredibly rewarding. You get to choose your own hours and projects, and it opens up a whole new world of creative opportunities. For many creatives, once they find success in freelancing they never want to go back to working for anybody else.

But before you get started, there are a few things you should keep in mind to help get your business off the ground.

1. Don’t Quit Your Day Job… Yet

Once you get the idea of becoming a freelancer in your head, it can be hard to think of anything else. But the smartest thing you can do is to build your freelance business slowly. Start by making a business plan—this will force you to outline what you wish to accomplish with your freelance business, helping you to define your goals and objectives, while establishing a realistic timeline.

2. Take On One Client At A Time At First

Building your business slowly will help you transition naturally into the freelance world. It will also allow you to focus more time on each client, resulting in a final product both you and the client can be proud of. It will give you time to learn, time to reflect and time to build on your experiences. Creating one high-quality piece of work is much more valuable than creating three that are sub-par, especially when you’re trying to build a reputation.

A Look Back In Time At Some of The World’s First Websites

Happy birthday World Wide Web!

Yes, the web as we know it turns 26 on March 12. To celebrate, we’re taking a trip back in time to visit some of the web’s first sites to see how they’ve evolved since they first his our screens.

Websites have come a long way. Formerly static, the web is now a highly visual medium. It has become a resource that has reshaped and redefined how we live our lives, interact, conduct business, and store information. Websites didn’t always hold the cachet they do now. These days, a website’s presentation says a lot about the business, product or brand behind the website, which is one of the reasons why designs have become richer and more elaborate.

“The web can be made to work with any type of information, on any device, with any software, in any language. You can link to any piece of information. You don’t need to ask for permission. What you create is limited only by your imagination,” Sir Tim Berners-Lee, Inventor of the World Wide Web, said last year.

And imagination is key to building a web product that stands out. But, as you’ll see here, sometimes a simple design is all you need to stand the test of time.

Customer Spotlight: Stephan van der Hoeven’s Captivating Portfolio

If given a superpower, Netherlands-based visual/web designer Stephan van der Hoeven said he would opt for mind control. This might explain why he chose a career in design given its ability to influence human perception.

Currently, van der Hoeven works full time at ProSpex, a company which develops creative campaigns for B2B lead-generation. He also does freelance work under his own company Medialign. While van der Hoeven primarily identifies as a visual/web designer, he is also known for dabbling in development. Proficient in Dreamweaver, van der Hoeven used the app to build his portfolio site.

When you visit Stephen van der Hoeven’s portfolio site, your attention is immediately consumed by a hypnotizing cloud of black smoke which draws your eye right to his name and job title in the center. This dark introduction then gives way to the bulk of his site with a subtle animation. Clean lines, stark white and soft greys allow the colors of the projects that he’s featured to ‘pop.’

Typography on the Web

I’ve just come back from Amsterdam where I had the chance to give a talk about Typography on the Web at FITC. This two-day festival gathers fans of interactive design, technology and ‘cool shit’. Every year, it’s an opportunity to meet with creative coders, interactive designers and developers who want to learn more about design principles. In my session, I provided an introduction to typography which I thought I would share with you too!

We are surrounded by words. Before jumping in the world of beautiful typefaces, designers need to understand the meaning of those words. They are used to freeze our thoughts and eventually share them. The role of typography is to add meaning to words by design, and sometimes to establish tone. Every day, we face the power of words and typography. If you want to transmit a friendly intent in emails you’ll add a smiley :) On the other hand, if you receive AN EMAIL WRITTEN IN CAPS, YOU MIGHT THINK THAT SOMEONE IS SHOUTING AT YOU!

Graphic designers who master typography are constantly looking for the emotion hidden behind a typeface. I did a short exercise with the FITC attendees – I displayed the text ‘FITC Amsterdam’ in different typefaces to demonstrate the emotion portrayed by each: