How to Make a Web Developer Resumé

According to an article by portfoliotips.com, Why Your Resumé Won’t get you Hired as a Web Developer, “Your resumé and cover letter are not what’s going to get you an interview. Employers judge your initial application based on the quality of your portfolio and online footprint.”

Wait, what? And here’s another shocker:

You shouldn’t spend too much time on your cover letter, because it will probably just be ignored anyway.

Yep, it’s fair to say that a lot of the traditional wisdom about jobs (spending tons of time crafting a perfect cover letter, yada yada…) just doesn’t apply for developers. People who review applications for developers told me that they would only briefly glance at a cover letter, if at all. If you’d like to hear more about what those recruiters had to say, check out my interviews with a lead developer and CTO.

So what does matter when you’re applying for a dev job? Your work! Be prepared to show off the projects that you’ve taken on (also, be sure to get involved in lots of awesome projects). Link to your GitHub account, your personal website, and any other live examples of your work. This is worlds more important than anything you can explain in a few paragraphs.

-Melissa Suzuno’s article, 5 Not-So-Hidden Secrets About Working as a Web Developer

Make a Portfolio First

Your portfolio is the first thing potential employers will look at when considering you, so it needs to be a real reflection of your skills and yourself.

-“12 Things You Must Do to Land a Junior Web Developer Job”, SkillCrush, https://skillcrush.com/2015/04/09/land-junior-web-developer-job/

Clearly, having a good web portfolio is possibly even more important than the resumé itself. It shows what the applicant can actually do and how they do it. So before you even write a resumé, have the portfolio completed first*!

“Your resumé and cover letter are not what’s going to get you an interview. Employers judge your initial application based on the quality of your portfolio and online footprint.”

Why Your Resumé Won’t get you Hired as a Web Developer, portfoliotips.com

*Learning will be ongoing. But don’t go crazy from worrying about it.

Research Potential Jobs

In order to create a good resumé, it is a good idea to look at actual job ads, especially if the experience is limited. Look at anything – even for the ones that are not available in your area. This will help you get a feel for what to look for and what is required for similar jobs.

Developajob.com provides details on how to Become a Front-End Web Developer and how to Become a Back-End Web Developer, listing the traits that make the position a good fit. Skillcrush also has an article entitled 10 Jobs You Need to Know About When You’re New to Tech that describes a few of the best agency jobs for beginners, along with describing the job itself, average salary, common qualifications, along with a concluding bits of information about the job under “Is this the career path for you?”. This list serves as a reference guide that is both an overview and summary of many of the main web-related jobs that currently exist.

  1. Visual Designer
  2. Copywriter
  3. Web Developer
  4. Web Designer
  5. Front-End Developer
  6. Content Marketer
  7. Researcher
  8. Illustrator
  9. QA Analyst
  10. Data Analyst

(Source: 10 Jobs You Need to Know About When You’re New to Tech Skillcrush)

Some Background Information

jobs-edited-500-opt

(Image credit) [originally featured from: Not An Imposter: Fighting Front-End Fatigue]

“Keep in mind that job ads tend to list more (sometimes WAY more!) requirements and “nice-to-haves” than are really expected from candidates. Never hurts to ask, right?! Don’t let this discourage you though. If you can handle most of what they’re looking for, you’ll probably be at least considered for the role.”

-“12 Things You Must Do to Land a Junior Web Developer Job”, SkillCrush, https://skillcrush.com/2015/04/09/land-junior-web-developer-job/

Creating The Resumé

From a web development standpoint, the most important areas to focus on are the following: “previous work and internships, school, degree (probably in that order).” (How to Get a Front-End Developer Job, Interview with Micah Jaffe, CTO of Fair Loan Financial)

Previous Work And Internships

Experience comes first. Go ahead and move that “Education” down a click. After a few years of work, your recent experience is more relevant than your major or your GPA, and you want your work to be the first thing potential employers see.”

-“12 Things You Must Do to Land a Junior Web Developer Job”, SkillCrush, https://skillcrush.com/2015/04/09/land-junior-web-developer-job/

No need to list education first! When it comes to web development, it doesn’t even belong there. In fact, degrees don’t matter, either and here is why:

Sure, if you majored in computer science and got some impressive skillz as a result, that’s super. But if you have the determination and the stick-to-itiveness to teach yourself how to code, that’s more important than any degree.

Mike Feineman, lead developer at social media agency Room 214 says, “Self-taught programmers have a better drive, and are passionate learners. In other words, exactly the kind of people I want on my team.” So go out there and get coding!

-Melissa Suzuno’s article, 5 Not-So-Hidden Secrets About Working as a Web Developer

Plus, considering how technology is always changing, interest to learn is actually a valued trait in this field.

“… I expect college hires to not come in with an immediately useful skill set, so I look for sharp enthusiasm for the company or industry.”

(How to Get a Front-End Developer Job, Interview with Micah Jaffe, CTO of Fair Loan Financial)

“In general, good candidates keep a conversation going, aren’t attempting to nail what feels like the right answer first, fast. Thoughtful discourse is a winner even if it’s wandering into a blind alley. Backtracking and recovering are important skills. Smart questions about the business are awesome. Debates in the interview are not.”

(How to Get a Front-End Developer Job, Interview with Micah Jaffe, CTO of Fair Loan Financial)

And along with enthusiasm, what else should web development students being doing? In an interview with Micah Jaffe, CTO of Fair Loan Financial concerning How to Get a Front-End Developer Job, answers that thought:

What steps would you recommend a student take to best prepare for a career in this field?

Learn humility. Because you can be hired anywhere as a software developer does not make it itself a vital component of being good at your job. Fifteen+ years in Silicon Valley have given me some archetypes to work with and prima donnas are ones to avoid.

Software development is team driven. It could be entirely anecdotal but I’ve found smart kids who have had to learn how to work as part of a team elsewhere (sports, music, etc.) fit faster and require less hand-holding.

Learn hierarchy. Even in a “flat” environment, giving respect earns respect. Honesty and severity do not need to share the same emotional investment.

Network early, often. Don’t live in a cave. Who you know helps you all the time whether it’s working through a gnarly programming problem or finding your next job.

Keep learning. What you know for what you need to get done can often shift dramatically even in a year. Being good at and specializing a skill set can keep your paychecks fat for four to five years, but that doesn’t mean it will keep you happy or fulfilled for the long run.

So keep learning AND…

Focus on the fundamentals has always been my mantra. If you can build good sh!t and solve problems then that’s all that matters, how you solve them (the tools) has and will always change. – Not An Imposter: Fighting Front-End Fatigue

Describing Job Experience

So again and again, it is stressed that experience and job skills gained from actual experience is the most important part of a resumé for a web developer. Do not make experience listed in a resumé a “regurgitation of your job description – In most cases, recruiters care less about what you did day to day (like answer phones and email) and more about what you accomplished over time (like increased customer satisfaction 20%).

45 Things You Might Have on Your Resumé (That Need to Be Removed) – themuse.com

Instead, focus on accomplishments:

Pick a few statements to take one step further, and add in what the benefit was to your boss or your company. By doing this, you clearly communicate not only what you’re capable of, but also the direct benefit the employer will receive by hiring you.

45 Things You Might Have on Your Resumé (That Need to Be Removed) – themuse.com

Make sure all of the experience on your resumé is updated. Add any awards you’ve received, new skills you’ve taken on, articles you’ve published, or anything else awesome you’ve done.

45 Things You Might Have on Your Resumé (That Need to Be Removed) – themuse.com

As a web developer, projects are the main accomplishments. In Why Your Resumé Won’t get you Hired as a Web Developer, portfoliotips.co suggests giving the following details:

List out each of the projects that you completed in your resumé, or describe them when talking about past positions. Explain your role on the project, what parts of the work you completed and the results of the work (i.e. X installs, Y new users). At the end of this, include a link to the live project, a blog post about it, an online portfolio entry, or a page with screenshots of the work.

Additionally, when it comes to school-related web projects or especially internships, you still may be able to at least include that work in a portfolio. If you learned and applied something from it, it can potentially be worth sharing and even resumé material.

Job Titles and Sectioning

This might also come a surprise, but according to Melissa Suzuno’s article, 5 Not-So-Hidden Secrets About Working as a Web Developer, job titles also don’t matter:

Every web developer I spoke with told me the same thing—no one has an official title. Titles just aren’t that important in their departments or even their companies.

What this means for you is that when you’re looking for a job, you don’t really need to look for any fancy-pants titles. Just stick to simple things like “web developer” and you’ll be golden.

This also means that the structure of many engineering or web development teams is relatively flat. Just remember, as Micah Jaffe, CTO of FairLoan Financial, reminds us in his interview, a flat structure doesn’t mean you can dispense with respect and courtesy to your coworkers.

Sectioning

For clarity, it is a good idea to keep the overall style of a resumé simple:

Each section should be labeled clearly and professionally. Although it may be tempting to label your work experience as something more creative, the classic “Work Experience” is a good option. If you want to highlight a specific type of experience like customer service, a label such as “Customer Service Experience” could also work. Just keep in mind that simple headings make your resumé more readable.

Career Edge 5x Resumé, Networking, and Interview Skills Course, edx.org

The approach described above displays all work details into one section, which keeps the format simple. However, it is also pointed out that creating an additional, more specific label has benefits because it separates the relevant information into a better place where it cannot be missed. Here are two more examples of such applications for listing job skills:

Consider adding a qualifications section. (Perhaps in lieu of your now-deleted “Career Objective?”) This should be a six-sentence (or bullet pointed) section that concisely presents the crème of the crop of your achievements, major skills, and important experiences. By doing this, you’re both appeasing any applicant tracking systems with keywords and giving the hiring manager the juicy, important bits right at the top.

45 Things You Might Have on Your Resumé (That Need to Be Removed) – themuse.com

 “If you have lots of skills related to a position—say, foreign language, software, and leadership skills—try breaking out one of those sections and listing it on its own (“Language Skills” or “Software Skills”).”

https://www.themuse.com/advice/45-quick-changes-that-help-your-resumé-get-noticed

Working in multiple jobs within the same organization via a promotion can make sectioning skills all the more important. In Adrian Granzella Larssen’s article, 2 Jobs, 1 Company: How to Show Multiple Positions on Your Resumé, tips are provided as to how to show such advancements within a company look like a good thing, instead of some sort of hard to read and complicated list.

What Education Not to Include

If you’re more than three years out of college, remove your graduation year. Recruiters only really want to know that you got a degree, and you don’t want them to inadvertently discriminate based on your age.

45 Things You Might Have on Your Resumé (That Need to Be Removed) – themuse.com

Unless you’re a recent grad, GPAs aren’t applicable to most job search settings. Instead of using space to highlight your school accomplishments, focus on what you’ve done since then. If you did astoundingly well in school, use terms instead of numbers, like “summa cum laude” or “with Honors.”

-“12 Things You Must Do to Land a Junior Web Developer Job”, SkillCrush, https://skillcrush.com/2015/04/09/land-junior-web-developer-job/

References

The phrase, “References upon request” is not necessary to include on a resumé:

Two reasons:

  • The people reading your resumé know. They don’t think you’ll refuse to provide references. They’re not sitting there going Phew! They HAVE references, they’re just not HERE.
  • It sounds pretentious, and that line takes up valuable real estate.

-“12 Things You Must Do to Land a Junior Web Developer Job”, SkillCrush, https://skillcrush.com/2015/04/09/land-junior-web-developer-job/

Demonstrate Up-to-Date Tech Skills

It is a waste of resumé space to list basic computer skills on a resumé. In fact, it could do more harm than good:

These days, employers expect proficiency in word processing, typing, and Internet use. Listing outdated skillsets can give an employer the impression that you’re not up to speed.

If you need to brush up on tech skills and aren’t sure what to highlight, try this: Instead of dating yourself with lines like “proficient in Excel,” try talking about your experience in data analysis.

-“12 Things You Must Do to Land a Junior Web Developer Job”, SkillCrush, https://skillcrush.com/2015/04/09/land-junior-web-developer-job/

Examples of more modern skills (related to web development) that are better to mention on a resumé include things like these:

  • Web design / UX / Photoshop
  • Version control (Git / GitHub)
  • Cross-browser compatibility
  • Responsive web design
  • CSS preprocessors like Sass or Less
  • Frameworks like Backbone.js, Angular.js, or Node.js, etc. or Ruby on Rails
  • A CMS (Content Management System) like WordPress

-“12 Things You Must Do to Land a Junior Web Developer Job”, SkillCrush, https://skillcrush.com/2015/04/09/land-junior-web-developer-job/

Create a Brand

Finding ways to stand out from other applicants is extremely important. In SkillCrush’s article, 12 Things You Must Do to Land a Junior Web Developer Job, it is recommended one definitely should “create a custom personal logo to use across your documents” as a means of personal branding. Finding ways to show branding is so essential because:

Your online footprint is part of your personal brand. Your brand doesn’t just mean the colors you’ve selected for your website. It’s the way someone feels about you when they view your application. If your application looks sloppy and rushed, the employer is unlikely to feel excited to work with you, expecting that you produce sloppy work. If your application is bursting with awesome projects that you’re passionate about, then a reviewer is going to at least want to speak with you to find out more.

Why Your Resumé Won’t get you Hired as a Web Developer, portfoliotips.co

Create a Story

Telling a story can not only shine through in a cover letter, but also in the resumé. Limit the actual number of job positions listed to 4 or 5 per section when creating a story in a resumé. Too many points might cause things to be too hard to follow if too much is being discussed.

The key is to cut off your resumé when the jobs stop telling a story. For example, the restaurant you opened 10 years ago before changing careers isn’t part of your “career story” today. If you want to bring up older work history, feel free to do so in the interview.

The Ultimate Guide to The Perfect Resumé, Skill Crush

Below are some story-friendly elements that can potentially be used in a resumé. Just make sure to link to them appropriately:

Definitely include (if you have them)

  • Your portfolio. If you don’t have a portfolio you really should, it doesn’t need to be fancy. A simple static HTML page will do, showing screenshots and an overview of projects you’ve worked on.
  • Recent projects. For each include a screenshot, live example (if possible), link to source code (if public), paragraph explaining what the project is, and what you did on it (keep this part as brief as possible).
  • Open source projects. Links to your own projects that you’ve open sourced, project that you’ve worked on as an employee, or any other OS projects that you’ve contributed to.

Other things you might want to include

  • Blog posts. These are great for judging your ability to communicate.
  • Stack Overflow. Or activity in another relevant community i.e. /r/webdev, codepen, dribbble.
  • SlideShare. Any presentations, including Meetups, conferences, or presentations that are a work in progress.

Why Your Resumé Won’t get you Hired as a Web Developer, portfoliotips.

Résumé Layout

Look at your resumé “above the fold.” In other words, take a close look at the top third of your resumé—the part that will show up on the screen when the hiring manager clicks “open” on that PDF. That’s what’s going to make your first impression—so make sure it serves as a hook that makes the hiring manager eager to read more.

45 Things You Might Have on Your Resumé (That Need to Be Removed) – themuse.com

Use Bullet Points

“Since employers will likely be scanning your resumé, format your words to pop out at the reader. Instead of big blocks of text, use 4-7 bullet points to describe each section of work experience.”

-“12 Things You Must Do to Land a Junior Web Developer Job”, SkillCrush, https://skillcrush.com/2015/04/09/land-junior-web-developer-job/

Begin bullet statements with verbs. Use a variety of verbs throughout your resumé. For current jobs, use the present tense; all previous jobs should use the past tense. Make sure these verbs are active. For example, “Processed,” is a good way to start a bullet statement. On the other hand, “Was responsible for processing,” is not active, so you shouldn’t use it. Some powerful verbs include:

Analyzed

Collaborated

Conducted

Controlled

Coordinated

Created

Designed

Developed

Established

Evaluated

Executed

Generated

Implemented

Improved

Increased

Launched

Led

Maximized

Organized

Prepared

Quantified

Reduced

Secured

Strengthened

Source: Career Edge 5x Resumé, Networking, and Interview Skills Course, edx.org

Keep it Short!

A resumé should be just one page long. It should be easy to skim and “showcase the most important information.” –The Ultimate Guide to The Perfect Resumé, Skill Crush

The most important and hardest part of creating a resumé is pruning it down to the most essential information. The best resumés actually DON’T include a record of your entire history—they highlight the most relevant information for the specific industry and role you’re applying for.

The Ultimate Guide to The Perfect Resumé, Skill Crush

Different Position, Different Resumé

Going back to the web development thought that “titles don’t matter”, flexibility is also something that must shine through a resumé:

Never limit yourself to an industry because you feel limited by your skill set. Organizations need talent in a variety of areas. Just because you haven’t heard of a position doesn’t mean it’s not out there. And if it’s not out there, feel free to create a resumé for it!

Career Edge 5x Resumé, Networking, and Interview Skills Course, edx.org

This requires a bit of extra work, but candidates who tailor their resumés to specific positions are more successful job-hunters than those who send a generic resumé as a part of all their applications.

Career Edge 5x Resumé, Networking, and Interview Skills Course, edx.org

“Instead of thinking of your resumé as one document, think of it as a template that you tweak and cater to each role you apply for. That means you won’t always feature the same work history or other information.”

The Ultimate Guide to The Perfect Resumé, Skill Crush

Aside from actual resumé content, creating separate resumés for various situations can also be useful when submitting applications under different formats, such as email, online, or via applicant tracking system. Additionally, a link to a resumé on an about page of a portfolio is a great way to make an increased online presence along with examples of your best work.

Make sure the resumé you share online isn’t editable — save it as a PDF instead of a .doc. Some people can’t open .docs, and it’s also more professional to share a PDF.

The Ultimate Guide to The Perfect Resumé, Skill Crush

Watch Out For Abbreviations

Find any acronyms, and write out the full name of the title, certification, or organization. You should include both, at least the first time, to make sure the recruiter knows what you’re talking about and so an applicant tracking system will pick it up no matter which format it is looking for. For example: Certified Public Accountant (CPA).

45 Things You Might Have on Your Resumé (That Need to Be Removed) – themuse.com

Formatting Numbers

Quantity

In the spirit of providing a lot of information in a short amount of time, try adding percentages to your resumé. “Increased conversion rates by 15%” sounds a whole lot more impressive and memorable than “Improved conversion rates.” You don’t have to be exact, but make sure you’re telling the truth!

Show me the numbers. Well, the numerals.

Go back to those numbers and change them to numerals. “30% traffic increase” pops out on the page more than “Thirty percent traffic increase.” Plus, using numerals saves space.

-“12 Things You Must Do to Land a Junior Web Developer Job”, SkillCrush, https://skillcrush.com/2015/04/09/land-junior-web-developer-job/

Word Choice

Using buzzwords, poorly worded, overused, or funny-sounding language can affect how seriously a résumé is taken. Below is a list of the 10 worst and 10 best resumé terms. Not all of these words listed at first glance may even seem obviously bad either. For example, while being a team player is normally a good thing, it is actually listed as one of the worst resumé words to choose from.

The Worst Resumé Terms

  1. Best of breed
  2. Go-getter
  3. Think outside of the box
  4. Synergy
  5. Go-to person
  6. Results-driven
  7. Team player
  8. Hard worker
  9. Strategic thinker
  10. Detail-oriented

The Best Resumé Terms

  1. Achieved
  2. Improved
  3. Trained/Mentored
  4. Managed
  5. Created
  6. Influenced
  7. Increased/Decreased
  8. Negotiated
  9. Launched
  10. Under budget

Even within the job industry there can be language to avoid. Melissa Suzuno in her article 5 Not-So-Hidden Secrets About Working as a Web Developer, cautions to be careful about how you word things because “Perhaps an HR person wouldn’t necessarily care that Dev referred to jQuery as a programming language, but since Mike is a developer, this inaccuracy bothers him.”

Words With a Negative Connotation: Even if you mean them in a positive way, like “met aggressive sales goals,” research has shown that words like problem, mistake, and fault can have a negative impact on a recruiter’s perception of you.

Vague Terms: (Think professional, experienced, and people person.) They’re chronically overused, and we bet there’s a better way to describe how awesome you are. (Need help? Here are a few great cliché-free ways to show off your soft skills.)

45 Things You Might Have on Your Resumé (That Need to Be Removed) – themuse.com

Demonstrating enthusiasm in a resumé can also be accomplished through aspirational language:

In the heading of your resumé, and in your language throughout your application, for that matter, it’s important to use aspirational language.

Instead of describing yourself as you are now, use words to describe what you want to be. If you can imagine yourself in a new role, it’s much easier for hiring managers to do the same.

For example, instead of calling yourself a “web developer in training,” just call yourself a web developer. Or, if you’re moving out of customer service and into marketing, call yourself a “marketing specialist” rather than a “customer service manager.”

The Ultimate Guide to The Perfect Resumé, Skill Crush

Conclusion

Hopefully it is now clear that showing what you can do is everything for web development along with some high quality link juice, too. To reiterate one more time, here is what to expect and not to expect:

Here’s how you may think an employer reviews your application:

  1. Reads through your cover email, thinking that you’re a lovely, polite, articulate individual.
  2. Reads through your resumé, noting your X years of Rails or iOS experience and past experience at a startup or code school.
  3. If you’ve provided any links, takes a look through those.
  4. If they like what they see, calls you in for an interview.

Here’s how an employer actually reviews your application:

  1. Spends 5–10 seconds scanning your resumé and cover letter for any notable past positions or qualifications.
  2. Looks for links to your portfolio, projects and GitHub. If you don’t have these and have no impressive past positions/qualifications, your application gets archived.
  3. Reviews your portfolio or work links, if it’s sloppy, your application gets archived.
  4. If they liked your work, does a quick search for your personal site and Twitter to see if you’d be a good culture fit at the company. If they find any red flags, your application gets archived.
  5. If they like your work or think you show promise and would be a good fit at the company, they add you to their phone interviews shortlist.

Why Your Resumé Won’t get you Hired as a Web Developer, portfoliotips.com

Email Marketing 101 for Web Developers

Did you know?

“It turns out that 77 percent of consumers prefer to receive permission-based emails rather than any other form of marketing communication.” How to Create an Email Campaign in 10 Minutes (Step by Step Guide)

Nowadays it is almost assumed (or even required in some situations) that all websites have some sort of channel open for communication, whether it is merely a contact form, or a physical address and phone number listed. But when it comes to the web, email marketing is a special way to make something more out of that contact made between the user and the website.

Ever find yourself on a web page and something pops up where they really push for you to subscribe to their newsletter? That is an example of email marketing. Business websites are increasingly looking for ways to encourage visitors to either be reminded about, or to just hear back from them periodically as a means of maintaining contact, preferably in a good way. Ultimately, testimonials like these are desired:

“Your email newsletters, videos and articles are so inspiring, I really look forward to them and I love your attitude, all of you, and the great images. You make me feel included in a world where it seems everyone is an expert, and I wanted to say thanks.” – SkillCrush, The Beginner’s Guide: WHAT TO PUT IN YOUR TECH PORTFOLIO

Clearly, the message brought forth here is one of great enthusiasm and wholehearted interest. To accomplish that, presentation is everything. And while not every website actually needs to be giving the visitor something in return, businesses especially, are constantly striving to maintain that sense of positive contact with their customers. To do this…

Know How To Sell Yourself

In order to be truly skilled with email marketing, having a sales background can be very helpful. Why?

“Marketing is basically Sales Support anyway, and you need to understand how revenue flows through your organization. At its core, marketing is about convincing someone to pay for your stuff. Make sure you start your career with a solid understanding of working with the sales team.” – Getting a job in Marketing with little to no experience

So while knowing how the revenue can be channeled is the backbone concept here, emails are THE WAY to get the prospective user/customer to listen and to keep that communication channel both open, and actively flowing when it comes to the web. So if you have ever worked a job in retail or food service previously and at times found yourself not only being responsible for getting the goods to the consumer, but also convincing them to buy something, then you have surely developed a valuable soft skill that can be put into use for web development.

Landing Pages

This web term called “Landing Pages” tends to come in different forms, but the one that concerns email marketing is called a Lead Generation Page. Lead Generation pages are specifically used “to capture user data, such as a name and email address” and ultimately with that information get the people from the website find a way to “market and to connect with the prospect at a subsequent time” (Unbounce.com, What is a Landing Page?).

In this case, obviously email is of course the means, but additional perks may be offered as a hook to draw interest. Some examples of ways in order to lure users to make it far enough into the landing page to actually connect include:

  • Email Series’ (i.e. 6 Ways to Change the World)
  • Free Downloads
  • Free White Papers or eBooks
  • Update Lists (New Issue Notifications, Product Updates, New Releases)

(Source: A Beginner’s Guide to Successful Email Marketing, kissmetrics.com)

Attractive Language

“As a rule of thumb, try to use your newsletter as a way to further your relationship with the reader/customer rather than to pitch them. Save the pitch for unique updates, offers, and announcements.”A Beginner’s Guide to Successful Email Marketing, kissmetrics.com

Using words in the subject of emails can make or break user interest when reading emails. The email also has to especially be carefully crafted so that it does not resemble spam.

Case in point: I signed up for Skillcrush for just for one free download and ended up receiving their newsletters as well. Instead of immediately dismissing these emails as nonsense I didn’t ask for, they instead kept grabbing my attention and in fact left me constantly wanting to open them up and read them with great interest. How was SkillCrush so successful? The emails were always titled in such a way that seemed to both spark curiosity and a desire to know more.

Approaches to accomplish this type of allure can take the form of “awesome subject lines and preview text” and can even be “short and punchy” as is commended in Hubspot’s blog, 15 of the Best Email Marketing Campaign Examples You’ve Ever Seen concerning BuzzFeed’s marketing approach. Oh and the call-to-action better be clear as well, otherwise the email may be tossed aside, right?

Make it Brief

Email already has a reputation for being too time consuming for people. Therefore, when it comes to email marking, it is a must to make the message brief in order to maintain a following. Going back to referring to Hubspot’s blog post again, this approach is described as being “easy to scan” (15 of the Best Email Marketing Campaign Examples You’ve Ever Seen).

Make it Mobile

I know I almost exclusively screen my emails via mobile phone. Case in point, Kissmetrics states that “2015 was the first year that mobile traffic exceeded that of desktop users” (4 Hot Mobile Marketing Trends to Watch in 2016, Kissmetrics). This audience only seems to grow rather than shrink.

Tools and Tracking

Preparing emails is only one small part of the puzzle when it comes to email marketing. Email automation programs also assist in sending out and handling the flow of emails in an effective manner. SkillCrush lists some of the more popular services available as Hubspot, Moz, and Mailchimp. Together, tracking analytics and testing that website where the message originally got across to make users interested (i.e. the “Landing Page”) in signing up for emails in the first place, are the means of how campaigning thrives and is what makes the whole endeavor not just a side project but a job in itself.

Want to Learn More?

These were just a few thoughts on the basics of email marketing. A more specific list of guidelines can be found by reading  9 Email Marketing Best Practices to Generate More Leads – Hubspot. In it, the mechanics, such as layout, font usage, etc. are covered. Additionally, the article How to Create an Email Campaign in 10 Minutes (Step by Step Guide), is also great for quickly walking one through the entire process. MailChimp’s Email Marketing Field Guide is well worth keeping for reference as well.

Lastly, I like to keep in mind that sometimes the best way to get a feel for how something like this really works and what makes it cool to users (and not spammy worthless junk), is to simply try it out yourself. So go ahead, try subscribing to something that interests you and while receiving these emails, note the parts that you liked and the parts you didn’t. Not sure where to begin? A fun way to experience an email series is to sign up with one of these recommended websites listed by Medium.com: Back To School: 20 Websites that Will Help You Learn Every Day.

Additionally, from a web development standpoint, another great place to see email marketing in action is through SkillCrush. While they are very much be catering to women, their web career advice and information is very relevant to anyone. They offer lots of up to date info and downloads in the form of guides and seminars.

What is Wire Framing?

Wait. You are creating a design without putting together wire frames first? Big mistake. While skipping this step may get you a completed design quicker, without wire frames, your pages may end up missing critical elements or have functions in the wrong place. It may seem like a simple fix, but the design frequently distracts us from seeing the things we should be seeing. – 21 Things Every Web Developer Should Be Doing

As you just read, understanding and using wire frames is super important. Essentially, wire framing is the rough draft aspect of a website and the structure it is meant to contain. It can be as simple as writing down what you have in mind as a sketch or as complex as using an outright wireframe program or prototype tool.

Sounds simple enough, right? Wrong. With all of the emphasis on mobile design, one does not simply make just one website, but at least 3 altogether: desktop, tablet, and mobile styles. And the design features for mobile in general will have to be strikingly different altogether:

https://designshack.net/wp-content/uploads/table.png

Image source: How & Why Prototypes Are Mandatory for Good Design

Prototypes Versus Wire Frames

There are different ways to describe the development of a website in its early stages. Prototyping is a popular term. Some people describe it as a mock up. Others choose wire frame as the word.

A website prototype can be any mock-up or demo of what a website will look like when it goes live. It can be anything from a paper sketch, to a clickable HTML prototype. However, typically when people talk about a prototype they are referring to an interactive prototype of some kind which allows users to navigate from page to page and use functionality such as drop down menus.- What is a website prototype?

A prototype for web development is therefore more like an almost-working website. This technically means a prototype is conceptually quite far from a wire frame, which is only a skeleton. Being a pseudo-finished product, prototypes are much more work, but they are great for testing. And testing can expose problems or if something on the website needs to be scrapped and it can be changed before the website is launched, instead of after it is made live.

Is wire framing the “rough sketch” then? Somewhat. Perhaps at this point in development, “mock up” fits as a better word to describe that, because it implies the design is not (yet) real.

First Steps to Wire Framing

When mocking up, hand-drawn versions can be an excellent approach for several reasons. Here are two reasons for the pen and paper approach as described by Nick Petitt from Treehouse.com that are my favorites:

Dozens of quick thumbnail sketches can be scratched out in a few minutes. The less time I spend on an idea, the less attached I’ll be; this is good in the early phases because I don’t want to settle too soon. Now is the time to explore all the possibilities.

Drawings are great because the level of abstraction can change wildly in a matter of seconds. One moment I might be blocking out the major columns, and the next I might be deciding on the order of navigation elements.

  Wire Frames Defined

The answer as to what wire frames really are is quite simple:

“Once I have a paper mockup I’m happy with, only then will I use a digital mockup tool to wireframe my ideas.” – Nick Pettit from Treehouse.com

So ultimately, this is why wire frames are described as like a backbone. They are actually when a design has begun to gel a bit and take form, has been selected, but it’s still too much of a rough sketch to be made into an actual website yet.

“Wireframes, mockups, and requirement documents live in paper, not reality.”
Designer Todd Zaki Warfel

Keeping this in mind,  usability.gov says that wire frames “typically do not include any styling, color, or graphics”. They also list the following items that will typically make up the bare minimum, or rather, the “wire” of the wire frame:

  • Logo
  • Search field
  • Breadcrumb
  • Headers, including page title as the H1 and subheads H2-Hx
  • Navigation systems, including global navigation and local navigation
  • Body content
  • Share buttons
  • Contact information
  • Footer

The more complex the wire frame, the closer it is to becoming a prototype, which is representative of the final product. Until that happens, dummy text and placeholders are often used, along with experimental spacing. Wireframes are not interactive! It is also during this time when any specific technologies that are meant to be used can be decided upon and/or anticipated.

This illustration should now make a lot of sense!

https://designshack.net/wp-content/uploads/whyprototype.png

Image source:  How & Why Prototypes Are Mandatory for Good Design

Making Mistakes

Mistakes are certainly expected during the development process and it is during the prototyping stage when these problems are ironed out:

“Prototyping allows teams to experiment, giving them the freedom to fail cheaply while learning more. Just take a look at how prototypes helped increase estimate accuracy by 50% while reducing requests for clarification by 80%.” – Designshack.net

Indeed, at this stage, not only is communication actively happening as everything is being put together, but it is also the time when UX (user experience) can be observed and tested more accurately because the website is no longer just an idea, but an actual concept in motion.

Conclusion

The individual needs of websites vary greatly, but making proper wire frames are key in making something that works the well from the start, instead of wasting time and money into redoing or fixing something all over again.

For a cheat sheet, here is a quick summary of everything, along with a description of the what roles wireframes, prototypes, and mockups play in web development (as summarized by speckyboy.com). These details are helpful for considering whom the audience is that you are working with:

  • Wireframe
    • Key Aspects: Basic representation of design elements.
    • What to use for: Communication, documentation.
  • Prototype
    • Key Aspects: Interactivity.
    • What to use for: Interactive user testing, UI design.
  • Mockup
    • Key Aspects: Static visualization, branding.
    • What to use for: Stakeholder design buy-in.

Flow and Making Design Happen

Having collaborated with Moritz on some web projects, I have seen some perspectives on creativity that I didn’t realize would be a part of web development.

“You can be creative and logical at the same time”

I wish I could give credit where it is due, but when I found this quote, I just knew it said it all. I feel like this says so much and this is a huge part of web development. To quote Mike Monteiro of Mule Design Studio from an inspiring blog post, “Design is the solution to a problem with a set of constraints, and a designer is somebody who solves problems, given a set of constraints. That sounds so boring, but that’s the job!”

I knew there would be challenges as to how to exactly make the perfect idea turn into a reality. But what surprised me was the part about making it practical and beautiful must fit together well or the whole thing is a mess.

Web Developers Are Problem Solvers

The typical way of seeing an artist is almost like a magician – they pull up something beautiful out of thin air. But from a design standpoint, the ability to take design and handle it in a way that gets the job done is equally important as the designs themselves. Again, quoting Monteiro, here is how he goes about to look over a designer’s portfolio:

I want to know what you were trying to solve, I want to know what constraints you were up against … budget, timeline, the number of client stakeholders in the room. I need to know all of that stuff and whether you went back in six months and checked if the initial project goals were met. Until I see all of this stuff, all I know is you can make pretty pictures.

Selling oneself is a complex task in itself. It can be daunting and if it does not do all of these things, the design not only looks flawed, but empty:

As a designer you’re expected to create beauty, order, harmony, and direction. You’re expected to make purpose visual. If you don’t have what you need that becomes difficult. Because you can’t give what you don’t have. If you don’t have anything there’s nothing to give. If you don’t have enough, it shows in your work. – webdesignerdepot.com

Designers Block

Similar to writer’s block, designer’s block happens too. As pointed out in the article, Be a better designer by designing less: “everything is a remix” and when one is starving for ideas, the solution is to feed on other ideas. To find as much stuff as possible to work off is a good thing. This applies to not just looking at things on the web, but also books, magazines, publications. Keeping one’s eyes open to looking at, holding onto, and thinking about everything and anything else that can be added to the imagination is critical.

Going back to thinking about the same Webdesignerdepot.com article, some common-sense questions to pose to oneself when “feeding” on ideas are made. I recognize these questions may not be obvious while in a design slump, so be sure to continue refreshing the mind back to these thoughts at all times when considering them:

  • What stands out to you?
  • What do you like?
  • Can you explain why you like it? Think about your answer.

(Source: Webdesignerdepot.com)

Some Intuition is Required

If you love art, beauty, people, fashion, and thinking about how someone lives, day-in-day-out, with one of your creations, then you will excel at web design. – Skillcrush.com

Thinking about how someone lives? Fashion? Is this starting to sound like it has little to do with creating a stylesheet or making the php work on the backend? It does, but clients recognize they hire designers for their talent and enthusiasm also plays a huge role in web design because it results in a mindset that will get the job done. Designers themselves need to sell their interest as part of the package or else they will come across as lacking skills and merely just another pixel pusher. Monteiro even goes as far to say this thinking about how someone else operates  – as “like putting the client on the psychiatrist’s chair” and the process of discovery is part of their job. Similar to the saying how “the customer is always right”, the user always comes first.

Flowing

Akin to designer’s block, creating a website takes a lot of work and sometimes the motivation is just not there, but on the flip side, flow is actually when the focus is right and the concentration seems limitless. The best things made come to fruition when flow happens. Flow exists in all forms of work, but creative flow is one of the best feelings a designer can have!

Sometimes flow can be disrupted and lost as easily as it came strong. This chart  summarizes it well:

https://speckycdn-sdm.netdna-ssl.com/wp-content/uploads/2013/11/flow_01.jpg

Image Source: Energizing Tips for Helping You Finding Flow

Challenges can include technical difficulties and anxiety can come from time deadlines. Boredom can play a factor as well. Making a work environment more flow friendly can be as simple as shutting out distractions or setting up the work station in a way where the comfort levels are better are some good approaches. This can also include getting enough food, drink, and rest.

But other more fun ways to immerse fully into flow can also involve a caffeinated drink or listening to music. I think both of these can be a little distracting, but sometimes in a good way. It can make the process more fun and possibly more effective in the long run. Some of the best creative things were made by letting them happen. Just look at what Bernard Sumner (New Order) had to say during one interview:

I get writer’s block all the time. The only way I can write what I consider to be good lyrics is to put myself through the mill. This is staying up late, having a bottle of wine and wait for inspired words rather than premeditated words.

And thus the recent hit by New Order, Tutti Frutti, came to be.

Creating a Website With SEO in Mind

Keywords

Read anything about Search Engine Optimization (SEO) and it will demand the use of them. But what exactly are keywords? In Inc.com’s article 5 Secrets to Selecting Highly-Effective SEO Keywords, keywords are described as “what we type in when we are searching for products, services, and answers on the search engines…”

Wow, it’s that simple!? Yes and no. Here’s the tricky part: how to use them to where they actually speak the same language as a search engine. There are multiple ways to accomplish this. In the article “Are Keywords Relevant to SEO in 2015?”, Search Engine Watch mentions  some important things to keep in mind when it comes to deciding where those keywords need to go on a website:

To this end, the placement of your keywords matters far more than their frequency. Posting “auto repair shop” once in the title tag of your site and once in the header matters far more than stuffing it five times into the body copy. Google breaks your site down into key areas, with meta information and headers taking top priority, body copy taking secondary priority, and side bars and footers taking the last priority.

Continuing on, here are some more details as to how to make a website more SEO-friendly:

Title Tag

This is the title included in the HTML part of the web page, found on the top of the browser window. From a website…

exampleoftitletag

And here is what you see in a search engine result (such as Google)…titlesearch

Example of the title in the HTML:

titletag

Writing Tips:

  • Unique relevant keywords
  • Limit to 55 characters (512 pixels)

The Meta Tag Description

This is the text preview that shows up when a website is listed in a search engine…

description

Example of meta data in the HTML:

htmldescrip

Writing Tips:

  • Use keywords
  • Call for action
  • Keep under 155 characters

Headings

Similar to an outline in formatting, headings are the titles for each relevant section. In HTML, these are the H1, H2, and H3 tags.

W3schools.com, summarizes it perfectly as to why headings matter:

Search engines use your headings to index the structure and content of your web pages.

Users skim your pages by its headings. It is important to use headings to show the document structure.

h1 headings should be main headings, followed by h2 headings, then the less important h3, and so on.

Writing tips:

  • Only include 1 H1 Tag on each page and add the remaining H2, H3, H4 (…and so on) tags as needed.
  • Headings should include keywords
  • Headings should stay to the point and attention grabbing

Alt Tags and Relevant Naming

This applies to images, video, and links. For example, img4.jpg is neither descriptive nor helpful when it comes to making it identifiable piece of information.

All images and video must also include the “alt” Tag. Why? This provides an alternative option for when images do not load properly and also allows screen readers to inform the user of the image they cannot see.

Example:

<img src=”bears.gif” alt=”Hugging Bears”>

Outside Links

Usability and SEO can be intertwined at times. While links are how users visit websites, search engines are often the means of getting to that website. But when it comes to keeping the visitor on your website, that part is largely influenced by you. Here is a very helpful set of advice made by one person in their article, 10 SEO Tips for Food Bloggers:

Make External Links Open in New Window.

This is more of just a usability tip, not so much SEO. But sooooo many bloggers don’t do that. For example, if I mention any external website in my blog post, I always make it open in new window by clicking on the link button and checking off the box above. Why? because you don’t want to lose your readers. Of course some will come back but some won’t. And finally, it’s a pure convenience.

Oh and while on this subject of linking, keep in mind that while a user is navigating a website, the amount of active traveling around via clicking should be kept within reason also. Excessive linking (via clicking) can become irritating to the user and it can frustrate them because they may feel like they are not getting where they need to be as expected. According to WikiWeb, A well-known rule in SEO is that no page on your site should be more than 3 clicks away from the homepage.

Schema

Schema microdata is a way of helping search engine crawlers recognize what types of information is being used. For example, if using schema in html to label some specific data on a cooking website,  a search engine can use that schema to recognize which parts of are listed as recipe ingredients and which are not. For this reason, schema is quite similar to the description meta tag in the sense it helps the search engine know what needs to be interpreting as search-worthy.

itemprop

In the photo above, itemprop contains the schema pointing out which image on the web page is for the cherry pie recipe. Then, when this particular recipe is found in the search results, it not only shows a title and a description, but also displays an attractive picture also.

And so by using schema, “Clear, concise rich snippets can result in higher click-through rates, as users can quickly and easily determine whether the content on your site is what they’re looking for.” (Source: How to Use Schema Markup for SEO: Making Your Site Easier to Find for Stupid Machines)

Schema can be used to define a wide variety of ideas and concepts: things like names, addresses, authors, and even dates are some other common ones just to name a few. While the schema website itself provides a very detailed set of Getting Started documentation, I find the most popular types of useful schema are the Creative Work ones. Either way, it really depends on what type of website content you have in order to determine which schemas are best to use.

Use this online tool to test your Schema markup: Google’s Structured Data Testing Tool.

URL Naming

Giving URLs meaningful names is always a good practice. Here is an example of a fictitious, not-so-good url:

www.gohere.com/0032.htm

This is not SEO-friendly! All links should have meaningful names, like this:

https://gohere.com/seo-guide.html

Incidentally, WordPress is already well aware of just how important this practice is. On each newly created page or blog post, WordPress will automatically name the URL (the “slug”) after each specific headings/title provided.

URL Writing Tips:

  • Only use letters or dashes. No underscores!
  • “Sub-domains can rank better than sub directories.” – Should I Change My URLs for SEO?
  • Make URLs short. Shoot for around 3-6 words, under 100 characters.

Creating Links

Text identified as links should be specific as possible. For example, don’t just link to Google when you can link to the About Google page.

Writing Tips:

Content

Google itself is becoming very smart and SEO is becoming something where if you have something to say, just go ahead and say it and it will be found by search engines. Below is an excerpt from Search Engine Watch’s article, “Are Keywords Relevant to SEO in 2015?”

Google Looks for Meaning, Not for Specific Words

This feature perfectly illustrates why keyword specificity is dying. When Google scans your site for information, it no longer pulls out the keyword phrases it thinks are relevant and pairs them to user queries. Instead, there’s an intermediary step. Google interprets the data on your website, and begins to form its own conclusions about what your site and your business really deliver. If that seems a little spooky to you, you aren’t alone — Google is becoming exceptionally sophisticated.

As an example, according to Google’s own research, deriving meaning from the synonyms of keywords accounts for up to 70 percent of searches. That means it doesn’t matter that you used the phrase “auto repair shop” exactly several times throughout your website. You could use “auto repair shop,” “car repair specialists,” and “vehicle repair facility” on different pages, and Google could theoretically put you in the exact same category. Therefore, it’s far more important to optimize your site for a specific meaning rather than a specific phrase, and you can likely forget about keywords altogether in an effort to post relevant content and naturally build yourself as an authority in a given space.

What this means for SEO is that the importance of quality content writing is huge in itself! Effective content is therefore truly the core of everything that makes a website worthwhile to visit. Users have to have a good experience, because without it interest will not be formed, and without interest, search engines find no interest either in following or recognizing the search trail.

Web Writing Tips:

  • Quality over quantity
  • Uniqueness of material
  • Stay relevant
  • Use attractive and attention grabbing language
  • Stay up-to-date

Duplicate Content

When I first heard about “duplicate content” I wondered if it was about redundancy on a web site. Instead, it is conceptually more similar to what can happen when the same stuff from one website appears on many other pages in an abusive way. A search engine like Google can potentially find it and cause that site to be removed from their searches. Duplicate content issues sound a lot like plagiarism in real life with actual consequences.

Related to this subject, “web scraping” is something that strikes me as as similar to somebody taking something and claiming “it came from the Internet”. This type of distributing can be something somebody found and shared- not necessarily claiming as their own. Undeniably, the Internet is full of that- people finding other people saying anything, and sharing that found material anywhere.

People who are making websites shouldn’t be trying to plagiarize or steal other people’s content, so this shouldn’t be a concern for those who really care to be original anyway. For more information, Kissmetrics has an excellent article that does a good job explaining duplicate content in greater detail, how to handle abuse and also how to avoid duplicate problems:

3 Myths About Duplicate Content

Programming and SEO

A set of advice that I find terribly irrelevant to SEO is talk of not mixing JavaScript and HTML. As of 2016, I feel like this almost not worth mentioning, since it is not a good programming practice in general to mix programming into the HTML page. Things like that should always be set aside in a different file anyway.

However, what still does matter is when programming code interferes with the way a search engine recognizes what the user is dealing with. For example, what if every single piece of data is dynamically created? There is nothing left for search engines to crawl and certainly no footprints of what was even clicked on or viewed if actual web pages are not being loaded.

 Web Tools

Putting everything together, the Meta Tag Analyzer is a useful online tool as well. It acts like a validator to check meta data.

Also, being aware of the Google Webmaster Guidelines is also a must-know in ensuring Google can find and understand your pages.

Conclusion

There are certainly a lot of ways to make a website SEO-friendly, right? A word of warning: these rules are still changing. Keywords used to be stuffed everywhere and now that is considered not a big deal. Some “older” SEO articles can be found recommending things like using the name attribute in a link tag…but don’t try that now! It is no longer supported in the newest HTML5 of 2014. Even Google itself changes their mind as to what is SEO material: one can read about this thing called Google Authorship being all the rage in 2011. But then in 2014, this hot new feature is declared as completely dead.

The only thing one can definitely say is that the web is changing drastically for each year that goes by as to how SEO gets across. Ultimately however, the whole point of SEO continues to be all about having passion and drive about something and finding the means of bringing that to others.