Nerd Glossary

This post is determined to be an ongoing explanation of the terms that Web Nerds live and breathe on a daily basis. Hopefully it will answer questions you might have about the Web Design/Development process.

Help us grow the list by suggesting terms: Shout

 
The Nerd Glossary: Definitions to Website-Related Things You Shouldn’t be Expected to Know
 

DOMAIN

The unique name that appears in your website’s URL

It’s kind of like your online fingerprint — it’s specific to you. Although other websites may have domain names like it, your domain name is yours alone. To get the rights to your domain name, you must purchase it and register it annually, which factors into your initial and ongoing website costs. Your domain will cost around $10-20 per year.

Why does a domain matter?

Your domain name is essential because it creates an online identity for your website.

A domain name also establishes credibility with site visitors and potential customers while helping you grow your brand. It’s also valuable because if you ever change your hosting, your domain name will go with you.

 

HOSTING

A service that allows internet users to access your website

Hosting is a service that allows Internet users to access your website. A web host provides space on its server for your site, allowing people around the world to view it. Website hosting is an upfront and ongoing website cost factor.

SQUARESPACE is the host we use for all client websites. Every site is built within the Squarespace web builder, and going-forward, you use their tools to easily edit all content within the site.

Your Squarespace site will cost about $20 per month. https://www.squarespace.com/pricing
This can be paid via credit card annually or as a monthly subscription.

We won't need to setup hosting until we're ready to launch the site. At that time we'll help get everything setup.

 

DESIGN

Elements that work together to create your website

Web design focuses on not only the visuals of your website but also the usability of your site. As a result, it’s one of the most expensive — and influential — website cost factors, having a direct impact on the performance of your site.

Why does web design matter?

From the perspective of users, as well as search engines, web design is critical.

Studies show that when it comes to users, 94 percent if their first impression relates to web design. If your site appears outdated or makes navigation difficult, users will leave your website. Even worse, their opinion of your brand will drop.

Google and other search engines also care about your site’s functionality, performance, and design. They want to provide users with relevant results and the best online performance, so if you have a slow, unusable website, they won’t display it at the top of search results.

How much does web design cost?

In most cases, the simpler the design, the lower the price. That doesn’t mean businesses should opt for a laid back, bare bones design. Instead, your company needs to consider its target audience and create a website that captures user expectations for your brand and products.

If your company sells luxury goods, like fine jewelry, for example, you need a site that demonstrates the quality of your products and services. In this example, when investing in a simple website, you’ll miss the mark with your target audience, resulting in lost revenue.

That’s why a WEB DESIGN AGENCY will often ask about your target audience.

 

RESPONSIVE DESIGN

RESPONSIVE DESIGN: Allows users on any device to experience your website in the same way

Responsive Design is what adapts your website to a user’s device. If a user visits your site on their desktop, tablet, or mobile device, they have a seamless experience. With more consumers browsing on-the-go, responsive design is essential. Responsive Design is technically a roadmap that considers how the users will browse a site and will tell the elements on the page to react accordingly.

Why does responsive design matter?

With more than half of the world’s Internet traffic coming from mobile devices, it’s clear that users are changing the way they browse the Internet. A responsive design plan ensures your website supports every member of your target audience. That’s why it’s critical for companies to invest in responsive web design.

CONTENT MANAGEMENT SYSTEM (CMS): allows you and your team to edit information on your website

With a CMS, you can make updates to your website, without having to edit any code or the expertise of a developer. This includes adding text, images, videos, testimonials, forms and so much more. We exclusively use the Squarespace CMS for all websites that we build, and partnered with Squarespace's own Support team, we can help you with training and ongoing support.

 

TEMPLATE DEVELOPMENT

Using code to develop the overall site theme, consistent with the homepage design & UI Design specification.

We call it “pixel-perfect” development, because every pixel is sacred. (I sound like a Designer because I am) But seriously, when we jump into development, we are prepared to use the design as our guide.

This stage includes setting up the Squarespace CMS, creating your custom theme and page designs, and setting up your website’s analytics.

Once we've finished our Design and Development work, we get to work testing your site’s performance and reliability. We’ll use various tools to benchmark your site for loading, responsiveness, and speed, while also ensuring that it works reliably on all web browsers and mobile devices.

After certainty that your site is ready to be released to the public, we’ll deploy it on your public domain. This typically involves helping you with switching your domain settings to point to the new Squarespace site.

 

STOCK IMAGES

Existing photos –already created– made available for license by paying a fee to both the artists that produced them and the agency managing them, acquiring the right to use them legally in different ways, while the author retains copyright of their work.

Stock images (that includes stock photography, illustrations and even video) has many perks for businesses and creatives, but the main, most immediate and most evident benefits are the time and money savings.

We always encourage our clients to look at FREE stock resources, where the photographers have relinquished royalties in exchange for strengthening open-source communities and just being all-around-awesome.

View our extensive lists of free Stock images:

 

BACKGROUND VIDEO

When done well, though, a background video can be a great, subtle design touch that adds that extra layer of thoughtfulness.

Large video backgrounds are considered one of the most engaging ways to portray a company's vision, mission and capabilities. What better way to grab someone's attention than with a video? The Internet loves videos!

Avoid mistakes by following these guidelines:

  1. Compress the video as much as you can
    There’s nothing worse than visiting a website and having the background video stopping and starting as it tries to buffer all the way through. It's distracting and gives the feeling that the whole website is loading slowly, even if the rest has already loaded.

    To avoid this, we really need to compress the video down to the lowest bitrate that we think looks acceptable. It's tempting to use a high quality, 1080p video that looks perfectly crisp and sexy, but it's just not worth the trade-off for loading time and interrupted streaming.

    You really should be using 720p video with a low frame rate of 24 or 25 frames per second, and test a few different bitrates between 750k and 1250k, before choosing the lowest one that you think is acceptable.

  2. Limit the total size and length of your video
    A low bitrate helps to ensure our video plays through smoothly without pausing to buffer, but we also need to remember that our users didn't come to our website to watch our background video, and we shouldn't assume they're happy to download a full 2 minutes of video, which could be up to 20MB of video that they didn't ask for.

    You should always limit the length of your video to 30-40 seconds at the most, or even better, find a short video that loops seamlessly, so that it seems like a longer video, but could be less than 1MB or 2MB in size, depending on the length. We’re working on a post to share some killer editing secrets to creating a great looping video

  3. Avoid excessive movement
    The key word in 'background video' is 'background'. By it's very definition, the video is supplementary to the website's content, and we need to ensure that it doesn't steal the focus. Background videos should be subtle and smooth to avoid distracting our users from what they should really be doing on our website. Avoid things like fast or excessive panning, shaky/unstabilized footage, and quick cuts. (Unless your brand calls for it!)

  4. Ensure sufficient contrast with foreground text
    If there's text positioned over your video, it's important to make sure it's readable. If the text color clashes with the video, you might need to add an overlay to help distinguish the text, change the text color, or give the text a text-shadow or a background.

  5. Account for devices
    At this point in time, background video support on mobile devices is getting better and better. iOS now plays “auto-play” videos. However, because we’re coming out of the dark-ages on these recent “no background videos on iOS” policies, adding background video should always be tested with lots of patience, an open mind and an eager development team who can come up with ideas at the drop of a hat.

  6. We always prefer to fall-back to an image background
    Using a “fallback image” is always best. If the video is slow to load, or will not load, the code is written to load the jpg image into the background of that container. For best results, using the FIRST FRAME of your background video is the best. It allows the browser to seamlessly jump from JPG to VIDEO without even detecting the jump.

 

TRAINING

We will fully train you by recording step-by-step video screencasts to make sure you're ready to manage all pages.

We don’t make assumptions about your Squarespace editing skill level; we record all the basics before getting-into page specifics. The training videos will then be stored within the site's "admin" area, so you can return to it at any time in the future.

Here’s an example of recent training on The Heavyweights blog:

 

You can also access all of Squarespace’s training content on the Squarespace Help site. Because we’ve built your site out of Squarespace’s own content blocks, every bit of Squarespace’s content will apply to your content editing needs!

Squareflair Builds Real Estate Websites

Just like the finest custom homes, all of our websites are designed and built 100% from scratch. We don't touch code until you're in love with the design, and when you are, we only build on the Squarespace Developers Platform. You want best in class, and that's what we deliver.

If you’re an agent or a broker, stay tuned for some exciting news!

Adding 'Team Squareflair' as an Admin User to Your Squarespace Site

It’s best not to share your own admin/owner password with anyone. If we’re working on your site, please add the Squareflair team as an admin user. This way, your own password won't be compromised, and we can use our own account for SFTP access.

Here are the simple steps to add us to your site:

  1. Log in to your Squarespace account.

  2. Once in your website, click Settings.

  3. Click Permissions.

  4. Click on Invite Contributor.

  5. Add name (Team Squareflair) and email address (devteam@squareflair.com).

  6. Click the check mark next to Administrator and click Save at the bottom right.

We’ll receive your invite to connect sent via email.

Setting contributor permissions to “Administrator”

Setting contributor permissions to “Administrator”

Uploading Files to Squarespace (a little hack)

How to upload files to your Squarespace site, so you can reference them later!

Share this post

Let us backup your Squarespace site for you!

Earlier on the Video/Tips blog, we shared an easy way to backup Squarespace site content using Evernote and the "Evernote Clipper" Chrome pluginsquareflair.com/videos/supporting-the-unsupported-backing-up-your-squarespace-site

While that works well page-by-page, we've decided to do this for you in a much better way!

My Post (29).jpg

What do you get?

In exchange for only $5, you'll receive an email with a Zipped file containing all "public" pages, packed in a standard webroot layout. See example linked below.

Example zip file: http://share.sqr.fr/v/LcJT8BqW3fYJsMrfKTPW

We will pull-down all linked pages/posts contained in the root domain. (If you have a public link to a page/post on your site, it will be downloaded) 

Yes— all blog posts will be downloaded and placed in a folder. We'll even grab your ROBOTS.TXT, SITEMAP.XML and RSS information for all blog collections.

Notes: 

1. "Hidden" files will not be downloaded. If Google's search bots can't find it, then neither can we. 

2. The content we download and deliver to you cannot be converted into a Squarespace site/template or imported into an existing Squarespace site/template. It's archival content that can be manually copied/pasted anywhere.

Ready???

The Squarespace Chart Block: from Frustrated to Hero in a Few Clicks

I started to write a post about the limited Squarespace Chart Block— to really tear it apart. However, after playing for a bit, I'm actually thrilled with the usefulness!

The key is to import your CSV data (a built-in feature). Don't type values into the built-in user interface; there's just not enough space in the user interface to make it seem rewarding. It's also hard to imagine how the data will plot, so trust me— get it into CSV format first, then import it. (CSV Example)

If there's enough plotted data, it really gives new visual meaning to any story.

Seeing the Major League data example below was the A-HA moment. To view "payroll" vs "wins" on a line graph screams USEFUL. Hooray for data!

 

Major League Baseball 2012 Season

Mapping: Team, Payroll($millions) and Wins (30 records)

Hurricane and Tropical Storm Counts for 2005-2015

Each record includes 13 values: month, historical average, counts for 2005 through 2015. Eight records are stored, for months "May" through "Dec".

Rotten Tomato ratings of Robert De Niro movies ('68-'88)

There are 23 records. Each record has Year and Rating

Biometric statistics for a group of office workers

There are 18 records, recording: Name, Age, Height and Weight

Monthly transatlantic airtravel, in thousands of passengers, for 1958-1960

There are 4 fields, "Month", "1958", "1959" and "1960" and 12 records, "JAN" through "DEC"


View Squarespace's full documentation on the Chart Block.

Source: https://support.squarespace.com/hc/en-us/articles/205814688-Chart-Blocks-overview