5 key logo trends and what you can learn from them

5 key logo trends and what you can learn from them

Niall O’Loughlin of 99designs shares some important lessons from the history of logo design.

Some organisations stumbled across the perfect logo for their brand and barely changed it while others found the need to make alterations to change with the tastes of their target audiences.

key-logo
  1. The beginning of simplicity (1930s-1940s)
  2. The introduction of colour printing and the rise of the advertising industry saw an explosion in logo design as companies allowed their imaginations to run wild.

    It was common for brands to freely utilise heraldic and agricultural symbols to advertise any product.

    However, as the lifestyles of the general public became more complex, it was necessary for brands to embrace simpler designs in order to make their logos more recognisable in a faster moving world.

    Major brands such as Caterpillar, Kodak, IBM, Pepsi and VW all changed their logos with serif face font becoming the most popular choice.

    The new logos were not ‘better’ than their predecessors. Indeed, in pure art terms, the early logos were probably superior. But the simpler designs allowed brands to become better known and that is of course the whole point of logo design.

  3. Enter sans serif (1950s-1960s)
  4. A number of large brands decided that serif was passé and marketed themselves as being more ‘futuristic’ by embracing sans serif in their logo designs.

    In the 1950s, Lego and Shell were among the first to transition to a simpler sans serif logo and were followed in the 1960s by Pepsi, Chevy, Wal-Mart, Caterpillar and others.

    As was the case with the first change, sans serif logos were in no way superior to their serif counterparts but they were marketed as such.

    In advertising, it is all about perception and these brands made it seem as if serif design was out of date.

    As a result, brands became terrified of being labelled ‘behind the times’ and followed suit even in cases when their existing logo was absolutely fit for purpose.

Responsive vs. Adaptive

Responsive vs. Adaptive

You’ve probably heard people say we’re living in a “post-PC world.” What does that mean for web developers? It means that 30% to 50% of your website’s traffic now comes from mobile devices. It means that soon, desktop and laptop users will be in a minority on the web.

How do we deal with this tectonic shift in user behavior? We’ve moved beyond the era of m-dot or t-dot hacks, into one where responsive and adaptive design techniques rule the day — what the W3C calls a One Web approach. The key part of the W3C’s recommendation is that “One Web means making, as far as is reasonable, the same information and services available to users irrespective of the device they are using.”

For developers that means that taking a One Web approach ensures that not only does your site work on the smartphones and tablets of today, but it can be future-proofed for the unimagined screens of tomorrow.

There are currently three popular approaches to developing a One Web site: using a responsive design; client-side adaptive designs; and server-side adaptive designs.

One is not better or worse than the other; each has its own strengths and weaknesses and the wise web developer will consider the benefits and drawbacks of each before picking the one that works for their next project.

tablets

Responsive Web Design

Responsive web design is the most common One Web approach. The approach uses CSS media queries to modify the presentation of a website based on the size of the device display. The number of responsive sites is rapidly increasing, from the Boston Globe to Disney to Indochino.

A key advantage of this approach is that designers can use a single template for all devices, and just use CSS to determine how content is rendered on different screen sizes. Plus, those designers can still work in HTML and CSS, technologies they’re already familiar with. Additionally, there’s a growing number of responsive-friendly, open-source toolkits like Bootstrap or Foundation which help simplify the process of building responsive sites.

On the other hand, there are few shortcuts to a sound responsive design. To go responsive, organizations often have to undertake a complete site rebuild.

The design and testing phase can be quite fussy, as it can be difficult to customize the user experience for every possible device or context. We’ve all seen responsive site layouts that look like a bunch of puzzle pieces that don’t quite fit together. Responsive web design works best in combination with a mobile-first approach, where the mobile use case is prioritized during development. Progressive enhancement is then used to address tablet and desktop use cases.

Performance can also be a bugbear for responsive sites. At Mobify, we recently completed an analysis of 15 popular responsive e-commerce sites. Among these sites, the home pages loaded an average of 87 resources and 1.9 MB of data. Some responsive pages were as big as 15MB.

The numbers are that high because a responsive approach covers all devices. Your user is only using one device, but they have to wait for all of the page elements and resources to load before they can use it. Put simply, performance affects your bottom line. On smartphones, the conversion rate drops by an extra 3.5 percent when users have to wait just one second. By the three second mark, 57 percent of users will have left your site completely.

While responsive design is fast becoming the de facto standard, it also creates new challenges for online businesses, including how to handle images, how to optimize mobile performance and often means sites need to be rebuilt from the ground up with a mobile first approach.

Client-Side Adaptive

Adaptive design builds on the principles of responsive design to deliver user experiences that are targeted at specific devices and contexts. It uses JavaScript to enrich websites with advanced functionality and customization. For example, adaptive websites deliver Retina-quality images only to Retina displays (such as the new iPad) while standard-definition displays receive lower-quality images.

There are two approaches to adaptive design — one where the adaptations occur on the client side, in the user’s browser, and another where the web server does the heavy lifting of detecting various devices and loading the correct template. Examples of client-side adaptive sites include Threadless and ideeli. One of the strengths of the adaptive templating approach is the ability to reuse one set of HTML and JavaScript across devices, simplifying change management and testing.

A client-side adaptive approach means you don’t have to rebuild your site from the ground up. Instead you can build on existing content while still delivering a mobile-responsive layout. For expert developers, this approach also enables you to specifically target particular devices or screen resolutions. For example, for many of Mobify’s online fashion retail clients, 95% of their mobile traffic comes from iPhones. Client-side adaptive means they can optimize specifically for Apple smartphones.

Unlike responsive design, adaptive templates ensure that only the required resources are loaded by the client’s device. Because device and feature detection is shifted to the mobile device itself, CDN networks like Akamai and Edgecast can use most of their caching functionality without disrupting the user experience.

The client-side adaptive approach has a higher barrier to entry than responsive design. Developers need to have a solid grasp of JavaScript to use this technique. It also depends on a site’s existing templates as the foundation. Finally, because the client-side adaptations are a kind of layer on top of your existing code base, you need to maintain them as your site as a whole evolves.

Server-Side Adaptive

We can achieve the server-side adaptive approach in a variety of ways, through server-side plugins and custom user agent detection. Sites that use server-side adaptive include Etsy, One Kings Lane and OnlineShoes.com.

Why choose server-side adaptive? It typically offers distinct templates for each devices, enabling more customization, and it keeps device-detection logic on the server, enabling smaller mobile pages that load faster. Additionally, there are numerous server-side plugins available for common CMSs and eCommerce systems such as Magento.

This approach isn’t for the faint of heart–it typically requires significant changes to your back-end systems, which can result in a lengthy (and costly) implementation. The requirement to manage multiple templates raises ongoing maintenance costs. Finally, this approach can encounter performance issues when servers are under heavy load. When mobile user agent detection is performed on the server, a lot of common caching mechanisms deployed by CDNs like Akamai need to be turned off. This can result in a slower user experience for mobile and desktop visitors.

Of course, many companies are still wrestling with the basics of responsive, and they’re not ready to confront the more sophisticated flavors of adaptive. Increasingly, competition and mobile traffic, however, will drive more and more organizations to kick the tires on all three approaches, and pick the one that works best for their users.

Is Your Website Getting Slower? Try These Optimization Techniques

Is Your Website Getting Slower? Try These Optimization Techniques

There are a couple reasons performance can take a hit on your website.Your user rate can increase beyond the scope the site was designed for as multiple companies and users attempt to activate the portal. Or you may have too many scripts and images attempting to load at once.Likely there is some combination of both problems that cause loading time to slow down and your users to get impatient.

This was the case for AllianceTek a while back as one of our client’s sites was taking a huge performance hit.Rather than add to the scope of the website, we addressed the problem by performing website optimization at three levels:

mobile-website

Website Level Optimization

We traced and debugged code to check which images and scripts were taking longer than normal so we could address them.Sprite images were used as necessary.We compressed Javascripts and limited the use of only those CSS, scripts, required at a time on the current page. Async AJAX calling was used to manage loading time which helped loading the page structure. AJAX scheduling gets data gradually rather than all at once so there is less loading time. We applied custom paging with Telerik grid that shortened the time of data exchange and made custom paging load only the data displayed on the current page. The website we were optimizing had a dashboard hoarding all critical business information. We offered an option for a mini dashboard that would display important information on a smaller scale in order to reduce the server calls and data loading time.

Server Level Optimization

We split the server into two parts – a web part and a database part.We ran a scheduler process to speed up the process of reporting company statistics where live data is not required.By using global content caching to fetch data from cache, it reduced the number of server trips and thus decreased loading time.

Database Level Optimization

Further normalizing the database reduced redundancy. We addressed clustered and non-clustered indexes that ate up valuable performance quality.

As a result of these changes, there was less loading time, improved data retrieval processes, and increased user accessibility.Although results will vary depending on the unique case, in this situation we improved performance by 55% which had the effect of improving work efficiency by approximately 46%. (*These results will vary case to case depending on the optimization done.)

How design can make a website feel faster

How design can make a website feel faster

When aiming for conversions, site speed is key. But there are things you can do that go beyond the technical, explains Gene Crawford.

design-01

Win clients & work smarter with our FREE ebook: get it now!

Mostly we worry about this sort of thing for business reasons – we want conversions. The faster the website loads in the browser, the faster the user can sign up, or make a purchase. This is one benefit to being fast. But another side of things that I’ve been noticing lately is an aim to ‘look’ fast.

A lot has been written lately about speeding up your website by fine-tuning the backend, as well as tweaking the HTML and CSS for better formatting and performance. This is extremely important for a lot of obvious reasons.

How to find performance

There are things you can do to make a web page appear fast that go beyond the purely technical. For example, the way you align the fields of a sign-up form, or the number of fields, can impact a person’s perception of the form.

The difference between horizontal or vertical alignment can make a form look faster to complete. The strategic utilisation of animation can also sell the idea of something being fast and easy to manipulate.

If the primary element on the page you’re designing also contains the main call to action, the faster someone will notice this, and the faster they can act on it. This technically isn’t faster in the sense of tracked time, but it can seem faster.

Keeping the user’s perception of speed or ease of use in mind as you design can pay dividends. I challenge you to consider this idea of perceived speed as you work through your next design project, and see where it leads you.

3 reasons to get your site online with Namecheap

3 reasons to get your site online with Namecheap

Introducing Namecheap, a registrar and web host that takes its customers seriously.

namecheap01

Namecheap is a service you can trust: it’s been around longer than Facebook after all!

Choosing a registrar and web host to build your business on can be tough. You want a reliable partner that puts your needs first. A partner that practises the very best in terms of security. A partner that puts your privacy rights first. And a partner that is available to support you, 24 hours a day, at just a click of a button.

So why should you try it? Here are three very good reasons…

01. Customer service

namecheap02

Namecheap takes business seriously, and its customers even more so. The firm promises to be honest and straightforward, and to never bombard you with unwelcome up-sells and advertising. It promises to simply provide you with a safe, secure and dependable online platform for your business.

02.Establish and Global

Based in California, Namecheap.co.uk is a domain registrar and hosting company that has been in business since 2000. To put that into context, it has been around longer than Facebook, Twitter and LinkedIn.

The firm has over four million domain names under management, and boasts over two million satisfied customers. What’s more, Namecheap is the world’s fastest growing registrar.

Namecheap also has a growing presence in the UK and Europe. With data centres in Nottingham and Amsterdam, the company is well positioned to serve the UK, Ireland and further afield.

03. Security and flexibility

What makes Namecheap special is security coupled with simplicity. Trust it with your online presence and it will deploy technologies such as WhoisGuard and Comodo PositiveSSL to protect you, your clients and your business.

Namecheap also provides a set of DNS servers spread across the US, Europe and Asia, which deliver highly reliable DNS service. Plus, you can expect URL and email forwarding at no extra charge.

Along with a highly flexible domain management system, Namecheap offers unparalleled levels of technical support. If you have a question, there’s always an expert on hand to help – 24 hours a day, seven days a week.

Responsive website, HTML5, and Cross-Platform – Which Approach to Use When?

Responsive website, HTML5, and Cross-Platform – Which Approach to Use When?

With the proliferation and mobile devices and the numerous browsers, it’s more complex than ever trying to build an application that caters to so many different possible users. However, there are a few methodologies that help make sense of this turmoil: responsive website, HTML 5, and cross-platform development. We hope to shine a light on these concepts so you can choose the best way to develop your application and reach the most potential users.

responsive2

Here are three approaches to development :

Responsive Web Design – RWD refers to a website that adapts to the browser and/or device to provide an optimal viewing experience. It emphasizes easy reading and navigation while minimizing resizing, panning, and scrolling by adapting the layout to the viewing environment by using proportion-based grids, flexible images, and CSS3 media queries.

HTML5 App – From the look and feel HTML5 apps will look the same as any other apps. However, the apps have limited functionalities as much as HTML5 and JavaScript can support. HTML5 Apps are created using a mix of HTML5, CSS and JavaScript. HTML5 apps are platform independent and can run on any device like Android, iOS, Blackberry or Windows Phone with a standard browser.

Cross-platform Apps – Cross-platform apps are designed to work with and use a device’s native functionalities. The framework built to use cross-platform apps has a cross compiler which is capable of creating the final executable code for the multiple platforms. Different frameworks are available for developing these cross-platform apps.

responsive3

Responsive Web Design – When to Use It

Responsive Web Design (RWD) is best suited when the requirements do not go beyond building a website that dynamically changes the layout according to the device used. This is the optimal method when building website architecture for desktops, smartphones, tablets and e-readers. RWD is capable of providing a convenient viewing experience with the myriad of browsers and mobile devices on the market.

HTML5 App – When to Use It

HTML5 is best used when you require a basic mobile application that can be coded using HTML5, CSS and JavaScript. This approach is broken into two types: Simple Web Apps require only HTML5 and do not use any native device features or API like camera, GPS, etc. Hybrid Apps, as the name suggest, combine a simple app while still using a few of the native features. Hybrid Apps use HTML5 code with the use of native features sparingly. Overall, HTML5 Apps are best when the app does not require any device-specific features. They require less development time so they are more cost efficient. HTML5 Apps are easily portable with frameworks like PhoneGap.

Cross-Platform App – When to Use It

Cross-Platform App development is the way to go when your application demands the use of some native features or API and you want it to run on multiple devices. A cross-platform app increases code reusability since the majority of your code remains the same and only minor changes are required to make it run on the different platforms. Cross-platform apps can be created using various frameworks available on the market today such as Titanium, Xamarin, and Sencha Touch. However, there are a few drawbacks to this approach. Each framework will have a different coding language and coding standards and so it requires a specific skill for that framework. Some of these frameworks will cost you if used for commercial use.

In the end, the requirements, development costs, and time are factors to consider when determining which type of application is the way to go? Obtaining further clarity is important, and it may be beneficial to contact a trusted mobile app development company to help you choose the right strategy that suits your budget, needs, and positions you for business growth. AllianceTek has earned a reputation with helping organizations make wise development decisions and we would be pleased to discuss development strategies with you.

Previous Next
Close
Test Caption
Test Description goes like this

Pin It on Pinterest