Tag Archive: Dreamweaver CC

Getting Started with CSS Preprocessors (Less and Sass)

What are CSS preprocessors?

CSS is the language used to make the web beautiful. Preprocessors can be used to help make CSS more beautiful.

CSS preprocessors extend the basic functionalities, overcoming many limitations of traditional CSS by adding features such as variables, nesting selectors and mixins, creating CSS that is more maintainable and efficient.

CSS written in a preprocessed language must also be converted or compiled into traditional CSS syntax. There are many apps that can be used to do this and will be discussed further in this article.

Why make CSS more complicated?

I have to admit, I resisted at first as well. I didn’t want to make CSS *more complicated*. However, once you get up and running, it’ll be hard to go back to writing regular CSS. The great thing about preprocessors is you can use as little or as many features that you want. So the learning curve is only as steep as you want it to be.

Getting started with even just the basic features will greatly improve your workflow.

There is one thing I’d like to point out. If you are a CSS newbie, it might make more sense to get more comfortable with CSS and best practices first before diving into using preprocessors. A tip for anybody starting out with preprocessors is to look at the CSS that is being compiled to make sure you are still following best practices.

Which one should I choose?

There are three popular preprocessors to choose from: Sass, Less, Stylus.

Ask any web developer and you’ll hear passionate arguments as to which one is better but at the end of the day, it’s a personal choice. My advice is try a couple and figure out which one you works for you. Each tool may have specific features that the others don’t have but the basics and syntax is similar making it easier to learn the others once you have one under your belt.

Personally, I started with Less because I found the documentation easier to read and am now using Sass, mostly because a project I was working on was already using Sass and now I just prefer it!

This article will go over the basics of getting up and running with Sass or Less (sorry Stylus, maybe next time).

Extending the Color Cascade with the CSS currentColor Variable

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.

Mobile UX Trends for 2015

With mobile web usage outpacing desktop in 2014, and mobile apps accounting for most of the time spent on digitial, the importance of mobile UX is continuing to grow. As well, the boundaries are blurring between device sizes.  It’s becoming harder and harder to distinguish between mobile and tablet, with the ‘phablet,’like the iPhone 6 Plus, – straddling the limits between the two. So what kind of UX trends are going to drive mobile? In this post, I’ll walk you through a handful of them.

Responsive design

figure 1_rwd2

By Tooroot (Own work) [CC BY-SA 3.0], via Wikimedia Commons

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…

Establishing a Dreamweaver CC and WordPress Workflow

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.

 

hero

 

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.

Is Flat Design a Web Design Standard That’s Here to Stay? 10 Designers Chip In

These days, the number one thing that’s required of web designers working on anything (that’s anything) is to make sure that their creation “has this flat feel about it.” In other words, the term “flat design” has become almost synonymous with “good design.”

But is flat design just a temporary trend, or is it here to stay and we’ll be designing flat websites for years to come? Can it be, perhaps, the new standard of web design?

Let’s find out.

To help me solve this mystery, I’ve invited 10 designers and web design experts to share their input on one big question:

  • Is flat design something that’s here to stay, or will it fade to make room for another, completely new trend?

Your Questions Answered: How do I center align a web page in Dreamweaver?

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.

Dreamweaver Celebrates 17 Years of Web Development

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.

NEW Dreamweaver CC 2014 Tutorials

Get to know the new features in Dreamweaver CC 2014 with the help of a whole bunch of recently published tutorials. From managing your websites to ensuring HTML5-compliancy, we’ve got a round-up of the latest learning materials available below.

Learn how to…

Use Live Highlight, modernized Live View and CSS Designer

Get a rundown on new features including how to edit and preview web pages with new Live View features in this Dreamweaver CC video tutorial.

1_livehighlight

Adobe Dreamweaver Survey 2013

The Dreamweaver team is conducting a customer feedback survey. The objective of this survey is to connect with you, our users, and figure out from as many of you as possible what’s working in Dreamweaver and what isn’t. 

Your feedback is important to us. Participation in this survey is voluntary and your responses are completely anonymous. 

Dreamweaver CC: Your all-in-one tool for creating, publishing, and managing websites and mobile content

We are pleased to announce the release of a modernized and streamlined Dreamweaver. Dreamweaver CC is the all-in-one visual tool to efficiently and intuitively create, publish and manage websites and mobile content.

New in Dreamweaver CC:
Create immersive web experiences with the new CSS Designer and visually apply CSS properties such as gradients, box shadows, and more. Dreamweaver CC is committed to producing clean, web-standards code, enabling you to design without the need to hand-code.

Dreamweaver CC also includes enhancements to its responsive design framework, Fluid Grid Layouts. We’ve addressed key usability issues to improve the design workflow, and to help you visually construct and build responsive websites that render properly on multiple screen sizes and devices.

Responsive Design in Dreamweaver CC

Responsive Design in Dreamweaver CC

By removing under-utilized features in Dreamweaver, we are clearing the way to provide optimized workflows for the latest and most relevant front-end web technologies and standards. Over time we plan to evolve the Dreamweaver feature set to include relevant middle-layer and server side technologies as well. Our aim is to provide the ultimate user experience – a collection of productive and modern visual development features in a single tooling environment.

We have just begun the modernization process and invite you to voice your opinion. We are committed to taking action on customer feedback and remaining as transparent as possible about our future plans. More details will follow on what the modernization effort entails in Dreamweaver CC, and we eagerly await your feedback.

Over the past 12 months, we have been expanded Dreamweaver’s integration with many Creative Cloud services and tools. One of the many benefits to being part of the Creative Cloud is that you can access the vast and ever-growing Adobe Edge Web Fonts library. Also, with web technologies evolving rapidly, Dreamweaver CC helps you keep up by implementing features and addressing issues quickly. Creative Cloud members will receive regular updates to Dreamweaver.

Adobe Edge Web Fonts

Adobe Edge Web Fonts

Another benefit of integration with Creative Cloud is Sync: Dreamweaver CC lets you sync both site settings and preferences, streamlining your creation workflow. Sync in seconds and start creating without the need to recreate or manually copy and paste files. With Dreamweaver CC & Creative Cloud, the creative world is at your fingertips.