HTML5 is the latest revision to the markup language since the fourth version which was released in 1997. It was released October 2014. The improvements, fixes, and updates offer exciting new possibilities and it now addresses the needs of web applications. A few tags have been added to the original HTML 4 version and some have been removed as well.  But HTML5 is still backwards-compatible with HTML 4, allowing easy adaptation from the standard.

The central changes include:

New form elements such as improved versions of the <input> element that allow users to select dates, email addresses, numbers etc.html5

Semantic markup provides new tags describing parts of a document, such as articles, navigation elements, sections, headers, and footers.

Media elements finally are supported for audio and video!

The canvas tag permits the programmer to build graphics in an interactive manner, allowing for possibilities such as creative interface elements or custom gaming.

HTML5 includes a new standard: CSS3, offering new features such as:

Embedded font support allows you to include any font on a website and the viewers will be able to see that font without installing it on their own system.

Visual enhancements such as transparency, animations, shadows, improved typography flexibility, rounded corners, fancy borders for images, gradients, and transformations offer new possibilities for creativity and freedom in design.

New selectors let you choose every other element or specific sub-elements to describe the section of code you are wanting modified.

Columns are now supported by HTML. This is an easy improvement that lets you split an element into whatever number of columns you need.

HTML5 also implemented changes through JavaScript:

Vector graphics support keeps you from having to resort to traditional graphics. These graphics can be created speedily through code, either through SVG or the “canvas” tag.

Geolocation can determine the user’s location via a variety of mechanisms.

New selectors give you far more freedom and flexibility. You can now select elements by tag name or through the same methods as in CSS.

Local storage mechanisms allow far greater data storage on the client, even providing a built-in database manager that responds to SQL commands.

One of the most exciting developments is the integration we are sure to see as other applications and technologies adapt to coordinate with HTML5.

Principles of Graphic Design

Graphic design is an excellent tool for attracting attention, delighting your viewers aesthetically, and showing off the creative aspects of your department.  It is easy and fun to play around with designing your own logo, website banner, a letterhead, or an event announcement.  With today’s available programs, it is very possible to produce a professional design that does not hint at being homemade. 

Alias-Marketing-and-Design-Studio-Tallaght-Dublin-Graphic-Design-icon-240x240There are six fundamental principles of design: alignment, balance, contrast, proximity, repetition, and space.

Alignment goes hand in hand with proximity.  It has less to do with making sure that everything is (for example) centered or left-aligned and more to do with keeping the individual elements consistent.  If you have words arranged at a slant, make sure they are evenly spaced and at the same angle.  It is all about keeping organization and order within the separate elements.  If you have elements scattered about the page, carefully ordering them within themselves keeps the whole picture from appearing chaotic.

Balance ties everything together and provides structure.  The placement of elements will distribute the weight across the page.  For example, if you have a large piece in the center of your design, adding a small piece on the edge keeps the visual from feeling lopsided.

Contrast means balancing colors and using them to highlight or emphasis central elements.  The use of color can suggest certain emotions or reactions, make your design pop, and direct the eye to important parts of your message.

Proximity involves arranging elements as to guide the viewer’s eyes from piece to piece of the message in a controlled and thought-out path.  Related elements should be positioned together for unity and continuity.  This means breaking out of linear arrangements and arranging elements of the message in a more stacked or waterfall flow, with visual connection.  Not only is this aesthetically pleasing, but it gives the eyes a clear path to follow.

Repetition creates emphasis and draws attention to certain elements.  In the case of bulleted lists, the repetition of bullets creates rhythm and familiarity.  Repeating a border around sections of text encourages association.

Space is a very powerful element of design.  Graphic design, at face value, might seem to focus on the concrete elements, while the element of white space is merely a background accident.  But careful use of space provides the eye with breathing room, creates a powerful message, and clears out the clutter.  Simplicity is a very potent tool.

Keeping these principles in mind is an excellent beginning as you work on your next design project.

Website Performance Optimization

Ideally, your website is your greatest tool for marketing and sales.  It is the face of your company and typically the first thing your viewers/future customers will see.  It is essential that your website’s performance is professional and top-notch, as sub-par performance can easy frustrate today’s tech-savvy audience and cause them to move on to the next option.

A landing page cuts out the middle man.  That way when a viewer reaches your site through a second party ad or a search for a specific phrase, instead of being directed to your site’s main page, they will instead end up on the page with the topic they were searching for.  The landing page goes the extra step in customer convenience.

Make sure your homepage is clear and concise.  Its job is to convey the intrinsic message of your site and then direct the viewers to the appropriate pages.  Either an overload of information or too little information will result in a confused viewer.  Let them know what your site it about and then designate clear pathways to more specific pages.

Social media is, without question, an excellent way to boost performance.  But this is more involved than merely including links to your Facebook or Twitter pages.  If you have interactive content, blogs, or newsletters, include the option to share the content on those social media platforms.  This is an easy way to interact with your viewer and let them share their interest.

Along the same lines as interactive content, give your viewers a reason to return.  A regularly updated blog, user-generated content, or several pages that change on a weekly basis (at least) will keep your viewers returning to check out new information.

It is important for you to stay up-to-date on your traffic, the average amount of time spent on your website, the last page visited before leaving, your conversation rate etc.  SmarterStats monitors traffic habits and helps you locate areas to adjust or improve on.

Speed is another intrinsic part of maintaining reader interest.  Some general tips for speeding up your performance: reduce image size, use a content delivery network, take advantage of caching, and minimize HTTP requests.  For this last tip (minimize HTTP requests), you will need to download every file (CSS, JavaScript, and images) your site uses to the browser.  Condensing all CSS files into one single spreadsheet will also have great benefits for the speed of your website’s performance.


Popular WordPress Plugins

Choosing a theme and plugins for your WordPress blog can be the fun part of setting up your site, but it can also be overwhelming with thousands of possible plugins available and new ones being developed every day. Here are some of the most popular and useful plugins we have found:

Yoast SEO works as a built-in editor to encourage and promote the best writing. It walks you through techniques for readable and consistent content by having you choose a focus keyword for each article as you write it and then making sure you continue to use the keyword throughout your writing. It goes on to show you examples of what your post will look like in search results, giving you an edge on competition to increase rankings. The Page Analysis plugin works as a final copy editor to check that your posts are the optimal length, if your images contain an alt tag with the focus keyword, and if the meta description also contains that keyword. All in all, this plugin optimizes your content for search engines.

wordpress-logo-simplified-rgbFor improving your webpage’s performance and speed, Zen Cache is designed to reduce download time, optimize progressive rendering, reduce the loading time for pages, and more. Search engine rankings will improve with the speed of your site.

BackupBuddy is a secure and complete option for complete reassurance that in case of a catastrophe you will not lose anything from your database, media library, theme files, and so on.  Automated backups are easy to set up and will be quick to restore in the case of emergency.

A great plugin for easily adding nearly any type of online forms, from contact forms to surveys and user submitted posts, is Gravity Forms. It is very popular, in use on over one million WordPress sites.

Ultimate Branding promotes your logo, company name, and so forth across your network in place of any WordPress branding. It makes your site feel more unified and consistent. The best part is that this plugin does all the fussy work for you, so you won’t have to worry about writing a single code.

A helpful plugin for reducing spam is Akismet, which automatically catches comments that look like spam and allows you to review the filtered comments.

Envira Gallery is an aesthetically clean and pleasing plugin to create beautiful image galleries. If your site is photography related or tends to be picture heavy, this plugin simplifies the business with responsive design, fast loading, and stunning effects. It even offers a helpful free version, so you can try out some of the features right away.

Sucuri provides malware protection by blocking attacks, identifying spam, and preventing intrusions. It gives you real time alerts to keep you updated with any causes for concern. When it comes to website security, it is always better to be safer than sorry.

Another excellent way of tightening security on your site is Login Lockdown. This plugin limits the amount of failed attempts a user receives. This is helpful for deterring hack attempts, as most are focused on breaking your password by entering multiple combinations.

Top 7 web design trends you must know for your website

The internet is an ever changing, ever developing platform in which creativity can soar with few boundaries or limitations. As such, web design is also a fluid stage for new ideas and vivid imagination. While this is an exciting concept, it can also be daunting. Where to begin? What is outdated and what is considered modern? Where is the line between eye-catching and obnoxious?

The design for a webpage needs first and foremost to convey the intended information. If a font is perfect for your site’s playful attitude, but is difficult for the viewer to read, then it is not doing its job. If the colors grab the viewer’s information, but go against the mood you are trying to set, the design is going to be counterintuitive.

Web design trends change quickly and can be difficult to keep up with. We’re here to help! Here are some of the most popular trends we are seeing in web design:

Long scroll UI patterns provide a natural path for the eye to follow and allow the designer to decide the most beneficial order to convey information. It is an easy interface for the user to interact with and encourages viewers to look at the entirety of the website as the design naturally sparks curiosity.

Creative animations for loading, hovering, hidden navigation screens, motion action, galleries etc. Animations draw the eyes and hold attention. They have the benefit of keeping a viewer interested while waiting for loading, encouraging the eye’s path along a page, and generally making formerly static images more interesting and engaging. Additionally they add personality and an opportunity for creativity.

Micro-interactions engage the user and affirm their actions. It helps the users see the results of their actions, engages them in communication, and can provide tips for maneuvering. Ideally these interactions occur seamlessly and without distracting from the information provided. Simplicity is key.

Card design is growing more popular as the use of Pinterest sky-rockets. The interface is familiar, easy to use, and an excellent way to display a large amount of information in an organized and aesthetically pleasing manner.

Cinemagraphs are the classier version of GIFs, bringing static pictures to life with minimal motion. These pictures have fewer limitations than GIFs and are less distracting and more mature.

Bold typography makes a quick and effective statement about your website’s mood and focus, while establishing your site as modern and unique. Even websites that are strictly focused on business benefit from eye-catching typography. With web fonts becoming more widely accessible, web designers are becoming bolder, making full use of the available tools.

According to Forbes, Natural stock photography use in web design is on the rise. Pictures are a classic method of catching attention and creating a connection with the viewer. But typical stock photos are boring and easily dismissed. Eye-catching, awe-inspiring, and amazing is “in.”

2015 was an exciting year for web development and creative new designs. It is thrilling to think of what 2016 will hold!