jQuery

What is it?

According to jQuery’s own website, “jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.”

jQuery allows you to use JavaScript much more easily on your site, by wrapping lines of code into methods that you can call with a single line of code. Essentially, jQuery simplifies JavaScript in order to make it easier to use. jQuery has been called the “write less, do more” JavaScript library.

How do I use it?

In order to start using jQuery in your website files, first, you have to download the main JavaScript (.js) file from jQuery.com, put it on your server, and point to it in your script tag. After downloading the file, copy and paste it into a plain text document and save it to upload onto your server. To call the script in your actual web document, use this script tag:

<script src="pathtoyourjs/jquery-1.7.2.min.js"></script>

Where can I find jQuery plugins?

jQuery.com has an extensive library of jQuery plugins (they invented the programming language, after all). Additionally, Unheap.com is another fantastic resource for beautiful, easy to use jQuery plugins.

One of my favorite plugins found through Unheap is the Strip Lightbox. This plugin creates a light box that only covers part of the page, which allows you to continue to interact with the web page, and also providesa less intrusive image viewing experience.

Plugins from jQuery.com

Here are some notable plugins, along with links to demos from jQuery.com:

Naver
DEMO
GET IT HERE
This plugin creates a customizable responsive navigation with a breakpoint incorporated into the code.

jQuery UI Clip Effect
DEMO
GET IT HERE
This plugin allows you to apply an animation effect to an element and turn it on and off “like an old TV.”

Plugins from Unheap.com

Here are some other notable plugins, along with links to demos from Unheap.com:

Rollerblade.js
DEMO
GET IT HERE
Rollerbalde is an easy way to create a 360-degree interactive image rotator.

Horwheel Component
DEMO
GET IT HERE
Horwheel enables the functionality to scroll horizontally with the mouse wheel.

Social Media

Social media is an important part of both a brand’s aesthetic, as well as its marketing plan. Social media strategies are as subject to trends and the like, just as much as other facets of design.

Trends in the design of social media

Integrated social advertising/Social videos

Screen Shot 2015-03-03 at 8.51.23 PM

Essentially, integrated social advertising is a method in which different social media/marketing channels are connected to each other. They post the same things, target the same audiences, and allow a brand to send out the same content on all platforms quickly and easily. It also allows you to track views, likes, etc. and collect data on your demographic and the efficiency of your social media marketing.

Additionally, social videos, such as auto-play Facebook videos, Instagram ads, and Snapchat videos allow brands/businesses as well as their followers to share their stories in simple, fun, straightforward ways. You can also take advantage of vloggers (video bloggers) to share a brand’s story/advertise their products and services.

Mobile will be a priority

2015-Social-Media-Trends-Web-Designers-Need-to-Know-Mobile-Will-Be-Priority

According to elegantthemes.com, 65% of social network activity is from mobile devices. This may be due to the rise of the popularity of smart phones, tablets, and the like. With the advent of this new technology, websites now have to be responsive, and many companies are also developing app equivalents.

Engagement strategies

Talk to your fans/customers

social-media-engagement

Whenever you get a new follower, make sure to welcome them. It makes your brand seem approachable, and like you really car about your followers. In a similar vein, whenever you receive messages from fans on social media, make sure to respond to them. While it takes a lot of time, it will be worth it when you see your number of followers rise.

When fans follow you, follow them back. This is a common courtesy that will make them feel important. You can also ask your fans questions, ask them to like things you post, and allow your fans to express their wants and opinions on your social media platforms.

Host contests/sweepstakes

engage-users-social-media-infographic

Several surveys have been done, and it has been discovered that people love giveaways and freebies (who doesn’t like free stuff?). Contests are very effective for engagement, especially since it usually requires following social media pages and their updates.

Strategies for acquiring new followers

Be consistent and know what your audience wants

getty_151811191_9706749704500114_47367

When utilizing social media marketing and strategies, you need to be consistent. You can’t change up the strategies you use every two weeks, even if they don’t seem to be working. If you confuse potential followers about who you are or what you do, you will lose them.

Additionally, what you think your followers want and what they actually need may differ. Try to use content that has already been established as popular, and use it to attract more followers.

Make sure that your content is shareable/share other people’s content

3031006-inline-followers1

If your content isn’t interesting or easy to share, people won’t read it, and even worse, they won’t share it for others to see. On the other hand, by sharing content produced by others that is similar/beneficial to your brand’s ideas/goals, you draw in that user as well as any followers they have.

An example of successful social media marketing: Sephora

Sephora is a health, beauty, and cosmetics company. You can find their Facebook here and their twitter here.

Screen Shot 2015-03-03 at 9.42.19 PM

Sephora’s Facebook has a nice header and profile image, as well as large, eye-catching post graphics. While their header includes text, it is not hidden by the profile image.

Screen Shot 2015-03-03 at 9.42.27 PM

Their twitter is very similar. While the header words are trimmed a bit, the twitter is still very eye-catching and image heavy, showcasing the products they sell.

Content Management Systems (CMS)

According to techtarget.com, a content management system (CMS) is, “a system used to manage the editorial content of a website.” It is broken up into two parts. The content management application, or CMA, allows an author to use HTML to create and later modify the website and its content. The content delivery application, or CDA, is used to gather and compile the information provided on a website.

The benefits of using a CMS include:
  • the use of a template as a base
  • enables others in addition to the author of the site to update content easily
  • enables the author(s) to utilize one-to-one marketing
The drawbacks of using a CMS include:
  • larger organizations may experience difficulty when tailoring its content to its entire vast audience
  • more complicated ways of transmitting data, such as video, audio, and diagrams may be more difficult to manage

When an author is creating a site that contains information that needs to quickly and efficiently be updated by themselves or others (ex: the client) on a frequent basis, CMS is an efficient way to manage it.

WordPress, Joomla, and Drupal are the three main Open Source CMSs.

  • is the most popular CMS in use today
  • provides a multitude of features including pages and posts, widgets, plugins, extensions, and customizations
  • is SEO friendly
  • but is inflexible and easy to outgrow
  • utilizes components, modules, plugins, templates, manuals
  • its components function as “mini-applications”
  • is very flexible
  • has an active and friendly community
  • is easy to install
  • is easy to navigate
  • BUT has limited adjustment options
  • and many f the plugins are paid or inefficient
  • uses modules, themes, and distributions
  • allows the creation of clean URLs
  • is multi-site compatible
  • has a helpful and supportive community
  • but the websites created in it are flexible
  • and the site is complex and has a bad user interface

An interesting fact learned about WordPress is that it is an Open Source project that has hundreds of people all over the world working on it. This also allows you to use WordPress for any site that you can think of, without playing a license fee.

Accessibility

What would it be like to use the Web if you had some sort of impairment? What would it be like if you had a vision impairment? Mobility impairment? Auditory? Cognitive? It’s important for Web designers to take all potential members of a site’s audience into consideration when designing for the Web.

Those with vision impairment typically use screen readers, braille displays, or screen magnifiers in order to read the text on a Web page. Users with limited mobility may use modified mice and keyboards, foot pedals, or joysticks to navigate the Web. User with an auditory impairment will not be able to hear any sound used within a page, and usually rely on transcripts or subtitles. And those with a cognitive impairment, such as memory or reading comprehension limitations, will have trouble processing sites that are too complicated.

A website needs to be designed and coded to function quickly, easily and simply. The foundation of a site needs to be solid in order to guarantee accessibility for as many people as possible and, if it is desired or requested by the client, all the pretty “bells and whistles” can be added to the solid foundation to make a complete, stylish website. By coding a site in the cleanest, simplest way possible, it ensures that its basic and necessary elements can be accessed by even the oldest and slowest of browsers, as well as by those who use assistive devices to access the Web.

In order to help make the Web useable for everyone, the W3C started the Web Accessibility Initiative (WAI) in order to provide Web designers and coders with a set of guidelines to follow to create the best possible sites. While adherence to these guidelines is required for Government sites (according to its Section 508 accessibility guidelines, which are actually based on those written by the W3C), all sites benefit from them, and you should follow them if you can.

Image Resources

There are many places, especially on the internet, where you can find images to use in your own creative work. Some provide these images for free, while others aren’t so free. I know you want to hear about the free ones because, hey, who doesn’t like free? But, it’s best to cover all the angles, so we need to talk about times when you have to spend some money.

First up, the sources that cost money. If you decide to go the stock, royalty-free or rights-managed route, you will most likely need to purchase a license.

The term stock is most often associated with photography, aka “stock photography.” Stock photography is usually provided at an affordable price for people to use so that they don’t need to hire a professional photographer, or attempt to shoot the images themselves.

Royalty-free artwork is usually something that is purchased once, and can then be used freely wherever and as often as the buyer desires. While very cost-effective (yay), a big problem that you can run into is that other people may have purchased the same piece, and could be using it in a completely different way that could affect the message or presence of your work.

Rights-managed artwork works in a similar way to royalty-free, except that for each use, the art must be purchased again. This method helps the artist who created the original work to manage who is using their work and for what more efficiently, but from a financial standpoint, it’s not the best for the consumer.

Sites like BIGSTOCK, iStock, shutterstock, dreamstime, gettyimages, and Veer provide the images and services described above (hooray for Google!).

Okay, now it’s time for the free stuff. Free. Such a nice word.

Anyway, the best way to find content that is free in cost and free to use is by using the Creative Commons. The Creative Commons provides a variety of modified copyrights that allow people like you and me to use the creative work of others, with their permission (and for free!). There are four types of CC licenses: attribution (original artist must be credited), non-commercial (user cannot make a profit off of the CC work), no-derivatives (the CC work cannot be edited) and share-alike (CC content can be edited, but edited pieces must still be credited with original artist). The linked video explains the four licenses in greater detail, plus there’s a cute drawing of a kiwi bird in it!

Sites like flickr and the Creative Commons website itself allow you to search for images, sound, music, and many other forms of media–that’s right, there’s other creative content out there for your use other than images–that are under a Creative Commons license. The Creative Commons allows you to Get Creative! (that was a shameless way to link to that video, I’m sorry)

One last little thing about clip art and icons. There are sites to obtain these images that both cost money, such as clipart.com, as well as free sites like #1 Free Clip Art. Clip art tends to be childish and cute, which can seem unprofessional or amateur, so it’s better off being used in very small doses, or not at all.

Now, go forth and use these resources for good! Or evil, I can’t really stop you.

Techniques for Strong Web Design

What makes a website successful? Unsuccessful? While I don’t think there are any rigid rules or exact guides that can be followed to create the perfect “successful” site, there are things that can be included and avoided to get the design started.

First, what makes a website successful?

Successful sites are usually designed well, are user-friendly, and easy to read and use. Files, whether it be a logo, photo, or other design element on the page, should be as small as possible to allow for pages to download quickly. All graphics should also have alternative text provided in the event they don’t load on the page, to keep the user informed.

In order to grab a reader, the important stuff (essentially the “about us” items) should be one of the first things written on the page and easy to find. Going off of this, the rest of the site should be broken up visually in a way that makes sense and has a definitive hierarchy, using design and visual elements. The amount of scrolling that a user has to do on a page should also be kept to a minimum. The content/copy of a page should be easy to read (short paragraphs, no blocks of text) and should be proofread; nothing makes a site look more unprofessional than typos.

It is also important for images and graphics, along with the text, to look professional. Anti-aliasing is your best friend when it comes to making text within graphics look smooth. This can also help with avoiding those pesky halos that can occur around transparent graphics. Make sure to take the time to clean up the edges of your graphics; it makes a site look much more polished.

Linked items are another aspect of a site that is often overlooked, but also deserves attention. Dress up those links, make them look nice. Make the user want to click on them, that’s what they’re there for!

Now it’s time for the fun part: what makes a website unsuccessful. It’s time for the web don’ts.

We’ll start with animations. Animations are loud, bright and distracting. Unless completely necessary, they should be avoided, and there’s usually never a reason to have more than one per page. Also, a site should always be completed before it’s uploaded (in other words, no “under construction” pages or links to dead pages). When setting type, it should be clean, attractive and easy to read. Don’t set type in all capital letters, more than a few words in italics, and don’t do it in all capital, bold AND italics. At that point, someone is trying to make the text hard to read on purpose.

Back to links again, don’t make graphics that look like buttons unless they’re actually buttons that link to something. Seriously. You don’t want the user to go and get excited about clicking that button, and then be sad when they find out it was all a lie. Also make sure to resize your graphics in an image editor rather than waiting to do it until coding the webpage; this helps reduce file sizes and increase loading speed, which is good! The content of the page, again, should be easy to read and have a defining hierarchy, so never center everything on the page, and make sure everything has the same alignment.

Next, color. Who doesn’t love color? But, too much color can be a bad thing. Don’t use to many colors. Crazy backgrounds and patterns are also a no-no. People need to be able to read all that nice, informative copy you worked so hard to write! Another tip for legibility: when designing type on a dark background, white isn’t always necessarily the go-to. Sometimes, the contrast is too high and makes the type illegible. Play around with tints of colors and see what works.

Now it’s time for some examples. First up are successful sites:

Audible: This site is aesthetically attractive, it’s nice and clean. The site is well set-up and navigation is easy.

RetailMeNot: Everything is well laid-out and clean. There’s a clear hierarchy, it’s nice to look at, and easy to navigate.

And now, the unsuccessful sites:

This website is full of irony. It’s all about bad websites, yet it’s designed poorly. Navigation is confusing, graphics don’t load, and aesthetically it’s boring/unappealing.

And then, there’s this. I’m not even quite sure what it’s for…it’s busy, uses too many colors, images, fonts and other design elements. It just looks bad.

History of the Web

According to Learning Web Design: A Beginner’s Guide to HTML, CSS, Javascript, and Web Graphics by Jennifer Niederst Robbins,

“[t]he web (originally called the World Wide Web, thus the ‘www’ in site addresses) is…one of the ways information can be shared over the Internet. It is unique in that it allows documents to be linked to one another using hypertext links–thus forming a huge ‘web’ of connected information.”

While Tim Berners-Lee is credited with the invention of the World Wide Web, there were many inventions and discoveries before him that led up to and helped with his invention. In 1945, an article published in Atlantic Monthly by Vannevar Bush described a device called a “Memex,” used for memory extension and made it possible for links to be created between documents. During the 1960s, hypertext technology is developed. Doug Engelbart created NLS, which allowed hypertext browsing editing and email. The term “HyperText” is also coined during this time by Ted Nelson in A File Structure for the Complex, the Changing, and the Indeterminate. In 1967, Andy van Dam and colleagues built the HyperText Editing System and FRESS (File Retrieval and Editing System).

In 1989, Tim Berners-Lee, an employee at CERN, invented the World Wide Web, 20 years after the Internet was established. The three technologies that he based the structure of the Web on included HTML (HyperText Markup Language), URI (Uniform Resource Indentifier) and HTTP (HyperText Transfer Protocol). HTML, according to the World Wide Web Foundation, is “[t]he publishing format for the Web, including the ability to format documents and link to other documents and resources.” Similarly, URI is “[a] kind of ‘address’ that is unique to each resource on the Web.” HTTP, which is a protocol of HTML, “[a]llows for the retrieval of linked resources from across the Web.”

In 1993, the World Wide Web technology became available for anyone to use for free. In the following year, in order to help streamline how the Web is used, Berners-Lee founded the World Wide Web Consortium (W3C), a set of standards that are used as guides to ensure one universal Web that is easy and free for everyone to use. Several years later, in 2005, Berners-Lee and colleagues founded the Web Science Trust (WST). This organization is focused on studying the web and understanding how this technology connects and unites humanity, in order to create the best Web possible in the future.

The World Wide Web is an amazing technology. The fact that so many people in so many parts of the world can be connected through the Web has done so much in terms of communication and uniting the world through a common channel. Without this technology, many cultures would likely still be isolated, and would never have had the opportunity to take inspiration from or be influenced by others. People may have felt much more alone in the world, and more limited to what was only physically available to them. Many jobs and careers wouldn’t exist today without the Web. You wouldn’t be reading my posts on this blog without the Web!

And now, as promised, here’s my link to a cool art/design-related site: an infographic about the evolution of the Web. Enjoy!