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.
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.
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.
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.
If you use Sass or LESS, then you probably already use variables in your style sheets and know how useful they are. If you don’t use a preprocessor, then you might be curious what the fuss is all about and why variables are so popular and how they can be useful. In this article, we’re going to get an overview of why variables are useful, and get acquainted with one particular variable: currentColor.
What are variables good for?
Variables in CSS are useful because they allow us to write more DRY (Don’t Repeat Yourself) code. They are also particularly useful for managing and maintaining large-scale projects that contain a lot of repeated values.
One of the most common use cases for variables are color themes/schemes throughout a website or application. With variables, creating and managing color schemes across a CSS document becomes a lot easier. For example, color schemes usually require you to reuse a few color values for different properties in the CSS file. If you want to change the primary color of a scheme, you would normally have to change all occurrences of that color in the style sheet. Using CSS variables, you can define a variable in one place (for example a variable named “primary-color”), assign a color value to it, and then use the variable as a value anywhere you want in the style sheet. Then, when the time comes to change this color, all you would have to do is assign it a different color value, and all occurrences of that variable in the style sheet will be automatically updated.
CSS 2.1 did not introduce variables. (Although, that’s not entirely true, as you will see in this article.) In 2014, native CSS variables that are similar to preprocessor variables were introduced; these variables are arguably even more capable than preprocessor variables. A CSS variable is accepted as a value by all CSS properties.
In addition to the new variables, CSS already comes with a keyword value that is practically also a variable: the currentColor keyword.
Responsive design is of course nothing new, however in the increasingly device and screen size fragmented world we are creating, it will continue to be an important trend. To some it might seem like old news, however many companies, large and small, are still behind the curve in terms of implementing responsive solutions. Expect lots of demand for responsive redesigns of existing sites. Excellent resources exist online such as Brad Frost’s This is Responsive, which details, for example, responsive solutions for navigation patterns. As a web designer in 2015, responsive web design is a bare minimum and a best practice. If you want to read more on responsive design, I wrote a blog series on the topic.
From skeuomorphic to flat to somewhere in between…
I grew up a chemistry nerd and still vividly remember the thrill of sprinkling iron filing over my mini Bunsen burner to view the sparkling fireworks. The idea that two elements could combine to such a spectacular effect was mind-blowing to me. I experienced the same synaptic joy when I discovered how WordPress and Dreamweaver were made for each other.
WordPress is, undeniably, the most popular CMS in use today. With the lion’s share of the market (47.5% of the top 10k sites, according to BuiltWith.com), vast array of templates and plug-ins, not to mention an ever-evolving ease-of-use, WordPress offers a direct route to a wide spectrum of site destinations. But what if you don’t want to go exactly where a WordPress template says you should? What if your client—or your own personal design sense—requires a custom online presence? Then let me introduce you to the best design and coding partner WordPress never knew it had: Dreamweaver CC.
I’m a huge fan of the Dreamweaver / WordPress workflow and having combined these two elemental power tools for years to construct sites for clients who need content management capabilities along with a personalized look-and-feel. Dreamweaver is, I believe, well-suited to the task, not only as a design engine to perfect the front-facing site, but also as an efficient coding environment for handling custom, inevitably necessary, PHP functions.
It takes talent, time and innovation to turn someone’s vision into something tangible, to take an idea down from the clouds and translate it into an experience. While practice will certainly make you a better web designer, there are things you can start doing right now that will immediately help you improve your designs.
1. Take out a pen and a pad of paper.
Web designers spend a lot of time building things in applications such as Dreamweaver and Photoshop, but sometimes the best way to hash out an idea is the good old-fashioned way. Don’t be afraid to write notes and organize information on paper beforehand so you have a better idea of how to approach the design later. Drawing or sketching your ideas can help you pull together concepts, layout ideas, and experiment with styles, all while simultaneously allowing you to see your designs through the lens of a different medium. And if you use smart technology like the Creative Cloud connected notebook you can save time by importing your sketches directly into the program using an app.
Creatives create files, and files take up space. Luckily, Adobe Creative Cloud subscribers are covered. With Creative Cloud Files, subscribers have access to 20 GB of file storage that can be used for backups, link sharing, folder collaboration, and more.
In this post, I will show how you can upload your code to Creative Cloud Files and sync to it from anywhere – work or home – with ease.
Locate the ‘Creative Cloud Files’ folder on your computer.
Create a folder inside the ‘Creative Cloud Files’ folder. Let’s call this new folder ‘SampleProject’.
Copy all source code (HTML, CSS, PHP, JS, etc.) to the ‘SampleProject’ folder.
Create a new Site in Dreamweaver with Local Site Folder path set to ‘SampleProject’ folder.
Your project files and subsequent changes will now automatically be synced in your Adobe Creative Cloud Files.
We regularly get asked questions on our forum, on Twitter and on Facebook about how to do different things in Dreamweaver CC, and we’re happy to help! We want to make sure you have the know-how to make your ideas a reality using our tools, so this is the first post in a series we’ll be publishing where we’ll answer your how-to questions. Have a burning question you’d like answered? You can always go through the channels mentioned above, or feel free to leave a comment below.
Today, we’ll be talking about how to create a web page in Dreamweaver and center-align its contents. If you are looking for the code to center your page, dive directly to the section ‘Center the Content.’ However, if you are new to web design and are getting started with Dreamweaver, it’s wise to go through every step of this tutorial.
Seventeen years of working on the web brings a level of experience some of Silicon Valley’s top tech entrepreneurs can’t match.
Many web development tools have come and gone in the last couple of decades, but Dreamweaver has continued to evolve and remain the choice tool of millions of web developers and designers around the world who are crafting the modern web.
In celebration of Dreamweaver’s 17th year on the market, we thought we’d take a look at the web and how we access it, now and then.