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:

Levelling Up With Sass

Using a CSS preprocessor is fast becoming a crucial part of a developer’s workflow. If it isn’t part of your process yet, consider giving it a try! Check out part 1 of this series and get up to speed with basic features such as nesting selectors, variables and mixins.

Using preprocessors can help organize your CSS and reduce redundancy. However, learning more advanced features will make your CSS even more powerful.

This article will focus on stepping up your game with Sass, though many of these techniques will work using Less as well. Just be sure to note the syntax differences.

FITC Amsterdam 2015: Design, Art and Technology Converge

Adobe has been a proud sponsor of FITC events around the world for more than a decade. This year we were thrilled to have attendee Szenia Zadvornykh report back on what was covered at FITC Amsterdam 2015. See what you might have missed below!


FITC is a gathering at the intersection of design, art and technology. Each year, conferences are held in North America, Europe and Asia, bringing together people from all corners of the creative industry. This year’s FITC Amsterdam had another great line-up with international speakers sharing projects, process and insights. Below are just some of the topics, projects and speakers that made an appearance at the event.

As always, web development was a major topic. A number of speakers explored workflow and tools that help face the challenges of developing for a plethora of screens and devices. WebGL made an appearance as well, with Frank Reitberger showing how a little Perlin noise can make an ocean, and David Lenaerts explaining how the latest hardware accelerated rendering techniques can be applied natively in the browser.

Your Questions Answered: Creating a table and centering objects within it using HTML and CSS

Like most of our ‘Your Questions Answered’ posts, we’re going back to the basics. We get all kinds of questions from our users on our forums, Twitter and Facebook. One question that has come up a bunch, which we’ll be covering in this post, is around creating a table and centering objects using HTML and CSS.
Users that have previously styled tables using HTML will find this tutorial relatively simple. However, if you are new to HTML and CSS, you can still create this table without too much effort. We are using Dreamweaver CC for this tutorial.

Let’s get started.