Are you about to start a website redesign project with a web design agency or freelancer but you're not a web designer yourself? There's a good chance you're about to encounter a lot of new terminology and concepts that you may not know. Fear not—we've prepared an easy to understand blog series that gives you some extra background as the project lead for your new website.
- HTML5
The current html specification ('Spec' for short). HTML 5 is the current 'version' of HTML that is officially adopted and widely supported by browsers. This version includes some really great semantic elements us web design nerds had looked forward to (like,, and.)
- CSS (Sass)
CSS is what makes a page look like it does, as it's the rules for all the fonts, colors, spacing, etc. We use SASS/SCSS at Aztek, but so does most of the modern web development world. SASS is a pre-processor language that makes CSS more powerful and easier to write.
- JavaScript (JQuery, Vanilla JS)
JavaScript is the stuff that makes things happen on a web page—scrolling images, popups, flyout menus, etc. That's all JavaScript. JavaScript can do lots of neat things, but be careful. It's easy to add lots of unnecessary download time to a page if you use too much.
- Responsive web design (RWD)
This makes a website work across all devices. RWD is device agnostic. It's not a separate mobile version. RWD is preferred by Google over a separate 'M dot' website (and we haven't seen one of those in years). Even with RWD, you should not expect your website to look the same in all browsers across all device sizes. Think of RWD like water being poured into different size containers—it's still your water, but it take on the shape of the container.
- User interface (UI)
The stuff you can see and click on, such as the menus, the buttons, the headings, etc.
- User experience (UX)
Don't confuse UX with UI. UX is the experience your user has while interacting with your website or app. How does it make them feel? Is it easy to use? Fun? Confusing?
- Mobile first
The idea that designers and developers should build for a mobile experience first and work up to the larger breakpoints. Smalls screens and mobile devices present more constraints and challenges, so better to solve the hard stuff first.
- Bootstrap
A popular framework for building responsive websites. Bootstrap enables designers and developers to create a responsive website more quickly and confidently, knowing that lots of elements have already been "battle-tested" and are ready to use out of the box without reinventing the wheel.
- Billboard sliders
Somehow, billboard sliders are still a popular feature. We advise against them because they slow the page down and data shows that nobody watches past the first panel. Instead, prioritize your content and don't hide important messaging behind a second slide where users may never see it.
- Popovers, page interrupts
A really great way to annoy users and instantly tell them they're about to have a bad time on your website is by using popovers and page interrupts. Just ask yourself about the first thing you do when you're confronted with a popover. Do you frantically and angrily looks for the close button? Well, that's what your users do.
- Hello bar
A common feature at the top of a page that's used to display a brief, often temporary, message in a relatively non-invasive way. This is a much better alternative to a popover interrupt feature.
- Utility navigation
A secondary navigation. It usually contains less important links to pages like about us, careers, blog, resources, etc. You can use utility navigation to keep your main navigation simple and focused while still making other options accessible.
- How many items in a main navigation?
The current trend leans toward fewer items because it reduces cognitive load for the user and makes the site feel easier to use. Three to five items is ideal, although it can be very hard to accomplish for some companies.
- How long should a page be?
As long as it needs to be to communicate effectively. There is no hard and fast rule for exact length. It's more important to make pages feel less intimidating by breaking them up and making them easy to scan. If a page feels like it is trying to cover too much ground, try breaking it up into several pages.
- Page speed (Performance)
How fast a page loads. Google rewards quick-loading pages because users like instant access to pages. The quicker a page loads, the more likely a user will stick around. Good load times are correlated directly to improved UX and conversion rates. We aim for load times around 2.5 seconds or less.
- Lazy loading
The technique of not loading an asset until the user scrolls far enough to need it. For instance, if your page has lots of images and videos that are further down the page where the user can't see them yet, we can defer loading them until absolutely necessary. This makes your page feel like it loads quicker to users, which makes them happy.
- Element collage
Visual direction deliverable for responsive design process. It's not an 'old school' full Photoshop comp or a specific page. It's literally a collage of elements one might find on their website. These collages are intended to give people a good idea of what the site will look like without spending too much time in a design program, as it's better to work in the browser (with real HTML and CSS). Photoshop is wasteful.
- Web fonts
A font that can be used on a website. We take it for granted now, but there was a day that in order to use a font that wasn't Times New Roman or Arial, you had to make graphics of words in Photoshop. These were dark times for the web. Now you can get nearly any typeface you want from Google fonts, Typekit.com, or fonts.com. Be aware, some font services require a monthly subscription (and good fonts cost money).
- Web video
Video is the most popular form of content for users to consume. Ideally, your video content will be hosted and served from a platform like YouTube. YouTube is the second-largest search engine in the world and is a great place for users to discover your content and find their way to your website.
- The fold
A holdover term from the newspaper era. Getting content above the fold, which is the part of your site that users see without scrolling down, is the notion that important content must be seen first. This leads to misguided thinking that all content needs to get crammed above the fold which in turn makes everything an unreadable disaster. Also, every device has a different fold, so defining 'the fold' is a pointless exercise. The reality is that users scroll, even without realizing. They scroll and scan until they find the thing they want. Scrolling is okay. Say it with me, "scrolling is okay."
- Rich snippet (schema)
A special markup that tells Google more about certain types of content (addresses, events, products, etc.). This can help your content show up in more places on search engine results because Google better understands what the content is about. It's also good for assistive technology like screen readers.
- Adobe (Photoshop, Illustrator, XD)
The software we use to design and create the visual direction and assets. Some people like Sketch, but we're a windows shop and Sketch is for Mac people.
- Stock vs. custom photography
Stock photography is lower quality, but it's also cheaper. However, I can bet you that your images are the same as ones found on other competitor websites. Custom photography is more original and higher quality, but it's more expensive—sometimes significantly so. On the flipside, it'll be exactly what you want and unique to you and your company.
- Accessibility, web content accessibility guidelines (WCAG), section 508 compliance
This means that a website is accessible to users who may have a disability and require assistive technology such as a screen reader to navigate and consume your website content. It's good practice for every website to be compliant, but some websites (such as government websites) are required to meet this compliance by law.
- GDPR
Laws passed in the European Union governing the user's right to privacy. Even if you're not doing business in the EU, it is still good practice to offer GDPR compliance on your website, as it will eventually become the industry standard. Consult with your attorney about what level of GDPR compliance is necessary for your company.
That's it for our first installment, Join us next time for Part II, Digital Marketing and SEO!
