Getting Nowhere on Job Titles

Last week on ShopTalk, Dave and I spoke with Mandy Michael and Lara Schenck. Mandy had just written the intentionally provocative "Is there any value in people who cannot write JavaScript?" which guided our conversation. Lara is deeply interested in this subject as well, as someone who is a job seeking web worker, but places herself on the spectrum as a non-unicorn.

Part of that discussion was about job titles. If there was a ubiquitously accepted and used job title that meant you were specifically skilled at HTML and CSS, and there was a market for that job title, there probably wouldn't be any problem at all. There isn't though. "Web developer" is too vague. "Front-end developer" maybe used to mean that, but has been largely co-opted by JavaScript.
In fact, you might say that none of us has an exactly perfect job title and the industry at large has trouble agreeing on a set of job titles.
Lara created a repo with the intent to think all this out and discuss it.
If there is already a spectrum between design and backend development, and front-end integrationis that place in between, perhaps front-end development, if we zoon in, is a spectrum as well:

I like the idea of spectrums, but I also agree with a comment by Sarah Drasner where she mentioned that this makes it seem like you can't be good at both. If you're a dot right in the middle in this specrum, you are, for example, not as good at JavaScript as someone on the right.
This could probably be fixed with some different dataviz (perhaps the size of the dot), or, heaven forbid, skill-level bars.
More importantly, if you're really interested in the discussion around all this, Lara has used the issues area to open that up.
Last year, Geoff also started thinking about all our web jobs as a spectrum. We can break up our jobs into parts and map them onto those parts in differnet ways:
See the Pen Web Terminology Matrix by Geoff Graham (@geoffgraham) on CodePen.
See the Pen Web Terminology Venn Diagram by Geoff Graham (@geoffgraham) on CodePen.
That can certainly help us understand our world a little bit, but doesn't quite help with the job titles thing. It's unlikely we'll get people to write job descriptions that include a data visualization of what they are looking for.
Jeff Pelletier took a crack at job titles and narrowed it down to three:

Front-end Implementation (responsive web design, modular/scalable CSS, UI frameworks, living style guides, progressive enhancement & accessibility, animation and front-end performance).
Application Development (JavaScript frameworks, JavaScript preprocessors, code quality, process automation, testing).
Front-end Operations (build tools, deployment, speed: (app, tests, builds, deploys), monitoring errors/logs, and stability).

Although those don't quite feel like titles to me and converting them into something like "Front-end implementation developer" doesn't seem like something that will catch on.
Cody Lindley's Front-End Developer Handbook has a section on job titles. I won't quote it in full, but they are:

Front-End Developer
Front-End Engineer (aka JavaScript Developer or Full-stack JavaScript Developer)
CSS/HTML Developer
Front-End Web Designer
Web/Front-End User Interface (aka UI) Developer/Engineer
Mobile/Tablet Front-End Developer
Front-End SEO Expert
Front-End Accessibility Expert
Front-End Dev. Ops
Front-End Testing/QA

Note the contentious "full stack" title, in which Brad Frost says:
In my experience, “full-stack developers” always translates to “programmers who can do frontend code because they have to and it’s ‘easy’.” It’s never the other way around.
Still, these largely feel pretty good to me. And yet weirdly, almost like there is both too many and too few. As in, while there is good coverage here, but if you are going to cover specialties, you might as well add in performance, copywriting, analytics, and more as well. The more you add, the further away we are to locking things down. Not to mention the harder it becomes when people crossover these disciplines, like they almost always do.
Oh well.

Getting Nowhere on Job Titles is a post from CSS-Tricks
Source: CssTricks

Top 5 Ways Responsive Web Design Benefits Your SEO by @malleeblue

Here are five ways how a responsive web design can result in a more effective SEO strategy for your website.The post Top 5 Ways Responsive Web Design Benefits Your SEO by @malleeblue appeared first on Search Engine Journal.

Strongly Held Opinions, Gone Away

I received a really wonderful question from Bryan Braun the other day during a workshop I was giving at Sparkbox. He asked if, over the years, if there were opinions about web design and integrationI strongly held that I don't anymore.
I really didn't have a great answer at the time, even though surely if I could rewind my brain there would be some embarrassing ones in there.

At the risk of some heavy self-back-patting, this is exactly the reason I try and be pretty open-minded. If you aren't, you end up eating crow. And for what? When you crap on an idea, you sound like a jerk at the time, and likely cause more harm than good. If you end up right, you were still a jerk. If you end up wrong, you were a jerk and a fool.
I like the sentiment the web is a big place. It's a quick way of saying there are no hard and fast right answers in a playground this big with loose rules, diversity of everything, and economic overlords.
I don't want to completely punt on this question though.
I've heard Trent Walton say a number of times that, despite him being all-in on Responsive Web Design now, at first it seemed like a very bad idea to him.
I remember feeling very late to the CSS preprocessing world, because I spent years rolling my eyes at it. I thought it the result of back end nerds sticking their noses into something and bringing programming somewhere that didn't need it. Looking back, it was mostly me being afraid to learn the tools needed to bring it into a workflow.
It's not to find industry-wide holy wars these days, where strongly held opinions duke it over time, and probably end up giving ground to each other in the end.
But what of those internal personal battles? I'd be very interested to hear people's answers on this...
What strongly-help opinion did you used to have about web design and development, but not anymore?

Strongly Held Opinions, Gone Away is a post from CSS-Tricks
Source: CssTricks

Come Learn and Take In Big Ideas at An Event Apart

I'm just back from An Event Apart Seattle, and it was fantastic. High five to y'all I got to run into there. Lots of big moments happen at An Event Apart. Microsoft took the opportunity to announce they are officially working on getting CSS grid into Edge, meaning full on cross browser compatibility for that, coming soon.
Ethan Marcotte was there, and before giving his excellent talk about patterns in design, told us that that very stage was the first time he ever uttered the words "responsive web design." See, An Event Apart has a pretty solid history of being a place where industry changing ideas seed and blossom.
Fortunately for all of us, there are five more shows this year:

Boston, May 15-17
Washington DC, Jul 10-12
Chicago, Aug 28-30
San Francisco, Oct 30-Nov 1
Denver, Dec 11-13

I'll be giving my full-day session in Chicago!

Come Learn and Take In Big Ideas at An Event Apart is a post from CSS-Tricks
Source: CssTricks

Let’s Define Exactly What Atomic CSS is

As Atomic CSS (also known as Functional CSS) has been gaining in popularity, some confusion has occurred about similar related terms. The goal of this article is to clarify this terminology.
There are other projects that use the term Atomic, including Atomic Web Design by Brad Frost. Atomic CSS is a completely separate concept from these.

Let's start by defining Atomic CSS:
Atomic CSS is the approach to CSS architecture that favors small, single-purpose classes with names based on visual function.
There are different ways to write Atomic CSS (see variations below). One example would be this:
.bgr-blue {
background-color: #357edd;
The term "Atomic CSS" was coined by Thierry Koblenz in his foundational article "Challenging CSS Best Practices" in October 2013.
Some people started referring to this approach as "Functional CSS" some time later. Though there have been cases in the past where Functional CSS has been used to describe something else, today the terms Functional CSS and Atomic CSS are used interchangeably.
While Atomic CSS has been the title of an open source project which originated with Thierry’s original article, the term itself applies to the architectural philosophy, not any one particular variation (see below).
Variations of Atomic CSS
Many people write Atomic CSS much like they have always written CSS. It is common to use a preprocessor to generate a library of classes with set variations that define a unit-based design system for spacing, color, typography, etc.
The advantage to this style is that because it is familiar, it has a lower barrier to entry, and is more easily understood by those who are not well-versed in CSS.
The Programmatic approach to Atomic CSS involves using a build tool to automatically generate styles based on what it finds in the HTML.
For example, given this:
<!-- Programmatic Atomic CSS Example -->
<div class="Bgc(#0280ae) C(#fff) P(20px)">
Lorem ipsum
The following CSS would be generated:
.Bgc(#0280ae) { background-color: #0280ae; }
.C(#fff) { color: #fff; }
.P(20px) { padding: 20px; }
This flavor of Atomic CSS uses the syntax of a function call with parameters. As demonstrated by the open source ACSS project, which uses Atomizer to programmatically generate styles, it is no longer necessary to write CSS whatsoever. Stylesheets that are generated during the build process are fully optimized with no unused styles of any sort.
The longhand style favors more readable class names (see Expressive CSS and Solid), while shorthand favors brevity (see Tachyons and Basscss).
/* Shorthand Atomic CSS Examples */

.bg-blue { background-color: #357edd; }
.f1 { font-size: 3rem; }
.ma0 { margin: 0; }

/* Longhand Atomic CSS Examples */

.bgr-blue { background-color: #357edd; }
.background-blue { background-color: #357edd; }
.backgroundcolor-blue { background-color: #357edd; }
.text-h1 { font-size: 3rem; }
.text-3rem { font-size: 3rem; }
.text-huge { font-size: 3rem; }
.fontsize-1 { font-size: 3rem; }
.marg-0 { margin: 0; }
.margin-0 { margin: 0; }

/* Programmatic Shorthand */

Bgc(#357edd) { background-color: #357edd; }

/* Programmatic Longhand */

bgrBlue(#357edd) { background-color: #357edd; }
backgroundBlue(#357edd) { background-color: #357edd; }
backgroundColorBlue(#357edd) { background-color: #357edd; }
Related Terms
Utility Classes
Utility classes (also referred to as Helper Classes) are easily understood, single function classes that help with common styling patterns (e.g. .clearfix, .hidden).
Many CSS architectures rely on utility classes (e.g. grids, spacing, typography) but do not necessarily fully embrace the concept of Atomic CSS.
Immutable CSS
An aspect of Atomic/Functional CSS where utility classes are never to be modified, thus producing highly dependable results.
Immutability plays an essential role in the proper execution of Atomic CSS architecture. Without it, you risk this:
.black {color:navy;}
Atomic CSS is about shifting complexity away from stylesheets and into HTML. When design changes occur in a Atomic CSS project, it is best if you have well-structured HTML templates so that, for example, you can use an editing tool to quickly change Bgc(colorOne) to Bgc(colorTwo) wherever you may need to.
Breakpoint Prefixing
This technique is a way to allow utility classes to override styles at different breakpoints to make implementation of responsive web design simple and efficient.
/* Examples of breakpoint prefixing */

.grid-12 /* Full width by default */
.m-grid-6 /* 2 column at medium screen sizes */
.l-grid-4 /* 3 column for large screen sizes */
Getting Started
Below is a list of places you can go to begin, depending on which variation you prefer.

For Atomic Aces: Atomic CSS Quick Start or What is Atomic CSS (video)
For Library Likers: Intro to Tachyons (video)
For Daring Designers: Cooking with Design Systems
For Refactoring Rebels: Full re-write in 10 days with Tachyons and Functional CSS (case study)
For Reactive Reactors: Tachyons and React and CXS

Additionally, here are some foundational articles that are worth reading:

Challenging CSS Best Practices
CSS and Scalability
Building and shipping functional CSS
Atomic CSS FAQ

"In The Wild"
Atomic CSS has gained in popularity particularly among those who use it for rapid prototyping and, on the other end of the spectrum, for large scale ongoing front end projects.

Solid by Buzzfeed
Shed by TED
Marvel App Styleguide
Tachyons Gallery

Thank you to Thierry Koblenz for his feedback on this article and hard work over the years!

Let’s Define Exactly What Atomic CSS is is a post from CSS-Tricks
Source: CssTricks

Responsive Images in WordPress with Cloudinary, Part 1

If you're reading this, you’re probably already familiar with responsive images. Even so, it may be helpful to have a little background. (Then we'll get to the WordPress part, and how to make them even better with Cloudinary.) For most of the Web's existence, any time you wanted to include an image on a web page, you would create markup that looked like this:
<img src="/path/to/my/image.jpg" alt="a very nice image">
In this example, the <img> element references a single image file named `image.jpg` located on a server at `/path/to/my`. This markup is straightforward in that it tells the browser to download and render a specific image file, referenced by the src element, onto the web page.
This arrangement was fine until 2010, when Ethan Marcotte published his seminal article, Responsive Web Design, which popularized the technique of using Cascading Style Sheet media queries to modify the layout of web pages to fit whatever size device a person is using. Responsive web design also increased interest in optimizing the performance of websites based on screen size. This focus made clear just how big a pain point images are for performance, accounting for most of the bytes included on each web page. With responsive design, developers began to send images that look beautiful on large desktop displays to all users, which resulted in sending extra bytes to smaller mobile devices, making the mobile browsing experience much slower than necessary.

An intrepid group of web developers, known as the Responsive Issues Community Group (RICG), set out to fix this problem by introducing new HTML so that developers could identify different image sources for a web page based on contextual information like screen size. Here’s an example of one of the new markup patterns:
<img src="small.jpg"
srcset="large.jpg 1024w, medium.jpg 640w, small.jpg 320w"
sizes="(min-width: 36em) 33.3vw, 100vw"
alt="A rad wolf">
In this example, the <img> markup now includes two new attributes: a srcset, which contains a list of image files and their corresponding pixel widths, and sizes, which gives the browser an estimate of the image’s intended layout size, depending on certain media query conditions. The src attribute is included to serve as a fallback for older browsers that don't support the new srcset and sizes attributes.

This new markup allows browsers to determine and download the image that’s most appropriate, saving bytes (and time) for users. For a deeper dive into this and other responsive image markup patterns, I strongly recommend reading Jason Grigsby’s Responsive Images 101 series.
Responsive Images in WordPress
At the end of 2015, in partnership with members of the RICG, WordPress shipped version 4.4, which included native support for responsive images. WordPress 4.4+ automatically generates srcset and sizes attributes for images included in a post or page. The WordPress implementation uses already-available image resizing functionality to accomplish this task. Before version 4.4, WordPress already created several smaller versions of any image uploaded to your media library. Since version 4.4, WordPress uses those additional sizes to create srcset attributes so that people visiting your site can benefit by downloading an image file that is no larger than what they need.
This implementation works well out of the box but has a few limitations. For instance, WordPress creates image size variations at the time the original is uploaded, which means that only image sizes that are defined at that point will be available in srcset attributes. In addition, image processing can overtax the resources available on many shared hosting plans, so WordPress has to be conservative about how many variations of each image it creates by default.
Ideally, you could dynamically create image sizes when they're needed for your layouts and offload the processing to an external image service. Fortunately, services like Cloudinary exist, which do exactly this. I've been impressed with the work Cloudinary has been doing in the image management space, so I was wanted to see how I could use the service to extend the default responsive image implementation in WordPress.
Using Cloudinary to Extend WordPress
Cloudinary provides tools to perform several image transformations besides simple resizing, and it has published its own WordPress plug-in to the plug‑in repository. The plug‑in doesn't yet support responsive images out of the box, so I wanted to see if I could make a slimmed-down plug‑in using its Image Upload application programming interface. My goal was to sync images from my media library to Cloudinary's service and have Cloudinary automatically create the image sizes needed to serve responsive images from its content delivery network (CDN).
I've created a demo plug‑in, which I have published to GitHub, so that you can check it out. In a follow-up article, I'll explain more of the technical details and design decisions of the plug‑in, but for now I’ll describe what the plug‑in does at a high level.

First, when you add an image to your WordPress media library, WordPress uses Cloudinary's PHP integration library to upload that image to Cloudinary and task its service with creating alternative image sizes to be used in the srcset attribute. Where this gets interesting is that Cloudinary has developed a unique responsive image breakpoint solution that automatically calculates the optimal image sizes needed based on the content of your image.

Once the image is uploaded to Cloudinary, the service returns data associated with the newly created image sizes to your WordPress site. By making use of WordPress filters, we can use that data to build srcset attributes for our images that reference the files from the Cloudinary CDN rather than locally hosted images.
By combining the simplicity of the WordPress native responsive image functionality with the image management tools that Cloudinary provides, you can manage your content exactly how you want while providing visitors to you site with images that are automatically optimized for the capabilities of their device, without having to worry about each image added to your site individually. In my next article, I'll dive into the specifics of the code I developed for my plug‑in. For now, I hope you can see how powerful combining WordPress with services like Cloudinary can be.

Responsive Images in WordPress with Cloudinary, Part 1 is a post from CSS-Tricks
Source: CssTricks

Powerful SEO Trends for 2017 To Boost Your Search Ranking

If you think fashion and technology change too frequently for people to keep up, the same is true with search engine optimization (SEO). Standards in the field of SEO get updated practically every year, and this year is no different. In this article, we will discuss SEO trends for 2017 that will set the tone for search, and bring websites and companies to a whole new SEO ballgame.
Why Should You Update Your SEO Strategies Regularly?
This question is really a no-brainer, but unfortunately a lot of companies fall prey to one fallacy: that their website will run along with the times even without updating it so much. This mindset couldn’t be farther from the truth!

Here are some reasons why you should keep up with updates on SEO strategies:
Google is a fickle-minded but extremely powerful online giant.
If you haven’t recognized the power of Google, then you’re probably enjoying the bottom pit of search results now. Staying afloat online includes – or rather, requires – configuring your website to the latest SEO standards set by Google’s algorithm.
Google recognizes changes in public preferences.
Animated GIFs and scrolling marquees may be the most awesome things in the Internet during the ‘90s, but web design has changed a lot since then. It’s not because of the website developers; rather, it’s due to the ever-changing preference of people who view websites. Google regularly studies the online behavior of its users, and it’s definitely your loss if you cannot keep up with what the people want.
Following the latest SEO techniques makes your site look good.
Aside from the higher likelihood of appearing at the top of search results, using updated SEO strategies naturally improves the user experience. This stems from the fact that Google puts premium on any website with an amazing user interface.
You can maximize the chicken-and-egg benefits of social media.
When your site has an effective and updated SEO strategy, there’s a big chance that people will discover your pages and share them on social media. As a result, more people get to realize the existence of your website and visit your pages more often. When Google sees this, your search ranking improves naturally, which makes more people discover your pages and share them on social media (and the loop continues).
You have better chances of drowning the competition.
Simply put, using updated strategies for SEO increases your site’s chances of appearing higher in search engine results pages (SERPs) than your competitors. That’s definitely going to help your leads and sales!
SEO Trends for 2017 You Need To Follow

Eager to discover the new things in SEO today? Here are the most effective and powerful SEO trends for 2017 that will not only blow away the competition but will also make your followers come back for more:
Mobile-first approach

Google has been championing the use of mobile devices for years, and has already implemented several SEO standards to make sure that everyone takes notice of the power of mobiles.
Here are some mobile SEO strategies that will probably hit it big in 2017:

Responsive web design: This cannot be stressed enough. In fact, we at WebDesignerHub have written about responsive design several times already. Google has configured its search algorithm to favor websites with mobile-friendly design, so this item should be enough to convince you already!
Accelerated Mobile Pages: AMP may look like an annoying update to the rich features of Google, and some website owners fear that this may encourage online users not to visit the source websites anymore. However, AMP has proven itself to be a valuable asset for this new mobile-first mindset, especially on the viewpoint of user experience. So whether you like it or not, AMP may actually be one of the highly useful SEO trends for 2017.
Progressive Web App: A relatively new but already buzz-worthy term in the industry, PWA essentially puts your website on a mobile device’s home screen. This feature makes your site load faster on mobile screens, accessible even with poor network connection, and more immersive in terms of user experience. Note that PWA is possible only for secure websites (HTTPS).

Use of schema and creation of rich answers
Back in the day, creating the right keywords was all the rage in the world of SEO. In this generation of highly demanding online search users, the game is played quite differently.
For starters, people generally like to see answers to their search queries on the search results page itself. Google has been implementing this to great effect through the use of schema markup (or structured data markup). As a result, when you search for “most influential people of 2016”, Google will display a special box that contains the answers that you might be looking for.

This instant answer appearing at the top of the search results page is called a “rich answer”, while some SEO experts call it “featured snippet”. Whatever it’s called, the feature makes use of schema markup to allow search bots to identify specific rich snippets in your pages and use them in search results.
The quickest way to do this is to use Google’s own Structured Data Markup Helper. This amazing tool helps you come up with the most appropriate schema markup for your site. All you need to do is enter the URL of your page or site, and choose the type of data that you want to markup.
If this is the first time that you’re going to encounter structured data markup, here are a few tips to help you get started on one of the best SEO trends for 2017:

Read up on It’s time to learn new strategies, and this one will really benefit your site in so many ways. The website has a Getting Started page to ease you into the implementation of markup on your site.
Review your site for potential schema markup: There’s a lot that you can cover in terms of structured data markup, and so you need to assess your entire website to determine which markup will work best for you.
Use Google’s Structured Data Testing Tool: This online feature allows you to check if you have correctly implemented your markup.

Voice search
Here’s another one that seemed like a fad when it was launched, but turned out to be a robust and extremely helpful piece of online tech. In fact, it’s already poised to be one of the most powerful SEO trends for 2017 and even beyond.
Aside from bringing a fantastic and much better user experience (“look, Ma, no hands!”), voice search is fast for people who have difficulty typing on small screens, and convenient for those who have limited hand use.
This feature has been successful in native English speakers, but is still in integrationto welcome more languages and verbal nuances. Search engines are also being designed to make voice search richer and a lot easier than before. The same is true for device-based voice systems such as Siri and Cortana.
Here are some SEO techniques to configure your website for voice search:

Use structured data: Voice search relies on schema markup to make the search results more customized and accurate.
Use long tail keywords: Most people talk long sentences in voice search, compared to the shorter search queries when they use the keyboard or keypad. Make sure that you optimize your pages for long tail keywords that are also conversational in tone.
Fashion your content like a FAQ: Voice search users usually ask complete questions. Let the search engines pick your site up as one of the primary results by creating a “frequently asked questions” section that displays some of the most common questions about the topic.

Local search

Aside from the recent focus on mobile, one of the most popular SEO trends for 2017 is going local. A lot of people use online search to find information about local businesses, say an office address, a phone number, or a retail store with a fantastic view of the local beachfront.
If your website is designed for your local store or business, configuring your site for local search is the best SEO strategy that you need to implement now.
Probably the best motivation for you at this point to engage in local search is something called Google 3-Pack. This Google search results page feature lists down the top three answers to a location-based query. Getting listed on this three-pack list will significantly boost your site visits and customer queries.

The following local SEO tips can help your location-based website land better chances of getting into the top of local search results:

Use Google My Business: Your first order of business should be to sign up for this awesome Google tool that lets you submit information about your business – operating hours, phone number, and address – so that online search users can find you easily.
Use local schema: Yep, there’s that word again. Some of the markup tags that you can use include the following: address, postal code, telephone, reviews, and event.
Add your business to online directories: Yelp and other similar sites can help you get discovered by online users and search bots.

In spite of the changes in search algorithms – the details of which are generally unknown – your website should be able to ride with the updates and not get left in the dust. By starting with these powerful SEO trends for 2017, your site should be on its way to a significantly better search rank this year.
The post Powerful SEO Trends for 2017 To Boost Your Search Ranking appeared first on Web Designer Hub.

Should You Switch From A Responsive Website to an App?

People who aspire to boost the success of their businesses need to stay on top of technological trends as well as the industry in which they operate in. In today’s generation of mobile users with short attention spans, it’s important to let people take notice of your company through their tablets and handhelds.
The question for many business owners who want to capture the ever-lucrative mobile market is this: Should I turn my business responsive website into an app?
Responsive Website to an App describes an app as “a self-contained program or piece of software designed to fulfill a particular purpose.” An app is basically a program tailored for a particular service, which a traditional website may not be able to do.
Although it is believed by most people in business that developing their own app is a way to stay on top of everyone else, this may not be the exact solution to building your business in your market.
Websites and apps serve different purposes. While apps work to provide one particular purpose, websites deliver more than one function in terms of basic information about the business, its roots, range of services, store location, and more.
In other words, when it comes to providing quality service for your clients, you may be better off having a responsive website than developing an app.
Why Switching to an App May Be Irrelevant
While apps are useful in one way or another, it may not be what your target audience is looking for. Apps are only useful in two scenarios:
Your business is a recognizable brand
Pepsi, for example, developed an app wherein its users can access rewards upon purchase of its products. The app serves this single purpose and it is not a condensed mobile version of its website.
The app in question is the core of your business
Snapchat’s function of creating Stories from pictures and videos that disappear in 24 hours is a service that is available on the app alone and not anywhere else. Snapchat is basically a business in an app.
Do not be blinded by the success of such big names to the point where you think you need to conform in order to achieve that level of success. Unless your app has an original function (like Snapchat or Instagram) or your business has considerable recognition (like Facebook or YouTube), it is likely that your app is not going to do too well in the ranks of the app leagues.
The Volatility and Temporariness of Mobile Apps
About one-third of smartphone users download apps and most smartphone users use 6-10 apps on their phones. The average holding rate of an iOS app on a smart phone is 3.2% 30 days after download. This means that only 3.2% of people who download your app will keep it on their phones a month later.
Unless your app is extremely useful to your target clients more than the competition, expect your app to be forgotten by your desired market.

Why You Should Invest in Responsive Web Design Instead
When it comes to looking for business services, people usually go to their browsers instead of the App store or Google Play. That is why investing in responsive web design reaps more benefits over developing an app. It makes you searchable on the Internet with search engines listing your business site as one of the choices for search users to click on.
Apart from that, a responsive web site provides your clients with high quality user service for all devices. This allows easy access and functionality for the user, regardless of what mobile device is in use.
Final Word
Although it may appear that moving from a responsive website to an app for your business would be a good idea, maintaining a responsive or mobile-friendly website may bring you more benefits and improve brand recognition in the long run.
The post Should You Switch From A Responsive Website to an App? appeared first on Web Designer Hub.

Further Thoughts About the Progressive Enhancement Discussion

My previous post sparked a lot of response in the comments, on Twitter, from Aaron Gustafson and Luke Whitehouse. Those responses have helped me refine my thoughts and reconsider my tone, so I want to take another stab: a less-combative approach; more clearly walking through my thought process, while dispensing with the too-clever-by-half LSAT Game stuff that Adrian Roselli fairly called out as sloppy; and trying to be a little less insufferable. You should still read that one first for context.
On Tone and Good Faith
A few initial thoughts.
In response to my post, Chip Cullen tweeted:
RE that article railing against PE: comes at a integrationmindset rooted in compassion with active disdain— Chip Cullen (@chipcullen) December 5, 2016

I'd say intellectual-gotcha glee more than active disdain, but point taken.
Read Aaron's posts about egalitarianism and accessibility (and his response to my post); he is thoughtful and compassionate. He wants to make the web and the world better. Read this, um, strident Brad Frost post — the stridency is rooted in fierce empathy. I also realize many of these folks are a big reason for indispensable parts of the modern web: web standards, responsive web design, atomic design, accessibility.
I stand by my thinking, as we'll see, but not because I disdain Aaron or anyone else. I shouldn't take my tone in that direction, either. In this post I'll use the term "mega-PEer" instead of "hard-liner," which I hope is more neutral. Another part of changing tone is keeping perspective about the relatively trivial thing I'm actually trying to do: prove an intellectual point to help explain a discussion logjam. As many have pointed out, there are definitely more important things to be fighting for and about these days.
Also, while I was not speaking officially for Viget (we're encouraged to share our own ideas without always seeking consensus), I should have emphasized how much Viget cares about accessibility (as do I), and that I wasn't saying Viget devs ignore progressive enhancement.
It's About the Discussion, Not the Approach
The purpose of my post was not to assess progressive enhancement as an approach to web development. (Hence my not-a-dev-disclaimer.) And yes, PE is undeniably a practical approach to web development.
The purpose was to offer an explanation for the PE discussion's dynamic: how it's highly combustible and seems to go around in frustrating circles.
Here's my rephrased theory:
Mega-PEers frequently say they aren't rigid. As Aaron writes in his response: "We ... all believe that the right technical choices for a project depend specifically on the purpose and goals of that specific project. In other words it depends."Yet mega-PEers' behavior can contradict this self-image: For example, they sometimes strongly call out developers who simply mention ideas (particularly about JavaScript) that mega-PEers disagree with.In these cases, folks are actually thinking and talking in moral terms, but don't always realize or acknowledge that. They believe they are talking in it-depends, pragmatic ways.This causes the discussion to go in circles.
I'm not saying progressive enhancement is inherently moral or immoral. (Believe it or not, I wasn't trying to get that philosophical.) I'm not saying mega-PEers wrote a moral philosophy on a parchment scroll 13 years ago and recite it every morning, hand on heart. I'm saying it's important to recognize there's a strong moral undercurrent to the PE discussion.
Why It's Important to Talk About Morality
Why does it matter if PE has a moral foundation, or if PE is used in part to achieve moral goals? Why am I risking such wrath and treading into such murky waters? Am I just a nihilist, lacking morals or compassion, playing lazy intellectual games for kicks and clicks?
It matters because a moral foundation, even a compassionate one, can be used to silence and shame.
It matters because when your argument is heavily a moral one, it makes people who hold different views not simply intellectual adversaries — it makes them immoral. Not "your argument is flawed," but "you're a bad person." Which makes it impossible for them to argue with you in a fair way.
It matters because moral shaming is a scorched-earth affair: When you shame people who also believe in caring about people, you’re undermining their compassion and their potential contributions to users and to the world.
And I know this is fraught, but my observation is that some PEers — who collectively mean so well, and believe in everything they’re fighting for, and are good people for fighting for what they believe in — are doing all of this to their peers.
You can see this behavior in Nolan Lawson's post, when he describes the response to a conference talk he gave:
"When I showed this slide, all hell broke loose:

Lawson continues: "The condemnation was as swift as it was vocal. Many prominent figures in the web community ... felt compelled not only to disagree with me, but to disagree loudly and publicly. Subtweets and dot-replies ran rampant. As one commentator put it, ‘you’d swear you had killed a baby panda the way some people react.'"
You can see similar behavior in another recent PE flare-up. Alex Russell literally said "shrug" about some PE ideas, and Jeremy Keith responded like this:

This does not sound like an "it depends" mindset to me. (Saying "JK it depends" after the fact doesn't count.)
Rather, someone shows a conference presentation slide, and the reaction's implication is you shouldn't say that because your idea is morally bad. Someone tweets a shrug, and the reaction's implication is what you said is morally bad, and you don't care about people.
I'm not saying people are doing this intentionally, or without the best of intentions. I'm not saying everyone I quoted is doing it. But it is happening. Many responses to my post have certainly been in this vein.
Of course there are times when it's appropriate to use morals to shame. But if you're going to do it, you should take care (a) that the person you're shaming doesn't also have the same or an equally valid moral foundation, and (b) that your moral ideas are thoroughly considered.
Is It Really About Morals?
@SaraSoueidan so wouldn't want to write off such an article, even if it shows a lack of understanding. Knowing our audience and all that— Father Smithmas 🌈🎄 (@rachsmithtweets) December 5, 2016

But back up: Do morals really play as strong a part as I claim?
Well, consider the alternative: that practical considerations are behind this behavior.
A primary practical reason given for PE is it accounts for the ~1% of visits/page loads when JavaScript doesn't run, which could happen for voluntary (user doesn't have JS) or non-voluntary (JS fail, rando site fail) reasons. This affects a random sampling of page loads — it's not, say, a group of users with disabilities, so isn't an issue of equal access.
In his response, Aaron offers other practical reasons for taking a PE approach: reliability, reach, integrationcosts, general (non-a11y-related) usability.
Could any of these explain the strong reactions we see?
Take the 1% failure consideration. There are many contexts where there's an inherent interest in addressing the 1% failures or avoiding them in the first place: government sites, community organization sites, .edus. (I should have been clearer in the first post that I recognize these contexts exist.) But in many other contexts (business or consumer software, entertainment, advertising), addressing the 1% is just a business decision for a given site, right?
As for the other practical considerations, do you think the prospect of Random Business X increasing its customer base is what's motivating this?
I don't.
So why do PE discussions turn out this way?
The answer I landed on: There has to be a moral, philosophical component to it. Nothing else could inspire such passionate reactions.
Indeed, as I showed in my first post, you can see moral concerns suffusing PEers' writing:
"Let’s accept that network connections are unevenly distributed. Let’s also accept that browser features are unevenly distributed. Pretending that millions of Opera Mini users don’t exist isn’t a viable strategy. They too are people who want to communicate, to access information, to be empowered, and to love." — Jeremy Keith“The minute we start giving the middle finger to these other platforms, devices and browsers is the minute where the concept of The Web starts to erode. Because now it’s not about universal access to information, knowledge and interactivity. It’s about catering to the best of breed and leaving everyone else in the cold.” — Brad Frost
So it doesn't take a tortured LSAT Game thought exercise to say that when Jeremy Keith says this ...
@slightlylate Yeah, fuck those Opera Mini users. Right, @brucel?— Jeremy Keith (@adactio) June 4, 2016

... He's probably not talking about lower integrationcosts.
Moving the Discussion Forward
By all means, let's propose new moral causes and ideas. But when we do, let's apply more nuance and rigor.
Be mindful of conflating practical considerations (performance, reliability, business opportunity) with moral ones (accessibility), "it depends" with "it's morally necessary." Be mindful of claiming ownership of a broadly definable ethos like "caring about people is good." Be mindful of conflating existing, vetted moral ideas (accessibility, net neutrality, right to internet access) with other, loosely articulated ones. When proposing the latter, unpack the ideas; follow the logic through to its ends, see if it holds up. Let others test and question the logic, as I did (albeit harshly) in my first post. That process is what gave net neutrality and other causes their strong, lasting foundations.
A couple of Aaron's other articles illustrate the often-subtle difference between "it depends" and "it's morally necessary."
In "Developing Dependency Awareness," he writes: "If you don’t consider the possibility a given dependency might not be met, you run the risk of frustrating your users. You might even drive them into the arms of your competition. So be aware of dependencies. Address them proactively." (Emphasis added.)
This is a pragmatic framing: dependencies are a business risk, not a moral one, so ultimately up to a given site's creator. He still invokes his overarching moral goal — sites should be "usable by the greatest number of people in the widest variety of scenarios" — without implying that falling short of that goal causes moral harm. That's truly an "it depends" mindset. (And of course, certain contexts, e.g. a government site, can change the it-depends equation.)
Compare that to "Progressive Misconceptions," where Aaron writes: "The progressive enhancement camp needs to concede that all JavaScript is not evil, or even bad — JavaScript can be a force for good and it’s got really solid support. The JavaScript camp needs to concede that ... we can never be absolutely guaranteed our JavaScript programs will run." (Emphasis added.)
Here we're back to unspoken moral territory. Aaron's not really asking the JS camp to concede that JS may not run. They readily concede that. He's asking them to concede that this risk matters in more than an it-depends way.
In "Progressive Misconceptions," as in his response to my post, Aaron is being very nice and trying hard to bridge the gap. But that gap will be unbridgeable as long as "it depends" and "it's morally necessary" are so casually interchanged. Aaron's other, more pragmatic words point the way forward.

Source: VigetInspire

The New Playground for the Web: Foundation

These days, the use of tablets and smart phones has become so prevalent that it’s hard to believe some people still used a dial-up modem 10 years ago (*shudders with horror). But despite all of the awesomeness that is now literally at our fingertips, the increasing use of smart devices has placed a div in the road to DrupalCoin Blockchain Web Design and integrationgreatness: designing and developing websites and applications for more than just a PC.Read more