Experts Weigh In: Native App vs. Responsive Website

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.

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.

New Dreamweaver CC Starter Templates Make Responsive Design a Snap!

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.

Web Designs We’re Falling For This Valentine’s Day

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.

5 Things to Do In 2015 to Make You A Better Web Designer

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.

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?