An Introduction To Graphical Effects in CSS

Over the past couple of years, CSS has gotten a set of new properties that allow us to create quite advanced graphical effects right in the browsers, using a few lines of code, and without having to resort to graphics editors to achieve those effects. If you are like me, then that sounds like music to your ears. I don’t do well in graphics editors and would choose a code path over a graphical editor path any day. CSS now allows us to do more graphical work right in our text editors.

Examples of graphical effects that we can create using CSS today include textured text effects, photo effects like color editing/tweaking, photo and element blending that also enable us to blend elements with other elements, clipping content to arbitrary shapes, and more. You can even wrap content to arbitrary shapes with CSS too!

CSS has gone a long way, and in this article I want to give you an overview of the CSS features that allow us to create such graphical effects—namely blend modes and filter effects.

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.