To stand out from the crowd and make your message pop, you may spend hours scouring the web to find the best and most creative fonts and images. But keep in mind, the perfect font or image you find may come at a steep price if you don’t have the right license or permission to use them.
Fonts are creative works that are considered a type of intellectual property. They can be trademarked or subjected to copyright laws whether they are part of a computer program or a standalone product.
Fonts and font families are often created by designers who receive royalties for the use of their work, and therefore many are copyrighted. For the designers to earn a living, it is common for marketers and other creative professionals to purchase a license to use the unique font.
Avoid future cease and desist letters in regards to your font choices, by making sure that you understand the license requirements for the use of the font. Some licenses may come with limitations to how many users have access to the font, transferability and commercial usage.
Paid fonts are worth the cost if you want to ensure proper rendering across multiple platforms from print to TV, to the web as well as access to a wide variety of characters in the font family.
It’s easy to get caught up in how simple it is to save an image from the web and use it in your own project. But that doesn’t mean that you should.
Like fonts, images are created by photographers that intend to receive royalties for their work and have copyrighted their pictures. While there are many different licensing permissions when it comes to using images, always be sure that you have adhered to the license guidelines or have permission from the creator to use their work.
There are plenty of free sites that allow for free usages like Unsplash and Pixabay, they just ask that you credit the photographer. Or you can create your own graphics for free. I like using Canva for their free templates and images.
A lot of money, time, resources, and talent went into creating the perfect font or image that you found on the internet. The person behind the asset makes a living off of their creation, so the least we can do is to pay to use it.
When you purchase a font or image, you are not only supporting the creator, but you also have a high-quality product that you can use throughout all of your branding.
As the saying goes, “you do get what you pay for.” If you invest in a good font or images, they will play integral parts in your brand or company’s toolkit.
As websites become increasingly easy to create with no developer knowledge, anyone can have their own website. Even your grandparents. If you have a website, it is your responsibility to create a great site that others can safely use and submit information into. Users need to trust that their data is safe and secure.
WordPress is a popular platform being used by 25% of all websites on the internet. With the popularity comes a price. Hackers focus much of their attacks on WordPress sites because it is so widely used. Without adequately securing your website and backing it up, you run a high risk of your website being compromised. One standard way attackers can hack into a WordPress site is through a plugin. They will use vulnerabilities in a plugin and inject their own code to gain access to the backend of your site and all your stored information.
Here are a few plugins that I have used on my WordPress website to help avoid security issues:
Wordfence – This plugin currently has a rating of 4.8 out of 5. It has a ton of great security features for free, but you can upgrade to their Premium version for a monthly cost. Included in the free version are these services:
Web Application Firewall
Block Brute Force Attacks
View Blocked Intrusion Attempts
View Google Crawl Activity
View Bots and Crawlers
View Logins and Logouts
View Human Visitors
Monitor Disk Space
Get Detailed IP Info
Unlike most security plugins, Wordfence runs locally on your server instead of on the cloud. A server-based security plugin means that your firewall is on your local machine, rather than on the cloud. While this practice can slow down your website especially since this is a pretty heavy-duty plugin, it’s a good practice to have a caching plugin to help speed up browser caching. Having a locally run firewall gives you more control and flexibility over your security.
Backup Buddy – This is a free plugin by iThemes that backs up your WordPress site for an added level of security and protection. It backs up your entire WordPress site including all files and your database. If your website or files become compromised, Backup Buddy has your back. Backup Buddy comes with these free features:
Scheduled and automated backups
Customization of the type of backups you want to run
Ability to store your backups safely offsite like on Google Drive or Dropbox
You can also restore individual files from a backup instead of having to rebuild the entire site
Website Security is never set it and forget it
Hackers are continually becoming more sophisticated in their methods and their research into discovering vulnerabilities. Your website may have been deemed impenetrable last year, but that doesn’t mean it’s equally as safe now. To make matters worse, even outside of WordPress, any data you share over the internet could be compromised, as we’ve seen through data breaches with Target, Equifax and much more. Most recently was an attack on Wi-Fi creating a vulnerability on all Wi-Fi devices. I have an Android phone, and as of this posting, a patch and update still haven’t been issued that I’m aware of.
Ok, enough of the scary stuff. The best thing you can do as a responsible WordPress developer is to make sure your plugins and website are updated. I get emails almost every day on plugins that have been updated. It may seem annoying, but at least I know that the developers are working hard to make sure their product and my website stay safe.
Back in 2004, I just graduated from Penn State with a degree in Advertising, and I had taken an internship with an Internet Marketing company called UnREAL Marketing. This was my first real immersion into SEO, analytics, and keyword search terms. Way back then, we used a keyword planning tool called Overture by Yahoo! and I don’t think I ever heard of Google Analytics at that point.
We had a car dealership client that wanted to rank on Google for their BMWs. As an intern, I was tasked with coming up with a bunch of keywords that someone would type into a search engine when looking for BMWs. This particular list would include various misspellings, model numbers, vehicle colors, and anything else you could possibly think of when searching for a BMW. It was a pretty extensive list. You see, back then, it was common practice to just list on an excel spreadsheet all the words you could possibly think of that was associated with your product. Then we would create banner ad campaigns around these keywords. Remember those banner ads and pop-ups that drove internet users crazy in the late 90s – early 2000s? Hi, that was me.
The Evolution of SEO
SEO (Search Engine Optimization) has definitely evolved since then, thankfully. Nowadays, you can’t just go all in and try to target in your ad campaign for whatever keyword you can think of. Well, technically you still can, but you would waste a lot of time, energy and money. Internet users have gotten smarter when it comes to ads in their search results. Gone are the days when people couldn’t tell the difference between a google ad and an organic search result. People searching on the internet have become more sophisticated and with that, so has the search engines.
SEO specialists, content creators and web designers have moved away from keyword stuffing their website and have focused on writing good, clean content for people to read. Remember back in the day when websites would often have paragraphs at the bottom of the page of just random keywords? In today’s world, that’s just bad practice and is one of the tactics in black hat SEO. With content now being the main focus for search engines to bring people to your site; web designers and SEO specialists are tasked with creating ways to describe their intent and products with clear, consise and natural sounding descriptions. Keywords are still important, but instead of stuffing content with as many keywords as possible, it has to make sense. The search engine bots and spiders can recognize when you’re just spamming a page with as many keywords as possible.
Best Practices for SEO Success
How can you create a better performing site when it comes to SEO? Here are a few best practices that will help your website rise above the competition.
If you don’t have Google Analytics tracking set up, then you are totally missing the boat. This is a powerful free tool by Google that tracks and measures anything you could possibly want to know about your website traffic. You can see what landing pages are most popular on your site, what devices your audience uses to access your site, the demographics of your audience, how they interact with your site, and what referral sources are sending you the most traffic. This is just a small portion of what you can measure.
If you have a WordPress site, it’s easy to add your Google Analytics tracking code to all of your pages with a plugin. I used MonsterInsights, but I’m considering switching over to Google Analytics Dashboard for WordPress soon after I received some positive recommendations. If you aren’t using WordPress, no worries, Google offers recommendations on how to add your code to many different platforms.
Moz has a great page on the importance of title tags. But to sum it up, the title tag is the first impression of what your site or page is about. If your website is about roofing, it will make sense to put the word roofing or roofer in the title tag. Title tags are visible on the search engine result page, the tab on web browsers, and on social media platforms when a link from your site is shared. It is recommended to keep the character length between 50 – 60 characters or else the rest of your title will be cut off in the search engine result in the page. A best practice is to place the most important keywords at the front of the title and do not overstuff the title with keywords, making it sound unnatural.
Headers and Sub-headers
Headers and sub-headers in your content are sort of like book titles and chapter titles. A header is similar to a book title by giving the reader an idea of what the content is about. A sub-header is like a chapter title by breaking up the content between thoughts or sections. Headers are read as h1 tags in HTML code, and sub-headers are h2..h3…h4 and so on. These tags give the search engines a good idea of what your content is about and can contribute to your SEO results. A good practice is to add important keywords in your headers to further confirm to Google that your page is about the keyword you want to rank for.
A lot of weight used to be put on meta description in regards to SEO but back in 2009, Google announced that it was no longer weighing this description in the ranking factors. But that doesn’t mean that you shouldn’t put any effort into writing out a clear and concise meta description for your pages. Why? Because the meta description in what is seen to describe your site on the search engine page results. You don’t want a bunch of random jumble to show up. That would definitely be a bad practice. It is suggested to keep your description within 160 characters to avoid it being cut off.
If you are using WordPress, a good plugin that I recommend to help with meta descriptions and SEO is WordPress SEO by Yoast. This tool helps you to customize your description and ensures that you meet the recommend character length.
Inbound and Outbound Links
Inbound links are links on other websites that send traffic inbound to your site and vice versa for outbound links. If the inbound and outbound links are coming to and from reputable websites, this can help improve the SEO quality of your site. This tells Google that a) you are the expert in a subject that other sites are linking to and b) your site values quality content.
Inbound links are also referred to as backlinks, and they serve as a vote of confidence between two sites. Getting other reputable websites to backlink to your site can be very time consuming, but worth it when it comes to SEO juice. One way to do this is to offer a well-developed and insightful blog post that is related to the site you want to link to and links back to your own site. Of course, that’s if the site accepts guest blogs.
If you create well thought-out content on your own site, eventually the backlinks will come naturally. You should be warned, however, that if spammy and less reputable sites link to your site, it could negatively affect your SEO. Look for free backlink checker tools to see who is linking to your site. If you discover a site that you don’t want to be linked to, reach out to them and ask them to remove the link.
Canonical tags, No Index, and No Follow
Canonical tags can seem a bit complicated if you don’t understand what purpose they serve. Google frowns on duplicate content and in it may be necessary for your site. A canonical URL or canonical tag tells Google which URL is the main one you want the bots or spiders to index. Let’s say you have a website that sells training courses to be viewed online or through a DVD. Both the DVD and the online course may require a different page on your website for the ease of navigation. It would be hard to create different content for the same course on two different pages. By setting up a canonical tag at the head of the HTML code for the page you want indexed as the main one, you avoid dividing up your SEO juice by competing with yourself in search engine rankings.
No follow tags tell Google that you have a link to your website that you don’t want to bots to follow for indexing. I had used this in the past when the company I worked for participated in sponsorship. I added a link to the event on my company’s webpage, but I created a no follow tag because the event website was so poorly designed that I didn’t want their bad SEO to weigh mine down.
This SEO practice is relatively new and pretty powerful. Search engine bots and spiders are good at gathering data and making assumptions on what your content is about. But they’re not perfect. They can’t comprehend what your intent is. Schema Markup is a way to directly tell the crawlers exactly what your intent and purpose is to your page or website. In turn, this creates rich snippets for your website to display the most meaningful information right up front on the search engine results pages. Some examples of ways to use schema markup include event dates, recipe information, and review ratings but you aren’t limited to those options. This article provides great insight into the how and why to use schema markup on your website.
You can SEO the crap out of your website but what is the value of any of it, if you have poorly written content? It may bring in a ton of traffic but that doesn’t mean its meeting the end goal of creating more business for your company.
A good piece of advice but often hard to follow is to write for the customer, not for your company. You might think that your widget’s material composition is the coolest thing about this product, but if your visitors only really care about its warranty and you don’t mention it, then you’ve missed your mark. Your content has to answer the question that your target audience is looking to solve. Find what words your audience is using when searching for products like yours with free Google tools like Google Trends, Analytics or Webmaster Tools. These can tell you the keywords that people are searching for, and then you can mold your content around that.
Web sites aren’t set it and forget it. Fresh content also plays a factor in your search engine rankings. Update your pages over time and make sure they are still targeting the right keywords as trends change. Consider adding a blog to your website to ensure that you always have keyword-highlighting, fresh content for Google to index. Pay attention to marketing trends. Currently, there has been more focus on videos as marketing tools. Think about adding videos to your website, as it may draw in a different sect of new customers that you may not have been able to reach before.
Shooting in the Dark with SEO
Google and other search engines are always trying to adapt to their own audience by striving to present people with the best and most relevant content first. With this being the case, search engines are always changing up their algorithm on what ranking factors they find to matter most.
The magic combination of SEO rankings is a mystery and highly guarded by Google, which often makes digital markers and SEO professionals feel like they are shooting in the dark. What once was ranked as important by Google regarding SEO, a few years later may no longer bring in the traffic. This is why whenever I do a search on Google for SEO related information, I always make sure that I filter the search results to only show information within the past year. SEO is ever evolving and it’s important to stay aware if you want your site to maintain good rankings.
If you create a website that has genuinely good content that is relevant to what your audience is searching for, then you shouldn’t need to stress too much about SEO. As mentioned earlier, Google wants to provide their audience with the most helpful information first. Strive to make your page accessible, easy to navigate, fast to load, clear and concise, and you should be on your way to winning at SEO.
My most recent course lessons have been exploring the ins and outs of UI, UX, and Accessibility. How a person interacts with the site, feels when using the site, and their ability to navigate throughout is the backbone of good web design.
Below are the eight steps I performed to make sure that my recent discography website project is accessible and usable for everyone. You can click here to check it out.
Minify Files – Minifying my CSS files helps to remove page-slowing white space. I used the website, CSS Minifier, to compress my files.
Optimize Images – By optimizing images, it helps to keep my the file size of my images small so that the page and images load faster. I used a couple of free sites like Kraken.io and TinyPNG. I did out later on that Google’s PageSpeed Insights will optimize your images for you and put them in a file that you can easily upload.
Check Color Contrast – In my course about accessibility, I learned that color and especially contrasting colors are essential for visually impaired users. Lighthouse, located in the Chrome Dev Tools Audit tab, can help check for contrasting colors as well as other super helpful error checks.
Add Alt Tags – Alt tags are helpful to describe images and links for screen readers. I added alt tags for useful descriptions.
Add Table Summary – Tells screen readers what the table is about to help better describe the information that follows.
Table Head Scope – This tells screen readers what is a column and what is a row in a table.
Speed Test – Page load speed is vital in usability and SEO. No one will wait for a page to load before moving on to the next website. I used Google’s PageSpeed tools to test the site to ensure that it’s ready to go live.
Testing your website before it goes live is an important task to ensure the site’s success and longevity. Here are three tools that I found helpful in the designing process. If you are creating a site for a client, it is important that the final product can perform well.
W3C Validator – This is a free tool that checks the validity of your CSS and HTML files. It makes sure you don’t have missing closing tags or any other elements that are left behind. The tool provides you with suggestions on how to fix the errors.
Google Pagespeed Insights – Created by Google developers, this free tool checks your sites for things that may slow down your page load time. It even can provide you with optimized image files of your images.
Lighthouse – Another free tool created by Google developers, it audits your site for page speed issues, accessibility, and best practices. It is available on the Audits tab of the Chrome Devtools.
Regardless of the tool(s) that you decide to use, it’s important that they can help point out the common website problems of large image files, un-optimized code, caching and multiple HTTP requests. These issues slow your site and also contribute to poor website rankings.
Responsive design is the standard in web design now that the audience has become increasingly mobile. Throughout my web design program I’ve been taught to always use a “mobile first” approach when planning out a design project. In Ethan Marcotte’s article, Responsive Web Design, he wrote in 2010 what today is a common practice.
A common way of thinking has been to design for the web the same way as one would design for a newspaper article, with columns. Marcotte discussed in his article that we are no longer constrained to a static size, but must adapt to the “ebb and flow” of the viewing device. To further his point, he created a website, Robot or Not, that showcases how a responsive design is done right at any breakpoint.
Desktop view of website –
Marcotte makes great use of media queries and flex boxes to showcase certain parts of the website by making them larger depending on the device used.
In his mobile view, Marcotte moved his logo to the middle top of the screen and scaled it down. The navigation menu becomes a two column layout. I like this view instead of the usual hamburger menu because you know what is included in the site without any extra taps. I think what I like best about the mobile view is the photo galleries at the bottom of the mobile view. The gallery header moves to a bigger font and the images are stacked on top of each other in a much larger view than the desktop view. It really makes the images stick out to me.
In the small tablet portrait view 600 x 800, Marcotte continued to use the same size logo as the mobile view in the top center of the screen. The nav bar is no longer stacked but stretched out across the screen for ease of use. If you scroll down to the bottom of the screen, the image gallery now is a two column set up with two images stacked on top of the other. The header for the gallery still maintains the large font size as the mobile view.
Once we move into the smaller responsive screen sizes, we do lose some of the fun quirks of the larger sizes. Background box shadows would appear in each image of the gallery when hovered and the gallery images where slightly skewed to give it a fun appearance.
Overall I think that web designers just starting out, like myself, can learn so much by just studying the code that Ethan Marcotte used in his Robot or Not website. I can only image how many other great responsive websites are out on the web since his site was first created. Being able to view sources and inspect elements provides web design beginners with expansive resources to understanding the creativity behind the screen.
Web design and development is a growing industry and will continue to grow as the world becomes increasingly digital. If you are ready to grab a piece of the digital slice, you may have googled, “how to get a web developer job without experience”. If you have, you would have landed on this article:
“How to Land a Job as a Junior Web Developer”. Honestly, I didn’t even know that a junior web developer was even a thing. As of today, there were 3,389 jobs listed on Indeed.com as a junior web developer. So yeah, it’s a thing.
After reading the article mentioned above, it gave twelve suggestions on how achievable a career was even when you are just starting out in the industry. Below are my five key takeaways from the article.
GitHub is the Holy Grail
Since my time in my web design program, GitHub is very often being mentioned. Whether it is in a video, article or a local meetup, someone will always mention GitHub. This article is just one of the many references. I have yet to jump into that world but I know that my chances of landing a job in the web development world is probably slim if I continue to stay in the dark about it. GitHub is a website where developers can show off their coding skills. If you are more design-oriented, Dribble may be a good place to showcase your designs. It’s like a Pinterest for designers.
Rub Elbows with the Experts
Another constant theme I hear is to go to networking events, like meetup and meet with professionals in your area. Showing up and being seen will give you the opportunity to learn from experts in the community. Sometimes landing an interview could be all about who you know.
Prepare a Portfolio
Future employers no doubt want to see that you have the skills to back you up. If you are just starting out, it’s important to be able to show that you have a good understanding of the basics. Having an online portfolio shows the interviewer that you have spent some serious time tackling a project from beginning to end, even if it is a website for a made up company.
Pro Bono Pro Future Career
Consider taking on some freelance work for local companies who are willing to work with someone just starting out. In some cases, that may mean that you will work for free just to gain the experience, but the experience will be worthwhile if it means landing the job of your dreams.
Always Be Learning
The web design industry has exploded exponentially in the past thirty years and the advancements never end. To be competitive, you have to be able to hold on for the ride. That means that you have to always be learning. Just because you land a job, doesn’t mean your learning is over. It’s just the beginning. Follow industry news through newsletters and social media, especially Twitter. Stay on top of the learning curve to keep you competitive in your job hunt.
Here’s a bit of my own advice, always take each interview as a learning experience. Whether or not you are fully prepared for the job in question, at least each interview will give the stepping stones to know what is expected in the web developer profession. This experience will help you hone your skills into a better presentation and in turn will make you a better developer.
Hello. My name is Jenn and I’m a productive procrastinator. In this article, the author defines productive procrastination as the act of creating a task list and moving down the list as you get bored with the previous task. A productive procrastinator will continuing moving up and down this list until all the tasks are completed. I had no idea that others have developed this same habit, but whatever your habit is, there are many tricks to living a productive life.
Within this article, I found three tips to be useful in my goal towards a happy, productive life. As discussed previously, creating lists is my tried-and-true way of being productive. My second favorite tip from the article was isolating your senses. I’m the type of person who cannot think with white noise surrounding me. I’m at my most productive when I’m out of the house and at a quiet place. My favorite place to work on a project is All About Cha. When I’m there, I’m away from the daily household chores that creep in my mind and beg to be taken care of instead.
My third favorite tip from the article was to pick one tiny thing and do it. Life can get pretty overwhelming, especially for me as I work two jobs and take online classes. I often set daily or weekly mini goals to keep me on task. The best thing for me is to keep running lists. As an analog person, I often have multiple hand-written post-it notes or running lists at my desk, in my purse, or on my refrigerator.
In a related article, (as in also assigned in my web design class) but not really related (as in a totally different topic), there could be new developments in identity theft by using your fingerprints. Not just the fingerprints you leave behind on a glass, but the fingerprints that are visible in a photograph. Imagine you’re posing for a picture with your favorite Spock hand gesture; guess what lives long and prospers for someone else – your fingerprint! According to Japan’s National Institute of Informatics (NII), the researchers were able to copy fingerprints based on photos taken by a digital camera three meters (nine feet) away from the subject. While I’m always amazed by technology advances, this is not one that will get a thumbs up from me. Especially not in front of a camera.
“The main one being that all Bootstrap websites tend to look the same.” – CSS Guy
“Bootstrap was never meant to be used as a website development framework per se…The thing is that Bootstrap was built at Twitter, so that the developers could work faster by using a standardized interface to present their creations…A purpose that’s not entirely in line with the standard concept of web development.” – HTML Center
“One of the major issues I have with Twitter Bootstrap is that you end up with a whole lot of DOM elements crammed full of classes.” – Zing Designs
Despite the naysayers, Bootstrap IS one of the most powerful frameworks available and that didn’t happen without a majority of front-end developers having successful experiences. Bootstrap continues to be a mainstay in the market because of extensively developed features such as:
Great grid system
Base styling for most HTML elements (Typography, Code, Tables, Forms, Buttons, Images, Icons)
Extensive list of components
While it’s true that Bootstrap, straight out of the box, will have cookie-cutter templates and a lot of unnecessary code, it’s important to understand that Bootstrap is completely customizable. You are not limited to un-editable themes or code-heavy features. You can pick and choose what features you want to utilize for your project and if you are willing to spend the extra time, you can design your website to look exactly how you want it.
For me, when it comes time to develop a mobile-ready website quickly for a client without having to incorporate it into an existing project, I would consider using Bootstrap. However, as my web design instructor said, “You will always need to learn how to deal with tons of code that you didn’t write. Your Bootstrap experience will teach you some things about that.”
If to Bootstrap or to not Bootstrap is still the question, check out this flowchart by ZingDesigns to help make your decision.
Landing your first dev job without a Computer Science degree seems like an overwhelming task. But it doesn’t have to be with the right attitude and the push to succeed. In an article, How to Land Your First Dev Job (even if You Don’t have a CS Degree), the author provides many tips and suggestions for a job seeker to break through the competition.
After reading the article, there were a few key tips that stuck out to me the most.
Build A Portfolio To Impress
Your portfolio should reflect what your career goals are. Fill it with projects that showcase your abilities and strengths. Do you have projects that integrate with other tools? Were you able to solve a complicated coding problem? Can you collaborate effectively with other developers? Did you develop a program that others can use?
Regardless if your focus is on back-end design, a well-organized website is your online business card to the professional world. Blogging about things that you have learned and has strengthened you as a developer is a great idea. What challenges have you experienced in your work and how did you solve them? Also, GitHub is an incredibly important tool to showcase your coding skills and should be linked on your website.
Networking can provide any job seeker in most fields an abundant source of information and knowledge. Join Meetup to learn about groups in your area that have like-minded interests in your field. You never know who you are going to meet that could eventually lead you to your next job. Not only can networking provide you with professional contacts but it can also keep you in the loop of new trends in your field as well as having a great group to brainstorm new ideas with that will make you more valuable to your prospective employer.
Networking opportunities are a common topic in my group discussions with fellow web design students. It is an important tool to help you grow as a professional, regardless of what your programming focus is. In the words of a fellow student, “You may find a job, internship or mentor. Never turn down a chance to network.”
Learn How to Present Yourself Professionally
Your impressive portfolio and your networking contacts may have landed you an interview, now what? It’s important that you can convey to your interviewer that even though you might not have a computer science degree, you’re still the right one for the job. Research how to prepare for a technical or whiteboard interview. Ask your networking friends for feedback or mock interviews. Know your strengths and weaknesses and be confident in your abilities.
Present yourself as a solver. You don’t need a computer science degree to learn how to be proactive. Even if you don’t have a specific skill that the position you are applying for requires, be proactive to have a basic understanding of the concept and be prepared to give examples on how you can troubleshoot issues. Show that you are willing to learn and that you have a good foundation of basic IT principals.