Category Archive for: interactive

rfp-robotRFP ROBOT: Website Request for Proposal Generator

The time has come for a new website (or website redesign), which means you need to write a website request for proposal or web RFP. A Google search produces a few examples, but they vary wildly and don’t seem to speak really to your goals for developing or redesigning a new website. You need to write a website RFP that will clearly articulate your needs and generate responses from the best website designers and developers out there. But how?

Have no fear, RFP Robot is here. He will walk you through a step-by-step process to help you work through the details of your project and create a PDF formatted website design RFP that will provide the information vendors need to write an accurate bid. RFP Robot will tell you what info you should include, point out pitfalls, and give examples.


To Meet or Not to Meet…That is the Question

One of the most frequent dilemmas I experience as a Digital Project Manager (DPM) is whether something warrants having a meeting…and if it does, who do I invite? Nobody likes having too many meetings, especially if they aren’t valuable, but we also don’t want to have epic Slack or Basecamp threads on one topic that could have been easily resolved with a quick meeting. That balancing act is tricky, but it’s important. When you find the right balance and schedule meetings for your team only when they are needed, you will likely see a couple of benefits. First, there will be a higher level of engagement within the meetings and second, the team may experience a positive morale boost given they are able to better focus on their work. Here are four things I consider when deciding whether to schedule a meeting or not, and four things I consider when…

Read More →

Creating a Star to Heart Animation with SVG and Vanilla JavaScript

In my previous article, I’ve shown how to smoothly transition from one state to another using vanilla JavaScript. Make sure you check that one out first because I’ll be referencing some things I explained there in a lot of detail, like demos given as examples, formulas for various timing functions or how not to reverse the timing function when going back from the final state of a transition to the initial one. The last example showcased making the shape of a mouth to go from sad to glad by changing the d attribute of the path we used to draw this mouth. Manipulating the path data can be taken to the next level to give us more interesting results, like a star morphing into a heart. The star to heart animation we’ll be coding. The idea Both are made out of five cubic Bézier curves. The interactive demo below shows…

Read More →

XR: VR, AR, MR—What's the Difference?

What is XR? Extended Reality (XR) refers to all real-and-virtual environments generated by computer graphics and wearables. The ‘X’ in XR is simply a variable that can stand for any letter. XR is the umbrella category that covers all the various forms of computer-altered reality, including: Augmented Reality (AR), Mixed Reality (MR), and Virtual Reality (VR). Virtual Reality For ease, let’s start with a topic many of us are already familiar with—Virtual Reality (VR). VR encompasses all virtually immersive experiences. These could be created using purely real-world content (360 Video), purely synthetic content (Computer Generated), or a hybrid of both. This medium requires the use of a Head-Mounted Device (HMD) like the Oculus Rift, HTC Vive, or Google Cardboard. VR has its own spectrum in and of itself. On one end you have WebVR, the simplest and most accessible form, and on the other you have Fully-Immersive VR, like Multi-sensory…

Read More →

Emulating CSS Timing Functions with JavaScript

CSS animations and transitions are great! However, while recently toying with an idea, I got really frustrated with the fact that gradients are only animatable in Edge (and IE 10+). Yes, we can do all sorts of tricks with background-position, background-size, background-blend-mode or even opacity and transform on a pseudo-element/ child, but sometimes these are just not enough. Not to mention that we run into similar problems when wanting to animate SVG attributes without a CSS correspondent. Using a lot of examples, this article is going to explain how to smoothly go from one state to another in a similar fashion to that of common CSS timing functions using just a little bit of JavaScript, without having to rely on a library, so without including a lot of complicated and unnecessary code that may become a big burden in the future. This is not how the CSS timing functions work.…

Read More →

Senior Drupal Web Developer – Interactive Strategies – United States

You’ve worked with Drupal or can quickly be taught. Our developers are not only responsible for writing and testing clean, efficient code;…From Interactive Strategies – Mon, 16 Oct 2017 20:58:50 GMT – View all United States jobs Source: http://rss.indeed.com/rss?q=Drupal+Developer

A Bit on Buttons

1 The other day we published an article with a bonafide CSS trick where an element with a double border could look like a pause icon, and morph nicely into a CSS triangle looking like a play icon. It was originally published with a <div> being the demo element, which was a total accessibility flub on our part, as something intended to be interacted with like this is really a <button>. It also included a demo using the checkbox hack to toggle the state of the button. That changes the keyboard interaction from a “return” click to a “space bar” toggle, but more importantly should have had a :focus state to indicate the button (actually a label) was interactive at all. Both have been fixed. 2 Adam Silver has an interesting post where the title does a good job of setting up the issue: But sometimes links look like buttons…

Read More →

You can get pretty far in making a slider with just HTML and CSS

A “slider”, as in, a bunch of boxes set in a row that you can navigate between. You know what a slider is. There are loads of features you may want in a slider. Just as one example, you might want the slider to be swiped or scrolled. Or, you might not want that, and to have the slider only respond to click or tappable buttons that navigate to slides. Or you might want both. Or you might want to combine all that with autoplay. I’m gonna go ahead and say that sliders are complicated enough of a UI component that it’s use JavaScript territory. Flickity being a fine example. I’d also say that you can get pretty far with a nice looking functional slider with HTML and CSS alone. Starting that way makes the JavaScript easier and, dare I say, a decent example of progressive enhancement. Let’s consider the…

Read More →

The Death of American Football

I won’t lie: I’m happy to see the decrease in football across the United States. In fact, the decline has been large enough to have some high school teams disband their football sports programs. That’s a good thing. I don’t have anything specifically against American Football, itself… rather, I do have a problem with the obvious link to brain disease associated with repeated hits to the head (and brain). Good riddance. That’s just sad because the results are catastrophic. The risks of football have never been more apparent. This summer, researchers at Boston University said they’d found evidence of a brain disease linked to repeated head blows in nearly all of the 202 former football players they studied. The athletes whose brains were donated to the study had played football in the National Football League, college and even high school. And, of course, the NFL is trying to “find ways”…

Read More →

Low Volume Sourcing Techniques

Low volume manufacturing can be a logistical nightmare. You might think that vendors who could help you simply won’t because you don’t represent a significant quantity of work. You might also think that you’re doing something incredibly brainy and only YOU can tackle the challenge and ensure quality. To a degree both of these are valuable and tempering thoughts. But what these thoughts often mean is that you’ve started to think about sourcing towards the tail-end of a project. These thoughts actually represent a totalitarian go-it-alone-until-it’s-perfect-in-my-eyes approach which is consequently 100% ignorant of vendor capabilities and appetite. The reality, as i’ve seen it, is that strong vendor relationships underpin success. I look at manufacturing sprints as crucial to the design and engineering process, even, if for no other reason, it gets me or another engineer on a real phone with a real person talking about real tangible things. It helps…

Read More →

Why Connecting Hardware with the Web is So Neat

We just wrapped up development on Lightwalk, an interactive art installation living at Abilene Christian University in Abilene, Texas. For a number of reasons, this has been one of the most interesting projects I’ve ever worked on. There is the obvious wow factor of the installation itself, but we also developed a whole suite of dev tools running behind the scenes that not only keep the installation running, but also enable engagement from ACU students in multiple ways. It’s this tie between hardware and software that makes the project truly shine, it’s taking art and making it sm-art, it’s the internet of things but it’s actually interesting, and it’s what I’m going to be talking about today. So what are “dev tools” anyway? Short for “developer tools”, the system we built to power the Lightwalk installation provides a couple of critical services: Allow students to choose the effects and colors…

Read More →

Making Interactive Art

This summer, we built an interactive art installation in the middle of a college campus — a journey designing, manufacturing, and installing Abilene Christian University’s Lightwalk. Now that it’s complete, and since the opportunity came by way of sharing knowledge, I thought I would do the same here and pause to reflect on our process and lessons learned along the way. Vision The vision for the Lightwalk installation at Abilene was nearly two years in the making when we first had a conversation with their team. In that time, a good amount of consideration had already been given to various aspects of the installation, including a concerted effort from Abilene to prototype their vision and actually bury it in the ground. We knew the installation would be located below-grade on the East side of a jagged concrete path and consist of many “reeds” or light poles that would illuminate. The…

Read More →

Instagram Stories Can Now Have Interactive Polls by @MattGSouthern

Instagram has added a new feature which will let users ask questions and have their audience vote on the answer.The post Instagram Stories Can Now Have Interactive Polls by @MattGSouthern appeared first on Search Engine Journal. Source: https://www.searchenginejournal.com/feed/

Benefits of Sliders and How To Use Them Correctly in Web Design

In web design, sliders have become effective tools for inserting slideshows on pages. To make a page look more organized – especially those with a large number of photos – sliders can continuously run or play the series of photos without the need to click anything on the part of the site visitor. This website design tool helps to create an organized and more interactive page. This early, let’s get one thing clear: sliders are not recommended for all types of websites. The best types of websites that sliders can be applied to are those that would like to show specific locations or features of an area – say, a real estate business, a hotel, or a vacation hotspot. It’s also amazing to see in websites that need to show variants of a given product, especially if you want to show different colors and sizes of a given design. Since…

Read More →

Drupal Commerce 2.0 Wisdom from Acro Media

If you’ve been following the Acro Media blog, you probably know that the digital agency (and Acquia partner), based in Kelowna, BC, Canada, has a special interest in Drupal Commerce. So with the recent launch of Drupal Commerce 2.0, it made sense to check in with them. After all, Arco team are core maintainers for modules such as Commerce Migrate, Commerce POS, and a host of others. Leading up to the 2.0 release of Drupal Commerce, Arco had 20 team members contributing a total of 60 contrib credits. In the past 3 months, they’ve been credited on over 270 issues. They’ve also been publishing content steady. Their aim seems to be to not only to get the word out about 2.0, but to help educate other developers, agencies and current and potential customers. So here, all in one place, a collection of Arco Drupal Commerce Knowledge. Migrating Drupal Commerce 1…

Read More →

Full-Stack Product Developer – Treeline Interactive – San Diego, CA

Treeline Interactive is searching for a Web Developer to join our growing Development Team. Flash, PHP, Python, Javascript, Node.js, Drupal, Laravel, WordPress,…From Treeline Interactive – Sat, 23 Sep 2017 06:46:46 GMT – View all San Diego, CA jobs Source: http://rss.indeed.com/rss?q=Drupal+Developer

The Little Schemer Will Expand/Blow Your Mind

I thought I’d take a break from the usual web dev content we post here to tell you about my favorite technical book, The Little Schemer, by Daniel P. Friedman and Matthias Felleisen: why you should read it, how you should read it, and a couple tools to help you on your journey. Why read The Little Schemer It teaches you recursion. At its core, TLS is a book about recursion — functions that call themselves with modified versions of their inputs in order to obtain a result. If you’re a working developer, you’ve probably worked with recursive functions if you’ve (for example) modified a deeply-nested JSON structure. TLS starts as a gentle introduction to these concepts, but things quickly get out of hand. It teaches you functional programming. Again, if you program in a language like Ruby or JavaScript, you write your fair share of anonymous functions (or lambdas…

Read More →

The Modlet Workflow: Improve Your Development Workflow with StealJS

You’ve been convinced of the benefits the modlet workflow provides and you want to start building your components with their own test and demo pages. Whether you’re starting a new project or updating your current one, you need a module loader and bundler that doesn’t require build configuration for every test and demo page you want to make. StealJS is the answer. It can load JavaScript modules in any format (AMD, CJS, etc.) and load other file types (Less, TypeScript, etc.) with plugins. It requires minimum configuration and unlike webpack, it doesn’t require a build to load your dependencies in development. Last but not least, you can use StealJS with any JavaScript library or framework, including CanJS, React, Vue, etc. In this tutorial, we’re going to add StealJS to a project, create a component with Preact, create an interactive demo page, and create a test page. Article Series: The Key…

Read More →

React + Dataviz

There is a natural connection between Data Visualization (dataviz) and SVG. SVG is a graphics format based on geometry and geometry is exactly what is needed to visually display data in compelling and accurate ways. SVG has got the “visualization” part, but SVG is more declarative than programmatic. To write code that digests data and turns it into SVG visualizations, that’s well suited for JavaScript. Typically, that means D3.js (“Data-Driven Documents”), which is great at pairing data and SVG. You know what else is good at dealing with data? React. The data that powers dataviz is commonly JSON, and “state” in React is JSON. Feed that JSON data to React component as state, and it will have access to all of it as it renders, and notably, will re-render when that state changes. React + D3 + SVG = Pretty good for dataviz I think that idea has been in…

Read More →

Design Tooling is Still Figuring Itself Out

It probably always will be, to be fair. At the moment, there are all kinds of things that design software is struggling to address. The term “screen design” is common, referring to the fact that many of us are designing very specifically for screens, not print or any other application and screens have challenges unique to them. We have different workflows these days than in the past. We have different collaboration needs. We have different technological and economic needs. Let’s take a peak at all this weirdness. Design tooling is still figuring out Responsive Design It’s almost taken for granted these days that any given new web project (or redesign) will be responsive design. Responsive design is the answer for screens of different sizes and different capabilities. So we can’t just design a 1280px wide version and call it a day. Software like Sketch has made multiple artboards of arbitrary…

Read More →

Back to Top