Tag: web design beginner

Is Your Website Trustworthy?

Jenn Clore

Is your website trustworthy?

The thing about taking a course on web design entirely online is that sometimes the videos, articles, and other material you have to read for the class, just aren’t updated fast enough. Take, for example, the most recent article I had to read on the topic of trustworthy web design – Prove It: What Makes You Trust a Website? by Lorelle VanFossen

It’s evident that the page hasn’t been updated in years. Since 2012 to be exact. I can’t lie that I’m a little hesitant to trust the information I’m reading about the trustworthiness of a web design from such an old article. But I dove in anyway, and despite the old-school design, VanFossen does raise some timeless and legit points on what makes a person not trust a website.

Trust Triggers

VanFossen talks about how trust triggers have a significant factor in a site’s credibility. These are the elements of the site that has to be seen clearly and immediately before the “back-button syndrome” gets triggered. A website only has a few seconds to prove its trustworthiness before the back button gets pushed. Elements such as a clear and concise logo, clean images, and a strong message all contribute to a page’s trustworthiness. However, what conveys trust for one website, may not work the same for others. It all depends on the user’s definition of what makes a site trusted.

In Dennis List’s article, “Trustworthiness of Web Sites (2006)”, another old source but still relevant today, he states,

I propose a working definition: that trust in any object can be measured by the willingness of visitors to interact with it in some way. When the object is a web page, which means not just looking at the page, but believing the information presented, or acting on it.

Sounds like List just defined UX years before the term became popular.

Content with Personality

One major point in the VanFossen’s article is to make your company and website sound more personable. This may only work for some companies, but I have done this in my own practice as well. The company blogs should give a personal feel. Talk about the employees that help to make your product or service successful. In the blog, convey your brand message with topics that would make your audience smile or identify with. Let your audience know who the company is behind the scenes. To quote the article, “Don’t leave it to their imagination.”

Website Credibility Factors

I did my own research to find a more current article that talks about website credibility. I found an article published in September 2017 by Neil Patel that provides a thorough analysis, 41 Factors That Influence Your Website’s Credibility.

The articles from Patel and VanFossen both talk about B.J. Fogg’s Four Types of Credibility Study.

  1. Presumed – assumed credibility based on where the user has heard about your brand
  2. Reputed – Word of mouth credibility based on the advice of others
  3. Surface – the subjective opinion on how the website appears to be
  4. Earned – the visitor’s opinion based on their interaction with you

Based on Patel’s article, here are a few actionable items that you can do on your website now to achieve some of the credibility types in Fogg’s study.

  • Provide helpful FAQs – Don’t make your visitors work to find the information they need.
  • Always be updating – if your website is frequently updated with new blog posts, it shows to the visitor that you are actively involved in maintaining the site and finding new ways to answer potential questions.
  • Show your testimonials and reviews – Word of mouth referrals are an essential part of gaining new customers. Reviews can boost the credibility of a good company.
  • Display trust seals – If you are affiliated with reputable companies and services, let your visitors know. Membership badges from the Better Business Bureau or secured website badges give your visitors the peace of mind knowing that your site and business has been verified by trusted 3rd
  • Minimal questions – Only ask for the information you need. If you are asking for someone to sign up for your free email newsletter, it may be a little unsettling to fill out a form that asks for more than just name and email address.
  • Guest blogging – The more you can lend your company name to other respected sites by providing useful information, the more credible you can make your own brand name.
  • Clear Design – Typography, grammar, navigation, and a professional design all play significant parts in the credibility of a website. If the site looks spammy, has misspellings, slow to load, or confusing to navigate, these factors could immediate red flags to any new visitor.

Three Main Takeaways

Here are my three main takeaways from I gathered from both articles about website credibility.

  1. Your website must answer the visitor’s question without them even putting it into words. For example, if a visitor uses google to search for “box fans,” a good and credible website should be well designed to answer more than just “box fans, ” but any follow-up questions they may have such as:
    • What kind of box fans
    • What has others said about these fans
    • Where are the fans made
    • How much do they cost
    • How long does it take to deliver
    • What is the warranty
  2. It’s easier to trust something when there is little to lose – If the visitor is required to enter in any information, be clear about what the steps are, what the expectation from receiving this information is, and only ask for what is absolutely necessary.
  3. Giving the site personality gains trust – An About Us page, blog articles about company culture, testimonials and reviews all contribute in providing the visitor with a bigger picture of what the company is all about.

Usability and Accessibility

Jenn Clore

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.

Validate Markup – Validating my markup ensures that my website shows up correctly in all uses. I used the W3C CSS and HTML Validation Service tool to check that my code is W3C compliant.

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.

The Tools For Success In Website Testing

Jenn Clore

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.

I Have No Idea What I’m Doing – An Introduction To CSS Grid

Jenn Clore

In my most recent class assignment, I was introduced to CSS grid. I read articles by Jen Simmons on the topic and watched instructional videos by Rachel Andrew. As I read along and watched the examples in action, it seemed easy and straight-forward. It couldn’t get any easier than actually writing out exactly how you wanted divs to be laid out.

As I watched the tutorial videos assigned and followed along, I thought to myself, “ok, finally something I can do.” But as with all of my projects so far, it’s never as easy as it seems. I often tell myself that I have no idea what I’m doing. This project was no different.

I was tasked with redesigning the index page of my Discography project and do the same thing but using CSS grid. In the original assignment, I used Bootstrap.

It was easier to layout most of my page in CSS grid. It turned out I was already using the Holy Grail layout, and I didn’t even know it. Way to be original. So that helped a lot with positioning and naming my elements.

I struggled with getting my header nav links to align to the left and be responsive. I was able to accomplish that using a bit of flexbox. Part of the assignment was to add a feature query. I tried out the initial-letter rule to add a bit of flare to the band description in the center of the page.

Caniuse says initial-letter is a no-go on Chrome, but with the @support rule, it should be seen in Safari browser and be skipped over in other browsers that don’t support the feature.

I can say that by the end of the project, I had a better grasp on CSS grid and its capabilities. CSS grid and flexbox seem easier to use than Bootstrap, in my opinion.

Check out my design using Bootstrap – http://www.clorecreative.com/PanicDisco/index.html

Check out my design using CSS grid – http://www.clorecreative.com/cssgridpatd/index.html

Overall, can say I spent more time on the site using Bootstrap so it has a more polished look. But the CSS grid site took less time to put together. If I had to choose one or the other going forward, I think I would lean toward CSS grid and flexbox.

 

 

Clean CSS in 7 Simple Steps

Jenn Clore

I recently watched a Lynda.com video tutorial on CSS Visual Optimization. This lesson went over the basics on how to create a more efficient, clean, and optimized CSS stylesheet. From this information, I compiled a list on what I believe are the seven most important tips to create clean code.

  1. Color Guide – Recently, I worked on a typography project that I wanted to make use of 4 or 5 main colors to use without the site. I had to either scroll up and down my code to refer to the color I used previously. Then I thought I was really efficient when I wrote it all down on a piece of notebook paper instead. A color guide is a great idea to create a key at the top of your code with all of your colors in one spot.

  1. CSS Reset – I’m about 4 month into my web design program and I just learned about the CSS reset. I wish I learned about this so much sooner. By default, browsers have their own style already embedded into a website. A CSS Reset clears all the margins, padding and other bothersome code and gives the coder a clean slate to start with. This tip is also explained a little further in an article by Silo Creative. There are a few reset options to choose from, but whichever method you choose, it will ultimately help with better design because you won’t have to create extra lines of code to erase the default styling throughout your markup.

  1. Table of Contents – This tip is particularly helpful if you plan on selling your code as a theme or if other people will need to look at your code and help edit it. An article by Cats Who Code, explains that, “As CSS files are becoming bigger and bigger, the easiest way to quickly find what you’re looking for is to create a table of contents and organize your ids and classes.” This tip will make designers work more efficiently, especially in the testing phase.

  1. CSS declarations – In the Lynda.com video, I learned that having too much white space in your code creates longer load times. Shorthand techniques and minimal white space makes code look cleaner and you can find what you are looking for fast. If you have one rule for a class, it’s ok to put it all on one line. If your class has multiple rules, you can put it on one line as well and separate each by a comma. For clarity sake though, move the selectors with multiple rules to multiple lines. Creating faster websites make for better web designers.

  1. CSS Shorthand – Embracing CSS shorthand saves the web-designer a lot of time in the developing stage. Instead of taking up white space by multiple lines of text, it is more efficient to condense your code into one line if possible. For example, instead of writing out #FFFFFF for white, you can condense it to #FFF. Instead of writing out a separate line of code for padding on all sides of an element, try putting it all on one line.

  1. Typography guide – A good website usually tries to keep within two fonts, maybe three. Along the same lines as a color guide, it’s also good practice to have a typography guide so you can have a quick reference to where you should use which font. This makes you a better designer because you save time in your development and create a guideline for consistency on where how you use the fonts chosen for your design.

  1. Creating a structure template – Creating a structure template for the things you do repeatedly each time you create a new web design efficiently cuts so much time in the design process. If you use the same reset method every time or use the same typography every time, or you’re a fan of responsive two column designs, it would be helpful to have a template saved with this code already created. This saves you multiple lines of code that you don’t have to type out every time.

I found these tips helpful in my recent typography project. I used the color guide and typography guide at the beginning of my CSS to help keep me consistent in my design. I also started cleaning up all of the white space I created by moving applicable rules to one line.

 

Ten Reasons Why I’ll Crash and Burn or Ten Reasons Why I’m A Rockstar

Jenn CloreLeave a comment

blog-1-crash-and-burn-1

Five years ago I never gave web design any thought at all. Five years ago, everything changed. Five years ago I moved to Oklahoma. I started working for an online safety training company. I worked with animators, sound production, database engineers and subject matter experts. This is when my eyes were opened to digital marketing and all things technical. Five years ago, I’m not sure if I could tell you what an operating system was on my computer and how to find it. Fast forward five years and here I am, starting my journey into web design and it’s terrifying but also incredibly exciting. Let me tell you why.

Ten Reasons Why I Could Crash and Burn in this Course:

  1. I already work two jobs, where am I finding the time to focus on this?
  2. What if I’m fooling myself into believing I have an eye for design?
  3. The only “user experience” I can design for is my own
  4. I still don’t know what the cloud is, is that going to be important?
  5. My laptop could crash and burn
  6. I can’t grasp the concept of making Javascript work when I’m not really sure what it is anyway
  7. I have a preference for really long blog titles
  8.  I can’t even come up with ten items
  9. The course will move along faster than I can fully grasp
  10. That I can follow steps on how to do something but not really understand the reasons behind why I’m doing them or why it’s important

Ten Reasons Why I’ll Rock This Course:

  1. I’ve been thinking about doing this course for over a year and I’m finally doing it
  2. I already have some background in web design
  3. I already know what “user experience” is and the importance of it in web design
  4. Does anyone really know what the cloud is anyway?
  5. It’s a work laptop, so the company will pay to fix it
  6. There are excellent resources in this program to turn to with questions
  7. Long-tail urls are really the rage right now
  8. My specialty is building content
  9. This is the course that will help me recognize my potential and be an excellent resume builder
  10. I’ll rock this course because I know that I can

So here I am, one month into the program. Only 17 more months to go. Rockstar status, here I come.