Content First for (Mobile) Screens of All Sizes

devices

Image source: http://bit.ly/1HmCBQI

The rapid and seemingly endless proliferation of device sizes and form factors can be exhausting! The new landscape means people are coming to the web on a whole range of devices, from tiny smart watch screens to ‘phablets’ that look comically out of scale when making calls.

So what’s a designer to do? The good news is that regardless of the size of the mobile screen, they all have one thing in common. Content! Users are coming to these devices to devour content in their quest to achieve tasks.

A content first approach means designing with and understanding the actual content as early as possible. It honors content as the raw ingredient of any experience.

The Life of <p>: Developing a Typographic System for the Web

It all starts with the paragraph. For those who don’t identify as a designer, developing a typographic system for the web can be intimidating. Jason Pamental, lead UX strategist at Fresh Tilled Soil and author of Responsive Typography, took the stage at FITC Toronto last week to share how to implement beautiful, readable responsive typography from the inside out.

“UX is not paint. It’s not something that can just go across the top,” said Pamental. “It’s something that’s made up of a thousand little details that add up to an emotional connection with the thing with which you’re interacting.”

When developing a typographic system, we start with type because it is “the clothes which words wear.” When it comes down to it, type is often the basis for which you build everything on a website around. How so? From the very beginning, a core principle of responsive design is that content needs to be consumable across all devices. Therefore, you should really be thinking about designing for content first. Given that content is often text based, what you’re really doing on a micro-level is designing from the type outwards.

“We have to narrow our focus. We have to get a little closer to the thing which drives the design and the way we interact with something…really any kind of digital product,” said Pamental. “So a volume of a thousand lines begins with a single <p>.”

Lean UX Lessons Learned from One Dozen Projects

One dozen projects, a whole lot of lessons worth sharing. Nick Van Weerdenberg, CEO of design and development firm rangle.io, took the stage of FITC Toronto last week to share insights on how to stop UX from breaking the agile development process.

One of the main reasons for tackling a project with an agile development approach is because user behavior and needs are impossible to predict from the outset, however it is often treated as waterfall activity. The final UX of a project is the result of the practice of designing the user experience (UXDesign) combined with the practice of developing the user experience (UXDevelopment). The trick to ensuring a great UX is actually balancing and coordinating effort among teams who put their function first (designers prioritize design, developers prioritize development, etc.).

However, one of the problems with the modern UXDesign process is it demands a complete solution upfront for sign off – effectively killing any hope of a truly agile development approach.

Pulling from a dozen projects with various UX, Van Weerdenburg put together a list of lessons learned to avoid breaking agile development which are distilled below:

 

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.

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.