In an age where mobile adoption continues to grow exponentially across borders, demographics, and industries, companies are challenged with reaching their stakeholders on devices of all sizes with varying levels of computing power.

This leaves the tough question of whether they should build a responsive mobile site that works across multiple devices or build a native mobile app instead. Either direction has its pros and cons.

Should we build a native app or a responsive website?

To help advance the discussion, we reached out to a few experts and picked their brain on this topic. Here’s what they said…

v_hardy

Vincent Hardy

Director Engineering, Design and Publishing at Adobe

It would be great to have a universal answer, but I don’t think there is one. It depends on what you want to do, the platforms you are targeting and when you are asking the question.

What you want to do matters: a simple portfolio for a graphic designer would be best done as a responsive application because there are no performance issues. The goals is likely reach and ease of access and the responsive web is perfect for that. By contrast, if you are building an application that requires access to sensors on a mobile device that have no APIs in browsers, then a native application would be the way to go.

The platform matters as well. If you are only targeting a particular platform, then a responsive nature of a web site may not matter because it would not be at play in the solution. Conversely, if you are building an simple application and you want to reach out a large number of people, the web and the responsive web are your friends!

There’s also the question about a moving target. It used to be that the web was much less powerful than it is today, so more things had to be done as applications. Today, with the advances in graphics support in particular, a lot more things are possible (e.g., fast, performant 3D graphics with WebGL). Likewise with various APIs that give access to the platform capabilities, fewer things need to be done in a native application.

Finally, an option a lot of developers chose is a hybrid one. I think that in many cases, it is a very wise choice and technologies like PhoneGap make it easy to leverage responsive web content in the context of a native app.


Bem Jones-Bey

Bem Jones-Bey

Computer Scientist, Web Platform and Authoring at Adobe

The one that is better will depend greatly on the specific product you are building and what gives the best experience to your users. It is impossible to pick one of the two in a vacuum. That being said, given the much larger audience that a responsive website provides, you should consider the website approach first.


tImbert

Thibault Imbert

Group Product Manager, Design and Publishing at Adobe

It really depends on the level integration that is required with the platform. If your content relies heavily on best integration with the platform capabilities, media access (audio or video recording), or performing any expensive computations, or low-level hardware access with the system, native is probably your best bet. If on the other hand, your content relies heavily on web content, with existing HTML content that you need to reuse or that will be created and reach is key, then a responsive website is a better option. Don’t spend your time forcing the use of a tech for a specific use case, use the best tool for the job.

We understand that the answer to this question might be different depending on many variables and from one company or product to another, but we’re hoping that this feedback could help you or your company make a strategic decision that will eventually extend your reach and save you and your company time and money.


How would you answer this question?

Join the discussion by sharing your thoughts and experiences with us in the comments below.

Comments (0)

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).

Getting started with Less or Sass

Both Less and Sass are backwards compatible so you can easily convert your existing CSS files into Less or Sass just by renaming the `.css` file extension to `.less` or `.scss`, respectively.

Less is JavaScript based and Sass is Ruby based but you don’t have to know anything about either language or use the command line to compile the files into CSS. There are various apps, free and paid, that will take care of that for you! Here’s a list for Less and for Sass.

These apps will *watch* your files for changes and automatically compile your updates into new CSS files. So remember, when using a preprocessor, you’ll never have to touch your `.css` files again!

Note that you only need to link the .css files to your HTML pages, not the .scss or .less files. Those are strictly for development.

Comments

You can use two kinds of comment styles in your Sass or Less files. The traditional CSS style, `/* comment */` and also the double forward slash style `// comment` works as well. What’s the difference? The latter does not compile into the .css file.

Variables

Variables are a great way to get up and running with preprocessors. Ever had a project with multiple colors? Which is easier to remember, `darkblue` or `#00008B`? With variables, you can assign values to a name, then use the variable name in your CSS.

Note that variables can only be defined once so be careful when choosing names. Also, using functional naming conventions versus style naming conventions can be useful as well.

Variables must be declared first, so it loads first and the CSS that comes after it can reference it.

Less

Use the `@` symbol to define a variable.


    @darkblue: #00008B;
    @border-color: #CCCCCC; //gray
    @base-font-size: 16px;
    
    body {
        font-size: @base-font-size;
    }
    header {
      border-bottom: 1px solid @border-color;
    }
    a {
      color: @darkblue;
    }

 

Sass

Use the `$` symbol to define a variable.


    $darkblue: #00008B;
    $border-color: #CCCCCC; //gray
    $base-font-size: 16px;
    
    body {
        font-size: $base-font-size;
    }
    header {
      border-bottom: 1px solid $border-color;
    }
    a {
      color: $darkblue;
    }

 

Both will compile to:

    
    body {
        font-size: 16px;
    }
    header {
      border-bottom: 1px solid #CCCCCC;
    }
    a {
      color: #00008B;
    }

 

Making changes is also easier when using variables. For example, if you decide to use a different dark blue color after you’ve already declared it a throughout your CSS file, all you have to do is change the value of the `darkblue` variable and it will update wherever the variable was used, when the CSS file is re-compiled.

Note that the variable declarations itself don’t get compiled. Only traditional CSS declarations are compiled.

Nesting selectors

Nesting selectors keeps the stylesheet organized by grouping related CSS in chunks. The syntax is the same for both Less and Sass.

                 
    header {
        color: black;
        
        .logo {
            width: 300px;
        }
        .navigation {
            font-size: 12px;
        }
    }

 

Compiles to:


    header {
        color: black;
    }
    header .logo {
        width: 300px;
    }
    header .navigation {
        font-size: 12px;
    }

 

Nesting is also useful for making easy changes as well. Let’s say you decided to use a *class* of header instead of selecting the header *element*. In the traditional CSS example, you would have to update it all three declaration blocks. When using a preprocessor, you only have to edit it once!

Remember to stick to best practices when nesting selectors. With preprocessors it tempting to nest everything but avoid going more than three levels deep!


    nav {
        ul.main-nav {
            li {
                a {
                    //too many levels!
                }
            }
        }
    }

 

Compiles to:


    nav ul.main-nav li a {
        // too many levels!
    }

 

Mixins

Mixins are a great way to create reusable chunks of CSS. Unlike variables, which only hold one value, mixins can hold multiple CSS declarations, as many as you need.

Let’s say you want to create a base button style where the buttons will always have the same border style and rounded corners.

In Less, mixins are created just like a class declaration block. This means any class can be used as a mixin. Just like variables, declare the mixin first before using it. To use the mixin, include it by its name.

Less mixin


    .rounded-border {
        border-radius: 2px;
        border: 1px solid #ccc;
    }
    
    .button-green {
        .rounded-border;
        background: green;
    }

 

Compiles to:


    .rounded-border {
        border-radius: 2px;
        border: 1px solid #ccc;
    }
    .button-green {
        border-radius: 2px;
        border: 1px solid #ccc;
        background: green;
    }

 

Since the syntax is the same as using a class as your selecotor, the mixin will be compiled. If you want to create a mixin that will only be compiled when used, add a set of parentheses `()` to the mixin name.


    .rounded-border() {
        border-radius: 2px;
        border: 1px solid #ccc;
    }
    
    .button-green {
        .rounded-border();
        background: green;
    }

 

This will compile to just this:


    .button-green {
        border-radius: 2px;
        border: 1px solid #ccc;
        background: green;
    }

 

Sass Mixin

Let’s use the same example to demonstrate the Sass syntax. Sass requires a `@mixin` *directive*, followed by the mixin name as well as `@include` to use the mixin.


    @mixin rounded-border {
        border-radius: 2px;
        border: 1px solid #ccc;
    }
        
    .button-green {
        @include rounded-border;
        background: green;
    }

 

Will compile to this:


    .button-green {
        border-radius: 2px;
        border: 1px solid #ccc;
        background: green;
    }

 

Mixins and Parameters

To make your mixins even more flexible and reusable, use parameters. Suppose you wanted to create a square, but use different sizes and different border colors. The variable values can be added to the mixin, between the parenthesis, as parameters. Then add the variable name to the corresponding property value. Mixins can have one or more parameters, separated by a comma.

In the below example, `size` represents height and width, and `color` represents border color.

Less


    square(@size, @color){
      width: @size;
      height: @size;
      border: 1px solid @color;
    }
    
    .box1 {
      .square(50px, #ccc);
    }
    .box2 {
      .square(100px, #ddd);
    }

 

Sass


    @mixin square($size, $color){
        width: $size;
        height: $size;
        border: 1px solid $color;
    }
    .box1 {
        @include square(50px, #ccc);
    }
    .box2 {
        @include square(100px, #ddd);
    }

 

Both will compile to:


    .box1 {
        width: 50px;
        height: 50px;
        border: 1px solid #cccccc;
    }
    .box2 {
        width: 100px;
        height: 100px;
        border: 1px solid #dddddd;
    }

 

There are many more features available and documented on both the Less and Sass sites. However, getting started with nesting, variables and incorporating mixins is a great way to start supercharging your CSS workflow. Stay tuned for part two of this series.

Comments (0)

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.

The currentColor keyword

The currentColor keyword is like a CSS variable, except that it has one main restriction: you can only use it where a <color> value is expected; if a property does not accept a <color> value, it will not accept currentColor as a value.

The following are all examples of using currentColor in properties that accept it as a value.

box-shadow: inset 2px 2px 3px currentColor;
background-color: currentColor; /* not a good idea! */
background-image: linear-gradient(currentColor, transparent);

Another difference between currentColor and other variables is that you don’t get to assign a value to it the same way you would assign other variables values. The value of currentColor is determined by the computed value of the color property that is currently being used on the element. That is, the value of currentColor is equal to the current color property value. And this is where the currentColor name comes from.

So, if we were to go back to our previous example, the currentColor keyword sets the box shadow color to whatever color value you have set on the div. If you haven’t set any color, it will use the inherited color from any of the div’s ancestors. If no ancestor has a color, most browsers will just default to black.

Put another way: the currentColor keyword is used to make properties of an element, or child elements of an element, inherit the color set by the element’s color property. It therefore acts as the inherit value to allow inheritance of a color that would otherwise not be inherited by a property or child element.

This also means that, for properties that already inherit the color value, currentColor will not be of much use.

Properties and elements that inherit the color value by default

When an element has a color value, whether it is explicitly set or inherited, some of the foreground elements of that element that accept a <color> value will inherit that color value by default.

For example, an element’s borders are part of the element’s foreground; thus, even if you don’t specify a border color, the border will get the same color as the color property value. If the element does not have one, most browsers usually default to black.

The border color in this example will be purple:

.parent {
    color: purple;
}

.child {
    border: 5px solid; /* we didn’t specify the border color here */
}

The elements that will get/inherit the element’s color value include:

  • The element’s text—it is what the color property is used for.
  • The text’s outline.
  • The element’s border.
  • The element’s box shadow.
  • An img’s alt text. That is, when the image cannot be displayed, the text that appears in its stead will have that color value.
  • A list item’s bullet(s) and border.
  • In some browsers (e.g Chrome) the horizontal rule’s (<hr>) border color. (Without a border, the color will not be affected.)

When you set these element’s properties on an element without explicitly assigning them a color, they will inherit the computed color value of the element by default.

The following demo shows the above elements in action as they inherit the color set on the page’s body. Change the color property value on the body to see these elements’ colors also change.

See the Pen currentColor — Adobe DW Blog by Sara Soueidan (@SaraSoueidan) on CodePen.

At this point, you might be wondering: if so many properties/elements already inherit the color value, how or where can currentColor be useful?  

Extending color inheritance with currentColor

There are some places where retrieving the color value and using it could come in handy. One example where currentColor can be used that would not otherwise inherit the color value is gradients. CSS gradient images, be that linear or radial gradients, do not inherit colors. By using currentColor, you can make a linear gradient used as a background image, for example, adjust to match any color you specify somewhere else as the “primary color” of a theme.

background-image: linear-gradient(to bottom, currentColor, #fff);

Such an example was created by Scott Kellum who took this concept a little further and added an animation to the color property. As the color property animates, all the elements affected by that color will also animate their colors.   See the Pen currentColor by Scott Kellum (@scottkellum) on CodePen.

This is a great example of using currentColor, particularly the animation part.

However, more practical examples for currentColor exist. Let’s take a look at some of them.

currentColor Use Cases

The idea behind currentColor is to extend the color cascade. This comes in handy in a lot scenarios.

currentColor for theming UI components

From the previous demo, we can move to a more practical (and brilliant, I must say) use case for currentColor demonstrated by Simon “Simurai” in a talk he gave at CSSConfau last year. The talk was about how we can use Flexbox, currentColor and em units inside UI components to quickly style entire Web Apps straight in the browser.

To demonstrate the usefulness of currentColor, Simon created a set of UI elements, including some sliders. These elements have the same color scheme applied. For coloring the sliders and input types, he used the currentColor variable to force the color inheritance in the background color of the slider’s thumb and checkboxes that would otherwise not inherit that color.

currentColor-slider

An example using currentColor to apply the color property’s value to the slider’s thumb. (Source)


Similarly, more UI components can be created that inherit a color value that you would specify somewhere up in the cascade. With this, a UI theme is established on these components. Then, leveraging the cascade and currentColor, you can change the main color value and get a new set of colored components every time you do, thus practically automating the process.

The following GIF image shows that in action. Simon is using the browser devtools and the color picker in the browser to change the value of the color property, and get a live preview of these changes on the components.

Changing the value of the color property will update the colors of all UI components that are inheriting this color, with the help of the currentColor variable. (Source)

 

Using the browser’s devtools capabilities, you would be able to change the theme to your liking and then save the changes to your working files right from the browser. To learn all about it, refer to Simon’s talk and blog post.

currentColor for theming and styling SVG

SVGs are great, but they come with a few styling quirks and limitations depending on how you use them. One such case is reusing parts of an SVG using the SVG <use> element.

If you’re not familiar with the <use> element, you can read all about it here. The idea behind <use> is to reuse parts of an SVG anywhere we want these parts to appear on the page. By useing an SVG element, we’re practically creating a live copy of that element. This is similar to copy-pasting the element in a graphics editor, except that the copy is live—meaning that its characteristics can change as the original copy changes.

The <use> element is used a lot when creating SVG sprites. An SVG containing all of the icons would be used as the sprite, and then we can insert individual icons from that sprite anywhere on the page, using <use>. You can read all about SVG creating sprites in this article.

When an element is used, however, the copy of its contents is cloned into a shadow DOM. This means that these contents cannot be selected and styled with CSS the way we would select and style SVG elements or even HTML elements present in the regular DOM. This is one reason why styling SVG icons created like that is limited.

Using currentColor, we can work around this limitation but allowing a color we specify in CSS “leak” into the contents of the used SVG, by setting currentColor as a value for the properties we want the color value to leak into.

So with an SVG icon used like so:

&lt;svg class="home-icon"&gt;
    &lt;use xlink:href="#home"&gt;&lt;/use&gt;
&lt;/svg&gt;

And assuming the #home icon defined in the sprite sheet contains something like:

&lt;symbol id="home"&gt;
    &lt;rect id="bottom" fill="currentColor" ... /&gt;
    &lt;polygon id="roof" ... /&gt;
&lt;/symbol&gt;

We can then apply styles to the icon and have the fill color cascade down to the #roof (which does not have a fill attribute above) and the color value be inherited by the #bottom rectangle’s fill attribute:

.home-icon {
    fill: red;
    color: white;
}

The fill color will cascade down from the svg to use and then to #roof. The color value will be used as a value for the #bottom fill color because of currentColor.

Fabrice Weinberg wrote an article about this technique a while back on his Codepen blog.

This technique comes in handy when you want to create multiple icons each having different colors; all you would have to do in that case is change the color and fill values in the CSS. An example of this usage is the following demo Fabrice shows in his post:

See the Pen Sass SVG Icons 1.1KB by Fabrice Weinberg (@FWeinb) on CodePen.

Of course, you can use currentColor on multiple elements inside the SVG. However, as you probably have noticed, this only allows you to change two colors inside the SVG.

If you want to have more control over colors and specify more color values that you could leak into the SVG, you would need more variables; this is where the new CSS Variables specification will come in handy. You can read more about this here.

Final Words

In the previous examples, we saw how we can use currentColor in multiple places, and then change the colors we want in one place and have that color be applied to those multiple places, instead of having created multiple occurances of the same color and then changed all of them. This helps us write shorter CSS, and provides us with some sort of automation, especially in situations like the UI components we saw in Simon’s talk.

With CSS Variables, you will be able to define your own set of variables and use them in similar and much, much more use cases, as the new variables will be valid values for any CSS property, not only those that accept <color> values. Dealing with SVG icons will certainly become easier, as will maintaining large-scale projects. Again, if you use a preprocessor, then you already know how useful variables are.

Can you think of more use cases for currentColor? If so, make sure you share them in the comments below!

Comments (0)
Feb
23

Mobile UX Trends for 2015

By · Comments (0)

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…

In terms of visual design, the web has evolved immensely over time. The past few years have seen intense debates about the merits of flat vs skeuomorphic design. The new trend is moving towards something more moderate. The thorny design challenge we are tackling is – how do we design in a minimal, elegant way while ensuring that our users have adequate affordances? How do we clearly communicate to users how to interact with elements and what to do next? Google’s Material Design language exemplifies this trend. No longer are we looking at completely flat design, elements such as shadow, animation, movement, layers are being re-born in a modern, clean, and elegant way. Expect to see much more of this over the next little while, as we find our way back to a middle ground between gross skeuomorphism and reductive flatness.

Flat design vs material design from Google’s Material Design guidelines

Cards and modular design

As with many UX trends we are seeing design for native mobile applications and web exist in a symbiotic relationship. We have seen platform native mobile design influencing the web, for example with the off canvas menu. “Cards” containing information can be linked to web design for sites like Pinterest and Twitter. Now, this trend is proliferating with examples like Google Now leveraging card design. Cards are a natural fit for mobile UX, as they allow for flexible, modular design. Cards also have the advantage of being great for progressive disclosure – depending on the timing, context and screen size of the interaction, more or less information can be shown.

figure3_youtube

An interactive Twitter card with embedded YouTube video.

Examples of cards from the Google Now site.

Examples of cards from the Google Now site.

Performance as experience

Mobile users are often browsing using their carrier’s network. Growing numbers of people are using mobile devices in the developing world where data costs are a key consideration. Performance in terms of load time and impact on battery life are crucial when designing and developing for a great mobile UX. Mobile devices have come a long way and are incredibly powerful, but we still need to be cognisant when thinking about the performance of the apps and sites that we create. Every 100ms of loading time decreases revenue by 1%, according to one study by Amazon. Some ways to design for this include optimizing images sizes for responsive design, minifying CSS and Javascript and removing unnecessary page elements.

All in all, it is looking like a very exciting year for mobile UX, with lots to explore, The mobile frontier is still evolving, and keeping an eye on these trends and honing mobile focused skills will keep us top of our game! Some excellent places to read more include Responsive Web Design by Ethan Marcotte, and Mobile First by Luke Wroblewski.

Comments (0)

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.

WordPress Advantage: Dreamweaver CC

What does Dreamweaver bring to the table that makes it so well-suited to WordPress development? The key is the combination of Live View and PHP support. WordPress is a PHP/MySQL framework and Dreamweaver’s ability to process the server-side language is critical. Dreamweaver’s Live View executes the PHP code, integrates the MySQL data, and displays the output HTML5 and CSS 3 design with browser-compatible precision—all while keeping everything interactive and editable.

WordPress is an incredibly complex templating application that depends on almost 100 included and interwoven separate files to generate a single page. How do I know this? Just open an index.php file from a WordPress site root and give Dreamweaver the go-ahead to discover dynamically related files. You’ll soon see a multitude of available files—PHP, CSS, JavaScript, and XML—atop the Document Window in the Related Files toolbar. And Dreamweaver not only gives you access to each and every one of them, but processes them all and presents the rendered result faithfully. Very powerful.

Filtering for essential files

Of course, the availability of such a large number of files can be counter-productive when you’re trying to hone in on just the right CSS or other file. Dreamweaver CC includes the perfect tool for targeting select files: Filter Related Files. This facile feature makes it possible to display only certain types of files (like PHP or JavaScript) or individual files. I routinely use the Custom Filter option of this feature to work just on my theme’s CSS, index, header and footer pages, like this:

*.css;index.php;header*;footer*

custom-filter

When entered in the Custom Filter field of the dialog, only the files I need—including those in any active themes or child templates—are displayed in the related files toolbar. Now I can work with code in Split view and a quick refresh depicts any updates in Live view.

Swift styling

Integration with CSS is even tighter, with changes made to the Dreamweaver’s CSS Designer panel taking effect immediately. In addition to offering the full palette of CSS properties, the interface gives direct access to multiple sources, even those used in media queries, so you can be sure you’re working with the proper CSS file.

css-designer

Best of all, it’s quite easy with the newly evolved Live view to pinpoint exactly what screen areas or elements need to be addressed. Just navigate to the desired page using the Follow Link feature and then enable Inspect mode. Dreamweaver processes your WordPress page flawlessly and then highlights the corresponding CSS selector and its properties for point-and-click modification. More in-depth edits are just a right-click away when you Go to Code.

WordPress specific code hinting

Speaking of code, in addition to the general compatibility with all PHP applications, Dreamweaver CC also provides support for specific WordPress functions. Because not all projects are WordPress sites, this targeted feature is enabled on a site-by-site basis by choosing Site > Site-Specific Code Hinting. The subsequent dialog that opens detects your installation and automatically selects WordPress as well as the relevant code root. Honestly, in most scenarios, all you need to do is run the command, open the dialog and click OK: the rest is automatic. Now, hints for all the WordPress functions, complete with syntax and brief description pop-up as you code.

code-hint

Gearing up for a Dreamweaver and WordPress workflow

So what does it take to get up and running with a Dreamweaver and WordPress? Surprisingly little. Here are the key steps:

    1. Set up Apache, PHP and MySQL
      To serve WordPress properly, you’ll need a local web server (typically Apache) along with both MySQL and PHP capabilities, collectively known as an AMP stack.There are two basic routes you can take to meet this requirement: separate components vs. software bundle. Installing and enabling separate components (Apache server, MySQL, PHP, and usually a database management program like phpMyAdmin) takes longer and requires more technical expertise but offers more control.Installing a software bundle like MAMP (Mac and Windows) or Wampserver (Windows only) is a one-stop, point-and-click dirt-simple process, but relinquishes detailed system management.Lynda.com offers a course that covers the entire AMP waterfront and author David Gassner walks you through each of the scenarios, complete with trouble-shooting. (If you’re not a Lynda.com member, get 10 days free to view this course and any others, including my own Dreamweaver / WordPress courses.)
    2. Create a database
      Once your development environment is rolling along, you’ll need to create a database for the WordPress installation—a snap with every database manager program. You can name the database whatever you like; I typically go with something client-based because I develop a lot of WordPress sites locally. And the database is all you need: all the tables and schema are created for you during the WordPress install.
    3. Define your Dreamweaver site
      Your Dreamweaver site should be in a folder within your local web root, so that it can be browsed via a http://localhost/ web address. (Note: depending on your Apache server’s configuration, you may have to append a port number.). In addition, a testing server that specifies the local web root as well as a PHP server model is required.
    4. Set up WordPress in your Dreamweaver site
      I always download the latest version from WordPress.org when starting a project. The framework is frequently updated with both minor (bug-fix-oriented) and major (enhanced features) versions. Keeping up-to-date is especially important from a security standpoint these days; the WordPress team is quite vigilant in strengthening any perceived vulnerabilities. Store the contents of the downloaded archive in your Dreamweaver local site folder. If the site is completely WordPress driven, put the files in the root of the directory; if you’re integrating a WordPress blog into a site, keep all the WordPress files in their own folder off the site root.
    5. Install WordPress
      Even though this is where all the actual work takes place, installing WordPress is perhaps the easiest step, thanks to the framework’s insistence on a foolproof, no-brainer, easy-peasy approach.Simply browse to your site’s wp-admin folder (with a URL like http://localhost/My_WP_DW_Site/wp-admin/) and you’re off.WordPress will detect the lack of a configuration file and confirm that you want to create one. Once you do so, you’ll need to enter some core information, like database name and credentials. Then, if you’ve followed the previous steps correctly, you’ll be greeting with one of the most satisfying installation messages ever created: “Alright Sparky!” It makes me smile every time. One more click and the installation is completed: you’re ready to log in and start working with WordPress.On the Dreamweaver side, make sure you’re in Live view and open the WordPress index.php. BAM! There’s your default WordPress theme and example post. Techno-abracadabra.

World of possibilities revealed

Now the real fun begins as you begin to explore both sides of the workflow: Dreamweaver and WordPress. And there’s a ton you can do with both, including child themes, plug-ins, custom pages, and even a personalized WordPress administrative interface, the Dashboard. Dreamweaver CC can handle it all, from CSS design to PHP functions. Try it and see if it doesn’t set off a chemical reaction of your own.

Comments (0)

One of the great new features in the October 2014 release of Adobe Dreamweaver CC 2014 is the addition of five starter templates: About page, Blog post, eCommerce, Email, and Portfolio. Each of these templates provides a responsive structure to build a new web page that will look great whether it is opened on a mobile device, a tablet, or a PC. The About page, Blog post, and eCommerce templates are built with media queries. The Email template is built with tables, and the Portfolio template is built with Fluid Grids. This is a very positive step toward simplifying the process for those less comfortable with building a responsive design from scratch.

You can create a new page based on one of the Starter Templates by using either the File menu or the Welcome Screen. Although the screens are different, the results will be the same.

Use the File menu to create a new page based on a Starter Template

  1. Select File on the Menu bar, then select New.
  2. Select Starter Templates, select a Starter Template name in the Sample Page column, then select Create.figure 1

 

Use the Welcome Screen to create a page based on a Starter Template

  1. Select Help, then select Welcome to display the Welcome Screen, if necessary.
  2. Select a Starter Template name from the Starter Templates column.figure 2

After selecting either option above, continue with the following steps:

  1. Enter a file name into the File name text box, then select Save.figure 3
  2. Select Copy in the Copy Dependent Files dialog box.figure 4
    The Copy Dependent Files dialog box closes and all dependent files are copied to the website root folder. With the About page template, a style sheet named aboutPageStyle.css is copied, along with two images: profile photo.png and social.png. The other Starter Templates will have different dependent files listed that relate to their placeholder page content and styles.

At this point, you begin replacing the placeholder content with your own content. As you replace content, you will also want to modify the selectors in the style sheet that are used to style the content.

figure 5
As you test your pages, use the three Size buttons on the status bar to see how the page elements will display on a mobile device, tablet, and desktop.

Mobile size

figure 6

Tablet size

figure 7

Desktop size

figure 8

Once you build one page using a Starter Template, you can use that page as a template for creating and building the rest of the pages in your site. You may decide to add more selectors to your style sheet as you add content unique to new pages, but the bulk of the page styling will be done! Not only will you save a tremendous amount of time, but your page designs will flow together nicely with a consistent look and feel across the site.

Until next time, happy coding!

Comments (0)

The possibilities for web design are endless. The industry is evolving and designers are looking beyond the frame to incorporate the narrative and visual components of film and television into their designs. Never before have so many beautiful websites existed, doubling as works of art and fully immersive user experiences.

We talked to three designers from award winning studios around the world to find out which websites they’re loving right now, and to learn how other web designers can incorporate these innovations into their own designs.

Valentine #1: Warsaw Rising

warsaw

A great example of incorporating film, says Clayton Kemp, creative director at Zen Den Web Design in San Francisco, is Warsaw Rising. Kemp’s portfolio includes highly visual sites such as Terra Gallery and Events, Alta Mira Recovery, and Humanity United – Performance Report.

“I really love how the overall aesthetic principles of the site lend themselves to an old film or map from the era,” he says. “They have combined a perfectly matched vintage color palette with just enough subtle graininess to create an awesome product. The site seamlessly blends modern technology with archive WW2 footage to craft a very unique and memorable experience for their users.”

Designed by Warsaw’s Bright Media, Kemp says Warsaw Rising’s main goal is to educate through entertainment, a trend he expects will be huge in the coming years.

Designers can learn a lot from this site, Kent says.

  • The stylish and contemporary UI does not detract from the vintage theme
  • The design invites users to walk through the narrative, rather than having to flip from page to page
  • It’s also been optimized for web flawlessly, loading quickly despite being visual and interactive

“All of these elements make this piece remarkable,” Kemp says.

Valentine #2: Five Minutes

fiveminutes

Five Minutes is a collaborative interactive short that takes users through a zombie apocalypse. This is exactly why it appealed to Isaac Garcia, senior designer at Jam3 in Toronto, Canada. His own work includes such interactive projects as Future Self, Digital Deadly Sins, and For Your Consideration.

“I think it’s mostly about how the story is able to capture the audience’s attention,” Garcia says. “I think the design and execution is fantastic, but I think the fact that it’s almost like a branded interactive film, but it doesn’t feel gimmicky is great. It’s about the experience, and the design just brings it to a different level.”

“They’ve done a really good job at making sure everything is consistent. They didn’t over complicate anything just because they could,” he continues. “Simple little things like the icons are nice and crisp and the animation is super smooth.”

Valentine #3: Ben & Jerry’s

BenandJerrys

Of course, it’s not necessary for all designs and brands to require a fully immersive user experience. When you’re working in a more traditional design playground, you can still harness the lessons from above: keep it simple and create a design that truly captures the brand’s personality.

Aidan O’Carroll, a designer and developer at Avalanche Designs in Ireland, points to Ben & Jerry’s website, created by Happy Cog, as a prime example.

“The entire site is laid back,” O’Carroll says. “Even though it is a massive global brand, it still gives the impression of a two-man outfit. I particularly like the subtle reference to the site starting in the clouds and finishing on a farmland with an image of Ben & Jerry, and the about section subconsciously pushing the fact again that they are wholeheartedly involved in every stage of the process, even if they are not.”

O’Carroll has worked on such sites as Kupo Comics, Monaco Cupcakes, and Irish Biz Party, all of which take a more traditional approach to design while capturing each client’s character.

If we’ve learned anything from these three sites, it’s that web designs are about more than profiling a service or product. They’re about telling a story.

What web designs are you falling for lately? Let us know in the comments.

Comments (0)

The latest Dreamweaver CC update delivers learning content available right in the application, Live View and Extract improvements, stability enhancements, bug fixes, and more.

Here’s what you will find in this update:

Learning Content Available Right in Dreamweaver

 

Sharpen your skills with personalized learning content for different experience levels available right inside Dreamweaver CC. The new set of tutorials is presented inside a window and comes with different compelling flavors (visual tutorial, top quality video, step by step tutorials, etc.), so it’s easy for you to learn and gain the knowledge you need to go to the next level in your career.

 

Live View and Extract Improvements

We have made improvements to the Extract and Live View feature in this update so you can now select an image from the Extract panel, then hold and drag it into Live View to bring up the Element Quick View panel for a visual and precise insertion. Here’s a quick demo of this improvement:

 

New Code View Color Themes

One of the features we have introduced in the previous release of Dreamweaver CC was the ability to customize your code editor with a pre-built color themes. In this update, we have added more color themes templates for you to choose from and apply to your code editor.

 

 

Stability and Performance Enhancements

We want you to know that when you provide feedback or comments, we care and listen. In this update, we’ve fixed many issues and implemented enhancement requests that you have  reported. Click here to see a complete list of all the bugs and issues we addressed in this update. Download the latest update of Dreamweaver and let us know what you think.

 

Thanks for your support!

The Dreamweaver Team

 

 

Comments (0)

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.

2. Look for inspiration beyond design.

The world around you is full of inspiration. Next time you’re out and about, take a good hard look at your surroundings. Pay attention to architecture, urban design and patterns in nature and imagine mimicking that on the screen. If you’re stuck, there’s always sites like Behance and ffffound.com that may also help you to see things in new ways.

“Lines” a Behance project by Sebastian Weiss

3. Pay attention to your competitors.

Knowing what’s trending in your industry will help you understand what your competitors are doing well and what they could be doing better. Look at how their components work together and pay attention to what users are saying about the designs—what do they like? What would they like to see differently? You can often get this information by scrolling through social media feeds. By incorporating this feedback into your own designs you can vastly improve your approach without making the same mistakes as your competitors.

4. Never stop educating yourself.

Reading articles, books and tutorials, looking at other people’s designs, and watching demos helps ensure you’re continuously developing and honing your skills. It keeps you ahead of the pack. When a new version of your favorite product comes out, take the time to learn and master the new features. Your designs will thank you for it.

DW Tut

5. Ask a lot of questions.

Every client has a vision, but it takes asking the right questions to fully understand what that vision is. Ask them what they mean when they want something to be “fun” or when they tell you to “go wild.” Ask them about similar projects ahead of time to discover what they like and don’t like about a design. By making things as clear as possible you can ensure you’re meeting their expectations and reflecting their vision in your design.

Becoming a better designer takes work, but every minute you invest into your professional development will translate into more beautiful and practical designs.

Comments (0)

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?

But first, let’s answer a more basic question…

What is flat design anyway?

In simple terms, setting the somewhat confusing Wikipedia definition aside, flat design is simply a design that’s stripped of any sort of impression of the third dimension. The elements are meant to appear as if they’re lying flat on a single surface. Hence the name – flat design.

In practice, this means that all stylistic tastes like shadows, gradients, glow effects, etc. are not particularly flat-design-friendly.

Here are three examples of Behance web design projects rocking the flat design style:

Watlinger

Behance project: “Watingler Agency – Web Design” by Abrar Ahmed

maleo

Behance project: “Maleo – Clean Corporate WordPress Theme” by CreAtive Web Themes

sweet

Behance project: “Colorful Flat UI Web Design” by Cristina Style

 

How flat design happened

Every fashion expert will tell you that trends come back every X years. And flat design is no different – it’s an old trend living a new youth.

The origins of flat design are dated to the 1940s and ’50s by most sources. It’s back then when something called the Swiss Style was born. It was a trend in print design that appears remarkably modern when we look at it with our fresh, 2015 eyes.

(Some examples can be found here.)

The design was heavily based on sans-serif fonts, grid layouts, good content-headline separation, and utter minimalism. Much like the characteristic elements of flat design these days.

Why flat design is here today

The fact that trends like to resurface every X years is one thing, but why right now is the era of flat design?

Looking at the answers given me by the experts, which I’m just about to share, I can see three main reasons:

  • Users becoming more savvy with how the web works.
  • The rise of mobile devices.
  • The new developments in web technologies.

Let’s go through these three one by one, and explain what is likely to follow for flat design in the near future.

Flat design vs. users

Various web interfaces have been with us for quite a while right now. For instance, things like menus, site headers, content areas, web forms, buttons, checkboxes, social media share/update buttons, and etc. People are well aware of what they do and how to work with them.

However, when those elements first appeared, no one knew what they were or how to use them. Setting the fact aside that web design as a whole was in its infancy, there was a need to somehow convey to the user how to work with all that new stuff.

For example, a menu needed to look like something that can be clicked on. An input field needed to have a label saying “input your name here,” and so on. Without that, no one would be able to figure out how to interact with the web.

These days, however, things are different. The more users know, the less we have to suggest them through design or through labels or hints/tips. Users are simply savvy enough to figure things out on their own.

And that’s where flat design comes into play.

In flat design, the minimalist approach allows only for the bare minimum of elements. And while it does rely on the user’s familiarity with certain things quite heavily, it can get away with that because the users of today can simply cope.

This is visible in some of the responses from the experts:

The secret to a flat interface is in its simplicity hidden behind simple shapes and colors of elements (roughly speaking – red for remove, green for download). Users have learned to distinguish between buttons and input elements; they do not need to add glare or artificial volume.

It seems to me that flat design is not a temporary whim of designers, it is a lasting principle and like other design concepts will continue to evolve.

Flat user interfaces are a trend that will stick around for a while; it’s difficult to say what will replace it, but it should be something unique and completely new in its approach. […]

-Sergey Shmidt, Designer at Designmodo (web design blog and WordPress themes store)

Designers have come to recognize that users know how to use digital interfaces even if they don’t mimic real-world interfaces. As a result, design in the digital realm has naturally evolved from skeuomorphic to flat, and will continue to evolve in the same manner.

-Dan Birman, UX Designer at Digital Telepathy (product and UX design company)

Flat design vs. mobile devices

The last big web design trend prior to flat design – called the skeuomorphic design – was doing quite okay right before the rise of mobile devices.

But then, quite suddenly, mobile devices became powerful enough to view the web just like a desktop computer would and also popular enough that almost anyone had a smartphone in their pocket.

Right now, mobile devices have truly taken over the web. It’s reported that for 60 percent of internet users, a mobile device is actually their primary or exclusive device for accessing the web.

This situation meant one thing for web designers – they needed to adapt and find a way to make sure that their creations can be viewed anywhere and on any device.

But that was way easier said than done. There were hundreds of different types of mobile devices, with different specs, different screens and sizes. Skeuomorphic design – with its realistically looking elements – just couldn’t handle that.

That’s when responsive design came along, and with it, the need to simplify everything heavily, but at the same time still make it look attractive. So flat design has become the solution everyone needed.

I think flat design, like most trends, partially came from certain needs. On the one hand, the realism that preceded it was getting a bit stale. But more importantly, mobile devices took off at an alarming rate and web designers, struggling to keep pace, found it incredibly hard to design realist elements into responsive designs. Flat, simple design was much more easy to manipulate for screens of all sizes. From there, usability needs like bigger input fields, larger buttons, or larger and more legible text impacted “flat design” and has made it last even longer.

I would guess flat design is here to stay so long as it best fits the requirements we, as consumers, have for usable, easy-to-consume media. But as technology progresses and flat design begins to feel more stale, we’ll start to see the pendulum swing another direction. I’m not certain what that direction will be, but I’m excited for it.

-Preston D Lee, Graphic Design Blender (helping designers build businesses)

Flat design vs. new web technologies

Lastly, let’s look into what’s been going on with web technologies as a whole and what impact it has on flat design.

Ultimately, the HTML5, CSS3, and JavaScript solutions of today were the final nail in skeuomorphic design’s coffin, and what actually made flat design possible to happen.

With modern developments, it’s now possible to do much more in the source code vs. having to work with image processing tools or building animations manually. So what was previously available only to professionals skilled with tools like Photoshop, can now be achieved through good use of CSS and HTML.

Flat design isn’t a trend – it’s the norm. As web designers, we rely on technology to bring our ideas to life – constraints in tech may have been what pushed us toward skeuomorphism in the days of Web 1.0 and 2.0. Now that CSS and JavaScript are letting us use design in more interactive ways we don’t need to emulate a 3D world, instead we can rely on things like Z-Axis animations to bring depth to our digital designs.

-Cody Iddings, Sr UX Designer at Digital Telepathy

Advances in technology allow us to design in new ways. Photoshop filters, hover states, and complex key-frame animations ruled the web for years. But with the advent of mobile devices, design has become simplified to ensure cross-device compatibility. “Flat” has been a radical response to previous trends. Eventually, we will land somewhere in the middle with design that has a sort of haptic response and nods to the laws of physics.

-MK Cook, UX Designer at Digital Telepathy

What’s next for flat design?

Whether we like it or not, the idea of flat design – the idea itself of making things appear as if they’re laying flat on a single surface – is a trend. And like any trend, it’s sure to make room for other, new things at some point.

However, the general rules that make up flat design are most likely to stay with us for a longer while.

I believe flat design is not just a trend; but part of the evolution of content delivery in its simplest form, which in turn enhances the ability for us to more easily absorb the information. And for this reason, unless a new trend gives way to further improving this perception, I believe flat design (and in a larger spectrum minimalism) will be around for some time.

However, given that traditionally every 5-10 years major changes in design styles give way to new trends, I believe at some point flat design will evolve to another format.

-Payman Taei, Founder of Visme (DIY presentation and infographic online tool)

I don’t see flat design going anywhere for at least a decade, but what you will start to see is people referring to it less; in the same way that responsive design hasn’t gone away, we simply call it design.

It’s inevitable that new ideas, new aesthetics, and new solutions to new problems will continue to emerge. But flat design lends itself so well to the current technical requirements for most websites, that anything new is more likely to develop in tandem with flat design, rather than replacing it.

-Benjie Moss, Webdesigner Depot (web design blog)

In my opinion, flat design will definitely stay with us for a long time. The principle of flat design isn’t as much about the visual aspect, but more about how it works and feels. User interfaces got more complicated over the last 10 years, and flat design (or material design) is just necessary at this point in order to create a good user experience.

Of course, at some point we will start seeing new iterations and designs taking the concept of “flat” to the extreme, and this will also bring new trends and styles, but in the end, the idea of simplicity will prevail and stay basically the same.

-Ionut Neagu, ThemeIsle (WordPress themes and plugins store)

So what will happen with flat design exactly?

Well, exactly is not the right way to think about it, as it’s impossible to predict anything exactly, but there are two likely scenarios we should look into:

  • flat design evolving into a new form,
  • total change and going in an entirely different direction.

The evolution of flat design is the most probable scenario, at least in the nearest couple of years. The way flat design lets the user interact with a website will continue improving, making things even more simplistic and more minimal, but also more intuitive.

This can make various web interfaces more similar to each other, but overall, it’s hard to see this as a downside.

The first time when I saw this new style I was very confused, I was thinking, “Why? Why do we need that? Skeuomorphic design is still so beautiful!” But after a while of studying and “living” with it, I changed my mind and started to understand it…

[…] In my opinion, whatever new design trend will come next, it should inherit the simplicity from flat design. It has to be intuitive, but perhaps it’ll bring back a little touch from skeumorphic design too – maybe a more vibrant color palette and some quiet yet eye-catching visual effects.

-Sergiu Radu, eWebDesign (web design blog and newsletter)

About flat design diminishing to make room for something entirely new, well, predicting what that thing might be is a bit difficult.

However, the most likely scenario is the one that has happened many times in web design’s history already. And that is web design standards going in a whole different direction. This would mean ditching the minimalist approach, two-dimensional interfaces, and the whole flat feel, all to make room for an entirely opposite trend.

I think flat design as a trend will fade away and will be replaced with a new “fad”, but the core principles of flat design will continue to be used. We’ve seen in the past the trends in web design shift from highly glossy interfaces to realistic textured surfaces to basic solid colours, each subsequent trend being a direct opposite of the last. My guess is the next trend we’ll see will ditch the bright hues of flat design in favour of monochromatic colour schemes.

-Chris Spooner, SpoonGraphics (web design blog)

If I were to share my own personal opinion about this, I’d say that flat design is here to stay for the short term (whatever this might be… two to five years maybe). But after that, we will see yet another shift toward something entirely different. Much like it’s been going on for years now.

What do you think? Is flat design a web design standard that’s here to stay? Let us know in the comments.

Comments (0)

Database Design and Management

Cwebpro can design and develop a small business data management solution for you. We will provide professionally crafted entry screens and a database that will grow with your business.

Professional Web Designs

If you need a web site designed or updated contact Matthew at Cwebpro for quality work at a fair price. The Web Creation Zone (Cwebpro) can meet all of your business website design and data management needs.