Forem: Nikki

Creating a Team Dashboard with Smashing

Nikki — Sat, 16 May 2020 00:30:15 +0000

Date Trends Illustration from unDraw

Every now and then, I chose to work on a side project that could benefit our Development team or Hanley Wood in some way. I decided to create a team dashboard for Hanley Wood employees to see what the Business Media Development team is up to and learn about who we are. We used to have a dashboard that displayed on our TV monitors years ago, so the idea initially stemmed from that concept.

I started on this back in 2017, took a break from it, and then finally completed it just a few months ago. Many of the widgets created for the Smashing framework were outdated, so I had to read up on quite a few APIs to update the code. For the UI design, I decided to use Tachyons and Font Awesome.

Completed Dashboard Screenshot

What’s Smashing?

Smashing is an open-source dashboard framework that uses Ruby and Coffeescript.

It’s easy to add widgets, and there are many that a premade at https://github.com/Smashing/smashing/wiki/Additional-Widgets

Here’s a super simple one to display Twitter mentions, courtesy of Vanessa Henderson on Github:

twitter.rb

require 'twitter'

#### Get your twitter keys & secrets:
#### [https://dev.twitter.com/docs/auth/tokens-devtwittercom](https://dev.twitter.com/docs/auth/tokens-devtwittercom)
twitter = Twitter::REST::Client.new do |config|
  config.consumer\_key = 'YOUR\_CONSUMER\_KEY'
  config.consumer\_secret = 'YOUR\_CONSUMER\_SECRET\_KEY'
  config.access\_token = 'YOUR\_ACCESS\_TOKEN'
  config.access\_token\_secret = 'YOUR\_ACCESS\_TOKEN\_SECRET'
end

SCHEDULER.every '15m', :first\_in => 0 do |job|
  begin
    user = twitter.user
    if mentions
      mentions = mentions.map do |tweet|
        { name: tweet.user.name, body: tweet.text, avatar: tweet.user.profile\_image\_url\_https }
      end

send\_event('twitter\_mentions', {comments: mentions})
    end    
  rescue Twitter::Error
    puts "\e[33mThere was an error with Twitter\e[0m"
  end

end

Then insert the following HTML into the dashboard.erb file:

<li data-row="1" data-col="1" data-sizex="2" data-sizey="1">
      <div data-id="twitter\_mentions" data-view="Comments" style="background-color:#00afd7;" data-moreinfo="Tweets @sourceclear" ></div>
      <i class="icon-twitter icon-background"></i>
  </li>

More info on this widget can be found at this gist: https://gist.github.com/VanessaHenderson/9aa0823efdfc085f675d

What’s Included?

The goal for this dashboard was for it to be something that could display on the TV monitor near the dev team as well as be accessible to internal employees.

For this reason, I decided to include the following info to display:

Links to helpful resources — included our internal documentation site, our team availability calendar, and a link to email requests for interactives.
List of team members — this used the Slack widget and used an icon to display whether or not a team member is online.
Sprint details — this included the sprint dates, goal(s), and the status of bugs.
Deployment details — included the date of the next deployment and any additional information, such as if there is a delay.
Code commits — used separate modules to display code changes to our CMS system and code changes to our Continuing Education system.

What was Challenging?

Most of this project involved dealing with code I’d never dealt with before, so that was a challenge in itself. I had to learn Ruby, Coffeescript, and the APIs for Slack, Github, and Google. The problems that hindered me the most was trying to use a widget that initially didn’t work, only to realize I needed to update to a new API, and trying, and failing, to use the Vivify API to use sprint data.

Outdated Widgets

The list of user-submitted widgets provided by Smashing was super helpful, however many are were outdated.

For instance, the Slack API had changed since the creation of the Slack User Presence widget, so I had to familiarize myself with the API instead of being able to use the widget right out the box.

This line:

slack\_client = Slack::Client.new token: options[:api\_token]

ended up having to change to:

slack\_client = Slack::Web::Client.new token: options[:api\_token]

Vivify Scrum

I had a hard time working with Vivify Scrum’s API to display the info I wanted. I asked via Twitter if it was possible to obtain the current sprint using their API, and they said, “no.” To finally finish the project, I scrapped trying to use the API and opted to populate the sprint data using a Google Form, thus, I learned how to use the Google Drive and Spreadsheets APIs to populate the sprint data into the dashboard. I can always come back to utilizing the Vivify Scrum API later.

Conclusion

I had a lot of fun working on this. It was a side project meant for me to work on something outside of what I typically do at Hanley Wood. Not everything worked out as I expected, but I’m glad to have the experience under my belt.

Celebration Illustration from unDraw

Dev and Designers Clashing

Nikki — Fri, 15 May 2020 23:45:06 +0000

cover image courtesy of unDraw.co

In which situations have you seen Devs and Designers clash? We both speak different languages, so it's understandable how this may happen.

I think empathy and respect are very important. I've heard comments from the dev community talking down on design work as if it were the least important part of the project.

What do you do to ensure developers and designers maintain a good relationship?

courtesy for blackillustrations.com

Where Do You Get Your Inspiration for Web Design/Development?

Nikki — Fri, 08 May 2020 19:20:38 +0000

Where do you get your inspiration for web design or development?

My go-to sites are:

Our sites are a representation of our magazines, so I'll also check to see what popular media sites are up to:

I may be looking for things like how they do their sub-branding or how they promote their native advertising.

What about you?

Why I Never Finished My First Android App

Nikki — Mon, 13 Apr 2020 14:44:03 +0000

Photo by niklas_hamann on Unsplash

Ok, so first off, this isn’t meant to be a post riddled with excuses. It’s intended to be a reflection of all the things I did wrong, so you know to do the opposite.

If you’ve ever found yourself starting a project, yet unable to finish it, this may be useful to you.

Don’t be like me, folks. Keep pushing and avoid the mistakes I made.

What was the App?

I meant to fulfill a personal need when I set off to create this app. I suffer from migraines, and my neurologist needs to see a record of my migraines to assess my treatment. She’d always hand me a paper calendar that I was terrible about filling out.

Why?

Because I didn’t feel like it, that’s why. No, but on a serious note, whenever I had a migraine, I didn’t feel like getting up to find the paper and then find something to write with to log my headache. I’d put it off until later. Then I’d forget, and before you know it, I’d have an incomplete calendar.

The Solution

At one point, I was using an app that I’d downloaded to keep track of my migraines, but the company ended up removing it from the store. But I’m a software developer, right? Why not build my own app?

I was my own biggest enemy.

My app would have the one thing that didn’t exist in any of the other headache tracking apps: a quick record button.

See, when you’re in excruciating pain, you don’t want to open an app and fill out a form.

If I’m using my phone during an episode, it’s to peek at my notifications and maybe send someone a “k” text message to let them know I’m alive and hopefully they get the idea that I can’t type out, “Hey sorry I’ll have to get back to you later because my head hurts too bad.”

See what I’m getting at?

I needed to be able to record my migraine on my phone with the most minimal effort. The “quick record” button was a large button that would appear on the first screen of the app. It allowed me to record my episode quickly and fill out the details later.

This feature would be how my app would stand out from the rest.

Why Didn’t I Finish It?

As I reflect on this, I can think of 3 key things that I lacked:

Discipline
Confidence
A reasonable plan

Discipline

First and foremost, I shouldn’t have stopped. I stopped coding, and when I had the time to go back, the mere thought of working on it again overwhelmed me, and I’d just put it off again.

What I should’ve done was schedule the time to work on it regularly for a small chunk of time. An hour a day, or even just an hour over the weekend, would’ve been better than not touching it at all. My learning of Android and mobile development would’ve been continuous and consistent instead of stopping altogether.

Confidence

I just was not convinced that I’d be good enough. Was it anxiety? Depression? Imposter syndrome? I’m not entirely sure, but something in my being convinced me that I’d never make an app good enough for the app store. Who did I think I was?

The solution for this is tough and involves outside help. Seeking the help of a psychologist can help to change that negative inner thinking. This is important.

In the immediate, reach out to your peers for mentorship. Their guidance and confidence in you may be the boost that you need to hang in there. There are plenty of subpar apps that have made it into the app store. After realizing this, and yes, I did see a psychologist for two years, I can see that I was entirely capable of creating a simple android app and getting it into the Google Play store. I was my own biggest enemy.

A Reasonable Plan

Ok, so I needed that “quick record” button, but the app still required some of the main features as it’s competitors, right?

Wrong.

Here’s the thing about Agile development, which I failed at with this project: The app very well could’ve been completed in small deliverable chunks, instead of me waiting for it to be what I considered to be done.

For instance, here’s what I could’ve done:

Phase 1 — record key info

Ability to “quick record” a migraine with the current timestamp (and delete it)

Phase 2 — record additional info

Start and end times
Intensity
Triggers
Additional notes

Phase 3 — be able to print to hand over to my doctor

Ability to email records as a pdf

Phase 4 — make the view more convenient

Ability to see records in Calendar view

Phase 5 — color code migraine intensity

Display records with red, orange, or yellow bar to indicate the pain intensity

Phase 6 — enhanced data visualization

Ability to view graphs of migraine trend

In reality, I completed all but Phase 6. I didn’t release anything because I never considered it “done.” From a UX perspective, I could’ve received feedback from my user base, which would’ve indicated they weren’t interested in graphs.

Things I’m Proud Of

It’s not worth beating myself up about not finishing this project, so let’s end this on a positive note.

I’m super proud of myself for the following:

Taking the time to learn Android development at all — hey, I made an app :)
Dabbling with branding — I made the logo and aimed to use colors that would be easy on the eyes for someone who may currently have a migraine while using the app. I avoided green and blue on purpose, which is all I ever see with health-related apps. Not sure if this was a good idea or not, but I like that I put this extra thought into it.
Adding a project to Github — Finished or not, I was able to add this project to my portfolio, and I can talk about it.

Conclusion

I won’t be going back to this project in its current form. What I want to do instead in the near future is to recreate it from scratch using React Native or Flutter.

We’ll see. ;)

Thanks for reading and check out Log My Pain on Github if you’re interested.

4 Phrases You Can Use to Encourage Collaboration

Nikki — Mon, 30 Mar 2020 15:12:58 +0000

As a web developer or any programmer, it’s easy to get stuck in your head. At times, it may even be humiliating to admit you’re unsure of something. Over the years, I’ve noticed that our web dev team here at Hanley Wood uses some variation of these phrases to foster collaboration. The result is that we’re compelled to ask for clarity and advice, thus resulting in new ideas, trust, and a gentle reminder that we as individuals don’t have all the answers, no matter how experienced we may think we are. How many times have you completed a task or project, only to learn later that your peer could’ve advised a better way?

The phrases outlined below can benefit the most novice to the most experienced developer. We’re continually learning new technologies, and as a result, should foster our ability to learn from one another.

Maybe you’re already using these phrases. If so, great job! If not, consider if they’ll be helpful to you as perform your everyday tasks.

“I’m Stuck.”

Getting stuck happens. Raise your hand and let your team members know what’s up. An extra set of eyes could expose a stupid syntax error that you missed, or give you new ideas you hadn’t thought of on your own. Delaying this could result in wasted time. Set yourself a maximum amount of time you should spend trying to solve a problem, and don’t be ashamed to ask for help when you exceed that time.

How many times have you completed a task or project, only to learn later that your peer could’ve advised a better way?

“I Need a Second Opinion.”

Getting a second opinion is another way to put an extra set of eyes on your work, but I encourage using this phrase even when you’re not stuck. Allow yourself to receive advice from both your senior and junior peers because our varying levels of experience allows us to learn from one another.

“What Problem is This Trying to Solve?”

I find it difficult to put my heart into a project if I don’t fully understand it. Asking “Why are we doing this?” can come off as abrasive, but using the phrase “What problem is this trying to solve?” expresses your interest in the end goal. Often, the answer to this question results in one of two things:

Better comprehension in completing the task at hand
The opportunity to offer suggestions

At times, it may seem as if our stakeholders are asking us to complete tasks that seemingly don’t make sense. Rather than assume the worst, use this phrase to start a conversation that would give you more clarity.

“I Messed Up.”

Mistakes happen. Anyone who acts as if they’ve never made a mistake probably shouldn’t be trusted. Take responsibility by admitting your mistakes without finger-pointing. Recognizing and acknowledging mistakes demonstrates integrity and instills the trust in your peers that you’re least likely to make the same mistakes again.

Conclusion

I encourage the use of these phrases because they’ve helped us to establish a team built on collaboration and trust. We’re all flawed in some way, yet we can all work to be more collaborative to bring out the best in all of us. Recognize your team members are all skilled in different ways and nurture your ability to learn from one another, regardless of years of experience.

What do you think? Do you have any phrases or advice to add? Comment below.

Leverage Virtual Reality to Immerse Your Site Visitors Using A-Frame

Nikki — Fri, 20 Mar 2020 17:56:22 +0000

Photo by Frank Vessia on Unsplash

Over the years, many techniques have been used to engage website visitors. Overuse of images, marquee text, music, animated cursors, and other cringy methods were “must-haves” during early web development. Of course, much has changed since then, and the web looks a little less chaotic. Nevertheless, as technology advances, so has how we use the web.

Many social media sites and apps have utilized virtual reality and augmented reality applications, such as Snapchat filters and 360 images and videos on Facebook. Though this usage is mainly for entertainment, there are still many practical ways to use VR/AR on your website.

Potential Usages of VR/AR on the Web

Data Visualization

The Washington Post’s feature A Mystery Dinosaur in the Nation’s Basement uses augmented reality to display the different parts of a nedoceratop’s skull in 3D.

Virtual Tours

BBC’s Congo VR tour allows users the immersive experience of visiting an overgrown palace, hunting with pygmies, and encountering gorillas through the Democratic Republic of the Congo.

Try Before You Buy

Houzz‘s View in My Room augmented reality tool enables users to view home decor and furniture in their home, true to scale.

Education

Kai XR offers mixed reality experiences to enhance children’s education as a supplemental classroom resource. Take a look at some of her VR field trips at https://kaixr.com/vr-playground.

Potential Usages of VR/AR at Hanley Wood

Hanley Wood could benefit from VR/AR in our Project Gallery and for features like The BUILDER Chōwa Concept Home by further immersing users more so than they could with images alone.

Project Gallery

Project Gallery is a platform created for architects, firms, and manufacturers to showcase their work. A use case in which a user could benefit from VR/AR technology would be the ability to upload an interactive 3D model of their design or an augmented reality floor plan that users could walkthrough.

Chōwa Concept Home

Chōwa is Builder Magazine’s latest Concept Home that showcases the collaboration of Japanese and US teams bringing together the best techniques and practices in homebuilding. Though the finished design of the home is beautiful, our Builderonline.com audience may benefit the most from a virtual experience that would allow them to peep through into the walls and flooring. Such an experience would enable to user to get a look at the various constructions phases and methods used, resulting in an overall comprehensive VR experience where one could see the finished product and the construction phases at once.

Proof of Concept with 360 Image Office Tour

Though the ideas mentioned above would be nice to implement, we don’t have the means to do so in the near feature. As an Agile development team, a minimal viable product that would allow our editors to incorporate VR/AR into their content may be as simple as giving them the ability to add 360 images and video. A-Frame would make it possible for us to accomplish this in little time due to its easy installation and minimal learning curve.

Below is an example of an article with a 360 image. Use your cursor to look around the room and use the nav button to switch to another room. Click the pulsating pink dot to view a video of the coffee machine.

Here’s the link if you’re having trouble viewing the embed: https://incongruous-hardware.glitch.me/

Interactive Demo of 360 Image Office Tour using A-Frame

Introducing A-Frame

A-Frame is a free and open-source javascript framework that enables you to add virtual reality experiences to your website without the need for your audience to download an app or purchase a headset. You can build cross-platform VR experiences for Vive, Rift, Daydream, GearVR, and Cardboard as well as desktops and smartphones.

Installation requires adding the latest version of aframe.min.js to the

of your HTML document and then writing your using A-Frame’s entity-component framework.

<html>
 <head>
 <script src=”[https://aframe.io/releases/1.0.3/aframe.min.js](https://aframe.io/releases/1.0.3/aframe.min.js)"></script>
 </head>
 <body>
 <a-scene>
 <a-box position=”-1 0.5 -3" rotation=”0 45 0" color=”#4CC3D9"> </a-box>
 <a-sky color=”#ECECEC”></a-sky>
 </a-scene>
 </body>
</html>

Because A-Frame is based on HTML, it’s easy to get started with AR/VR quickly. Their documentation recommends Glitch as a playground to get started, so check out the installation page to view different examples and fork them to create your own.

Advantages

Ability to create VR/AR experiences in-house instead of outsourcing the work to another company.
Frictionless and prevents the need to download additional software
Allows the user to interact with the scene without a headset.
Cross-platform, allowing you to build for smartphones and desktop browsers, as well as VR applications for Cardboard, Rift, Windows, Vive, Windows Mixed Reality, Daydream, and GearVR.

Things to Consider

Just because AR/VR is the new thing right now, doesn’t necessarily mean your website needs it. Consider your audience and the type of service or product your website offers.

In addition, VR technology can be pretty heavy on a website, so while it may bring in users who are interested in trying it out, a slow website would quickly drive them away. Smashing Magazine offers the following solution for this:

My advice here is to not preload everything. Instead load just enough for the user to get started, then dynamically load and start caching the rest. This behavior should be familiar if you have read about Google’s PRPL pattern.
Even just showing a blurred 360 skybox and some low-poly content, allowing the user to look around, will buy you precious seconds of engagement to bring in additional content and to bootstrap an engaging experience.

Ada — A Guide To Virtual Reality For Web Developers

According to https://web.dev/apply-instant-loading-with-prpl/, PRPL is an acronym for

Push — push your most important resources
Render — render the initial route as soon as possible
Pre-cache — pre-cache the remaining assets
Lazy load remaining routs and assets

I would suggest that you read the PRPL guide and the Smashing Magazine guide using the links above if you plan on dabbling with WebXR.

Conclusion

WebXR is the exciting new web technology that’s out right now, and I’m eager for us at Hanley Wood to get our hands dirty with it.

There are indeed some drawbacks and much to be discovered, however, A-Frame appears to be an excellent framework to help us get started quickly.

Have you worked with VR for the web yet? Which frameworks have you used? Comment below.

How and Why We Improved Our Technical Writing Skills

Nikki — Thu, 12 Mar 2020 17:01:05 +0000

We are a small developer team at Hanley Wood, which means that we don’t have a dedicated Technical Writer. On any given day, we may be required to write some technical documentation. Our most common include:

User Story Requirements
Test Instructions

However, occasionally, we‘ll need to write technical documentation for readers outside our core team, such as API documentation and How To’s regarding how to use new features within our Content Management System.

Why was it imperative for us to improve our technical writing?

When you lack technical writing as a skill, your writing could cause misunderstandings with your readers. Without such training, it’s easy to lose sight of your audience and write in such a way that it may be confusing to them. Being proficient in technical writing ensures that you’re able to take technical jargon and concepts, and concisely communicate them for the general audience to understand.

Why Technical Writing Skills are Needed to Write User Story Requirements

Poorly written User Story Requirements can result in a failed product. Capturing the requirements from the stakeholder requires a clear understanding of the user’s wants and needs.

According to Amber Israelsen’s course, “Technical Writing: Documentation on Software Projects,”² each requirement should possess the following nine characteristics:

Cohesive — address one and only one thing
Complete — fully stated at once, no missing information
Consistent — doesn’t contradict any other requirement
Atomic — doesn’t contain conjunctions
Traceable — meets all or part of a business need as stated by stakeholders
Current — has not been made obsolete by the passage of time
Unambiguous — concisely stated without jargon, acronyms, or esoteric verbiage
Specify importance — specifies a level of importance
Verifiable — implementation can be determined through inspection, demonstration, test or analysis

Fortunately, our User Story Requirements are usually well written, but as with anything, there is always room for improvement.

Why Technical Writing Skills are Needed to Write Instructions

In my experience, writing a set of instructions may seem simple on the surface, but once you consider your audience may not have the same knowledge or skill level as you, it’s easy to miss adding key details.

Below is an example of the type of test steps we commonly wrote out vs. how we’ve improved our writing.

❌ Bad Test Steps:

Navigate to an article
Verify that the headline appears

✅ Good Test Steps:

Navigate to an Article content type in the CMS
Note the value in the headline field
Navigate to this same article on the frontend via its URL
Verify that the headline is the value set in the CMS

The problem with the “Bad Test Steps” is that it was confusing for our developers who didn’t frequently use the CMS. Questions that would get asked were:

“ Go to the article where? On the actual website? In the CMS?”

“How should the headline appear?”

The “Good Test Steps” give more precise instructions that we are testing the frontend of the article and where to find the data we’re looking for in the CMS.

How did we go about improving our technical writing?

Once we declared there was a need for us to improve our writing skills, we set aside time in 2 sprints to complete a couple of Pluralsight courses that went over technical writing:

Writing Process Instructions and Directions
Description from Pluralsight: “This course covers writing an introduction to a set of instructions, managing safety warnings, formatting and presenting individual steps, analyzing the audience and situation, working with visuals, and developing a troubleshooting section.”
1h 29m
Technical Writing: Documentation on Software Projects
Description from Pluralsight: “This course covers the fundamentals of writing effective software documentation. Whether you need to document requirements, architecture/design, code, test plans, or manuals for end-users, this course gives you tips and best practices to do it all.”²
3h 48m

During our retrospective after each sprint, we discussed what we learned from each course. We found that the course material helped us to understand the importance of technical writing and knew how to apply it to our everyday writing. As a result of this training, we are more aware of the consequences of poor technical writing and aim to use this knowledge to write better documentation.

Conclusion

Overall, we aimed to improve our technical writing skills to strengthen our collaboration with one another and minimize confusion amongst our team members and colleagues.

Do you think your team could improve their technical writing skills as well? Check out the courses below in addition to the Pluralsight courses mentioned in this article.

Additional Courses and Articles

Resources

Ackmann, Alan. Writing Process Instructions and Directions. https://app.pluralsight.com/library/courses/process-instructions/table-of-contents
Israelsen, Amber. Technical Writing: Documentation on Software Projects. https://www.pluralsight.com/courses/technical-writing-software-documentation

4 Fast and Easy CSS Tools to Help You Design Your Website

Nikki — Tue, 21 Jan 2020 16:46:01 +0000

I’ve spent about 9 years here at Hanley Wood and have watched as we’ve painstakingly managed the designs of 20+ different websites. We’ve reduced much of our workload by reducing the variance of our page templates and minimizing the amount of code needed to spin up a new website.

Below I’d like to share with you some of the things that have helped us over the years in hopes that they’ll help you too. ;)

Animate.css

View each animation the library has to offer.

Animate.css is a convenient little CSS library created by Daniel Eden that takes the hard work out of adding animations to your website. It’s cross-browser and easy to use, so give it a try!

Here’s an example, taken from the Github repo, demonstrating how easy it is to add an animation to a component:

<h1 class="animated infinite bounce delay-2s">Example</h1>

Website : https://daneden.github.io/animate.css/

Font Awesome

Font Awesome is a personal fave of mine. Gone are the days where you need to buy or create an icon. Here, we have a useful font that contains most of the icons you’ll need for a project. We use them frequently on our Hanley Wood sites.

<span class="fa fa-search"></span>

Website : https://fontawesome.com/

Hamburgers

This one is another easy library. Why spend your time trying to figure out how to animate that stupid hamburger? Thanks to Jonathan Suh, we now have a way to animate our hamburgers without having to try!

Example from the website:

<button class="hamburger hamburger--collapse" type="button">
  <span class="hamburger-box">
    <span class="hamburger-inner"></span>
  </span>
</button>

Website : https://jonsuh.com/hamburgers/

Tachyons

I recently learned about Tachyons from a colleague, and I only wished I had known about it sooner. Tachyons is a framework based on the principle of Atomic CSS by utilizing singe-use CSS classes to style components. We have slowly been incorporating this methodology into our websites so that we can focus more on new features as opposed to maintaining ridiculous amounts of CSS code. Spinning up new sites now takes less time and produces less design bugs as opposed to previous approaches. Why? Because the modularity of the CSS styles reduces complexity and increases reusability.

The example below styles the div as follows:

position: static
width: calc(33.33333333%)
display: flex
justify-content: flex-end

<div class=”static w-third-ns flex justify-end”>…</div>

Website : http://tachyons.io/

Conclusion

These are the top 4 tools I’d love to bundle up and give to anyone starting a new web project. Focus your time on creating new and interesting web features and spend less time getting the blueprint of the site up and running.

15 Handy Bookmarks to Help You With Front-end Web Development

Nikki — Mon, 19 Aug 2019 14:16:01 +0000

Over the years I’ve acquired many browser bookmarks that have helped me with my day to day tasks as a web developer. I present to you 15 of the best web tools I have in my arsenal in hopes of helping out my fellow developers and web designers.

CSS Tools
Dummy Text Generators
Conversion Tools
Miscellaneous Tools

CSS Tools

Links to CSS online tools.

CSS Selector Reference

I keep this handy cheatsheet bookmarked simply because I don’t have all the CSS selectors memorized. Sometimes I can’t remember if I need to use :first-child or :first-of-type. This is super useful when it comes to learning CSS selectors you may have never used before.

Website : https://www.w3schools.com/cssref/css_selectors.asp

A Complete Guide to Flexbox

I have yet to remember all the details about the flexbox layout. I’ve found this guide to be the most helpful when I need a refresher.

“Our comprehensive guide to CSS flexbox layout. This complete guide explains everything about flexbox, focusing on all the different possible properties for the parent element (the flex container) and the child elements (the flex items). It also includes history, demos, patterns, and a browser support chart.” — CSS-Tricks.com

Website : https://css-tricks.com/snippets/css/a-guide-to-flexbox/

LESS Tester

This tool was incredibly useful as I was learning LESS and still comes in handy now that I have more experience with the CSS preprocessor. Consider situations when your LESS code looks perfectly fine to you, but for some reason, your styles are not rendering as expected. Copy and paste your code into the LESS Tester to see if the rendered CSS is what you expect it to be.

LESS Tester is a sandbox environment that allows you to view your LESS code as CSS.

Website : https://lesstester.com/

SASS Meister

I have not used SASS Meister myself, but I decided to include it as an alternative to the LESS Tester above, for those of you who use SASS.

SASS Meister is another sandbox environment similar to LESS Tester.

Website : https://www.sassmeister.com/

Clippy

To add some creativity to your website, use this tool to create complex shapes using the clip-path CSS property. Check out Creating Responsive Shapes With Clip-Path And Breaking Out Of The Box on Smashing Magazine for inspiration on how you can spice up your website with clip-path and images.

Website : https://bennettfeely.com/clippy/

Dummy Text Generators

Links to dummy text generators for mocking content.

Lipsum

Keep this site bookmarked for anytime you need to generate random text, such as any number of paragraphs, words, characters, or lists.

Two randomly generated paragraphs using the lipsum.com text generator.

Website : https://www.lipsum.com/

Cupcake Ipsum

Here’s a fun alternative to the plain boring latin text generators. Cupcake Ipsum generates random dummy text related to sugary sweets.

Two randomly generated paragraphs cupcakeipsum.com text generator.

Website : http://www.cupcakeipsum.com

Adventure Time Filler Text Generator

Do I really need to explain why this one is so awesome?

Not only is this generator Adventure Time themed, but it also gives you the option to generate more than just plain text. You can generate dummy content that includes a header, some paragraphs, and lists.

Randomly generated filler content with rich text elements.

Website : http://filler-text.blogspot.com/

Conversion Tools

A collection of online conversion tools.

Base64 Encoder and Decoder

Being able to base64 encode files is super useful. We use this for our icons and then use the base64 data in CSS to render it.

Website : https://www.mobilefish.com/services/base64/base64.php

PXtoEM

Most of our font sizes are defined using em, however, as our designers work in Photoshop, they give use the font size specs in pixels. Use this handy web tool to convert px to em and vice versa.

Website : http://pxtoem.com/

Misc

Additional tools that don't fit in any of the other categories.

Diffchecker

Quickly compare differences between text files using this convenient tool. There is also a Diffchecker desktop application and command line interface.

Website : https://www.diffchecker.com/

Favicon Generator

Need to generate a favicon? Bookmark this site so you don’t have to search around for a favicon generator the next time you need to make one.

Website : https://realfavicongenerator.net/

Regex 101

Regex has always been a pain to me, but I’ve found this site to be incredibly useful whenever I have to deal with them. It’s not only great for testing out your regular expressions, but it also gives you an explanation of each group so you know how to optimize it.

Testing the regular expression for 10 digit phone number that includes the country code.

Website : https://regex101.com/

Test Credit Card Account Numbers

If you deal with payment systems, you’ll need to use test credit card numbers when testing the functionality. You’ll find test card numbers for all the major credit card companies, such as American Express, Visa, and MasterCard, on this web page.

Website : https://www.paypalobjects.com/en_AU/vhelp/paypalmanager_help/credit_card_numbers.htm

Validator Tools for Social Meta Tags and Search Engine Markup

This blog post contains a list of tools you can use to validate your site’s meta tags against popular social media sites. I’ll add a few here, but check out the link below for additional social media validators and a detailed explanation on why social meta tags are important.

Not included in the blog post is LinkedIn’s Post Inspector.

Website : https://www.eyeflow.com/validator-tools-social-meta-tags-search-engine-markup/

Conclusion

I hope you find this list to be useful. Please feel free to add your favorite web tools in the comments.

The Trials and Tribulations of HTML Newsletters

Nikki — Mon, 05 Aug 2019 12:16:01 +0000

Newsletters are the bane of my existence. Luckily, we no longer have to work on them. Here are some tidbits we learned during the time we spent managing the design of our newsletters.

Newsletter Testing

Simply viewing the .html file in a web browser isn’t good enough. To test your newsletters and verify that they appear properly on today’s most popular email clients, you should use an email testing tool.

Email on Acid

For that past few years, we’ve relied on Email On Acid to test our newsletters.

Here’s what we like about it:

Many Options for Email Clients

Email on Acid allows you to test with multiple email clients on different browsers, desktop email clients on different operating systems, and mobile email clients on different devices. You’ll be amazed (and frustrated) to learn how different (and potentially jacked up) your newsletter can look in the same email client but on different operating systems.

Mobile Emulator

The browser and desktop tests only provide screenshots, however, the mobile tests can be viewed in a mobile emulator, allowing you to interact with your newsletter. This can be helpful in determining the usability of your newsletter on a mobile device.

Tips and Tricks

This feature is great for troubleshooting issues with your newsletter. Maybe you can’t use floats or your embedded CSS is getting stripped out. Here’s an example of the Tips and Tricks section for Outlook 2010 on Windows 7:

Tips and Tricks section for a test against Outlook 2010 on Windows 7

Starting here will help you save time in fixing issues with your newsletter.

Sharing Results

Email on Acid allows you to share your test results, which is useful for sharing with someone who doesn’t have an account. We use this to share with our stakeholders so they can take a look themselves in case we missed anything during QA.

Litmus

One drawback of Email on Acid is that the screenshots are not always an accurate representation of how the newsletter looks on a particular client. There have been times when we’ve been alerted to a visual issue with our newsletter that didn’t appear in an EOA test, but on the actual email client on a given operating system. To recreate these issues, we’ll use Litmus Putsmailto send off a test email to one of our email addresses, then open it in the email client on the operating system in question (usually using some type of VM software such as Parallels).

In addition to Putsmail, Litmus has a suite of email testing features that are comparable to Email on Acid. I have not used Litmus myself, but you can check it out at https://litmus.com/ to see if it’s a better option for you.

Tips

Use a Boilerplate

Don’t start from scratch. Use a boilerplate because it’s likely been implemented in such a way that the quirks specific to each email client have already been worked out for you. We used a boilerplate off of Emailology.org and customized it from there. Though Emailology no longer exists, I’ve been able to find a gist of the boilerplate at https://gist.github.com/cemerson/4495931.

I’ve copy-pasta’d the HTML below, just in case the gist URL disappears from the internet as well:

<!-- \*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*
\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*

HOW TO USE: Use these code examples as a guideline for formatting your HTML email. You may want to create your own template based on these snippets or just pick and choose the ones that fix your specific rendering issue(s). There are two main areas in the template: 1. The header (head) area of the document. You will find global styles, where indicated, to move inline. 2. The body section contains more specific fixes and guidance to use where needed in your design.

DO NOT COPY OVER COMMENTS AND INSTRUCTIONS WITH THE CODE to your message or risk spam box banishment :).

It is important to note that sometimes the styles in the header area should not be or don't need to be brought inline. Those instances will be marked accordingly in the comments.

\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*
\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\* -->

<!-- Using the xHTML doctype is a good practice when sending HTML email. While not the only doctype you can use, it seems to have the least inconsistencies. For more information on which one may work best for you, check out the resources below.

UPDATED: Now using xHTML strict based on the fact that gmail and hotmail uses it. Find out more about that, and another great boilerplate, here: [http://www.emailology.org/#1](http://www.emailology.org/#1)

More info/Reference on doctypes in email:
Campaign Monitor - [http://www.campaignmonitor.com/blog/post/3317/correct-doctype-to-use-in-html-email/](http://www.campaignmonitor.com/blog/post/3317/correct-doctype-to-use-in-html-email/)
Email on Acid - [http://www.emailonacid.com/blog/details/C18/doctype\_-\_the\_black\_sheep\_of\_html\_email\_design](http://www.emailonacid.com/blog/details/C18/doctype_-_the_black_sheep_of_html_email_design)
-->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd](http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd)">

<html xmlns="[http://www.w3.org/1999/xhtml](http://www.w3.org/1999/xhtml)">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
 <title>Your Message Subject or Title</title>
 <style type="text/css">

/\*\*\*\*\*\*\*\*\*\*\*
  Originally based on The MailChimp Reset from Fabio Carneiro, MailChimp User Experience Design
  More info and templates on Github: [https://github.com/mailchimp/Email-Blueprints](https://github.com/mailchimp/Email-Blueprints)
[http://www.mailchimp.com](http://www.mailchimp.com) &amp; [http://www.fabio-carneiro.com](http://www.fabio-carneiro.com)

INLINE: Yes.
  \*\*\*\*\*\*\*\*\*\*\*/
  /\* Client-specific Styles \*/
  #outlook a {padding:0;} /\* Force Outlook to provide a "view in browser" menu link. \*/
  body{width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0;}
  /\* Prevent Webkit and Windows Mobile platforms from changing default font sizes, while not breaking desktop design. \*/
  .ExternalClass {width:100%;} /\* Force Hotmail to display emails at full width \*/
  .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;} /\* Force Hotmail to display normal line spacing. More on that: [http://www.emailonacid.com/forum/viewthread/43/](http://www.emailonacid.com/forum/viewthread/43/) \*/
  #backgroundTable {margin:0; padding:0; width:100% !important; line-height: 100% !important;}
  /\* End reset \*/

/\* Some sensible defaults for images
  1. "-ms-interpolation-mode: bicubic" works to help ie properly resize images in IE. (if you are resizing them using the width and height attributes)
  2. "border:none" removes border when linking images.
  3. Updated the common Gmail/Hotmail image display fix: Gmail and Hotmail unwantedly adds in an extra space below images when using non IE browsers. You may not always want all of your images to be block elements. Apply the "image\_fix" class to any image you need to fix.

Bring inline: Yes.
  \*/
  img {outline:none; text-decoration:none; -ms-interpolation-mode: bicubic;}
  a img {border:none;}
  .image\_fix {display:block;}

/\*\* Yahoo paragraph fix: removes the proper spacing or the paragraph (p) tag. To correct we set the top/bottom margin to 1em in the head of the document. Simple fix with little effect on other styling. NOTE: It is also common to use two breaks instead of the paragraph tag but I think this way is cleaner and more semantic. NOTE: This example recommends 1em. More info on setting web defaults: [http://www.w3.org/TR/CSS21/sample.html](http://www.w3.org/TR/CSS21/sample.html) or [http://meiert.com/en/blog/20070922/user-agent-style-sheets/](http://meiert.com/en/blog/20070922/user-agent-style-sheets/)

Bring inline: Yes.
  \*\*/
  p {margin: 1em 0;}

/\*\* Hotmail header color reset: Hotmail replaces your header color styles with a green color on H2, H3, H4, H5, and H6 tags. In this example, the color is reset to black for a non-linked header, blue for a linked header, red for an active header (limited support), and purple for a visited header (limited support). Replace with your choice of color. The !important is really what is overriding Hotmail's styling. Hotmail also sets the H1 and H2 tags to the same size.

Bring inline: Yes.
  \*\*/
  h1, h2, h3, h4, h5, h6 {color: black !important;}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {color: blue !important;}

h1 a:active, h2 a:active, h3 a:active, h4 a:active, h5 a:active, h6 a:active {
   color: red !important; /\* Preferably not the same color as the normal header link color. There is limited support for psuedo classes in email clients, this was added just for good measure. \*/
   }

h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited {
   color: purple !important; /\* Preferably not the same color as the normal header link color. There is limited support for psuedo classes in email clients, this was added just for good measure. \*/
  }

/\*\* Outlook 07, 10 Padding issue: These "newer" versions of Outlook add some padding around table cells potentially throwing off your perfectly pixeled table. The issue can cause added space and also throw off borders completely. Use this fix in your header or inline to safely fix your table woes.

More info: [http://www.ianhoar.com/2008/04/29/outlook-2007-borders-and-1px-padding-on-table-cells/](http://www.ianhoar.com/2008/04/29/outlook-2007-borders-and-1px-padding-on-table-cells/)
[http://www.campaignmonitor.com/blog/post/3392/1px-borders-padding-on-table-cells-in-outlook-07/](http://www.campaignmonitor.com/blog/post/3392/1px-borders-padding-on-table-cells-in-outlook-07/)

H/T [@edmelly](http://twitter.com/edmelly)

Bring inline: No.
  \*\*/
  table td {border-collapse: collapse;}

/\*\* Remove spacing around Outlook 07, 10 tables

More info : [http://www.campaignmonitor.com/blog/post/3694/removing-spacing-from-around-tables-in-outlook-2007-and-2010/](http://www.campaignmonitor.com/blog/post/3694/removing-spacing-from-around-tables-in-outlook-2007-and-2010/)

Bring inline: Yes
    \*\*/
    table { border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; }

/\* Styling your links has become much simpler with the new Yahoo. In fact, it falls in line with the main credo of styling in email, bring your styles inline. Your link colors will be uniform across clients when brought inline.

Bring inline: Yes. \*/
  a {color: orange;}

/\* Or to go the gold star route...
  a:link { color: orange; }
  a:visited { color: blue; }
  a:hover { color: green; }
  \*/

/\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*
  \*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*
  MOBILE TARGETING

Use [@media](http://twitter.com/media) queries with care. You should not bring these styles inline -- so it's recommended to apply them AFTER you bring the other stlying inline.

Note: test carefully with Yahoo.
  Note 2: Don't bring anything below this line inline.
  \*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*
  \*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*/

/\* NOTE: To properly use [@media](http://twitter.com/media) queries and play nice with yahoo mail, use attribute selectors in place of class, id declarations.
  table[class=classname]
  Read more: [http://www.campaignmonitor.com/blog/post/3457/media-query-issues-in-yahoo-mail-mobile-email/](http://www.campaignmonitor.com/blog/post/3457/media-query-issues-in-yahoo-mail-mobile-email/)
  \*/
[@media](http://twitter.com/media) only screen and (max-device-width: 480px) {

/\* A nice and clean way to target phone numbers you want clickable and avoid a mobile phone from linking other numbers that look like, but are not phone numbers. Use these two blocks of code to "unstyle" any numbers that may be linked. The second block gives you a class to apply with a span tag to the numbers you would like linked and styled.

Inspired by Campaign Monitor's article on using phone numbers in email: [http://www.campaignmonitor.com/blog/post/3571/using-phone-numbers-in-html-email/](http://www.campaignmonitor.com/blog/post/3571/using-phone-numbers-in-html-email/).

Step 1 (Step 2: line 224)
   \*/
   a[href^="tel"], a[href^="sms"] {
      text-decoration: none;
      color: black; /\* or whatever your want \*/
      pointer-events: none;
      cursor: default;
     }

.mobile\_link a[href^="tel"], .mobile\_link a[href^="sms"] {
      text-decoration: default;
      color: orange !important; /\* or whatever your want \*/
      pointer-events: auto;
      cursor: default;
     }
  }

/\* More Specific Targeting \*/

[@media](http://twitter.com/media) only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
   /\* You guessed it, ipad (tablets, smaller screens, etc) \*/

/\* Step 1a: Repeating for the iPad \*/
   a[href^="tel"], a[href^="sms"] {
      text-decoration: none;
      color: blue; /\* or whatever your want \*/
      pointer-events: none;
      cursor: default;
     }

.mobile\_link a[href^="tel"], .mobile\_link a[href^="sms"] {
      text-decoration: default;
      color: orange !important;
      pointer-events: auto;
      cursor: default;
     }
  }

[@media](http://twitter.com/media) only screen and (-webkit-min-device-pixel-ratio: 2) {
   /\* Put your iPhone 4g styles in here \*/
  }

/\* Following Android targeting from:
[http://developer.android.com/guide/webapps/targeting.html](http://developer.android.com/guide/webapps/targeting.html)
[http://pugetworks.com/2011/04/css-media-queries-for-targeting-different-mobile-devices/](http://pugetworks.com/2011/04/css-media-queries-for-targeting-different-mobile-devices/) \*/
[@media](http://twitter.com/media) only screen and (-webkit-device-pixel-ratio:.75){
   /\* Put CSS for low density (ldpi) Android layouts in here \*/
  }
[@media](http://twitter.com/media) only screen and (-webkit-device-pixel-ratio:1){
   /\* Put CSS for medium density (mdpi) Android layouts in here \*/
  }
[@media](http://twitter.com/media) only screen and (-webkit-device-pixel-ratio:1.5){
   /\* Put CSS for high density (hdpi) Android layouts in here \*/
  }
  /\* end Android targeting \*/
 </style>

<!-- Targeting Windows Mobile -->
 <!--[if IEMobile 7]>
 <style type="text/css">

</style>
 <![endif]-->

<!-- \*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*
 \*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*
 END MOBILE TARGETING
 \*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*
 \*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\* -->

<!--[if gte mso 9]>
 <style>
  /\* Target Outlook 2007 and 2010 \*/
 </style>
 <![endif]-->
</head>
<body>
 <!-- Wrapper/Container Table: Use a wrapper table to control the width and the background color consistently of your email. Use this approach instead of setting attributes on the body tag. -->
 <table cellpadding="0" cellspacing="0" border="0" id="backgroundTable">
 <tr>
  <td>

<!-- Tables are the most common way to format your email consistently. Set your table widths inside cells and in most cases reset cellpadding, cellspacing, and border to zero. Use nested tables as a way to space effectively in your message. -->
  <table cellpadding="0" cellspacing="0" border="0" align="center">
   <tr>
    <td width="200" valign="top"></td>
    <td width="200" valign="top"></td>
    <td width="200" valign="top"></td>
   </tr>
  </table>

<!-- End example table -->

<!-- Yahoo Link color fix updated: Simply bring your link styling inline. -->
  <a href="[http://htmlemailboilerplate.com](http://htmlemailboilerplate.com)" target ="\_blank" title="Styling Links" style="color: orange; text-decoration: none;">Coloring Links appropriately</a>

<!-- Gmail/Hotmail image display fix: Gmail and Hotmail unwantedly adds in an extra space below images when using non IE browsers. This can be especially painful when you putting images on top of each other or putting back together an image you spliced for formatting reasons. Either way, you can add the 'image\_fix' class to remove that space below the image. Make sure to set alignment (don't use float) on your images if you are placing them inline with text.-->
  <img class="image\_fix" src="full path to image" alt="Your alt text" title="Your title text" width="x" height="x" />

<!-- Step 2: Working with telephone numbers (including sms prompts). Use the "mobile\_link" class with a span tag to control what number links and what doesn't in mobile clients. -->
  <span class="mobile\_link">123-456-7890</span>

</td>
 </tr>
 </table>
 <!-- End of wrapper table -->
</body>
</html>

Hate Outlook.com’s Contextual Highlighting?

Use the following snippet to override Outlook.com’s contextual highlighting:

/\* Overrides Outlook.com Contextual Highlighting \*/
    span {
        color: #000;
        border-bottom-width: 0;
        border-bottom-style: none;
    }

Avoid Deeply Nested Tables

At some point, our newsletter layout was a little more complex than they are now. This resulted in some nested tables that were affecting Outlook. We ended up with a huge gap of whitespace in the middle of our newsletters. We followed the tips from Email On Acid, however nothing worked. So don’t do this.

I actually don’t recall if we ever fixed this issue. We moved on to a simpler template shortly after.

Include Both Embedded CSS and Inline CSS

Embedded CSS

Embedded CSS is useful for mobile design and overriding the styles of extra elements inserted by the email client.

Here’s a snippet that ensures all your links are the desired color and style, taking into account that Yahoo inserts a span.yshortcuts inside all links:

/\*Yahoo adds span.yshortcuts inside all links\*/
    a:link,
    span.yshortcuts {
        color: #000; /\* Link color must be set inline for Gmail\*/
        background-color: none;
        border: none;
        text-decoration: none;
    }

p a:link,
    p span.yshortcuts {
        text-decoration: underline;
    }

p a:active,
    p a:visited,
    p span.yshortcuts:active {
        text-decoration: underline;
    }

a:active,
    a:visited,
    span.yshortcuts:active {
        color: #000;
        background-color: none;
        border: none;
        text-decoration: none;
    }

a:hover,
    span.yshortcuts:hover,
    span.yshortcuts:focus {
        text-decoration: underline;
    }

Inline CSS

Gmail does not supported embedded CSS. Use either of the following inline CSS tools to convert your embedded CSS into inline CSS:

Learn How to Walk Away

Depending on the complexity of your newsletter, the time and frustration to get it to look exactly the same on every supported email client for each platform is simply not worth it. Maybe your link show up purple in Gmail despite the styles setting them to blue. Maybe the spacing between paragraphs in Outlook 2016 is a little more than desired. If your content is still readable and still maintains the basic layout, do away with the nuances if you haven’t been able to solve them within a reasonable amount of time.

Useful Links

Email on Acid An email testing tool.
Litmus Another email testing tool.
Foundation for Emails (formally Ink) A framework for creating HTML emails.
Emailology’s Boilerplate Gist An html template from the former Emailology.com.
Bojler An email framework created to ease the pain of creating email templates.
Campaign Monitor’s CSS Guide A guide to CSS support for the most popular email clients.
Email on Acid’s Tips & Tricks A collection CSS and HTML of tips and tricks for the most common email clients.

That’s all I have and I hope I never have to experience the pain of creating newsletter templates ever again. Good luck!

Forem: Nikki

Creating a Team Dashboard with Smashing

What’s Smashing?

What’s Included?

What was Challenging?

Outdated Widgets

Vivify Scrum

Conclusion

Dev and Designers Clashing

Where Do You Get Your Inspiration for Web Design/Development?

Why I Never Finished My First Android App

What was the App?

The Solution

I was my own biggest enemy.

Why Didn’t I Finish It?

Discipline

Confidence

A Reasonable Plan

Things I’m Proud Of

Conclusion

4 Phrases You Can Use to Encourage Collaboration

“I’m Stuck.”

“I Need a Second Opinion.”

“What Problem is This Trying to Solve?”

“I Messed Up.”

Conclusion

Leverage Virtual Reality to Immerse Your Site Visitors Using A-Frame

Potential Usages of VR/AR on the Web

Data Visualization

Virtual Tours

Try Before You Buy

Education

Potential Usages of VR/AR at Hanley Wood

Project Gallery

Chōwa Concept Home

Proof of Concept with 360 Image Office Tour

Introducing A-Frame

Advantages

Things to Consider

Conclusion

Further Reading

How and Why We Improved Our Technical Writing Skills

Why was it imperative for us to improve our technical writing?

Why Technical Writing Skills are Needed to Write User Story Requirements

Why Technical Writing Skills are Needed to Write Instructions

How did we go about improving our technical writing?

Conclusion

Additional Courses and Articles

Resources

4 Fast and Easy CSS Tools to Help You Design Your Website

Animate.css

Font Awesome

Hamburgers

Tachyons

Conclusion

15 Handy Bookmarks to Help You With Front-end Web Development

Contents

CSS Tools

CSS Selector Reference

A Complete Guide to Flexbox

LESS Tester

SASS Meister

Clippy

Dummy Text Generators

Lipsum

Cupcake Ipsum

Adventure Time Filler Text Generator

Conversion Tools

Base64 Encoder and Decoder

PXtoEM

Misc

Diffchecker

Favicon Generator

Regex 101

Test Credit Card Account Numbers

Validator Tools for Social Meta Tags and Search Engine Markup

Conclusion

The Trials and Tribulations of HTML Newsletters

Newsletter Testing

Email on Acid