A-Vibe web blogs http://www.avibeweb.com/company/blog/ A-Vibe web blogs Choosing the Right Prototyping Tool for UX Design <h4>Why Do We Need a Prototyping Tool?</h4> <div><img style="float: right; padding: 10px; width: 25%;" src="/images/imagebank/Blog/Prototyping%20Tools/sketch-wireframe.jpg" alt="" /></div> <p style="width: 75%;">Prototyping is an essential step in the <a href="/services/design/userinterfacedesign/" target="_blank">UI/UX process</a>.Prototyping in web design is a way to test out ideas before utilizing too many resources. This can be done with paper sketches, HTML/CSS, or a growing number of prototyping tools that make the process much faster and easier. Prototyping tools <span style="color: #888888;">allow</span> a designer to show how design elements will interact without spending time with paper or pulling a developer into the project. These tools allow UI/UX designers to explore ideas and ensure that the correct decisions are made for the users. Prototypes also allow clients and stakeholders to view and interact with a design as it would appear on the web, before investing in the development phase. This process gives designers data to make the correct decisions for both users and stakeholders to confidently make decisions about the design strategy. There are a lot of different prototyping tools; some are perfect for low-fidelity wireframes and mockups, some for high-fidelity needs, and everything in-between. The list of prototyping tools is ever-expanding. We&rsquo;re only going to focus in on a couple of tools in this post:</p> <ol> <li>Balsamiq</li> <li>InVision</li> <li>Axure RP</li> <li>Adobe XD</li> </ol> <p>If you are interested in exploring other prototyping tools, there is a <a href="https://collections.design/" target="_blank">large list</a> available that breaks down features and pricing for each prototyping tool.</p> <p>&nbsp;</p> <h4>What Prototyping Tools Exist?</h4> <p>There are a lot of factors that go into choosing your prototyping tool. Are you looking for a tool that does it all? Are you hoping to create low-fidelity wireframes but are not channeling Leonardo da Vinci&rsquo;s artistic abilities? What kind of time do you have to devote to a learning curve with new software? Do you need to communicate with other designers or stakeholders remotely? Are hover effects paramount to your design? Are you looking for a free tool? These are only a couple of questions to ask yourself when considering which prototyping tool to use. To assist you with your research, here are some details about popular prototyping tools.</p> <p><strong>&nbsp;</strong></p> <p>&nbsp;</p> <p><strong><img style="display: block; margin-left: auto; margin-right: auto;" src="/images/imagebank/Blog/Prototyping%20Tools/balsamiq.jpg" alt="" /></strong></p> <p>Balsamiq is a low fidelity wireframing and prototyping tool. They focus on making quick wireframes to ensure that the focus is on functionality rather than design. The components and reusable symbols make creating wireframes quick and easy. Their UI is designed to be clear and simple to use with a number of keyboard shortcuts to streamline processes even more. Each element, once drawn, can be modified to be another type. For example, a box, drawn by holding down R, can be modified to an image by right clicking and selecting modify. Balsamiq includes collaboration by adding people to each project that you can chat with or can comment on specific screens.</p> <p>Balsamiq is one of the prototyping tools that comes with a monthly or yearly cost depending on the number of active projects you are designing. For 2 active projects, the cost is $9/month or $90 per year. For 20 active projects, the cost is $49/month or $490/year. For 200 active projects, the cost is $199/month and $1,990/year.</p> <p>&nbsp;</p> <p><strong><br /><img style="display: block; margin-left: auto; margin-right: auto;" src="/images/imagebank/Blog/Prototyping%20Tools/InVision.jpg" alt="" /></strong></p> <p>InVision is almost opposite to Balsamiq. It allows the designers to create interactive mockups by using transitions and triggers to create interactions and animations. It has a focus on functionality, as all prototyping tools do, but it has more detailed interactions and animations available. It includes Inspiration Boards to help collect stakeholder inspiration at the beginning of <a href="/services/strategy/requirementsgathering/" target="_blank">requirements gathering</a> to help inform the design direction for the project. InVision has built in collaboration and feedback tools available that allow designers and stakeholders to freehand sketch and add notes to each screen to communicate ideas. What&rsquo;s great about InVision, is once the designs are approved there is a quick hand-off to development for implementation. InVision includes details about HEX colors, dimensions, appearance, and ensures that the original design elements translate to development without losing any thoughtful design details.</p> <p>InVision includes several different monthly pricing options depending on the number of active projects. For 1 active prototype InVision is free to use. For 3 prototypes, the cost is $15/month. For unlimited prototypes, the cost is $25/month. For unlimited prototypes and access for up to five designers, the cost is $99/month. InVision also offers an enterprise option that includes unlimited prototypes and extra advanced features like: no user limits, customer support, SAML-based Single Sign-On (SSO) options, and admin controls to assign roles and access levels to team members.</p> <p>&nbsp;</p> <p><strong><br /><img style="display: block; margin-left: auto; margin-right: auto;" src="/images/imagebank/Blog/Prototyping%20Tools/AxureRP.jpg" alt="" /></strong></p> <p>Axure RP is very similar to InVision, it is a tool to create interactive wireframes and mockups; not low-fidelity wireframes. Axure RP allows designers to connect screens to show how a user would interact with the design elements on one screen and how that takes them to another screen. It also has built in tools to slice and crop images without the need for another tool like Photoshop or Illustrator. One great feature Axure RP has is the ability to write conditional logic. For example, a designer can designate what &ldquo;if&rdquo; and &ldquo;else&rdquo; logic occurs upon page load to emulate the end user&rsquo;s experience. Axure RP comes with animation effects and gives designers the ability to import SVGs into their designs. Axure RP lends itself well for the transition to development like InVision does; it displays redlines, styles, colors, documentation, and even outputs CSS snippets to roll right into implementation.</p> <p>Axure RP offers two purchasing models: one for a single designer (Axure RP Pro) and one for a team of designers (Axure RP Team). Axure RP Pro is $29/month and Axure RP Team is $49/month which includes co-authoring on team projects, revision history, and allows for cloud hosting.</p> <p>&nbsp;</p> <p><strong><br /><img style="display: block; margin-left: auto; margin-right: auto;" src="/images/imagebank/Blog/Prototyping%20Tools/AdobeXD.jpg" alt="" /></strong></p> <p>Adobe XD brings design and prototyping together in one platform. Designers can create low-fidelity prototypes that move seamlessly into high-fidelity designs and then onto development hand-off. It includes great features like an organized assets panel, auto-animate features, the ability to quickly repeat grids, and with the click of a button you can resize artboards for all responsive screen sizes. Stakeholders have the ability to review and comment on each of the screens and it can integrate with Slack and Jira. Since XD was created by Adobe, Photoshop and illustrator play nicely together with XD. Designers can open PSD files with XD, which makes updating any older files very easy. Although XD does have the ability to create vector shapes (with more updates coming every day) for anything that is imported from illustrator, you have control to edit the vector without leaving XD.</p> <p>Adobe XD offers three different pricing plans depending on your need. XD&rsquo;s Starter Plan is free but limits designers to 1 active prototype, 1 active design spec, a limited selection of Adobe fonts, and 2GB of cloud storage. The standard plan is $9.99/month per user and allows for unlimited prototypes, unlimited design specs, a full Adobe font library, and 100GB of cloud storage. XD for Teams is $22.99/month per user and has the same features as the standard plan; the additional cost with this plan includes onboarding webinars, web-based admin console, and advanced technical support.<strong><br /></strong></p> <p>&nbsp;</p> <h4>What Prototyping Tool is Right for Your Project?</h4> <p><img style="float: left; padding: 5px;" src="/images/imagebank/Blog/Prototyping%20Tools/mobile-wireframe.jpg" alt="" />This depends on the project and how for you want to take the mockups. A tool like Balsamiq is great for creating wireframes that focus on functionality more than design. Adobe XD is great for starting with wireframes and evolving them into high-fidelity mockups that reflect how the user will interact with the website or application once it is developed.</p> <p>We enjoy the inclusivity of Adobe XD. It does everything our designers need in one intuitive platform. Our focus on designing a great experience for users further supports the need to take our initial wireframes and evolve them into high-fidelity mockups that include animation and micro-interactions. If you&rsquo;re interested in fully experiencing your new website design before it is implemented <a href="/consultation/" target="_blank">schedule a consultation</a> with our team.</p> <p>&nbsp;</p> Tue, 20 Aug 2019 00:00:00 GMT Better Business in the Cloud - Migrating to Amazon Web Services (AWS) <p><a href="https://aws.amazon.com/" target="_blank">Amazon Web Services (AWS)</a> is an on-demand <a href="https://en.wikipedia.org/wiki/Cloud_computing" target="_blank">cloud computing</a> platform for businesses to power their web applications in the cloud. AWS offers many cloud management tools and services to their customers. The first AWS platform was publically available in 2002, and Amazon is continuing to evolve their solutions and expand their service offerings for their customers. AWS offers many services for cloud storage, database management, and they are supporting newer technologies like Machine Learning, Internet of Things (IOT), and Augmented Reality (AR)/Virtual Reality (VR).</p> <p>Our team has leveraged AWS to support many of our clients&rsquo; applications, particularly migrating their robust business applications into the cloud for increased performance, security, and reliability. An added benefit of AWS is it is cost effective; all of their pricing is based on the AWS setup and services selected to fit each unique application&rsquo;s requirements. Amazon offers pay-as-you-go options, discounts by reserving instances, and also offers volume based discounts. AWS is currently used by over 1 million customers and has an expanding global presence; AWS is currently available in 21 regions around the world and they are continuing to grow their digital reach.</p> <p><img style="display: block; margin-left: auto; margin-right: auto;" src="/images/imagebank/Blog/AWS/AWS-reach-map.jpg" alt="" /></p> <h4>Features Offered by AWS</h4> <p>AWS offers many on-demand tools and services to their customers and enables them to modify and change their subscribed services as needed. Here are a few:</p> <ul> <li>EC2 instances for server configuration and hosting</li> <li>RDS options to quickly setup dedicated instances for databases that are fully managed by AWS&rsquo;s support team</li> <li>Auto-scaling and elastic load balancing, which means IT departments no longer have to estimate their computing needs</li> <li>Reliable backups and disaster recovery</li> <li>CloudWatch to monitor real-time analytics</li> <li>CloudFront Content Delivery Network (CDN)</li> <li>Secure environments with multi-factor authentication and encrypted data storage options</li> <li>Versioning</li> <li>And much more&hellip;</li> </ul> <h4>Benefits of Being in the Cloud</h4> <p>We have seen significant performance increases in the applications that we have migrated to AWS; on top of that, our clients have seen increased cost savings from the migration! We encourage anyone that is experiencing issues with latency, and/or want to save on hosting costs to explore <img style="float: right; padding: 10px;" src="/images/imagebank/Blog/AWS/cloud-computing.jpg" alt="" />migrating to the cloud. Here are some other benefits we have seen when using AWS:</p> <ul> <li><strong>Scalability</strong> - AWS scales with your application and database by offering tools to quickly spin up or shut off additional servers as needed, within minutes. They even offer auto-scaling options that upon setup can be left to AWS to manage autonomously. There are no long-term commitments or upfront expenses for AWS.</li> <li><strong>On-Demand Management</strong> - AWS comes with the <a href="https://aws.amazon.com/console/" target="_blank">AWS Management Console</a> which gives you visibility and control of all your AWS services; you can sign-up for new services, manage existing services, as well as access robust analytics for ongoing server monitoring.</li> <li><strong>Agnostic</strong> &ndash; AWS doesn&rsquo;t favor operating systems or programming languages over another in the cloud; they support a range of databases, operating systems, and programming languages.</li> <li><strong>Reliability</strong> - AWS has impressive reliability in regards to uptime and scalability &ndash; for this reason many <a href="https://aws.amazon.com/solutions/case-studies/enterprise/" target="_blank">enterprise businesses</a> like <a href="https://aws.amazon.com/solutions/case-studies/comcast/" target="_blank">Comcast</a> and large web apps like <a href="https://aws.amazon.com/solutions/case-studies/netflix/" target="_blank">Netflix</a> are hosted on AWS.</li> <li><strong>Sustainability</strong> &ndash; AWS is committed to sustainability and our environment. They aim to use <a href="https://aws.amazon.com/about-aws/sustainability/" target="_blank">100% renewable energy</a> to power their data centers and continue to move the needle by continuing to announce new wind and solar farm projects.</li> </ul> <p class="toolTip">We migrated one of our client&rsquo;s robust and high traffic web applications to AWS. Once we moved them to the cloud, our client saw a 2x to 3x performance increase and they are seeing approximately $45,000 a year in hosting cost savings from the move!</p> <h4>To Cloud or Not to Cloud &ndash; Is That Even a Question?</h4> <p><img style="float: left; padding: 5px;" src="/images/imagebank/Blog/AWS/cloud.jpg" alt="" />More and more businesses and organizations are turning to the cloud as a great solution for secure hosting, increased cybersecurity, and on-demand management tools to better support and scale their applications. AWS allows organizations to work faster, reduce downtime, ensure a great user experience, and generate a higher revenue. Additionally, many organizations and businesses are choosing AWS over other cloud solutions because Amazon is constantly evolving their services to better support their customers. Check out the <a href="https://aws.amazon.com/new/?whats-new-content-all.sort-by=item.additionalFields.postDateTime&amp;whats-new-content-all.sort-order=desc&amp;wn-featured-announcements.sort-by=item.additionalFields.numericSort&amp;wn-featured-announcements.sort-order=asc" target="_blank">latest updates</a> AWS has released.</p> <p>AWS is dependable, cost-effective, and trusted by many organizations and continues to have a positive impact on a business&rsquo; bottom line. Are you interested in moving your applications to the cloud to save on server management costs and headaches from recurring downtime? Reach out to us to <a href="/consultation/">schedule a consultation</a> to discuss cloud options that can better support you and your users.</p> <p>&nbsp;</p> Tue, 16 Jul 2019 00:00:00 GMT Choosing the Right JavaScript Framework For Your Project <h4>What are JavaScript Frameworks?</h4> <p>JavaScript (JS) frameworks have evolved over the years and have provided more features and tools for developers to create beautiful, data-driven web applications. <a href="https://en.wikipedia.org/wiki/JavaScript_framework" target="_blank">JavaScript frameworks</a> define the entire application&rsquo;s front-end design. One great thing is JavaScript frameworks will call and use the code as programmed, rather than the developer having to call the framework &ndash; this improves code quality.</p> <p>Some popular JavaScript frameworks are Angular, React and Vue which aid in developing highly interactive web applications. These three frameworks are very similar but have unique nuances that distinguish themselves from each other.&nbsp;</p> <p><img style="float: right; padding: 5px;" src="/images/imagebank/Blog/Vue%20JS/angular-logo.jpg" alt="" width="125" height="125" /></p> <ul> <li><a href="https://angularjs.org/" target="_blank">Angular JS</a>&nbsp;- Angular was released by Google in 2010. It represents a full, MVC application framework and toolkit for developers that runs&nbsp;within the&nbsp;browser. Angular is geared towards complex <a href="https://en.wikipedia.org/wiki/Single-page_application" target="_blank">Single Page Applications (SPAs)</a> which load asynchronously. Angular encourages the use of TypeScript which is advanced JavaScript that is compiled down to be run in the browser. Angular requires packaging and command line tooling for proper utilization.</li> </ul> <p><img style="float: right; padding: 5px;" src="/images/imagebank/Blog/Vue%20JS/react-logo.jpg" alt="" width="125" height="125" /></p> <ul> <li><a href="https://reactjs.org/" target="_blank">React JS</a>&nbsp;- React was released by Facebook in 2013. It is not a full application framework, it is more of a library that focuses on building interactive UIs. It uses a custom JSX templating language which is similar to HTML. React is heavily geared around JavaScript modules and functionality; it also requires packaging and command line tooling as Angular does. Facebook and Instagram are currently built using React.</li> </ul> <p><img style="float: right; padding: 5px;" src="/images/imagebank/Blog/Vue%20JS/vue-logo.jpg" alt="" width="125" height="125" /></p> <ul> <li><a href="https://vuejs.org/" target="_blank">Vue JS</a>&nbsp;- Vue was released by a man named Evan You in 2014, with the goal to make modern UI development approachable. Vue is similar to React in that they both are more focused on the &ldquo;view&rdquo; aspect in MVC, as opposed to Angular that focuses on the full MVC aspect. Vue has two modes and uses an incrementally adaptable architecture that includes official add-ons for building applications. Vue <em>can </em>require packaging and command line tooling.</li> </ul> <p>All three frameworks are great options for developing interactive applications and can achieve the same end goals. Both Angular and React need to be built out from the ground up using JavaScript, while Vue has an option to include a Vue JS file to an existing HTML page which saves time. For example, you can select an element on the page and include the Vue JS file which allows you to utilize their view components; because of this, Vue is arguably the most versatile framework.</p> <h4>Why Use a JavaScript Framework?</h4> <p>There are many different reasons we use JavaScript frameworks when developing web applications:</p> <ul> <li>JS Frameworks introduce Components and Modularity in JavaScript which outputs clean code</li> <li>Frameworks eliminate unnecessary DOM management code, similar to jQuery, so you can focus on creating a view and eliminate extra work</li> <li>JS Frameworks decouple the client (browser) from the server which gives you a separate application on the front-end running in JavaScript and HTML, and separate back-end application on the server running .NET or another server-side programming language</li> <li>Frameworks allow you to power multiple platforms with one server using a REST API</li> <li>Frameworks are great for developing Single Page Web Applications (SPAs) which requires no page reloads and a displays one page view &ndash; like you see with Gmail, Google Maps, or Facebook</li> <li>JS Frameworks have improved browser compatibility and provide more flexibility with what you can do with JavaScript</li> </ul> <p>Above all, JavaScript frameworks let us develop quickly and efficiently which saves numerous hours on our JavaScript heavy projects.</p> <p><span style="color: #c56a44; font-size: 1.875rem;">Is Vue Right For Your Project?</span></p> <p><img style="float: left; padding-right: 25px;" src="/images/imagebank/Blog/Vue%20JS/website-user-interface.jpg" alt="" /></p> <p>Yes, most likely! Ask yourself the following questions:</p> <ul> <li>Do you need a highly interactive web application?</li> <li>Do you want your users to access content without requiring multiple clicks?</li> <li>Do you need to load data asynchronously with formatting capabilities as data changes?</li> <li>Does your project require the need to break up your data and associated formatting into specific components to be reused on other parts of your UI?</li> </ul> <p>If you answered yes to any of these questions, Vue may be the best choice for developing your new web application as it is highly interactive and efficient.</p> <h4>Resources For Developing a New Web Application Using Vue</h4> <p>Vue provides official add-ons developed by the Vue team to help expedite development processes. Vue has great documentation that can be referenced throughout the development cycle as needed.</p> <p>&nbsp;Our team uses some or all of the following resources on our clients&rsquo; Vue projects:</p> <ul> <li><a href="https://cli.vuejs.org/" target="_blank">Vue CLI (Command Line Interface)</a>&nbsp;- This provides our team with tools and starter templates for packaging, building, unit testing and deploying Vue applications; Webpack is a popular option to start with.</li> <li><a href="https://vuejs.org/v2/guide/components.html" target="_blank">Vue Components</a>&nbsp;- We use .vue components which is recommended for building applications with Vue. Utlizing .vue components reduces the need to bind individual index/HTML pages.</li> <li><a href="https://router.vuejs.org/" target="_blank">Vue Router</a>&nbsp;- This is the official router for Vue.js which provides tools for mapping Vue components to browser URLs. The Vue Router also includes built-in support for browser history and many other helpful features our team utilizes.</li> <li><a href="https://vuejs.org/v2/guide/state-management.html" target="_blank">Vuex State Management</a>&nbsp;- This is the official state management library for Vue which is based on React&rsquo;s Redux and Flux patterns. This library creates a central data storage system throughout the application instead of individual components loading data directly. This allows multiple components to share the same data and to be aware of changes in the state of that data.</li> </ul> <p class="toolTip">All three JavaScript frameworks are great &ndash; it is difficult to determine if one framework is truly superior over others but Vue is growing quickly in popularity. If you need a single page web application developed or need to determine what JavaScript framework is best for your project, <a href="/contact/">schedule a consultation</a> with us and we can help!</p> Mon, 17 Jun 2019 00:00:00 GMT Bring Content To Life Using CSS3 Animations <h4>Why Use CSS3 Animations?</h4> <p>Animations are becoming more and more popular on the web and for good reason. <img style="float: left; padding: 5px;" src="/images/imagebank/Blog/CSS%20Animations/human-eye.jpg" alt="" />Some <a href="http://misrc.umn.edu/workingpapers/fullpapers/1986/8611.pdf" target="_blank">sources</a> suggest that humans process visual information 60,000 times faster than reading text. When visuals are moving it draws attention to the eye and keeps users engaged for longer - the ultimate goal of a great user experience.</p> <p>Animations are a great way to get a point across to a user quickly, like providing directions on how to navigate through a new user interface. They can draw attention to specific elements or guide users through a process in an intuitive way. Animations are amazing at what they can accomplish but there are nuances that need to be considered to make the end result successful.</p> <h4>Considerations When Implementing Animations on Your Website</h4> <p>Most importantly, don&rsquo;t get carried away with animations. <img style="float: right; padding: 5px;" src="/images/imagebank/Blog/CSS%20Animations/stopwatch.jpg" alt="" />If animations are used too much throughout the site they lose their value and can become obnoxious to users; this could cause them to abandon your site all together. If there are animations that are constantly running it is important to include an option for the user to turn the animations off; especially if there is sound associated with it.</p> <p>Timing is crucial for successful animation implementation. Anything that runs in 0.1 of a second will seem automatic to users and won&rsquo;t be perceived as an animation. Different users will notice animations at different times. For example, an older user may need 0.7 of a second to see something, where a younger person may notice it in a 0.25 of a second. A good rule of thumb is keeping the animations within 0.1 of a second and 10 seconds; you will lose people after 10 seconds.</p> <h4>Different Types of CSS3 Animations</h4> <p>There are three ways to use animation using CSS3: Transitions, Transform, and Animation Keyframes.</p> <ul> <li> <p><a href="https://www.w3schools.com/css/css3_transitions.asp" target="_blank">CSS Transitions</a></p> <ul> <li class="blockBlue">Transitions allow you to change CSS property values smoothly from one value to another over a specified period of time. Transitions allow developers to specify a delay in seconds for the transition effect and allow you to specify how many seconds or milliseconds a transition effect takes to complete. Transitions allow full control over the timing by applying different timing functions like: ease in, ease out, ease-in-out, etc. which are very similar to animations within presentation software like PowerPoint, but with more control. There will be times when you will not want to use Transitions, like changing a font size or image size drastically; it can become shaky as it transitions.</li> </ul> </li> <li> <p><a href="https://www.w3schools.com/css/css3_2dtransforms.asp" target="_blank">CSS Transform</a></p> <ul> <li class="toolTip">Transform can work very well when you want to change a font size or image and not become shaky or jumpy. Transform has both 2D and 3D properties available. 2D Transform properties allow you to rotate, scale, move, skew, etc. your animated element. 3D Transform properties are much more fun and visually interesting, they really allow you to make elements come alive! 3D properties allow you to change position, specify how nested elements are rendered in a 3D space, change perspective, define whether an element should be visible when not facing the screen, and much more! 3D Transform also allows you to specify the methods in which you would like the element to move around; like translating, scaling, rotating, perspective, etc.</li> </ul> </li> <li> <p><a href="https://www.w3schools.com/cssref/css3_pr_animation-keyframes.asp" target="_blank">Animation Keyframes</a></p> <ul> <li class="blockBlue">Animation Keyframes are great to use when you want to change as many CSS properties you want, as many times that you want to; this allows more control when you want an element to do more than transition from 0% to 100%. To begin using Animation Keyframes you need to declare the animation name and duration at minimum and then can use Keyframe properties to designate what points in time you want the styles to change &ndash; you can use as many style changes as you like.</li> </ul> </li> </ul> <h4>Animation Examples</h4> <p>There are a lot of great resources and ideas for animation inspiration on the web. Here are some examples that you can look at to see different animation use cases:</p> <ul> <li>Here you have a <a href="https://codepen.io/dsenneff/details/2c3e5bc86b372d5424b00edaf4990173" target="_blank">fun example</a> that makes filling out a form fun</li> <li>This <a href="https://css-tricks.com/direction-aware-hover-effects" target="_blank">site</a> has great examples of directional hover effects</li> <li>Here you can see an <a href="https://codepen.io/munkholm/pen/EaZJQE" target="_blank">example</a> of animated script</li> <li>This <a href="https://fournier-pere-fils.com/home" target="_blank">site&rsquo;s</a> homepage uses many different applications of animation</li> <li>We can&rsquo;t forget the wonderful <a href="https://www.w3schools.com/css/css3_animations.asp" target="_blank">w3schools</a> that has many CSS Animation examples</li> </ul> <p>&nbsp;If you look at our website <a href="http://www.avibeweb.com/" target="_blank">www.avibeweb.com</a> you will see many different uses of CSS3 Animations and cool hover effects!</p> <p>Animations are wonderful for drawing attention to key content or elements on a webpage. They are fun, engaging and promote a great user experience when interacting with a website. If your website could benefit from animation to drive engagement and re-engagement of your users, <a href="/contact/" target="_blank">schedule a consultation</a> with our team to strategize how animation can bring your content to life.</p> Wed, 15 May 2019 00:00:00 GMT Personalizing the User Experience <h4>Personalized Content Catered to You, But Who Are &ldquo;You&rdquo;?</h4> <p>Personalization on the web has lent itself well to providing users with a customized and targeted user experience. Personalization can help your site perform better for your users and increase user traffic to your content. There are numerous different approaches for how you can choose to personalize content but the first step is identifying who you are personalizing experiences for.</p> <p>You need to identify who your audience is first and foremost and then you can dig a little deeper to determine what makes each user within a user group unique. We can do this by asking specific questions like:</p> <p><img style="float: right; padding: 5px;" src="/images/imagebank/Blog/Personalization/anonymous-person.jpg" alt="" /></p> <ul> <li>Who is currently using the site?</li> <li>What are their demographics?</li> <li>Are they tech-savvy?&nbsp;&nbsp;</li> <li>What do they want/need?</li> <li>How will we help them achieve their wants/needs?</li> <li>What will we do to add value to their visit?</li> <li>What competitors are vying for your audience&rsquo;s attention?</li> <li>What are competitors doing right and wrong, are they creating opportunities for you?</li> </ul> <p>Once you learn more about the differences within your various user groups like their age, location, etc., you can hone-in on specific goals that users would like to accomplish and assess how those goals align with your business&rsquo; objectives.</p> <p>Identifying unique goals, actions, or behaviors you want your user types to take will vary depending on your business and industry. For example, if you have an online store to sell your products you would want to focus on conversions; as opposed to a membership-based organization that wants to focus on onboarding new members. These actions fulfill both the user&rsquo;s intent as well as your business&rsquo; objectives. To strategize balancing user goals and business goals, you will want to ask yourself questions like these:</p> <ul> <li>What message do I need to get across to support the user and my business goals? <ul> <li>Features and benefits</li> <li>Counteract negative interpretations</li> <li>Inspire and educate</li> <li>Visual or text focused</li> <li>And many others</li> </ul> </li> <li>What is the best way to relay my message to my audience? <ul> <li>Notifications and Calls-To-Action</li> <li>Cross-promotion of content &ndash; lead users on their requested journey</li> <li>Personalized User Profile and Dashboard</li> <li>Simple, single page design or a multiple layered taxonomy</li> <li>It could be all of the above</li> </ul> </li> <li>What metrics do I want to track to determine if I have the right personalization strategy? <ul> <li>Click-throughs</li> <li>Form submissions</li> <li>User behaviors</li> <li>Time on site</li> <li>And many others</li> </ul> </li> </ul> <p>After the user and business goals have been defined, it is time to determine what personalization approach will be the most successful at engaging your audiences.</p> <h4>UX Personalization Approaches</h4> <p>User Experience Research is the first step in content personalization; you can&rsquo;t beat a <a href="/services/strategy/webstrategy/" target="_blank">strategy</a> that is based on real data and feedback. There are many different ways to gather user data and obtain the information needed to learn more about your users and their needs. These are some of our favorite processes to help inform our content personalization strategies:</p> <ul> <li>Collecting Data &ndash; There are different approaches to collecting data from users. You can rely on Google Analytics data, use geolocation information, or survey users from a subscription or mailing list.</li> <li>User Journey Mapping &ndash; Once the user personas are created with their core needs and goals in mind you can begin mapping out workflows or<img style="float: right; padding: 5px;" src="/images/imagebank/Blog/Personalization/different-users-color-wheel.jpg" alt="" /> journeys. These user paths should naturally lead the user from point A to point B; which in turn, fulfills user needs as well as your business objectives.</li> <li>Information Architecture &ndash; User journeys and Information Architecture go hand-in-hand. Once the conversion funnels are mapped out, you need to make sure that your site <em>more</em> than supports that journey &ndash; it needs to feel easy. If it is not easy for a user to navigate from point A to point B the user will abandon your site. Information Architecture analysis will address any re-architecting of navigation strategies and user interface (UI) layout designs to support each unique user journey.</li> <li>Personalized Content Strategy &ndash; Once the Information Architecture supports the user journeys you can begin thinking about what types of content, imagery, and Calls-To-Action (CTA&rsquo;s) will best speak to each user type. Targeted imagery and strategic use of CTA&rsquo;s is a great way to silently lead users on their specific path through the site to fulfill all needs.</li> </ul> <p>All of these processes will help you determine a good strategy for personalized content on the web. One thing we didn&rsquo;t fully address is the best approach to collect data. There is nothing that a user dislikes more than feeling like their privacy is being violated and it is important that you are thinking morally about how you are accessing user data to inform personalization strategies. Companies that are fully transparent about data collection with the goal to improve the online experience are often times welcomed by users.</p> <h4>What About User Privacy?</h4> <p><img style="float: left; padding: 5px;" src="/images/imagebank/Blog/Personalization/computer-privacy.jpg" alt="" />Privacy is very important to consider when creating a personalized user experience on the web. Have you ever been talking about a product that you are interested in with a friend, only to login to your Facebook account and see an advertisement for that product at the very top of your newsfeed? This can be very convenient for some consumers but there are plenty of consumers that will instantly be spooked and log out of the app. Privacy is very important in the digital world we live in and users need to feel like their privacy is supported in order to build trust with your site and company.</p> <p>There are many ways to collect and use data to gain user insights, but what data can you collect ethically these days? New laws have been put in place, or will be effective soon, that require businesses to get opt-in approval prior to collecting or distributing Personally Identifiable Information (PII) from your customers or users. Europe led the way by implementing the <a href="https://eugdpr.org/" target="_blank">General Data Protection Regulation</a> (<a href="https://eugdpr.org/">GDPR</a>) and as of January 2020, California will be implementing the <a href="https://www.caprivacy.org/" target="_blank">California Consumer Privacy Act (CCPA)</a>.</p> <p>Here are some different ways to gather insightful user data to support the user experience that we would like users to have on the sites we build:</p> <ul> <li>User Surveys and Interviews &ndash; We love this! We get to choose the questions we ask and the users are happy to share pain points and ideas in order to achieve a better user experience. Plus, there&rsquo;s nothing better than getting qualitative information directly from the source.</li> <li>Google Analytics &ndash; This is great quantitative usage data that can show trends to see what pages are most popular, show demographic data, show usage on different devices, and much more!</li> <li>Campaigns and Landing Pages &ndash; By setting up specific marketing campaigns that target unique user types you can learn how users interact with those landing pages to help determine their core goals. Knowing the user&rsquo;s specific goals is helpful for personalizing the experience for them.</li> <li>Geolocation &ndash; Mobile devices are smart, really smart. They can tell where users are at when they make crucial online conversions. For example, many retail stores are using beacon technology to strategically display relevant discount messaging to users when they are close to the store to encourage conversions.</li> <li>Machine Learning &ndash; This is newer AI technology that can analyze data and identify patterns that inform actions based on those learned patterns. This can be used to strategically recommend a relevant product to a user based on their purchasing patterns.</li> </ul> <p>These are all great data gathering strategies, be sure that all data collection is gathered ethically by allowing users to easily opt-in or opt-out of sharing their personal information. You can read more about collecting personal data in our February <a href="/company/blog/ccpa" target="_blank">Talk Nerdy To Me blog about the CCPA</a>.</p> <h4>Design and Develop for Your Users When You Can, But Don&rsquo;t Force It</h4> <p><img style="float: left; padding: 10px;" src="/images/imagebank/Blog/Personalization/happy-users.jpg" alt="" />Above all else, make sure you are designing and developing for a great user experience for all audiences. With that being said, content personalization will require some work from you in order to be successful. Personalization strategies need resources to support new content generation. You need to ensure that there is enough viable content and you are regularly creating fresh content to target audiences; you want to keep them coming back for more. A personalized user experience is key in engaging and re-engaging users to interact with your site. Personalized content is a great investment and ROI booster by building a sense of trust and understanding with users. If users feel cared about, they will keep coming back. Do your users or website need some love? <a href="/consultation/" target="_blank">Schedule a free consultation with us!</a></p> Mon, 15 Apr 2019 00:00:00 GMT Gamification - Recognition and Reward in eLearning <h4>eLearning in the Workplace</h4> <p>As businesses and organizations grow, employee training at a large scale becomes crucial to support company engagement, expansion and encourage internal employee progression into leadership roles. <a href="/services/development/elearning/" target="_blank">eLearning</a> platforms are becoming more prevalent in sales and operational industries to help train new employees. Many companies are reporting increases in sales numbers, employee engagement, as well as more team members being promoted to leadership positions. Culture plays a big factor in determining what type of curriculum and content will have the greatest impact on the team and company. Many businesses are exploring Gamification techniques within their Learning Management System (LMS) to make learning more compelling to the users.</p> <h4>What is Gamification?</h4> <p>Gamification is not the &ldquo;gaming&rdquo; you are thinking of &mdash; it is very different than playing video games or computer games &mdash; but does utilize some similar concepts like leaderboards, badges and awards. <a style="font-size: 18px;" href="https://en.wikipedia.org/wiki/Gamification" target="_blank">Gamification</a><span style="font-size: 18px; color: #000000;"> is the application of game design elements and game principles in non-game contexts. Do you remember the computer games, </span><a style="font-size: 18px;" href="https://www.youtube.com/watch?v=FhrndoEZTps" target="_blank">Math Munchers</a><span style="font-size: 18px; color: #000000;"> and </span><a style="font-size: 18px;" href="https://www.youtube.com/watch?v=FfbGEP087HM" target="_blank">The Oregon Trail</a><span style="font-size: 18px; color: #000000;">? These are great examples of Gamification and eLearning from the good old &lsquo;90s.</span></p> <p>The goal of Gamification is to elevate the content by making it fun to absorb. Gamification<img style="float: right; padding: 10px;" src="/images/imagebank/Blog/Gamification/girl-on-tablet.jpg" alt="" /> techniques with high levels of engagement provide users with a better learning experience; they do this by being able to grow their knowledge in a private setting that allows superiors to monitor progress and provide instant feedback. When Gamification is done right it can lead to an increase in content retention and can prompt behavioral modification in the workplace. From a Manager&rsquo;s perspective, Gamification can support customer service initiatives, increase onboarding efforts, and boost company sales. Business owners can see the impact have a positive effect on leadership development, as well as their bottom line.</p> <p>Some successful Gamification techniques include:</p> <ul> <li>Point systems and leaderboards</li> <li>Interactive quizzes and instant feedback</li> <li>Badge assignment when users reach key milestones</li> <li>Levelling up</li> <li>Audio and visual content strategy</li> </ul> <p>These concepts combined or stand-alone support personalized learning experiences that recognize and reward users for their advancement; this creates a sense of progression and accomplishment in the user&rsquo;s mind. When people feel recognized they intrinsically want to continue to grow and accomplish more. These feel-good reactions help support knowledge retention and increase engagement leaving users hungry for more.</p> <h4>Gamification is Bigger Than Badges and Points</h4> <p><img style="float: left; padding: 10px;" src="/images/imagebank/Blog/Gamification/highscore.jpg" alt="" />Gamification within eLearning platforms is not all about earning a badge for reading the company handbook, it&rsquo;s much bigger than that and can depend on their business&rsquo; motivation. For example, if you want to increase your sales team&rsquo;s performance a point system with badge recognition is a solid concept. Badges and leaderboards promote employee&rsquo;s competitive drive and could work well in that workspace. We recommend that you keep your company culture in mind when implementing a point system, you don&rsquo;t want to alienate employees from each other or create internal hostility.</p> <p>If a business&rsquo; goals are onboarding and training new employees quickly, a combination of interactive videos and quizzes in a levelling up scenario can help learners retain and recall knowledge quickly. This scenario is great because it also allows Management to test the user&rsquo;s progress. Because industries and their goals vary, choosing the right Gamification technique(s) will vary; the last thing you want is for your concept to be rolled out before gathering insight internally &ndash; you don&rsquo;t want it to be a flop. If you are unsure what techniques would be most effective and beneficial to your business, we are happy to <a href="/consultation/">schedule a consultation</a> to help determine what gamified curriculum will work best for your team and business.</p> <p><span style="color: #c56a44; font-size: 1.875rem;">Gamification Examples<img style="float: right; padding: 5px;" src="/images/imagebank/Blog/Gamification/DuoLingo.jpg" alt="" /></span></p> <p>You have probably been exposed to more Gamification examples than you realize. From fitness apps like Fitbit to Starbucks loyalty program, Gamification is everywhere. One of our favorite learning apps is <a href="https://www.duolingo.com/" target="_blank">DuoLingo</a> which is a mobile app that teaches native English speakers a new language of their choice. DuoLingo uses the following Gamification techniques effectively and we can attest that they will get you hooked!</p> <ul> <li>Interactive quizzes that test your written translations, spoken translations as well as multiple choice questions for variety</li> <li>Instant feedback for correct answers and it shows you what you missed</li> <li>Points for correct answers</li> <li>Badges for regular app logins, progress and improvement</li> <li>Levelling up to new categories</li> </ul> <p>DuoLingo has been so successful that schools are adopting the platform. They even did a <a href="http://static.duolingo.com/s3/DuolingoReport_Final.pdf" target="_blank">case study</a>&nbsp;to test its effectiveness against a normal classroom curriculum and gauge student satisfaction with the application.&nbsp;</p> <p>&nbsp;</p> <p class="blockBlue">Check out one of our successful <a href="/work/erider/">eLearning projects for TEAM OREGON</a> that has replaced the need for an in-classroom course. It has been so successful that other states are adopting and customizing the curriculum to fit their unique needs.</p> <p><span style="color: #c56a44; font-size: 1.875rem;"><span>Measuring Success</span></span></p> <p><img style="float: left; padding: 10px;" src="/images/imagebank/Blog/Gamification/success-graph.jpg" alt="" />Data is great! Tracking logins and progression through modules can allow Management to gauge which Gamification techniques are successful and which could be abandoned. Look at the data but also speak with your users, they are going to give you direct feedback of their experience and can surface pain points and insights that wouldn&rsquo;t otherwise be shown by only looking at numbers. Another approach to measuring your eLearning success is by A/B testing your Gamification approaches by allowing users to &ldquo;unlock&rdquo; new features based on their progression or levelling up; you can introduce new recognition or reward techniques to see how it lands with users who are already engaged and actively using the LMS. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p> <p>A key success point for effective eLearning Gamification strategy is ensuring that the users are engaged using the application and more importantly, enjoying learning and retaining content. If users don&rsquo;t enjoy the user experience or the content and Gamification strategy employed, they will be less likely to adopt the platform. Make learning fun, engaging, and make it memorable. As technology continues to advance, we will likely be seeing more eLearning applications utilizing AI/AR to take their curriculums and Gamification techniques to the next level &ndash; we can&rsquo;t wait!</p> Thu, 28 Mar 2019 00:00:00 GMT California Consumer Privacy Act of 2018 - What Is It, And What Does It Mean For Your Business? <p><img style="float: left; padding: 7px;" src="/images/imagebank/Blog/CCPA/ccpa-logo-small.jpg" alt="ccpa logo" />The California Consumer Privacy Act of 2018 is a new law that will have wide-ranging impacts on how businesses everywhere (regardless of whether they&rsquo;re based in California or not) interact with their online customers.</p> <p>The act, known as <a href="http://leginfo.legislature.ca.gov/faces/billTextClient.xhtml?bill_id=201720180SB1121" target="_blank">CCPA</a>, is set to take effect January 1, 2020. The CCPA regulates how companies handle data breaches, <a href="https://www.youtube.com/watch?v=Tv-y6NXQOAI&amp;feature=youtu.be&amp;t=1110" target="_blank">Personally Identifiable Information (PII)</a>, the sale of data to third parties, and consumer requests to review and delete the data. Companies who do business in California should invest now in technology to help them tackle new logistical challenges brought on by the law. Those who fail to comply&mdash;either intentionally or unintentionally&mdash;will face steep fines and consumer lawsuits that could add up to millions in losses.</p> <h4>Which companies must comply with CCPA?</h4> <p>A company that interacts with Californian consumers must meet one or more of the following criteria to be subject to CCPA regulations:</p> <p><img style="float: right; padding: 5px;" src="/images/imagebank/Blog/CCPA/california-city-buildings.jpg" alt="california city buildings" /></p> <ul> <li>Gross at least $25 million in revenue annually;</li> <li>Obtain personal information of 50,000 or more California residents, households or devices annually; or</li> <li>Receive 50% or more of their annual revenue from selling California residents&rsquo; PII.</li> </ul> <p>Parent companies, subsidiaries and affiliates under the same branding are considered one &ldquo;business&rdquo; in the CCPA even if they do not meet the criteria above independently.</p> <h4>What does CCPA compliance look like?</h4> <p>To comply with CCPA, qualifying companies must:</p> <ol> <li>Notify existing and potential customers about what data will be collected and allow them to opt out. This opt-out notice is required each time data from a new information &ldquo;category&rdquo; is collected. Picture this as a popup or form on your website that explains what information will be collected and options to opt in or out. A business that collects consumer&rsquo;s personal information needs to include the reason for why each category of PII will be used. A business cannot collect additional categories of PII or use PII for additional purposes without notifying consumers.</li> <li>Process and honor requests to provide and delete copies of a consumer&rsquo;s PII, which can include but is not limited to: Real name, alias, postal address, unique personal identifier, online identifier, cookies, IP address, email address, account name, social security number, driver&rsquo;s license number, passport number, or other similar identifiers. PII also includes browsing history, search history, geolocation and information regarding a consumer&rsquo;s interaction with a website or advertisement. Consumers must be able to make these requests via a toll-free number or website process. They can request information about PII collected in the last 12 months. When a consumer requests this data, the business must tell them from which categories and source their PII was collected, the business&rsquo; reason for collecting and selling the PII, and the categories of third-parties to which the business shares/sells PII.</li> <li>If consumers&rsquo; PII requests are deemed excessive and repetitive, the business can charge a reasonable fee to help offset the administrative costs of complying with the request. Businesses are also able to refuse requests on the grounds of them being excessive. But the business will bear the burden of demonstrating that any verified consumer request is &ldquo;excessive.&rdquo;</li> </ol> <h4>What will happen if a business doesn&rsquo;t comply?</h4> <p>Businesses that do not comply may face civil action lawsuits and state-levied fines. There are varying levels of actions that can be taken by California and consumers.<img style="float: left; padding: 5px;" src="/images/imagebank/Blog/CCPA/money.jpg" alt="money" /></p> <p>State-levied fines come in two varieties: $2,500 per unintentional violation and a $7,500 per intentional violation. If a business regularly handles thousands of pieces of PII or more, there&rsquo;s significant financial risk here.</p> <p>There could be a bigger threat, though: According to <a href="https://www.securitynow.com/author.asp?section_id=706&amp;doc_id=744859" target="_blank">Security Now</a>, an online publication about information security, the CCPA clearly grants people the right to bring lawsuits for the breach of their &ldquo;non-encrypted or non-redacted personal information&rdquo; even without proof of actual damage. They can recover between $100 and $750 per incident or more if they can prove actual damages exceeding $750.</p> <p>While the per-incident amounts are not high, they could quickly add up if consumers are regularly filing them or if a class-action suit is filed.</p> <h4>What can companies do to prepare?</h4> <p>To process the large volume of requests related to PII, companies should consider refining how they organize, access, and track data and notify website visitors about what data they&rsquo;ll be collecting and why.</p> <p><img style="vertical-align: middle; display: block; margin-left: auto; margin-right: auto;" src="/images/imagebank/Blog/CCPA/people-on-mobile-phones.jpg" alt="people on mobile phones" /></p> <p>If you&rsquo;re at a company that qualifies for CCPA regulation, consider implementing the following technology solutions to reduce future operational headaches:</p> <ol> <li>Streamlining opt-in and opt-out processes on your website. Make the processes as clear as possible for users. It&rsquo;s important to note that there is a mandatory opt-in requirement if your company sells PII of California minors who are under 16 years old. Practically, this means deploying a notification/alert/popup system on your website that&rsquo;s smart enough to determine <em>if</em> a visitor should have the opt-in/opt-out options, which PII they need to be notified about, and to collect their response and adjust other functions of your website or web application accordingly.</li> <li>Consider how you&rsquo;ll respond to and process consumer requests to access their PII in a timely fashion. How will you locate and delete select PII records after a consumer requests it? You have to tell the consumer what PII of theirs you have and remove it within 45 days unless the scale of the consumer request requires a longer window. That&rsquo;s not a lot of time, especially if you&rsquo;ve got a backlog of requests piling up. Your approach should be organized and methodical. Consider implementing a tool in your site&rsquo;s back-end that allows a designated staffer to review a queue of consumer requests, accept or reject them according to CCPA stipulations, easily locate the requested PII, and automatically send it to the requester before deleting it from your database. This system will also allow you to easily maintain a log of all requests and subsequent actions for auditing purposes.</li> <li>Are you able to easily determine exactly who you&rsquo;ve sold a piece of PII to? Can you filter purchasers of the PII you&rsquo;ve collected by category? Consumers will have the right to request this type of information from you, and by law you&rsquo;ll need to respond to them with detailed information within a short timeframe. Unless you already have a robust tool for filtering, searching, and organizing the PII you collect through your website, sales process, or web application, now is the time to invest in one.</li> </ol> <h4>Writing on the wall</h4> <p>California is taking the lead on personal information and privacy sharing. The implementation of the CCPA could potentially be a catalyst to a larger initiative on the federal level that all states must comply with. Future-looking business will prepare as if that&rsquo;s the case.</p> <p class="blockBlue">Please also note that The CCPA is a new act and could evolve substantially prior to implementation in early January 2020. Please <a href="/stayinformed/">subscribe to our Talk Nerdy To Me Blog</a> to follow updates regarding the CCPA and how it will affect your business.</p> Wed, 27 Feb 2019 00:00:00 GMT 10 Modern Logo Design Trends in 2019 <p>Branding is the first impression you make and first opportunity you have to &ldquo;speak&rdquo; to your target audience. First impressions are key in building trust with your customers and one of the first things people see is an organization&rsquo;s logo; this is why it is so important to make sure your brand and logo remain modern and continue to &ldquo;speak&rdquo; to your customers.</p> <p>We recommend that businesses revisit their branding strategy and guidelines every 2-3 years to remain modern. By no means do you need to fully rebrand that often, but you need to be aware of what message you are conveying to potential and existing clients. Simple updates can be made each year to make sure your business&rsquo; branding does not look dated &ndash; check out this logo modernization our design team created for our client upon redesigning their website. It is very clean, simple and still completely recognizable by making only small font and color changes.</p> <p><img style="display: block; margin-left: auto; margin-right: auto;" src="/images/imagebank/Blog/10KeyPrinciples/2019%20Logo%20Design%20Trends/susta.jpg" alt="" /></p> <p>Rebranding efforts can range in scope &ndash; minimal updates to a full overhaul if needed. If you are considering <a href="/company/blog/brandingyourbusiness/" target="_blank">rebranding</a> or refreshing your logo design in 2019, here are some trends you can expect to see.</p> <h4>10. Monochromatic</h4> <p>Monochromatic logo design uses one color. By no means does this result in a boring design. The different shades, tints and tones of one selected color can vary greatly; they can emulate depth and texture, and they can be complicated or simple. Often times a logo will have a one-color version, even if that isn't the preferred version of the logo. This approach lends itself to greater flexibility when designing branding elements.</p> <p>&nbsp;<img style="display: block; margin-left: auto; margin-right: auto;" src="/images/imagebank/Blog/10KeyPrinciples/2019%20Logo%20Design%20Trends/portland-monthly.jpg" alt="" /></p> <p style="text-align: center;"><span style="color: #808080; font-size: small;"><em>www.portlandmonthly.com</em></span></p> <p style="text-align: center;"><span style="color: #808080; font-size: small;"><em><img src="/images/imagebank/Blog/10KeyPrinciples/2019%20Logo%20Design%20Trends/mastercard.jpg" alt="" /></em></span></p> <p style="text-align: center;"><span style="font-size: small; color: #808080;"><em>www.mastercard.com</em></span></p> <h3 style="text-align: left;">&nbsp;</h3> <h4>9. Perspective</h4> <p style="text-align: left;">Using perspective in interesting ways is becoming more popular and will continue in 2019. The visual interest behind this approach is very engaging when executed effectively; playing with distortion adds originality to the design. Outside of adding interest, perspective can give a logo greater impact. For example, a construction company that specializes in road construction has an "A" as their logo; this wouldn't typically stand out but utilizing perspective can merge the shape of a road going over a hill with the letter "A" and their logo would then provide insight into what the company does.</p> <p><img style="display: block; margin-left: auto; margin-right: auto;" src="/images/imagebank/Blog/10KeyPrinciples/2019%20Logo%20Design%20Trends/perspective-logo.jpg" alt="" /></p> <p style="text-align: center;"><span style="font-size: small; color: #808080;"><em>Logo by Landon Cooper</em></span></p> <p style="text-align: center;"><img src="/images/imagebank/Blog/10KeyPrinciples/2019%20Logo%20Design%20Trends/dropbox.jpg" alt="" /></p> <p style="text-align: center;"><span style="font-size: small; color: #808080;"><em>www.dropbox.com</em></span></p> <h4>8. Bright Colors</h4> <p>Bright and vibrant use of color in logos will continue to be seen in 2019 as businesses and organizations are using color to communicate in different ways. Color can communicate the brand story to the users through color. Bright colors are fun and eye catching, but can also be used to influence customers.</p> <p style="text-align: center;"><img src="/images/imagebank/Blog/10KeyPrinciples/2019%20Logo%20Design%20Trends/mozilla-firefox.jpg" alt="" />&nbsp;</p> <p style="text-align: center;"><span style="font-size: small; color: #808080;"><em>www.mozilla.org</em></span></p> <p style="text-align: center;"><span style="font-size: small; color: #808080;"><span style="font-size: 18px; color: #000000;">&nbsp;</span><em><img src="/images/imagebank/Blog/10KeyPrinciples/2019%20Logo%20Design%20Trends/spotify.jpg" alt="" /></em></span></p> <p style="text-align: center;"><span style="font-size: small; color: #808080;"><em>www.spotify.com</em></span></p> <p style="text-align: center;">&nbsp;</p> <h4>7. Negative Space&nbsp;</h4> <p>The use of white and negative space is not a new design concept and we will continue to see it trending in 2019. Using negative space in a creative way can greatly enhance the logo&rsquo;s uniqueness and add a new level of visual interest to the design. Negative space may not be discernable at first glance but can add another layer of meaning that would not be possible to communicate otherwise.</p> <p style="text-align: center;"><img src="/images/imagebank/Blog/10KeyPrinciples/2019%20Logo%20Design%20Trends/base-camp-brewing-co.jpg" alt="" /></p> <p style="text-align: center;"><em><span style="font-size: small; color: #808080;">www.basecampbrewing.com</span></em></p> <p style="text-align: center;"><span style="font-size: small; color: #808080;"><em>&nbsp;<img src="/images/imagebank/Blog/10KeyPrinciples/2019%20Logo%20Design%20Trends/adobe.jpg" alt="" /></em></span></p> <p style="text-align: center;"><span style="font-size: small; color: #808080;"><em><em><span>www.adobe.com</span></em></em></span></p> <p style="text-align: center;">&nbsp;</p> <h4>6. Simple Typography&nbsp;&nbsp;</h4> <p>Minimalistic type design will continue to trend in 2019. One driver of this could be the continued growth in use of mobile devices; screen real estate is crucial and the content should not be shadowed due to the placement of a large and complex logo design. We have seen many companies move from a complex typeface to a simple sans-serif font to support the growing number of consumers shopping and living online. Sans-serif font is easy to read and lends itself well on mobile devices. Simple text-only logos display well on all devices and they also translate well for implementation on print media materials.</p> <p>&nbsp;</p> <p><img style="display: block; margin-left: auto; margin-right: auto;" src="/images/imagebank/Blog/10KeyPrinciples/2019%20Logo%20Design%20Trends/a-vibe.jpg" alt="" /></p> <p>&nbsp;</p> <p><img style="display: block; margin-left: auto; margin-right: auto;" src="/images/imagebank/Blog/10KeyPrinciples/2019%20Logo%20Design%20Trends/uber5.jpg" alt="" /></p> <p style="text-align: center;"><span style="font-size: small; color: #808080;"><em><em><span>&nbsp;<em><em>www.uber.com</em></em></span></em></em></span></p> <p style="text-align: center;">&nbsp;</p> <h4>5. Illustration&nbsp; &nbsp;</h4> <p>In 2019, we will see more logo designs that include illustration in creative ways. Illustration is fun, unique and depictive &ndash; it can be used to communicate your organization&rsquo;s services, expertise or mission visually. When done well it can make your logo instantly recognizable. Illustrative logos can be complicated or minimalistic and provide a more natural feel of a brand. Illustrative logos can work well when paired with hand-drawn typography to create a unified illustration.</p> <p style="text-align: center;"><span style="font-size: small; color: #808080;"><em><em><span><em><em>&nbsp;<img src="/images/imagebank/Blog/10KeyPrinciples/2019%20Logo%20Design%20Trends/laughing-planet.jpg" alt="" /></em></em></span></em></em></span></p> <p style="text-align: center;"><span style="font-size: small; color: #808080;"><em><em><span><em><em><em><em>&nbsp;<em><em>www.laughingplanet.com</em></em></em></em></em></em></span></em></em></span></p> <p style="text-align: center;"><img src="/images/imagebank/Blog/10KeyPrinciples/2019%20Logo%20Design%20Trends/portland-beer-week.jpg" alt="" /></p> <p style="text-align: center;"><span style="font-size: small;"><em><em><em><em><em><em>&nbsp;<span style="color: #808080;"><em><em>www.portlandbeerweek.org</em></em></span></em></em></em></em></em></em></span></p> <p style="text-align: center;">&nbsp;</p> <h4>4. Gradients&nbsp; &nbsp;</h4> <p>Gradients have been trending throughout 2018 and will continue to do so in 2019. The smooth transition between colors both cool and warm adds interest to a simple design and the use of color attracts the eye.</p> <p>&nbsp;</p> <p style="text-align: center;"><span style="font-size: small;"><em><em><em><em><em><em><span style="color: #808080;"><em><em><img src="/images/imagebank/Blog/10KeyPrinciples/2019%20Logo%20Design%20Trends/itunes.jpg" alt="" /></em></em></span></em></em></em></em></em></em></span></p> <p style="text-align: center;"><span style="font-size: small;"><em><em><em><em><em><em><span style="color: #808080;"><em><em><em><em><em><em><em><em>&nbsp;<span><em><em>www.itunes.com</em></em></span></em></em></em></em></em></em></em></em></span></em></em></em></em></em></em></span></p> <p style="text-align: center;"><span style="font-size: small;"><em><em><em><em><em><em><span style="color: #808080;"><em><em><img src="/images/imagebank/Blog/10KeyPrinciples/2019%20Logo%20Design%20Trends/instagram.jpg" alt="" /></em></em></span></em></em></em></em></em></em></span></p> <p style="text-align: center;"><span style="font-size: small;"><em><em><em><em><em><em><span style="color: #808080;"><em><em><em><em><em><em><em><em>&nbsp;<span><em><em>www.instagram.com</em></em></span></em></em></em></em></em></em></em></em></span></em></em></em></em></em></em></span></p> <p style="text-align: center;">&nbsp;</p> <h4>3. Geometry and Iconography&nbsp; &nbsp;&nbsp;</h4> <p>Text or simple designs can be elevated using geometric shapes to help communicate who the organization is. These shapes can be playful and intricate or bold and simple and still be effective in their own way. Iconography is typically seen next to or above the logo but are often used as a standalone representation of the company which is convenient for scaling a logo down for smaller screen sizes.</p> <p>&nbsp;</p> <p style="text-align: center;"><span style="font-size: small;"><em><em><em><em><em><em><span style="color: #808080;"><em><em><em><em><em><em><em><em><span><em><em><img src="/images/imagebank/Blog/10KeyPrinciples/2019%20Logo%20Design%20Trends/microsoft.jpg" alt="" />&nbsp;</em></em></span></em></em></em></em></em></em></em></em></span></em></em></em></em></em></em></span></p> <p style="text-align: center;"><span style="font-size: small;"><em><em><em><em><em><em><span style="color: #808080;"><em><em><em><em><em><em><em><em><span><em><em><em><em><em><em><em><em><span><em><em><em><em><em><em><em><em>&nbsp;<em><em>www.microsoft.com</em></em></em></em></em></em></em></em></em></em></span></em></em></em></em></em></em></em></em></span></em></em></em></em></em></em></em></em></span></em></em></em></em></em></em></span></p> <p style="text-align: center;"><span style="font-size: small;"><em><em><em><em><em><em><span style="color: #808080;"><em><em><em><em><em><em><em><em><span><em><em><em><em><em><em><em><em><span><em><em><em><em><em><em><em><em><em><em><img src="/images/imagebank/Blog/10KeyPrinciples/2019%20Logo%20Design%20Trends/conagra.jpg" alt="" /></em></em></em></em></em></em></em></em></em></em></span></em></em></em></em></em></em></em></em></span></em></em></em></em></em></em></em></em></span></em></em></em></em></em></em></span></p> <p style="text-align: center;">&nbsp;</p> <p style="text-align: center;"><em><em><em><em><em><em><span><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em>&nbsp;<span style="color: #808080; font-size: small;"><em><em>www.conagra.com</em></em></span></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></span></em></em></em></em></em></em></p> <p style="text-align: center;">&nbsp;</p> <h4>2. Hand Drawn&nbsp; &nbsp; &nbsp;</h4> <p>Hand drawn logo trends are on the rise and expect to see more in 2019. Hand drawn design typically includes detailed design work that supports hand drawn typography; this can still appear to be minimalistic when done right. Unique, hand drawn designs allow the company's originality to come out and make your business stand out from your competition.</p> <p style="text-align: center;"><em><em><em><em><em><em><span><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><span style="color: #808080; font-size: small;"><em><em><img src="/images/imagebank/Blog/10KeyPrinciples/2019%20Logo%20Design%20Trends/wildflower-baking.jpg" alt="" />&nbsp;</em></em></span></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></span></em></em></em></em></em></em></p> <p style="text-align: center;"><em><em><em><em><em><em><span><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><span style="color: #808080; font-size: small;"><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><span><em><em>www.wildflowerbakingpdx.com</em></em></span></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></span></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></span></em></em></em></em></em></em></p> <p style="text-align: center;"><em><em><em><em><em><em><span><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><span style="color: #808080; font-size: small;"><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><span><em><em><img src="/images/imagebank/Blog/10KeyPrinciples/2019%20Logo%20Design%20Trends/10-barrel-brewing-co.jpg" alt="" /></em></em></span></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></span></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></span></em></em></em></em></em></em></p> <p style="text-align: center;">&nbsp;</p> <p style="text-align: center;"><span style="font-size: small; color: #808080;"><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em>www.10barrel.com</em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></span></p> <p style="text-align: center;">&nbsp;</p> <h4>1. Cut Typography&nbsp; &nbsp; &nbsp;&nbsp;</h4> <p>Cut typography takes fonts to the next level by cutting away portions or sections of text to create added visual interest to a rather simple font. This approach to typography is readable even at a quick glance; the human brain is amazing at filling in the gaps. Is can create secondary iconography that can be utilized as a standalone component for the brand or mimic the icon to create a unified design.</p> <p style="text-align: center;"><span style="font-size: small; color: #808080;"><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><img src="/images/imagebank/Blog/10KeyPrinciples/2019%20Logo%20Design%20Trends/logitech.jpg" alt="" />&nbsp;</em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></span></p> <p style="text-align: center;"><span style="font-size: small; color: #808080;"><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em>www.logitech.com</em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></span></p> <p style="text-align: center;"><span style="font-size: small; color: #808080;"><span style="font-size: 18px; color: #000000;">&nbsp;</span><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><img src="/images/imagebank/Blog/10KeyPrinciples/2019%20Logo%20Design%20Trends/deviant-art.jpg" alt="" /></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></span></p> <p style="text-align: center;"><span style="font-size: small; color: #808080;"><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em>www.deviantart.com</em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></span></p> <p>Each of these logo design trends translate well on their own, but if you look closely you will notice an overlap or hodge-podge of trends in some of the examples we shared; like the use of bright color and gradients, or the use of monochromatic black text paired with negative space. These are only a few logo design trends that we expect to see but we also expect to see new concepts that evolve in 2019 that we haven&rsquo;t seen yet - these could be completely new approaches or a compilation of the trends we mentioned. Either way, we are excited to explore some of these logo trends in 2019. Which 2019 logo design trend is your favorite?</p> Mon, 07 Jan 2019 00:00:00 GMT Intrinsic Design - Melding Digital Art and the User Experience <h4>What is Intrinsic Web Design?</h4> <p>In 2011, <a href="/services/design/mobiledesign/" target="_blank">Responsive Web Design</a> changed the way we interact with the web. The emerging use of mobile devices forced Designers and Developers to step away from their desktops and think about web development on a smaller scale. Responsive Design has allowed us to stay connected while on the go and helps us quickly digest large content sets in a condensed and user-friendly way.</p> <p><img style="float: right; padding: 15px;" src="/images/imagebank/Blog/IntrinsicDesign/everything-you-know-about-w.jpg" alt="" /></p> <p>Responsive Design was only the beginning of the shift in designing for mobile-first/mobile-friendly experiences. In 2018, Jen Simmons, a designer supporter at Mozilla, spoke at the A List Apart Event in Seattle and the topic of her speech was, &ldquo;<a href="https://speakerdeck.com/jensimmons/everything-about-web-design-just-changed" target="_blank">Everything You Know About Web Design Just Changed</a>&rdquo;. This title was intriguing and a bit jarring, but once she explained that websites are more than a layout and began talking about a new approach to web design (Intrinsic Design) - we were all ears!</p> <h4>Responsive Design Versus Intrinsic Design</h4> <p>Responsive Design was coined by Ethan Marcotte eight years ago; this was a big shift in the web world at the time.&nbsp;Marcotte defined Responsive Design as utilizing a fluid grid and media queries to change the design at different break points in order for the design to fit and display well on both mobile and desktop screens. Responsive Design squashed the &ldquo;fixed width&rdquo; and &ldquo;tables&rdquo; concept that many of us learned in HTML 101. &nbsp;</p> <p>Technology is ever evolving, even the newest techniques like Responsive Design were bound to grow and progress over the years &ndash; meet &ldquo;Intrinsic Design&rdquo;. The word, &ldquo;Intrinsic&rdquo; means belonging to the essential nature or constitution of a thing. In the web world, Intrinsic Design allows our Designers more creative freedom when they design new user interfaces by letting the content determine the layout. There are many similarities, as well as differences between Responsive and Intrinsic Design capabilities:</p> <p><img style="vertical-align: middle; display: block; margin-left: auto; margin-right: auto;" src="/images/imagebank/Blog/IntrinsicDesign/responsive-versus-intrinsic.jpg" alt="" /></p> <ul> <li>Responsive Design uses flexible images which shrink and grow depending on the size of their container, while Intrinsic Design allows you to use flexible images as well as fixed images so the content decides which approach is best.</li> <li>Responsive Design uses fluid columns to effectively utilize all screen real estate regardless of screen size; Intrinsic Design uses fluid columns as well as rows to provide Designers and Developers with more flexibility.</li> <li>Responsive Design uses media queries to adjust screen sizes for different breakpoints, while Intrinsic Design does not need to rely on media queries.</li> </ul> <p>Responsive Design paved the way for Intrinsic Design to come to fruition, Intrinsic Design is basically Responsive Design but running on four cups of coffee. By using emerging CSS modules like <a href="https://www.w3schools.com/css/css3_flexbox.asp" target="_blank">Flexbox</a> and <a href="https://www.w3schools.com/css/css_grid.asp" target="_blank">CSS Grid Layout</a>; Designers can now properly layout their designs the exact way they want them to be laid out while avoiding hacky code or third-party frameworks to make it work.</p> <h4>Digital Art and the User Experience</h4> <p>Intrinsic Design allows both Designers and Developers to think outside of the normal breakpoints they are used to and take the user experience to the next level. More flexibility to design means user interfaces are more than just a layout; they are digital art that users can interact with. Now Designers and Developers can REALLY use white space intentionally and squish, stretch or shrink elements as they see fit to produce an end product that truly speaks to users regardless of their device of choice.<img style="float: right;" src="/images/imagebank/Blog/IntrinsicDesign/digital-wall2.jpg" alt="" /></p> <p>Here are some examples of sites that are using Flexbox to effectively reorganize site content in unique ways when you alter the size of the browser window:</p> <ul> <li><a href="https://qvartz.com/" target="_blank">https://qvartz.com/</a></li> <li><a href="https://onomeals.zeusjones.com/" target="_blank">https://onomeals.zeusjones.com/</a></li> </ul> <p>We are excited about Intrinsic Design and all of the artistic freedom that it allows our Design team to explore. We appreciate the respect that Intrinsic Design supports the medium of the web, it is not a newspaper or Word document &ndash; it is interactive and dynamic. If your site needs a redesign, it is best that you consider Intrinsic Design approaches to make your content shine regardless of the device and resolution you are using; after all, the content is what is bringing users to your site in the first place.</p> <p><iframe src="https://www.youtube.com/embed/GtV5TyuZhr8" frameborder="0" width="700" height="393"></iframe></p> <h4>Resources</h4> <p>There are a lot of Intrinsic Design and layout resources available for you to explore:</p> <ul> <li><em><a href="https://www.youtube.com/layoutland" target="_blank">https://www.youtube.com/layoutland</a></em></li> <li><em><a href="https://labs.jensimmons.com/" target="_blank">https://labs.jensimmons.com/</a></em></li> <li><em><a href="https://gridbyexample.com/examples/" target="_blank">https://gridbyexample.com/examples/</a></em></li> <li><em><a href="https://www.cssgridplayground.com/" target="_blank">https://www.cssgridplayground.com/</a></em></li> <li><em><a href="https://codepen.io/jensimmons/" target="_blank">https://codepen.io/jensimmons/</a></em></li> </ul> <p>&nbsp;</p> <p>&nbsp;</p> Wed, 24 Oct 2018 00:00:00 GMT Smart Foodservice® Warehouse Stores – Order Online with Click&Carry <h4>Smart Foodservice&reg; Warehouse Stores</h4> <p>Smart Foodservice&reg; Warehouse Stores&nbsp;has been a pleasure to work with over the years! We recently launched their response, <a href="https://www.smartfoodservice.com/" target="_blank">redesigned website</a>&nbsp;which includes new features to better support their customers' online experience like:</p> <ul> <li>Easier navigation on all devices</li> <li>Larger product images</li> <li>Online shopping lists</li> <li>Smart Foodservice&reg; Warehouse Stores Card<img style="float: right;" src="/images/imagebank/Blog/Click%20and%20Carry/Smart-Foodservice-FINAL.jpg" alt="" /></li> <li>Emailed product specials</li> <li>Select your store</li> <li>In-Store Tours</li> <li>Text and email notifications</li> <li>and much more!</li> </ul> <h4>Click&amp;Carry</h4> <p>One of the newest features growing at&nbsp;Smart Foodservice&reg; Warehouse Stores&nbsp;is their <a href="https://www.smartfoodservice.com/search/clickandcarry/" target="_blank">Click&amp;Carry</a> program. Click&amp;Carry first made its debut in Salt Lake City, Utah in 2017. The initial launch was so successful that more&nbsp;Smart Foodservice&reg; Warehouse stores&nbsp;are now participating in the Click&amp;Carry program; to date,&nbsp;<span>Smart Foodservice&reg; Warehouse Stores</span> has fulfilled thousands of orders through the Click&amp;Carry program at its participating locations.</p> <p>The way it works is customers can register for a customer account, begin shopping at their participating Smart Foodservice&reg; Warehouse Stores online, and place an order to be picked up at a later date. Schedule a pick-up time that works best for you, chose next day or up to 14 days out. Once you place your order you will receive an email or text message confirmation with your order details. Email and text notifications keep you updated while your order is being processed, as well as when it is ready for pick-up.</p> <p><img style="display: block; margin-left: auto; margin-right: auto;" src="/images/imagebank/Blog/Click%20and%20Carry/Smart Foodservice FINAL.png" alt="" />Smart Foodservice&reg; Warehouse Stores&nbsp;prides themselves on providing a great customer experience and understands that needs shift; because of this, they allow their customers to add items to their order all the way up to the time of check-out in the store. If that isn't convenient enough, you can even choose to select your own fresh produce or meat upon arrival! The new Click&amp;Carry program has been very effective in making shopping convenient and easy - they even load your car for you!</p> <p>Be sure to <a href="https://www.smartfoodservice.com/account/signup/" target="_blank">create your customer account</a>&nbsp;and select your preferred&nbsp;Smart Foodservice&reg; Warehouse Stores&nbsp;to see if Click&amp;Carry is available. The success of the program is spreading and soon you will see more&nbsp;Smart Foodservice&reg; Warehouse Stores&nbsp;locations participating in the Click&amp;Carry program. Here are some locations that currently offer Click&amp;Carry:</p> <p style="margin: auto;"><img style="vertical-align: middle; width: 100%; margin: auto; padding: 10px 0px;" src="/images/imagebank/Blog/Click%20and%20Carry/map.png" alt="Map with Smart FoodService states highlighted" /></p> <p><img src="S:\home\avibeweb\content\Blog\Click%20and%20Carry" alt="" /></p> <div style="float: left; width: 48%;"> <ul> <li>Washington <ul> <li>Bellingham (Store #552)</li> <li>Bothell (Store #506)</li> <li>Bremerton (Store #518) - Beginning June 4, 2018</li> <li>Burlington (Store #570)</li> <li>Federal Way (Store #556)</li> <li>Kelso (Store #542)</li> <li>Kent (Store #555) - Beginning June 4, 2018</li> <li>Lynnwood (Store #557)</li> <li>Olympia (Store #548) -&nbsp;<span>Beginning November 2018</span></li> <li>Seattle - Stone Ave N (Store #549)</li> <li>Seattle - 4th Ave S (Store #551)</li> <li>Seattle - 21st Ave S (Store #583)</li> <li>Spokane - N Division St (Store #573)</li> <li>Spokane Valley (Store #578)</li> <li>Tacoma - S 112th St (Store #579)</li> <li>Tukwila (Store #561) - Beginning June 4, 2018</li> <li>Vancouver (Store #566)</li> <li>Wenatchee (Store #513)</li> </ul> </li> <li>Idaho <ul> <li>Boise (Store #564)</li> <li>Coeur d&rsquo;Alene (Store #504)</li> <li>Nampa (Store #584)</li> <li>Twin Falls (Store #590)</li> </ul> </li> <li>Montana <ul> <li>Missoula (Store #505)</li> </ul> </li> <li>Utah <ul> <li>Salt Lake City (Store # 501)</li> </ul> </li> </ul> </div> <div style="float: right; width: 48%;"> <ul> <li>Oregon <ul> <li>Aloha (Store #540) - Beginning June 4, 2018</li> <li>Bend (Store #515)</li> <li>Clackamas (Store #558)</li> <li>Eugene (Store #533)</li> <li>Gresham (Store #536) - Beginning June 4, 2018</li> <li>Klamath Falls (Store #545)</li> <li>Newport (Store #541)</li> <li>Pendleton (Store #539)</li> <li>Portland - SE Stephens (Store #531) - Beginning December 2018</li> <li>Portland - N Hayden Meadows Dr (Store #537) - Beginning June 4, 2018</li> <li>Portland - NW 19th Ave (Store #587)</li> <li>Salem (Store #516)</li> <li>Springfield (Store #527)</li> <li>Tigard (Store #577)</li> <li>The Dalles (Store #544)</li> <li>Warrenton (Store #535)</li> </ul> </li> <li>California <ul> <li>Chico (Store #565)</li> <li>Concord (Store #510)</li> <li>Modesto (Store #569)</li> <li>Oakland (Store #567)</li> <li>Redding (Store #547)</li> <li>Sacramento (Store #560)</li> <li>San Francisco (Store #586)</li> <li>San Jose (Store #571)</li> <li>San Lorenzo (Store #507)</li> <li>Stockton (Store #517)</li> <li>Yuba City (Store #572)</li> </ul> </li> </ul> </div> <div style="clear: both;">&nbsp;</div> <p class="blockBlue">Save time and order online when you are making purchases with a minimum order amount of $250.00. Check back for more <a href="https://www.smartfoodservice.com/locations/">Smart Foodservice&reg; Warehouse Stores locations</a>&nbsp;offering Click&amp;Carry in the future and let&nbsp;Smart Foodservice&reg; Warehouse Stores work for you!</p> <p>&nbsp;</p> <p>&nbsp;</p> Fri, 01 Jun 2018 00:00:00 GMT IoT - Secure Your Things <p>The world of technology is evolving rapidly and embedding technology into more every day devices to make them more efficient and user friendly; think Alexa and how helpful she is when compiling a shopping list or playing your favorite song on demand &ndash; this is just the beginning of the Internet of Things (IoT).</p> <p><a href="https://en.wikipedia.org/wiki/Internet_of_things" target="_blank">Wikipedia&rsquo;s definition</a> of IoT is, &ldquo;The Internet of things (IoT) is the network of physical devices, vehicles, home appliances and other items embedded with electronics, software, sensors, actuators, and network connectivity which enables these objects to connect and exchange data. Each thing is uniquely identifiable through its embedded computing system but is able to inter-operate within the existing Internet infrastructure.&rdquo;</p> <h4>Building a Secure Future</h4> <p><img style="float: left; padding-right: 7px;" src="/images/imagebank/Blog/Internet%20of%20Things/smart-home.jpg" alt="" />IoT is the future of home automation and is extending its limbs into the business world and beyond. &ldquo;Things&rdquo; like self-driving cars, internet connected refrigerators, app controlled lights, and smart mirrors that can track and recommend skincare regiments are a few new connected devices that we will be seeing more of.</p> <p>Because IoT devices like app controlled lights and air conditioning are typically connected to the same network as our phones and computers, these devices have access to our personal information and data which is an appealing target for cyberattacks which could affect not only the device it first took hold of, it can spread to other devices that are connected to the same network. The concern many people are sharing is how is my data kept secure? How will we feel secure when <a href="https://www.gartner.com/newsroom/id/3598917" target="_blank">Gartner</a> is predicting that there will be 20.4 billion connected devices introduced to our networks by 2020.</p> <h4>Learning Lessons the Hard Way</h4> <p>One of the biggest distributed denial of service (DDoS) attacks in 2016 was caused by a &ldquo;botnet&rdquo; which is a network of computers infected with special malware. This particular botnet was called, &ldquo;Mirai botnet&rdquo; and it was made up of IoT devices such as digital cameras, internet routers, and DVR players that had weak or default passwords. What made this attack so massive is the fact that the botnets had numerous internet-connected devices to choose from to leverage an attack of its size.</p> <p class="blockBlue"><strong>TIP:</strong> Make sure that your passwords are strong and unique. You can utilize this tool to generate strong passwords: <a href="https://lastpass.com/generatepassword.php" target="_blank">LastPass</a>.</p> <p>The Mirai botnet was just the beginning of botnet evolution in the world of IoTs. The newest botnet threat is called IoT Reaper. The difference between Mirai and Reaper is that Reaper is using software hacking techniques that look for security flaws in the code of insecure IoT devices rather than looking for devices with weak or default passwords &ndash; the bots are getting smarter. To date, there have been no signs of DDoS threats with Reaper but they have the ability to do damage if and when they choose to.</p> <p class="toolTip">Here are some vendors that have been targeted by Reaper: NetGear, Linksys, GoAhead, Avtech, and others can be found <a href="https://research.checkpoint.com/new-iot-botnet-storm-coming/" target="_blank">here</a>.</p> <h4>How Can You Protect Yourself and Your Devices?</h4> <p>IoT device providers are aware of the security issues that leave their devices vulnerable. When feasible, these companies will put out a firmware patch to help secure your device &ndash; the problem is that there is no easy way to notify their customers when they release a patch and patches can be hard to install properly. As the IoT world continues to grow, manufacturers should improve their security on their devices prior to being available for purchase to the public. For now, there are a few things you can do today to protect your devices from IoT attacks:</p> <ol> <li><strong>Username and Passwords</strong> &ndash; Do not use default username/password combinations for your devices. Make sure your passwords are strong enough that they cannot be cracked by using a strong password generator like we mentioned above.</li> <li><strong>Online or Offline</strong> &ndash; Controlling network access for any unused features of the device can cut down the chances of attack. If the device doesn&rsquo;t have other devices relying on it constantly then the device can be shut off when not in use for additional security.</li> <li><strong>Patch it Up</strong> &ndash; Check if your device has released a firmware patch, if so, update your device accordingly and continue to check back for any new security updates.</li> </ol> <p>There are other, nerdier ways to help protect yourself and your devices from attack which can be found <a href="https://sensorstechforum.com/security-tips-configuring-iot-devices/" target="_blank">here</a>. This article also lists different tests that system administrators can employ like penetration testing to ensure your setup is secure.</p> <h4>The World is Getting Smarter and So Are Our Devices</h4> <p><img style="float: right; padding: 7px;" src="/images/imagebank/Blog/Internet%20of%20Things/IoT.jpg" alt="" />Although security issues with IoTs are a real concern, this will likely not prevent manufacturers from continuing to create smart devices that make our lives easier and become more and more prevalent in our everyday lives. For this reason, we can only hope that IoT manufacturers will step up their security game if Mirai didn&rsquo;t already prioritize this effort.</p> <p>The IoT industry is booming and there are lots of new products coming soon that will make our lives easier and more efficient so it&rsquo;s not all bad in the world of IoT. You can see a list of the latest and greatest IoTs trending in 2018 from <a href="https://www.forbes.com/sites/danielnewman/2018/01/16/top-18-tech-trends-at-ces-2018/#2cca0b7e452f" target="_blank">CES</a>. For now, make sure to employ best IoT security practices and in the words of <a href="https://www.youtube.com/watch?v=ClQcUyhoxTg" target="_blank">Blue Oyster Cult</a>, &ldquo;don&rsquo;t fear the reaper&rdquo;, just be aware of it.</p> Thu, 15 Feb 2018 00:00:00 GMT PDX Palettes 2017 <p>Winter&rsquo;s finally rolled in all dark and gray. The entirety of Portland is bracing itself for a few months of short days, low clouds and a Snowpocalypse or two (please, not again!).</p> <p>What better time to reflect on the Portland area&rsquo;s vibrant sights and colors? In 2017, we captured some of the best natural and manmade color schemes in PDX and surrounding areas. Let&rsquo;s take a look:</p> <table style="width: 92%;" border="0"> <tbody> <tr> <td style="padding: 0 2%;"> <p style="text-align: center;"><img src="/images/imagebank/Blog/PDXPalettes%202017/SE_Burnside.jpg" alt="" width="100%" /></p> <p style="text-align: center;">One of our favorite murals on Burnside in SE Portland.</p> </td> </tr> <tr> <td style="padding: 0 2%;"> <p style="text-align: center;"><img src="/images/imagebank/Blog/PDXPalettes 2017/Gorge.jpg" alt="" width="100%" /></p> <p style="text-align: center;">A sunset shot from the Oregon side of the Columbia River Gorge.</p> </td> </tr> <tr> <td style="padding: 0 2%;"> <p style="text-align: center;"><img src="/images/imagebank/Blog/PDXPalettes%202017/International_Rose_Test_Garden.jpg" alt="" width="100%" /></p> <p style="text-align: center;">The International Rose Test Garden celebrated its 100th Anniversary in August. This public space, which serves as a test lab for new rose varieties, is one of the reasons Portland clinched the title City of Roses.</p> </td> </tr> <tr> <td style="padding: 0 2%;"> <p style="text-align: center;"><img src="/images/imagebank/Blog/PDXPalettes%202017/Lan_Su_Chinese_Garden.jpg" alt="" width="100%" /></p> <p style="text-align: center;">A perfect spring day at the Lan Su Chinese Garden. This landmark is the result of a collaboration between Portland and Suzhou, its sister city in China&rsquo;s Jiangsu province.</p> </td> </tr> <tr> <td style="padding: 0 2%;"> <p style="text-align: center;"><img src="/images/imagebank/Blog/PDXPalettes%202017/Union_Station.jpg" alt="" width="100%" /></p> <p style="text-align: center;">Castle or train station? We&rsquo;re still not sure.</p> </td> </tr> <tr> <td style="padding: 0 2%;"> <p style="text-align: center;"><img src="/images/imagebank/Blog/PDXPalettes%202017/Sauvie_Island_Flowers.jpg" alt="" width="100%" /></p> <p style="text-align: center;">Cerulean sky and wildflowers on one of Portlanders&rsquo; favorite sunny day getaways, Sauvie Island.</p> </td> </tr> <tr> <td style="padding: 0 2%;"> <p style="text-align: center;"><img src="/images/imagebank/Blog/PDXPalettes%202017/A-VIBE_Headquarters.jpg" alt="" width="100%" /></p> <p style="text-align: center;">The view from A&bull;VIBE&rsquo;s office in Tiffany Center on a beautiful, rainbow-laced day.</p> </td> </tr> </tbody> </table> <p>Have a great photo you&rsquo;d like to see in a PDX Palette? Add a comment below and we'll contact you to feature your photo in our 2018 PDX Palettes!</p> Fri, 22 Dec 2017 00:00:00 GMT Quality Assurance Testing - The Part Where You Make Sure It Works <p>Testing is one of the most important steps in web development and should never be skipped or rushed. It&rsquo;s a foundational part of quality assurance and helps ensure new development updates work as expected and do not cause unexpected issues.</p> <p>Before any web application update is pushed live by our team at A&bull;VIBE, it&rsquo;s put through a three-stage testing process&mdash;sometimes several times, depending on the complexity of the update.</p> <h4>Our Quality Assurance Testing Processes</h4> <p>At A&bull;VIBE, we have standardized testing processes that are thoroughly documented and executed daily. Here&rsquo;s a breakdown of the testing phases we put all development updates through:</p> <ul> <li>Once web development is complete in the beta environment, updates and software functionality are:</li> <ul> <li>Tested by the web developer</li> <li>Tested by quality assurance specialist</li> <li>Tested by project manager</li> </ul> <li>If the update doesn&rsquo;t introduce bugs in the beta environment, it is then pushed to the staging environment where it&rsquo;s tested again by: <ul> <li>The quality assurance specialist</li> <li>The project manager</li> <li>The client</li> </ul> </li> <li>If the update doesn&rsquo;t introduce any bug in the staging environment, it is then pushed to the production environment and is live to the public. We use the new feature from start to finish on production just to make sure everything is perfect.</li> </ul> <h4>Essential Software Testing Checklists</h4> <p>Checklists are a tester&rsquo;s best friend. Here&rsquo;s a quick list of some of the feature-specific testing checklists our team uses:</p> <ul> <li><a href="/downloads/files/Blog%20Downloads/Import-Export-Upload-Download.pdf" target="_blank">File System (Exports, Imports, Uploads, and Downloads) Checklist</a></li> <li><a href="/downloads/files/Blog%20Downloads/Accessibility_checklist.pdf" target="_blank">Accessibility Checklist</a></li> <li><a href="/downloads/files/Blog%20Downloads/Performance_testing.pdf" target="_blank">Performance Checklist</a></li> <li><a href="/downloads/files/Blog%20Downloads/UI_Responsive.pdf" target="_blank">User Interface and Responsive Design Checklist</a></li> <li><a href="/downloads/files/Blog%20Downloads/Payment_Systems.pdf" target="_blank">Payment Systems Checklist</a></li> <li><a href="/downloads/files/Blog%20Downloads/Form_submission.pdf" target="_blank">Form Submissions Checklist</a></li> </ul> <p>Relying on checklists like these can greatly streamline your testing process. They&rsquo;re extremely helpful for project managers and developers who may not have formal QA training. But they are also useful to any quality assurance specialist looking to document or formalize their own testing process. They help confirm that crucial steps were taken before an update goes live.</p> <h4>Automated Testing Tools We Love</h4> <p>Manual, human testing is critical to any QA process. But some processes are completed more efficiently and just as well by software.</p> <p>Automated testing tools allow our team to write testing processes once and then run it again whenever a new update is made to a web application. The process confirms that the core functionality of the application is still working after new updates take effect.</p> <p>We&rsquo;ve tried a multitude of automated testing tools over the last 12 years at A&bull;VIBE. The following tools are exceptionally useful in our automated testing processes:</p> <p><strong><a href="https://testcafe.devexpress.com/" target="_blank">TestCafe: Device and environment testing</a></strong></p> <p><img style="float: right; padding-left: 10px;" src="/images/imagebank/Quality%20Assurance%20Testing/testcafe1.jpg" alt="" /></p> <p>TestCafe lets you test an application or website on multiples browsers, machines and mobile devices at the same time. This tool is great for checking how an application will display to users on different mobile devices running different operating systems. TestCafe includes recording and organization features that allow testers to re-order and re-record testing steps during their testing process. TestCafe&rsquo;s features and UI are very intuitive&mdash;testers and PMs with limited web development or coding experience can easily use and understand this tool.</p> <p>&nbsp;</p> <p>&nbsp;</p> <p><strong><a href="https://www.getpostman.com/">Postman: API performance and functionality testing</a></strong></p> <p><img style="float: left; padding-right: 10px;" src="/images/imagebank/Quality%20Assurance%20Testing/Postman.jpg" alt="" /></p> <p>Postman saves quality assurance testers&rsquo; time by automating API tests and mocking HTTP requests. It allows testers to monitor the performance and functionality of APIs. With Postman, testers can send requests, save responses, add tests, and create workflows all via one easy-to-learn interface. It also logs each request for detailed debugging. Postman is a lifesaver for any team frequently setting up new API processes or adjusting legacy APIs.</p> <p>&nbsp;</p> <p>&nbsp;</p> <p><strong><a href="https://tenon.io/">Tenon.io: Accessibility compliance testing</a></strong></p> <p><img style="float: right; padding-left: 10px;" src="/images/imagebank/Quality%20Assurance%20Testing/Tenon1.jpg" alt="" /></p> <p>Tenon.io is a tool that can automatically identify <a href="https://www.hhs.gov/web/section-508/making-files-accessible/checklist/html/index.html" target="_blank">508</a> and <a href="https://www.w3.org/WAI/intro/wcag">WCAG 2.0</a> issues within websites or web applications. A tester simply enters the URL of the site she wants to test for accessibility compliance and voila. 508 and WCAG 2.0 requirements help ensure that website or app content is effectively communicated to people who are visually impaired. An example would be when a website allows users to scale up font sizes and use alt tags to hear written descriptions of images. Anyone working on government, educational and institutional websites and web applications must understand 508 and WCAG 2.0 requirements and test for it. Ideally, any website or application, regardless of industry or purpose, should comply with accessibility guidelines.</p> <p>&nbsp;</p> <p>&nbsp;</p> <p><a href="https://www.webpagetest.org/" target="_blank"><strong>WebPageTest</strong><strong>: Load speed testing</strong></a></p> <p><img style="float: left; padding-right: 10px;" src="/images/imagebank/Quality%20Assurance%20Testing/webpagetest.jpg" alt="" /></p> <p>WePageTest is another easy-to-use tool to test the speed and load time of a website. Similar to Tenon.io, the only thing a tester has to do is enter the URL of the site. Performance and speed are essential to ensure that visitors to your site don&rsquo;t experience frustrating lag or timeout issues when accessing content. Read more about website performance in our Talk Nerdy to Me Blog, &ldquo;<a href="/company/blog/websiteoptimization/">Speed Up Your Website with Optimization</a>&rdquo;.</p> <p>&nbsp;</p> <p>&nbsp;</p> <p class="blockBlue"><strong>Tip for developers:&nbsp;</strong>Take notes on how to test an update and setup test cases as you are writing code to streamline the testing process. Your QA tester and Project Manager will thank you later.</p> <h4>Why Test, Test, And Test Again?</h4> <p>Our team thoroughly tests and documents issues or bugs that arise throughout the development lifecycle using automated tools, various testing checklists, and the expertise of our quality assurance specialists. If you have a bug or an issue with your legacy <a href="/coldfusion/">ColdFusion</a> or <a href="/asp/">ASP.NET</a> web application that needs resolution you&rsquo;ve come to the right place!</p> Fri, 17 Nov 2017 00:00:00 GMT Choosing the Best Content Management System for Your Business <p><span>Selecting the right Content Management System (CMS) for your organization is crucial for taking control of your website content. A CMS allows users with no background in HTML or CSS to easily add, edit, and remove content. Modern CMSs allow users to add text, graphics, video, and audio &ndash; and some even support embedded interactive elements like maps or other simple applications.</span></p> <h3>Leverage Your CMS to Work for You</h3> <p><span>A CMS enables non-technical users to add and maintain content without the need to &lsquo;contact IT&rsquo;. Since HTML, CSS, or any programming language is not required, staff can quickly add images, text, and change settings on their own terms. The tool which gives administrators the flexibility and freedom of owning their content is a "What You See Is What You Get" (WYSIWYG) Editor. Most WYSIWYG Editors have features that are very similar to Microsoft Word like text styling, hyperlinks, and adding in-line images.&nbsp;</span></p> <p><span>Another great feature is that most CMSs are built for teams; they can be set up to restrict 'publishing rights' to managers, while giving non-managers the ability to add and edit content. By allowing multiple permission levels, multiple team members can contribute to the website content and help support the collective time spent updating and managing content. With numerous content contributors involved, we recommend that all content is reviewed prior to posting to ensure accuracy and consistency in tone.</span></p> <p><img style="vertical-align: middle; display: block; margin-left: auto; margin-right: auto;" src="/images/imagebank/Blog/CMS/wysiwyg.jpg" alt="WYSIWYG Image" /></p> <h3>Custom CMS versus Off-the-Shelf CMS</h3> <p>There are numerous types of CMSs: proprietary, custom CMSs, and many off-the-shelf solutions. Choosing the right solution for your company is integral to keeping your website fresh and costs manageable. The most popular off-the-shelf CMS by far is WordPress. According to&nbsp;<a href="https://w3techs.com/technologies/overview/content_management/all/" target="_blank">W3techs.com</a>,&nbsp;around 28% of websites use WordPress to some extent.</p> <p>One of the major selling points for WordPress is pricing; WordPress allows you to run a personal site with their built-in ads for free. WordPress is also Open Source and has hundreds of easy-to-use, community-created plug-ins that are painless additions to your site. If all you need is a simple site to display content, WordPress and other off-the-shelf CMSs (e.g. Squarespace and Wix) are great options.</p> <p>For more complex offerings, especially for businesses, an off-the-shelf solution might not be enough.&nbsp;<span>If your website needs to do any of the following, we suggest looking into custom CMS options:</span><br /><img style="float: right; padding-top: 60px;" src="/images/imagebank/Blog/CMS/umbrella.jpg" alt="umbrella image" /></p> <ul> <li>Capture and/or store information about site visitors</li> <li>Allow users to save custom settings or interact with tools and applications</li> <li>Upload your own content (text, images, downloadable files, and links) on all pages</li> <li>Advanced workflows (Marketing, E-mail List Management, Event Management/Registration, etc.)</li> <li>High performance and fast page-load times</li> <li>Customized User Interface (UI)</li> <li>Multi-website support and management</li> <li>Multilingual support</li> <li>Manage/update interactive content</li> <li>Custom integrations</li> </ul> <p><span><span>Choosing a custom built CMS can make managing complex tasks and business processes a breeze. Also, o</span>ff-the-shelf CMSs like WordPress offer lots of different templates that dictate the look and feel of your website but often aren&rsquo;t very flexible, if you want a specific style that templates do not offer, a custom built CMS is the best approach as it eliminates design restrictions.&nbsp;<span>Additionally, many off-the-shelf CMSs will charge you extra if you want to add tools like Google Analytics &ndash; which helps you monitor your site traffic and what pages are the most popular.&nbsp;<span>If you want more control of the design of your website, a custom CMS might be right for you.&nbsp;</span></span></span></p> <h3>Making the Big Decision</h3> <p>If you need help determining whether a custom or off-the-shelf CMS is best for you, ask yourself the following questions:</p> <ul> <li>What functionality will my website need? <ul> <li>Are all pages public, or do some require a login?</li> <li>Will the website need to pull in or store information within a database?</li> </ul> </li> <li>Is speed important to you? <ul> <li>Is your site already lagging? Off-the-shelf CMSs like WordPress are a one-size-fits-all package with often unused parts; this can have a meaningful impact on the site&rsquo;s performance. With a custom-built CMS, you are only getting the features you need.</li> </ul> </li> <li>Is security important to you?</li> <ul> <li>Do you have some content that you only want specific users to access, content behind a log-in screen or Pay Wall? If so, most off-the-shelf CMS&rsquo;s are quite limited in this respect. However, a custom CMS can give you full control over who can access what sections of your site and what they can do there.</li> </ul> </ul> <p class="blockBlue">For additional information to help inform your CMS decision, check out this article by <a href="https://alistapart.com/article/choosing-a-cms-your-organization-will-love" target="_blank">A List Apart</a>.</p> <h3>Cool features that we look for in Content Management Systems</h3> <p><img style="vertical-align: middle; display: block; margin-left: auto; margin-right: auto;" src="/images/imagebank/Blog/CMS/cms-ui.jpg" alt="" /></p> <p><strong>Responsive</strong></p> <p>Today there are many ways to access the Internet. Many users are accessing content from their phone or tablet rather than their desktop. A good CMS will scale content to fit best on any device without any help from the content creator. Team members should also be able to enter their text, add images, and other assets and not worry about how it will display on an iPhone versus a Desktop.</p> <p><strong>Intuitive</strong></p> <p>One of the most important parts of a CMS is that it is easy to use! It is, after all a tool to make editing content easy for non-tech-savvy users. Features like dragging and dropping images from your Desktop to your Media Section and easily searching and re-organizing your media and assets should be included in the CMS that you choose. Users should easily be able to create, rename, and re-order pages, as well as add links to those created pages. It should be simple to add external assets like YouTube videos or Facebook links. If an off-the-shelf CMS you are considering doesn&rsquo;t offer these features, we advise that you continue shopping.</p> <p><strong>Custom</strong></p> <p>Capabilities are endless with a custom CMS. An experienced development team can design and develop a system that does everything required to fulfill the business' needs. Unique work processes can be managed within a custom CMS by having unique Admins to manage the following:</p> <ul> <li>Accounting and e-Commerce transactions</li> <li>Reporting tools to run custom reports</li> <li>Email marketing template creation with ability to send through the CMS</li> <li>Event management and registration</li> <li>Project/Product management</li> </ul> <p>It is important to remember that CMSs are supposed to make your job easier &ndash; not harder. If your business needs aren&rsquo;t supported by your current CMS or you need help choosing which CMS option to go with, contact us to <a href="/projectplanner/">schedule a free consultation</a> to strategize the best solution for your business.&nbsp;<span>By working with stakeholders and the users of the website or application, we can discover, develop, and implement solutions to streamline workflow in the CMS and ensure that it is scalable for future enhancements.</span></p> Fri, 15 Sep 2017 00:00:00 GMT Publicly Private <p>Your phone is your personal assistant, entertainer, and friend. We share the best and worst moments of our lives with our closest friends via text, and we search for our every interest and curiosity on Google. Our phones are always near us but there is no justification to have every little thing we do or say recorded.</p> <p><a href="http://www.cbc.ca/news/world/wikileaks-cia-cyber-intelligence-1.4013113" target="_blank">Online privacy concerns</a>&nbsp;are nothing new to the tech world. But with frequent app updates and their coinciding updates to terms and conditions, it is a good thing to check-in on your phone apps periodically to make sure they are only accessing the phone features and information that they <em>truly</em> need to operate.</p> <p class="blockBlue">If you want to use apps but are concerned about privacy, it is important to take measures to safeguard your data.</p> <p>When you install an app, you don&rsquo;t often get the backstory on why the app wants to access seemingly unrelated features or data. Most phone apps keep quiet about what data they are collecting and what they are doing with it. App companies rely on the fact that our desire to use the app is larger than our desire for privacy. They exploit the fact that we don't take the time to set the appropriate permission settings - the vast majority of us just press, &ldquo;accept&rdquo;.</p> <p>The real money-maker for some free apps is collecting user data and then selling the information to advertisers through "<a href="https://www.thinkwithgoogle.com/programmatic-guide/" target="_blank">Programmatic Ad Buying Platforms</a>".&nbsp;For example, after you send a private email or talk about something you are interested in and then out of nowhere you see an advertisement for it on social media, "Surprise! Is this what you are looking for?" That is a direct result of someone profiting off your information.</p> <p class="blockBlue">Even Mark Zuckerberg has his camera and mic jack <a title="protect your privacy with tape" href="https://www.theguardian.com/technology/2016/jun/22/mark-zuckerberg-tape-webcam-microphone-facebook" target="_blank">covered with tape</a>.</p> <p>&nbsp;</p> <p><img src="/images/imagebank/Blog/Publicaly%20Private/FL1.jpg" alt="" width="158" height="319" /> <img src="/images/imagebank/Blog/Publicaly%20Private/FL_2.jpg" alt="" width="158" height="319" /></p> <p>We downloaded a "Flashlight" app to show just how prevalent data collecting actually is. When looking at the Permission Details (Android), you will see that the Flashlight app has access to our Camera, Location, Phone, Storage, and Full Network Access - which basically means it can go online. Why would a Flashlight app need access to any of this? You got it, to sell your information. The free app isn't free, it can be&nbsp;<a href="http://ftp.zew.de/pub/zew-docs/dp/dp16031.pdf" target="_blank">costing you your confidentiality</a>.</p> <p>Some people think that if you don't give the app the permissions it asks for, it won't work; this isn't entirely true. The best rule to follow is, "if you aren&rsquo;t going to use that app to connect to that permission feature, then turn it off".</p> <p class="blockBlue">If you like to upload pictures to Facebook, but not &ldquo;take&rdquo; pictures with Facebook, then turn the &ldquo;Camera Permission off&rdquo; and leave the &ldquo;Storage Permission on.&rdquo;</p> <p>When you change permissions/privacy settings on your phone you might get an alert: <em>Keep in mind, turning off permissions may cause apps on your device to lose functionality</em>; this typically isn&rsquo;t the case. In the event that the app does change how you want it to work, go into your settings and turn that permission back on. Once in a while, the app may remind you that you have turned functions off that it wants to access but typically no harm is done and the app functions properly.</p> <p>It is really quite easy to manage app permissions. Here is how you change permissions/privacy on devices:</p> <h4>Android Permissions <em style="font-size: 18px; color: #000000;">(Changes all permissions one app at a time)</em></h4> <p>Settings &gt; Applications &gt; Application Manager &gt; Select Application &gt; Select Permissions &gt; On/Off</p> <p><img src="/images/imagebank/Blog/Publicaly%20Private/A_1.jpg" alt="" width="158" height="319" /> <img src="/images/imagebank/Blog/Publicaly%20Private/A_2.jpg" alt="" width="158" height="319" /> <img src="/images/imagebank/Blog/Publicaly%20Private/A_3.jpg" alt="" width="158" height="319" /> <img src="/images/imagebank/Blog/Publicaly%20Private/A_4.jpg" alt="" width="158" height="319" /> <img src="/images/imagebank/Blog/Publicaly%20Private/A_5.jpg" alt="" width="158" height="319" /> <img src="/images/imagebank/Blog/Publicaly%20Private/A_6.jpg" alt="" width="158" height="319" /></p> <h4>iPhone Privacy <em style="font-size: 18px; color: #000000;">(Changes all apps one permission at a time)</em></h4> <p>Settings &gt; Privacy &gt; Select Permissions Section &gt; On/Off</p> <p><img src="/images/imagebank/Blog/Publicaly%20Private/i_1.jpg" alt="" width="158" height="319" /> <img src="/images/imagebank/Blog/Publicaly%20Private/i_2.jpg" alt="" width="158" height="319" /> <img src="/images/imagebank/Blog/Publicaly%20Private/i_3.jpg" alt="" width="158" height="319" /> <img src="/images/imagebank/Blog/Publicaly%20Private/i_4.jpg" alt="" width="158" height="319" /></p> <p>All of our data being collected is called &ldquo;Big Data&rdquo;. &ldquo;Big Data&rdquo; may seem simple and fairly innocent right now, but what are they doing with <a href="http://insidebigdata.com/2016/12/21/big-data-industry-predictions-2017/" target="_blank">all this information?</a> How could it be used for or against us in the future? Time will tell, but until then we recommend you continue to pay attention to what permissions your favorite apps have.</p> <p class="toolTip">It&rsquo;s OK to control your privacy settings, we give you permission.</p> Mon, 10 Jul 2017 00:00:00 GMT 12 Year Anniversary <h3>Thank you to our wonderful clients that we have worked with over the last 12 years! We wouldn't be where we are without all of you!</h3> Wed, 14 Jun 2017 00:00:00 GMT Requirements Gathering: Doing Our Homework to Achieve Your Business Goals <p>Requirements gathering is exactly what it sounds like &mdash; although it is not as easy as it sounds. The first step in every successful web development project is thorough requirements gathering, where goals and objectives are fleshed out to determine the needs of a website or web application.</p> <p class="blockBlue">"If you can&rsquo;t describe what you are doing as a process, you don&rsquo;t know what you&rsquo;re doing.&rdquo; &ndash; W. Edwards Deming</p> <p><img src="/images/imagebank/Blog/Requirements%20Gathering/dilbert1-1.jpg" alt="" width="292" height="256" /> <img src="/images/imagebank/Blog/Requirements%20Gathering/dilbert1-2.jpg" alt="" width="292" height="256" /> <img src="/images/imagebank/Blog/Requirements%20Gathering/dilbert1-3.jpg" alt="" width="292" height="256" /></p> <h4>Creating the Foundation for Effective Requirements Gathering</h4> <p>Clients come to us with business needs that aren&rsquo;t being satisfied by their current technology, and by asking the right questions we uncover the underlying factors driving their request. As every business and project is different, we start the requirements gathering process by working to understand the client&rsquo;s business and business environment. Next, we dig into the background and impetus for the project itself. By taking the time to holistically understand the issue, we are able to refine the business needs, suggest improvements, and provide alternative solutions.</p> <p>We begin to flesh out the project details by asking these broad questions:</p> <ul> <li>What is the overall goal of the project?</li> <li>Why do you need it built?</li> <li>Who will be using the system and when?</li> <li>How will it be built?</li> </ul> <p>The answers and discussions that stem from these simple questions bring to light the project goals, key restraints, and unique circumstances of the project that we consider throughout the requirements gathering process. By starting with a solid understanding of the project&rsquo;s foundation and then drilling down to a granular level we ensure that the proposed solutions deftly address all of a client&rsquo;s business needs.</p> <h4>Requirements Gathering Tools and Processes<img style="float: right; padding-top: 100px; padding-left: 10px;" src="/images/imagebank/Blog/Requirements%20Gathering/collaboration.png" alt="" />&nbsp;</h4> <p>Using our wealth of industry knowledge and variety of tools we work with stakeholders, users, and customers to gather all of a project&rsquo;s necessary requirements. Depending on the type of project, we will determine what tools or processes (e.g. questionnaires, surveys, and workflow shadowing) are best suited to identify the project requirements.&nbsp;</p> <p>For example, workflow shadowing is essential when stakeholders come to us with a system that isn&rsquo;t fully supporting their operations. Our team observes employees in unique roles perform their daily tasks to understand how the existing system is being utilized and to identify pain points and user frustration. These insights allow us to formulate better solutions for a new or updated system. All of our requirements gathering techniques allow our team to identify your goals and in turn inform a successful project strategy.</p> <p>&nbsp;</p> <div> <h4>Considering All the Factors</h4> <p>There are a lot of factors that help inform the final product and its functionality. &nbsp;Considering as many relevant factors as possible is important to a successful requirements gathering process. Here are some factors that we take into consideration when defining project requirements:</p> <ul> <li>Are all business needs met?</li> <li>What assumptions are we making?</li> <li>Have we properly defined the project scope? (&lsquo;In Scope&rsquo;, &lsquo;Optional&rsquo;, and most importantly &lsquo;Out of Scope&rsquo;)</li> <li>How will this affect: customers, staff, and stakeholders?</li> <li>What items require further research?</li> <li>What potential issues could affect the product/timeline/budget?</li> <li>What third party tools are involved? Are they up-to-date? What happens when they update?</li> <li>Do we need to migrate data? How will we? How much data?</li> <li>How are we ensuring security (e.g. protecting data)?</li> <li>What are our dependencies?</li> <li>Are we leveraging existing functionality?</li> <li>What options have we not considered?</li> <li>Is what we are proposing better than the current system/workaround (i.e. is the project justified)?</li> <li>What will be the on-going maintenance associated with our updates?</li> </ul> </div> <h4>Flexible with Agile</h4> <p>We understand that having all of the answers upfront is impossible; even with robust requirements gathering there still can be unknowns, or conflicting ideas. We manage these inevitable changes with <a href="https://en.wikipedia.org/wiki/Agile_software_development" target="_blank">Agile</a> project management which gives us the flexibility to handle shifting priorities. Requirements gathering is a group effort and the Agile approach encourages stakeholder collaboration and allows us to keep our clients engaged by actively adjusting and tuning requirements throughout the life of the project.</p> <p><img src="/images/imagebank/Blog/Requirements%20Gathering/dilbert2-1.jpg" alt="" width="301" height="264" /> <img src="/images/imagebank/Blog/Requirements%20Gathering/dilbert2-2.jpg" alt="" width="301" height="264" /> <img src="/images/imagebank/Blog/Requirements%20Gathering/dilbert2-3.jpg" alt="" width="301" height="264" />&nbsp;</p> <p>We recognize the value of requirements gathering, so all of our work plans and proposals set aside ample time to do our homework. Our commitment to not cutting corners on requirements gathering is proven to deliver smart solutions, successful launches, and happy clients.</p> <p class="blockBlue">If you are interested in building a new web application or need help determining your project&rsquo;s requirements, <a href="/consultation/" target="_blank">contact us</a> to schedule a free consultation with our team.</p> <p>&nbsp;</p> Mon, 10 Apr 2017 00:00:00 GMT Top Ten Logo Changes from 2016 <p>Ten highly recognized companies updated or compeletely redesigned their logos in 2016. We continue to see a trend with logo modernization becoming more minimalistic and favoring a flat design. Below are before and after images of logos from some of the most recognizable companies; what do you think about the updated logos? Do you think the minimilistic and flat design trend will continue into 2017?</p> <p>&nbsp;</p> <h4>#10. Uber</h4> <p><img src="/images/imagebank/Blog/2016%20Logo/uber5.jpg" alt="" width="100%" /></p> <p>Uber has become a very well known brand across the country for quick and easy travel. They spent 2016 internally updating their logo to have a heavier font weight with less space (kerning) between each letter. Although the change is subtle, their design team went through a thorough process updating not only the logo but their app icon as well. You can read more about the design evolution and process <a href="http://www.underconsideration.com/brandnew/archives/new_logo_and_identity_for_uber_done_in_house.php#.WIpWf_krKUk" target="_blank">here</a>.</p> <h4>&nbsp;</h4> <h4>#9. Peace Corps</h4> <p><img src="/images/imagebank/Blog/2016%20Logo/peace-corps.jpg" alt="" width="100%" /></p> <p>Peace Corps has been around since 1961 and desperately needed to modernize their logo. They successfully updated their logo to incorporate a fresh design and font. They amplified their color palette by using more saturated blues and reds that lean closer to purple which gives the logo a brighter look. Peace Corps kept their flat design and minimized the amount of texture, ultimately leaving the "seal" look behind.&nbsp;<span>What you do you think about the new logo? The bird actually looks like a dove now!</span></p> <h4>&nbsp;</h4> <h4>#8. US Soccer</h4> <p><img src="/images/imagebank/Blog/2016%20Logo/us-soccer.jpg" alt="" width="100%" /></p> <p>U.S. Soccer enlisted Nike to redesign their logo which hadn't been updated in 20 years! The new look remains flat and its simplistic look will continue to be relevant as long as the flat design trend sticks around. Announcing a new logo to your customers can be tricky to get them onboard, many people just don't like change. U.S. Soccer took a unique approach by posting a <a href="https://www.youtube.com/watch?v=Hrhu2DKcm6c" target="_blank">video</a> announcing their logo change.</p> <h4>&nbsp;</h4> <h4>#7. Instagram</h4> <p><img src="/images/imagebank/Blog/2016%20Logo/instagram.jpg" alt="" width="100%" /></p> <p>Instagram has become wildly popular with younger and older generations alike. Last year they went through a major logo rebranding by flattening their camera logo and filling it with colorful gradients, similar to a tie-dye effect. We're not sure that either logo is remarkably impressive but the new logo definitely stands out, especially on a phone screen.&nbsp;</p> <h4>&nbsp;</h4> <h4>#6. Netflix</h4> <p><img src="/images/imagebank/Blog/2016%20Logo/netflix.jpg" alt="" width="100%" /></p> <p>Netflix updated their logo by removing the thick black stroke around the font and nixed the dropshadow. If you look closely, you can see that they chose a similar font with heavier weight and width. They also decided to change the font color to red. What do you think about their new flattened logo?</p> <h4>&nbsp;</h4> <h4>#5. Pandora</h4> <p><img src="/images/imagebank/Blog/2016%20Logo/pandora.jpg" alt="" width="100%" /></p> <p>Pandora also joined the logo redesign bandwagon last year by refreshing their <a href="http://www.underconsideration.com/brandnew/archives/new_logo_and_identity_for_pandora.php#.WIuo_PkrKUk" target="_blank">logo</a>.&nbsp;They changed the font from all caps to all lowercase letters and they also chose a lighter shade of blue. Just like Instagram, they filled the trademark with a fun blue gradient, is this the beginning of the new "unflat" design? One addition that stood out is they made their registered trademark symbol much larger; a little too large...</p> <h4>&nbsp;</h4> <h4>#4. Bud Light</h4> <p><img src="/images/imagebank/Blog/2016%20Logo/bud-light.jpg" alt="" width="100%" /></p> <p>Bud Light went through a complete branding overhaul for the first time in eight years. They stuck with their familiar blue theme, chose a heavier straight-forward font, and added a seal that includes five of the seven continents - it looks like South America and Antarctica didn't make the cut. Bud Light's branding updates follow the flat design trend but strayed away from their old logo's minimalistic design approach by adding much more texture all over the can; exactly the opposite of what U.S. Soccer did with their new logo. Interesting.</p> <h4>&nbsp;</h4> <h4>#3. Vevo</h4> <p><img src="/images/imagebank/Blog/2016%20Logo/vevo.jpg" alt="" width="100%" /></p> <p>Vevo has become a very popular site for music videos, you've likely came across their videos when browsing YouTube. Last year they updated their already minimal and flat <a href="http://www.underconsideration.com/brandnew/archives/new_logo_and_identity_for_vevo_by_violet_office.php#.WIuuTPkrKUk" target="_blank">logo</a> by removing the italics, changing the font to use very geometric shapes, changed the color from pink to white, and stuck it on a black background. The white on black contrast really makes the logo stand out don't you think?</p> <h4>&nbsp;</h4> <h4>#2. Kodak</h4> <p><img src="/images/imagebank/Blog/2016%20Logo/kodak.jpg" alt="" width="100%" /></p> <p>Kodak's 2016 logo revamp is actually a blast from the past! They went back into their branding archives and updated their logo from 1971; you can see the history of their logo <a href="http://www.underconsideration.com/brandnew/archives/new_logo_and_identity_for_kodad_by_work_order.php#.WIuwafkrKUl" target="_blank">here</a>. Kodak has never strayed from their yellow and red palette, nor have they ever gotten away from a flat design. The new logo is almost an exact replica of their 1971 logo, the only change is the "Kodak" text is now stacked vertically.</p> <h4>&nbsp;</h4> <h4>#1. AT&amp;T</h4> <p><img src="/images/imagebank/Blog/2016%20Logo/atandt.jpg" alt="" width="100%" /></p> <p>AT&amp;T was established in 1983 and has held on tight to their highly recognizable <a href="http://www.underconsideration.com/brandnew/archives/new_logo_and_identity_for_att_by_interbrand.php#.WJTGgvkrKUk" target="_blank">blue globe</a> logo through multiple logo modernizations. The most recent redesign in 2016 is the most dramatic off all, they dropped "AT&amp;T" all together and are letting the blue globe stand alone. Do you think that you would recognize that logo as being associated with AT&amp;T without the company name listed? Probably.</p> <p class="blockBlue">Is your company in need of a brand refresh? <a href="/consultation/" target="_blank">Contact A&bull;VIBE</a>&nbsp;to schedule a consultation with our designers and web strategists.</p> <p>&nbsp;</p> <p>&nbsp;</p> Wed, 08 Feb 2017 00:00:00 GMT What is a Progressive Web Application? <p>A Progressive Web Application (PWA) uses new technologies to provide a mix of the best features of web sites and native mobile apps. For a long time, mobile apps have had several features that made them more convenient than web sites in certain ways. However, tasks like launching from the homescreen, push notifications, and offline functionality are now possible for web applications with the latest technology enhancements.</p> <p>A web application must meet a few criteria to be considered a PWA:</p> <ul> <li>For security purposes, a PWA must be served and encrypted over <a title="HTTP Wikipedia" href="https://en.wikipedia.org/wiki/HTTPS" target="_blank">HTTPS</a></li> <li>A PWA must be able to load some content while offline <em>(For example this could be as simple as showing a custom page that indicates that you are currently offline)</em></li> <li>PWA must reference a <a title="Web App Manifest" href="/company/blog/progressivewebapplications/#Web-App-Manifest">Web App Manifest</a></li> </ul> <p><span style="color: #c56a44; font-size: 1.875rem;">Examples of Progressive Web Applications</span></p> <p>Here are a few Google case studies of successful PWAs:</p> <p><a class="noHoverEffect" href="https://developers.google.com/web/showcase/2016/iowa2016" target="_blank"><img style="padding: 15px;" src="/images/imagebank/Blog/Progressive%20Web%20Apps/google.jpg" alt="Google PWA" width="293" height="520" /></a> <a class="noHoverEffect" href="https://developers.google.com/web/showcase/2016/weather-channel" target="_blank"><img style="padding: 15px;" src="/images/imagebank/Blog/Progressive%20Web%20Apps/weather_channel.jpg" alt="Weather Channel" width="302" height="535" /></a></p> <p>Want to see more? <a href="https://pwa.rocks/" target="_blank">Here are some examples of popular PWAs</a>.</p> <h4><a name="Web-App-Manifest"></a>Features of a Progressive Web Application</h4> <h5><span>Web App Manifest</span></h5> <p>A Web App Manifest is a JSON file that contains details about the web application. There are many things that a manifest file can contain, but at the very least it should have the following properties:</p> <ul> <li>Name</li> <li>Short name</li> <li>Start URL</li> <li>Display</li> <li>At least one icon, specified as a URL</li> </ul> <h5>Application Shell<img style="float: right; padding: 10px;" src="/images/imagebank/Blog/Progressive%20Web%20Apps/code.jpg" alt="" width="400" height="270" /></h5> <p>Another concept useful in implementing a PWA is the Application Shell. An App<span>lication</span> Shell is the minimum HTML, CSS, and JavaScript required to power a basic user interface. The App<span>lication</span> Shell can be loaded quickly and then later can be dynamically filled in with content. This helps with perceived performance, since it allows users to quickly see some progress when loading a web application. While it's not necessary to utilize an App<span>lication</span> Shell to build a PWA, it does enable PWAs to provide a fast &ldquo;app-like&rdquo; experience.</p> <h5><span>Service Worker</span></h5> <p>The most essential (and most complex) part of implementing a PWA is the Service Worker API. You can think of a Service Worker as a program that runs in the background, independent of any particular web page. Service Workers are&nbsp;<span>event driven, so they can respond to different scenarios.&nbsp;</span>For example, a Service Worker can communicate with a registered page through HTTPS to:</p> <ul> <li>Indirectly manipulate the <a title="HTML DOM W3Schools" href="http://www.w3schools.com/js/js_htmldom.asp" target="_blank">DOM</a> of a page<span>&mdash;triggering JavaScript on the page to update the content, structure, and styling.</span><span><br /></span></li> <li>Cache assets and&nbsp;<span>and intercept requests&mdash;allowing the page&nbsp;<span>to display cached or offline content</span>.</span></li> <li><span>Access the&nbsp;<span>Notifications API&mdash;enabling <span>the web app</span>&nbsp;to trigger and display push notifications.</span></span></li> <li><span><span><span>Access the IndexedDB API<span>&mdash;</span><span>allowing</span>&nbsp;<span>the web app</span>&nbsp;to store complex data locally, even while offline.</span></span></span></li> </ul> <p class="blockBlue"><strong>Tip:&nbsp;</strong>One major caveat is that not all of these features are fully supported in all major browsers yet, and it may be some time before they are.</p> <p>If a browser does recognize a web application as a PWA, it may prompt users on mobile devices to add the PWA to their homescreen. This prompt comes in the form of an app install banner, and it isn't something a PWA deliberately requests. The browser decides if and when to send these prompts. However, a PWA can defer or even cancel them, if it is preferable that a user not receive this kind of prompt. Adding a web application to a homescreen is not a new concept, but this app install banner makes it a lot more convenient for users.</p> <p>Another interesting feature enabled by Service Workers is the Push API. This allows a PWA to send a push notification to a user, whether or not they have the web application open. These notifications are opt-in, and should behave like push notifications from native apps.</p> <p>The most interesting thing that a PWA is capable of is offline functionality. A Service Worker can cache assets on the initial load of a page that it controls. Once that initial load has taken place, it can intercept subsequent calls to that page and decide from there how to handle it; this allows for a few different possibilities.</p> <ul> <li>If it detects no connection, it can load a custom Offline page. Or, it could load the cached content and then update the page once the request comes through.</li> <li>It could also load an Offline indicator alongside the cached content. If the page in question had a form, it could even save user input into local storage. The input data could then later be synchronized with data on the PWA server once the mobile device obtains a stable internet connection.</li> </ul> <h4>Benefits of Utilizing Progressive Web Applications</h4> <p>The top benefits of using PWA&rsquo;s are:<img style="float: right;" src="/images/imagebank/Blog/Progressive%20Web%20Apps/ocean_phone4.jpg" alt="" width="400" height="270" /></p> <ul> <li>Providing increased accessibility and convenience for users.</li> <li>Allowing for offline functionality that enables users to interact with a web application even if there is poor, or no internet connection.</li> <li>Enabling push notifications which increase user engagement with the web application.</li> </ul> <p>If you are interested in enhancing user experience and utilizing offline accessibility for your web application we are happy to <a href="/consultation/" target="_blank">schedule a consultation</a> with you to see how PWA features can benefit your business.</p> <p>&nbsp;</p> <p><em>References:</em></p> <ul> <li><em><a href="https://developers.google.com/web/progressive-web-apps/" target="_blank">https://developers.google.com/web/progressive-web-apps/</a></em></li> <li><em><a href="https://www.smashingmagazine.com/2016/09/the-building-blocks-of-progressive-web-apps/" target="_blank">https://www.smashingmagazine.com/2016/09/the-building-blocks-of-progressive-web-apps/</a></em></li> <li><em><a href="https://www.smashingmagazine.com/2016/08/a-beginners-guide-to-progressive-web-apps/" target="_blank">https://www.smashingmagazine.com/2016/08/a-beginners-guide-to-progressive-web-apps/</a></em></li> <li><em><a href="https://www.smashingmagazine.com/2016/02/making-a-service-worker/" target="_blank">https://www.smashingmagazine.com/2016/02/making-a-service-worker/</a></em></li> <li><em><a href="https://jakearchibald.github.io/isserviceworkerready/" target="_blank">https://jakearchibald.github.io/isserviceworkerready/</a></em></li> <li><em><a href="https://github.com/pazguille/offline-first" target="_blank">https://github.com/pazguille/offline-first</a></em></li> <li><em><a href="https://github.com/slightlyoff/ServiceWorker/blob/master/explainer.md" target="_blank">https://github.com/slightlyoff/ServiceWorker/blob/master/explainer.md</a></em></li> <li><em><a href="http://blog.ionic.io/what-is-a-progressive-web-app/" target="_blank">http://blog.ionic.io/what-is-a-progressive-web-app/</a></em></li> <li><em><a href="https://remysharp.com/2016/03/18/progressive-web-apps-the-long-game" target="_blank">https://remysharp.com/2016/03/18/progressive-web-apps-the-long-game</a></em></li> <li><em><a href="https://infrequently.org/2016/09/what-exactly-makes-something-a-progressive-web-app/" target="_blank">https://infrequently.org/2016/09/what-exactly-makes-something-a-progressive-web-app/</a></em></li> <li><em><a href="https://github.com/GoogleChrome/lighthouse/" target="_blank">https://github.com/GoogleChrome/lighthouse/</a></em></li> </ul> Thu, 26 Jan 2017 00:00:00 GMT A•VIBE’s 10 Principles for Successful and Effective Web Development <p>The world of technology evolves at a rapid pace. Here at A&bull;VIBE, we adhere to 10 principals to consistently ensure the success of our projects.</p> <h4>1. Know Your Audience</h4> <p><strong>Create User Journeys to cater to your audience</strong></p> <p>The first, and most important aspect of web development is knowing who will be using your site or application. Utilizing user surveys to determine what content your users want and how they want to access it is priceless when crafting a digital experience. A survey can inform design and usability decisions that make for a exceptional user experience. The data collected from surveys allows designers and developers to lead users on a journey through the site, making it easy to access desired information from intuitive areas of the site. That saying, &ldquo;The customer is always right&rdquo; still holds true in ecommerce and is crucial to successful web development. Before redesigning your website, consider your audience and what kind of interaction and experience you want them to have with your website.</p> <h4><img style="float: right; padding-top: 70px; padding-left: 20px; padding-bottom: 30px;" src="/images/imagebank/10KeyPrinciples/storyboard.jpg" alt="storyboard" />2. Mobile Friendly Display and Interaction</h4> <p><strong>Can you touch it?</strong></p> <p>It&rsquo;s no secret that mobile devices are typically no more than 5 feet away from us at any given time. Children and seniors alike spend lots of time on their mobile devices to read an article or play the latest game. It is important that your website or application is designed and developed to be accessed on a variety of different devices and screen sizes. Having a responsive, or mobile friendly site, not only allows for greater web exposure, but responsive sites inherently give your site a boost on Google&rsquo;s search rankings. A&bull;VIBE designs and develops all projects to be responsive; if your site isn&rsquo;t mobile friendly <a href="/consultation/" target="_blank">contact us to schedule a consultation</a>&nbsp;to discuss a redesign or a responsive retro-fit.<br />&nbsp;</p> <h4>3. Optimize for Performance</h4> <p><strong>Minifying scripts and optimizing images for faster load time</strong></p> <p>A <a href="https://www.thinkwithgoogle.com/articles/mobile-page-speed-load-time.html" target="_blank">study</a> from Google says that 40% of consumers will leave a site if it takes more than three seconds to load. If your site isn&rsquo;t optimized to load quickly it deters your users from going to your site and can greatly reduce your conversion rate. Our <a href="/company/blog/websiteoptimization/%20" target="_blank">Website Optimization</a> blog talks about how you can test your website&rsquo;s performance and recommends enhancements to ensure that your site is optimized for the best user experience. Small optimizations like minifying scripts and image optimization can go a long way in increasing your website&rsquo;s load time.</p> <h4>4. Trusted Design</h4> <p><strong>Would you buy from your company?</strong></p> <p>What factors do you consider when choosing to purchase something? For many, "trust" is a huge factor when determining who and where they will spend their money. Having a solid website builds trust with users, it acts as a virtual storefront of your business; people judge businesses by the way their site looks, so it is important that your site looks modern to promote this trust. The customer experience comes into play here, knowing your audience and being able to &ldquo;speak&rdquo; to them on the web as you would in real life <span>&ndash;&nbsp;</span>capturing the same tone and experience. Wherever possible it is best practice to use custom photography over stock photography to relay your company culture to prospective or current customers. Warm, custom imagery allows users to connect with your company when it isn&rsquo;t possible to connect in person.</p> <h4>5. Organic Search Engine Optimization<img style="float: right; padding-top: 90px; padding-left: 20px; padding-bottom: 10px;" src="/images/imagebank/Blog/10KeyPrinciples/marble.jpg" alt="marble" /></h4> <p><strong>Are they finding you?</strong></p> <p>Content writing is often looked at as cumbersome, when in fact it is the driving force behind a greater presence on the web. Google looks at URLs, headers, meta tags, and keywords to determine what your site is about. If your site isn&rsquo;t communicating who, what, and where clearly then Google won&rsquo;t find you and neither will prospective customers. When writing content, it is important to think about keywords that will be commonly searched for by your audience. Organic search engine optimization requires great content and meta tags which naturally integrate keywords. Wherever possible it is great to identify any niche terms that you can disperse throughout the content to help you stand out against the competition.</p> <h4>6. Images vs. Text vs. Animation</h4> <p><strong>How do you engage your audience?</strong></p> <p>Some people are visual and some prefer content and data; the tough part is finding the right balance to make the content enticing to different types of users, with different types of preferences for content delivery. Younger generations tend to be drawn by animation and imagery and often prefer to scan text; while older generations may prefer to read content in a longer format without scanning. Regardless, every person enjoys and appreciates little delights that validate the user experience; this could be subtle hover states that transition as you hover over a submit button or parallax scrolling where users rely less on clicking and navigation to move through the site. By e<span>ngaging your audience with <span>custom photography and subtle animation</span>&nbsp;they remember your business and you entice them to learn more about your products and services.</span></p> <h4>7. Helpful Iconography</h4> <p><strong>Make it easy for users to find desired content</strong></p> <p>Using iconography, which are descriptive images to support a website&rsquo;s taxonomy is a quick and efficient way for users to access information by topic or content type. When iconography is done right it is intuitive, saves time, and can prevent user frustration. Iconography is best used with text-based content and should represent the content by representing functionality or information to users. The use of iconography is a helpful aid for people who often scan text, it offers a visual cue describing the content topic, or content type with an added interest by utilizing design.<em>&nbsp;</em><a href="http://www.sciencefriday.com" target="_blank">ScienceFriday</a> does a great job using iconography to distinguish different content types.</p> <p><img style="display: block; margin-left: auto; margin-right: auto;" src="/images/imagebank/Blog/10KeyPrinciples/icons2.jpg" alt="" width="100%" /></p> <h4>8. Tell the Story<img style="float: right; padding-top: 70px; padding-left: 20px; padding-bottom: 10px;" src="/images/imagebank/Blog/10KeyPrinciples/campfire_story.jpg" alt="campfire story" /></h4> <p><strong>Utilize video, text and imagery to spread your message</strong></p> <p>Everyone likes a good story, people remember stories. A great way to spread your company message is by telling a story on your site. Storytelling is most effective when it integrates different forms of content to lead users on a journey through your site. A video is the warmest and quickest channel of content delivery, it can tell a story within seconds. Video paired with supporting verbiage and graphics will further support your story and engage your users. Using video, imagery, and text to create an interactive journey helps people get a greater understanding of your mission and brand and connects you with your customers.</p> <h4>9. Reality is Good and Bad</h4> <p><strong>Catering user experiences for all human emotions</strong></p> <p>Have you noticed that Facebook now allows users to &ldquo;love&rdquo;, &ldquo;laugh&rdquo;, or &ldquo;cry&rdquo; on your friend&rsquo;s posts when before the only option was to &ldquo;like&rdquo; a photo? They learned that not every experience is lined in silver. It is important that your website or application caters to a variety of human emotions wherever possible. The big idea is that all user interface design should support the emotion that the user should have when exploring that content. This can be as simple as the background image changing to fit that particular user&rsquo;s mood or preferences, it can also be a completely different user interface depending on the user&rsquo;s chosen account settings. Know your audience and evoke the right emotion for your users.</p> <h4>10. Off-The-Shelf vs. Custom Development</h4> <p><strong>What are your needs?</strong></p> <p>Often, clients will come to us saying that they were told by other firms that their vision wasn&rsquo;t possible when that isn&rsquo;t the case. Many firms try to make off-the-shelf solutions work for their clients when in reality a custom website or application is the right choice. In many cases, off-the-shelf solutions are cost saving initially but can quickly accumulate large maintenance expenses because the solution is not flexible enough to adapt and scale with the business. If you are wondering whether a custom or off-the-shelf solution is best for your project&nbsp;<a href="/consultation/" target="_blank">Contact Us</a>, we can help you determine what the best option is for your unique business needs.</p> <p>If you are considering a website redesign or need a new website, make sure that the web firm you select adheres to best practices to ensure a successful and enjoyable process.</p> Fri, 09 Dec 2016 00:00:00 GMT Maximizing WUSATA's Impact Through Tailor-Made Technology <h4>The Need</h4> <p>The Western United States Agricultural Trade Association, or WUSATA for short, helps small businesses in the Western United States export food and agriculture products. WUSATA has 36 years of export expertise and is one of four State Regional Trade Groups that promote U.S. food and agricultural exports.</p> <p>WUSATA recognized that modern technology was key to expanding their reach and knew that they had outgrown their many off-the-shelf applications.</p> <div class="blockBlue"> <div style="font-size: 2rem; padding-left: 50px; padding-right: 50px;">Through a collaborative effort, we helped the non-profit design and integrate a tailor-made business application to manage their business operations, engage their Members, and empower western companies to participate in their programs.</div> </div> <h4>The Back Story</h4> <p>The WUSATA team was up front about the limitations and frustrations of their existing technology. The majority of the problems stemmed from their accounting, event, program, and customer data being stored across multiple platforms and spreadsheets. Anytime one of these database tools required an &lsquo;upgrade&rsquo; it would break the custom links and reports WUSATA had paid to develop. The unnecessary changes required constant maintenance on top of ongoing licensing fees. Not to mention, the scattered data made reporting difficult and time-consuming.</p> <p>WUSATA&rsquo;s leadership was determined to find a better technology solution &ndash; a custom one. A solution that would eliminate the fatigue caused by their legacy applications allowing the organization to focus on their mission to deliver programs and services that equip western U.S. agribusinesses to learn, connect, and compete.</p> <p><img style="display: block; margin-left: auto; margin-right: auto;" src="/images/imagebank/Blog/WUSATA_case_study/siteComparison.jpg" alt="" width="100%" /></p> <h4>Doing Our Homework</h4> <p>In order to align with WUSATA&rsquo;s goals while eliminating their current technology woes we had to understand the business comprehensively. Working closely with their team we:</p> <ul> <li>Learned about their services, brand identity, and organizational history</li> <li>Performed an extensive UX, code, and architecture review</li> <li>Performed a business system review &ndash; evaluating the existing websites, tools, spreadsheets, and applications</li> <li>Shadowed employees as they performed their daily activities</li> <li>Interviewed stakeholders and compiled their feedback</li> </ul> <p>Through our comprehensive research, we established how to store all of WUSATA data in one system, architected in a way to facilitate collaboration and reporting. We defined a new information architecture and determined how the site would adapt to appeal to three distinct users groups. And we mapped and cataloged all existing data to facilitate data migration &ndash; an essential step for reporting and onboarding existing customers to the new application.</p> <h4>Adapting Form to Maximize Function</h4> <p>One of the central challenges was designing an application with functional and meaningful channels for three distinct users groups. Only focusing on WUSATA&rsquo;s day-to-day operations, Member&rsquo;s access to resources, or the education and conversion of Western Companies was not an option. We brought the unique needs of each user group into focus by crafting illustrative user personas and user journeys. With the personas, we were able to identify and eliminate steps to conversion for Western companies, reduce manual activities for the WUSATA team, and added sought after reports and committee management to the Member portal.</p> <p>We accomplished this by adapting the site&rsquo;s content and framework dependent on user type. The dynamic application presents each user with exactly what they need, limiting unnecessary clicks and information. With clear paths to conversion we limited confusion and the amount of time staff had to spend on customer support.</p> <div class="blockBlue"> <div style="font-size: 2rem; padding-left: 50px; padding-right: 50px;"><img style="float: right; padding: 0px 55px 0px 55px;" src="/images/imagebank/Blog/WUSATA_case_study/security.png" alt="" width="130" /> The adaptive site also allows WUSATA to control what users and admins could and could not see, protecting sensitive information.</div> </div> <p><img style="float: right; padding: 0px 0px 0px 30px;" src="/images/imagebank/Blog/WUSATA_case_study/globalStyles.png" alt="" width="50%" /></p> <h4>Building Trust through Design</h4> <p>Trust is a core tenant of any business partnership. WUSATA recognized that their design needed to showcase their offerings organically to attract customers. Using beautiful food images and bold color treatments we created a design language that focused on western agriculture. Through an incremental approach and a variety of homepage iterations, we established a site that was both inviting and easy-to-use.</p> <p>By creating a logical information architecture and providing intuitive tools; the site naturally guides U.S. Suppliers to discover the resources and programs that matter the most to them. And empowers suppliers to register for Global Connect events, apply for FundMatch, and find Export Education resources.</p> <h4>Access on Any Device for Anyone</h4> <p>Understanding that WUSATA&rsquo;s diverse audience rarely was in the &lsquo;office&rsquo;, we knew the application needed to be accessible on the move. Through the calculated use of a responsive grid, we crafted the application to be fully functional across a wide range of devices &ndash; whether you&rsquo;re on a smartphone or a 27&rdquo; monitor. We carefully controlled degradation and focused on a less-is-more mentally to ensure a consistent user experience.</p> <p>Section 508 compliance was important to WUSATA and we were happy to bring our experience with ADA standards to the design and coding of the new application. With careful review of the law, strict coding standards, and the aid of compliance tools we made sure that our final product is accessible and convenient to people of all abilities.</p> <p><img style="display: block; margin-left: auto; margin-right: auto;" src="/images/imagebank/Blog/WUSATA_case_study/4.png" alt="" width="100%" /></p> <h4><span style="color: #c56a44; font-size: 1.875rem;">More Data, </span><span style="text-decoration: line-through;">More</span><span style="color: #c56a44; font-size: 1.875rem;"> Less Problems</span></h4> <p>The project, like many, ultimately hinged on data &ndash; and building a sustainable data solution into the backbone of the application was at the forefront of our minds throughout the multi-year engagement.</p> <p>We worked with WUSATA to identify and unravel the data in their many systems: three Access databases, one iMIS database, Sage, and a handful of Excel spreadsheets. We took our understanding of WUSATA&rsquo;s business goals and went about architecting an ideal structure to house all of their historical data. Early in the effort, we identified that migrating <em>all</em> the historical data would neither be cost effective or beneficial to the business. Working in concert with the WUSATA team we were able to identify essential and superfluous data, allowing us to design a flexible and useful database.</p> <p>After meticulous research, a healthy pivot, and extensive data mapping we successfully migrated WUSATA&rsquo;s heavily archived databases into an optimized database structure. By centralizing data and eliminating redundancy we transformed the inaccessible historical data into valuable and secure information for daily use. By maintaining relevant customer data, we significantly aided in the successful adoption of the new system by existing Members and U.S. Suppliers.</p> <h4>Back (Office) to the Future</h4> <p>When it came to getting the most out of WUSATA&rsquo;s data, proper configuration was just the first step. The team was spending too much time gathering and reconciling data to perform day-to-day activities. Finding data and keeping data in-sync across multiple databases with different logins, fields, and rules was labor intensive and error-prone. With efficiency and accuracy in mind, we created business process specific admins out of each team&rsquo;s day-to-day tasks. Admins which handled:</p> <p><img style="float: right; padding-left: 20px;" src="/images/imagebank/Blog/WUSATA_case_study/dashboard.png" alt="" width="320" /></p> <ul> <li>User management with flexible permissions</li> <li>Content creation and management</li> <li>Customer relationships</li> <li>Accounting &ndash; invoicing, allocations, and claims</li> <li>Program participation and reimbursement</li> <li>Survey management</li> <li>Event management</li> <li>Reporting</li> </ul> <p>With the diversity of admins we knew we had to create a uniform feel. We designed the admins to take advantage of affordances and standardized styles to create sense of familiarity across the Back Office. By shifting the focus from database management to task completion while maintaining a consistent look-and-feel we were able to significantly reduce the amount of time staff spent keeping spreadsheets and each other up-to-date.</p> <p>From the get-go we knew automated reporting was integral to the success of the new Back Office. Together with WUSATA, we focused on building a reporting tool which would quickly generate meaningful reports for internal and external use. We championed the idea of building a flexible report builder instead of automating a handful of cookie-cutter reports. WUSATA instantly recognized the power of a report builder and we challenged ourselves to make it flexible and easy-to-use. The result was a tool that could build a report in less the five minutes and report on any aspect of WUSATA&rsquo;s operations.</p> <div class="blockBlue"> <div style="font-size: 2rem; padding-left: 50px; padding-right: 50px;">Not only did the report builder satisfy internal needs it also helped WUSATA fulfill USDA reporting requirements.</div> </div> <h4>Proactively Secure</h4> <p>We take security very seriously, and our commitment to security standards helped us stand apart during the proposal process. WUSATA understood the risk of handling sensitive company data, necessary for U.S. Suppliers to participating in their programs, and encouraged us to go beyond industry standards. We accomplished this by:</p> <ul> <li>Using secure socket layer (SSL)</li> <li>Protecting against cross site scripting (XSS)</li> <li>Using encryption/decryption algorithms</li> <li>Preventing session hijacking</li> <li>Limiting access to personal/sensitive information</li> <li>Protecting against SQL injection</li> <li>Restricting file uploads (ensuring safe file extensions)</li> <li>Limiting unsecured forms</li> <li>Preventing cross-site request forgery</li> </ul> <p>With WUSATA&rsquo;s support we built security into every step of the development process. By proactively performing security audits and constantly reviewing our coding standards, we&rsquo;re confident in supporting online payments and storing sensitive company and personal data.</p> <h4>A Video Tutorial is Worth 1000 Emails</h4> <p>Even with our wholehearted focus on user experience, we were very aware that the new business application would require ample training time. But no amount of trainings, emails, or walkthrough documentation can provide the clarity (and reusability) of a built-in help section with easy-to-find help videos. Well before the site launched, we produced more than 60 help videos and made them available to WUSATA staff on-demand through the Back Office. By investing in the creation of a robust help section we empowered WUSATA and cut down on ongoing expenses.</p> <p style="text-align: center;">Example help video "How to Navigate the My WUSATA Dashboard."</p> <p class="video-container"><iframe style="border: 1px solid #cccccc; display: block; margin-left: auto; margin-right: auto;" src="https://www.youtube.com/embed/ygzUsS1WbGI?rel=0&amp;showinfo=0" frameborder="0" width="90%" height="460"></iframe></p> <h4>&nbsp;</h4> <h4>Additional Thoughts</h4> <p><strong>Kurt Jull</strong> <span style="font-size: small;">Sr. Designer &amp; Strategist</span></p> <p><img style="float: left; padding-right: 30px;" src="/images/imagebank/Blog/WUSATA_case_study/kurt.png" alt="" width="70" /></p> <p><em>The exciting challenge with WUSATA was modernizing their workflow and processes that would allow systems and people to communicate effortlessly. Through observation, interviews, and user personas, we were able to empathize and brainstorm new features and methods saving them precious time and permitting the WUSATA Staff to work with confidence. As always, the best reward of a job well done is the knowledge that A</em>&bull;<em>VIBE is fully part of WUSATA's team and we continue to build new online systems that support their industry leadership.</em></p> <p>&nbsp;</p> <!-- <p><strong>Nate Jolma</strong> <span style="font-size: small;">Sr. Tech. Project Manager</span></p> <p><img style="float: left; padding-right: 30px;" src="/images/imagebank/Blog/WUSATA_case_study/nate.png" alt="" width="70" /><em>Sed in cursus urna, ac sollicitudin lectus. Quisque dictum sed diam quis tristique. Suspendisse nec accumsan arcu, sit amet sagittis dolor. Quisque in felis et mauris euismod tempus. Quisque vitae vulputate sem. Suspendisse interdum a ante quis imperdiet.</em></p> --> Sat, 12 Nov 2016 00:00:00 GMT Five Simple Steps for Successful Branding <p>Branding your business, whether it be a new or existing business, is much more complex then hiring a designer to make a logo and marketing materials. Great branding shapes how customers perceive and value your company. Building a strong identity and customer confidence takes time and attention; it requires your brand to be seen and heard. A successful brand needs to be consistent across all marketing channels:</p> <ul> <li>Physical locations</li> <li>Print materials</li> <li>Website</li> <li>Advertising</li> <li>Social media</li> <li>Sales and Customer Service</li> </ul> <h4>Step 1 - Brand You</h4> <p><img style="float: right; padding-left: 30px; padding-bottom: 30px;" src="/images/imagebank/Blog/brandingyourbusiness/time_square_thumb.jpg" alt="time square" /> The first step in developing your brand is asking yourself, what do you want your brand to reflect? Who are you and what are you known for? Who is my target audience? These questions help to discover what makes your business unique and helps build your business&rsquo; identity and mission.</p> <p>It is also important to think about your customers as well as yourself. Your customers make your business what it is, it is important to value their opinion and tailor your mission and messaging to meet their needs. Who are your customers? What would they like to see and hear about your business? Your brand should be appealing and recognizable while visually relaying your company culture. Whenever it is possible to leverage your customer&rsquo;s opinions on your branding &ndash; we recommend it.</p> <h4>Step 2 - Scope Out the Competition</h4> <p>Knowing who your competitors are and what they are doing in your industry is very important in determining where your business is successful, and help identify improvements can be made to your business practices or services. Your goal is to understand what your competitors are doing that is successful and unsuccessful so you can differentiate yourself. When researching your competitors it is important to assess the following:</p> <ul> <li>Is their branding consistent across all marketing channels? If not, that doesn't build brand recognition and this is something that your business will have a leg up on.</li> <li>Look at their reviews on sites like Yelp to see what their customers (and your prospective customers) are saying about them.</li> <li>How do their services and/or products compare to what you are offering?</li> <li>What does their branding say about their quality?</li> </ul> <p class="blockBlue">Remember that your competitors will always be innovating their services, technology, branding, and marketing. We recommend that you perform competitor research routinely to ensure you don&rsquo;t fall behind on new industry trends.</p> <h4>Step 3 - What Makes You Unique</h4> <p>How does your brand stand out amongst the rest? In order to differentiate your company you need to determine and highlight what makes you a better than your competitors. Focus on the quality or variety of your services or products, differences in pricing, and quality customer service. Think about the following questions to define what aspects of your business make you unique:</p> <ul> <li>Does your company have a positive community impact or support a particular cause?</li> <li>What business processes make you successful?</li> <li>What aspect of your customer service gets continual praise?</li> <li>What qualities do people associate with your business? Your employees?</li> <li>Are you more competitive than your competitors?</li> <li>What do your customers like about you?</li> </ul> <p>It is important to capitalize on all aspects of your business that put you a leg up on your competition. Prospective customers weigh all options before committing to a provider of any sort; anything you can do to stand out important in building your brand and reputation.</p> <h4>Step 4 - Visually Bringing It All Together</h4> <p>Now that your brand identity has been established, it is time to visually represent your brand with a great logo and meaningful tagline. Choosing a great design firm is key to getting quality visual assets that both accurately reflects your business and resonates with your customers. A&bull;VIBE&rsquo;s talented designers work with you to learn your business so that we can successfully combine your mission, company culture, and ideas into stand-out logo design.&nbsp;</p> <p>We can develop brand guidelines for your company that ensure consistent branding on all platforms. Here are some example logos we have designed for our clients.</p> <p><img style="width: 100%;" src="/images/imagebank/Blog/brandingyourbusiness/logosBranding1.jpg" alt="" /></p> <h4>Step 5 - Bringing Your Brand to the World</h4> <p>Your new brand should be rolled out quickly and efficiently across all marketing channels.&nbsp;A&bull;VIBE can help design your digital identity by creating branding guidelines, logos, and creating an exceptional website that reflects your business&rsquo; goals and improves workflow processes. We have our clients hone-in on their exact vision and we aspire to reflect their company voice and content throughout the entire branding process. If you are interested in creating or updating your business&rsquo; branding we would love to <a href="/consultation/">schedule a consultation</a> with you to learn more about your company and coinciding goals.</p> <p class="blockBlue">Remember, the key to a successful brand is the employees behind the logo that embody your brand and mission on a daily basis. Customers will choose your business over your competitors when your business delivers solutions, reflects transparency, and promotes trust. Always remember to put your customers first; customer loyalty is the root of building your brand and your business.</p> Sat, 01 Oct 2016 00:00:00 GMT Tips for Great Content Writing <p>Trying to write a blog or content for a website can be challenging. There are many factors to consider: writing for your audience, adding keywords to help with SEO, and keeping your content engaging for the reader. Some writers find it easier to take small steps by taking hours or days apart, while others like to do it all in one sitting. Below are some tips, based on our experience, on how to write great website content.</p> <h3>Create Topic Lists &amp; Working Titles</h3> <p><br />Instead of trying to think about writing content as a whole, it is usually easier to break it up into smaller, more manageable tasks. If you are writing content for a page, you will already have your main topic. If you are creating topics for a blog, brainstorm some ideas on your own or in a group. It is always best to write about things you are familiar with. Keep a list handy and write down topics when you think of them throughout the day.</p> <p>Once you have your list, select one and begin to think of some working titles. Do not feel pressured that this has to be your final title, but your title should be the overall idea of what you are writing about. Create titles that will make the reader want to continue reading. It has been proven that creating titles with numbers creates more interest, such as &ldquo;10 Tips for Improving Reading Comprehension&rdquo;. A little creativity can go a long ways when it comes to titles.</p> <h3><img style="float: left; padding-right: 30px; padding-top: 30px;" src="/images/imagebank/Blog/contentWriting/typewriter.jpg" alt="Content Writing" />Research Your Topic</h3> <p>It does not matter if you are writing a content page for your own website, or creating an article that you think your readers will enjoy; you should always do your homework first. If you are writing a content page, check out what your competitor&rsquo;s are doing. Are they displaying their content in an engaging way? Do they have Call-To-Actions within their content to direct their customers to a goal? Does their style of writing build trust for their customers? Do they sound like an expert in their field? These are all good questions to answer before you start writing.</p> <p>If you are writing a blog article, make sure to research all of the facts and stats you will be talking about. If you have prepared a list of topics prior, always be on the lookout for resources to bookmark and easily return to later.</p> <h3>Create an Outline</h3> <p>Now that you have created one or more working titles and are ready to write for a content page, generate ideas or keywords you want to discuss. The main points you have chosen should flow nicely with each other, while still fitting well under your working title. Keep in mind, you may need to adjust your working title as you go through this process to keep it relevant. Use your ideas or keywords to create a content outline. This can either be done through bullet points, or using key ideas that you will write about. Revise as needed until you feel you have a strong structured outline to work with.</p> <h3>Opening Paragraph</h3> <p>Just like the title, you want your opening sentence to capture your reader&rsquo;s attention so they will want to read on. Depending on the type of content you are writing, this can be done through interesting facts, telling a story, or using visuals to keep a reader engaged. Write an opening statement that will cover all the main points of your&nbsp;article. The opening paragraph should be engaging and should also transition nicely to your next paragraph.</p> <h3><br />Writing Your Content</h3> <p><img style="float: right; padding-left: 30px;" src="/images/imagebank/Blog/contentWriting/content_writing.jpg" alt="Create Content" />Now that you are well prepared for the article and have your first paragraph completed, it is time to finish writing the content. Keep your target audience in mind and use language that will be easily understood. When relevant, link to other areas of your website or external links that will support your content. Using subheadings and pictures will also help to visually break up your content and make it easier to read and digest. Make sure to do any additional research needed to keep the content accurate and up-to-date. If you are feeling overwhelmed or frustrated, take a break and work on another task. Return to writing when you can set aside time to focus on what you are writing.</p> <h3>Adding Call-To-Actions (CTAs)</h3> <p>A mistake a lot of people make when creating content is not giving the user something to do by the end of the article. What is the purpose of the content you are writing? Is it to contact your company, signup for a newsletter, or learn more on another page? If so, then these actions should be clearly linked within the content. There are times that your articles may just be informative, and there is not a need for an action and that is just fine.</p> <h3>Check for Consistency and Proof Read</h3> <p>Once you have completed your content, do a preview of the visual appearance of the article. Is the imagery fitting with your topic? Did you use links subtly as to not overwhelm your readers? Is there a good use of subheadings to break up your content into easily digestible sections? Did you create an actionable item? If you answer yes to all, the next step is to have someone else read the content.</p> <p>Having a proof reader review your content or article is extremely important. Many times, another person can help develop your topic to the fullest, find problem areas in your flow, and be on the lookout for any errors in your grammar that a word processing program could have missed (like: there, their, they&rsquo;re).</p> <p class="blockBlue"><strong>Tip:</strong> Use Microsoft Word's &rdquo;Track Changes&rdquo; (found under the Review tab) so you will be able to see the original and the proof reader's suggested changes, which you can either accept or reject upon your review.</p> <p>Everything that we write, including blog articles, proposals, and even sensitive emails, go through numerous proof readers and revisions to ensure accuracy.</p> <h3>Search Engine Optimization</h3> <p>Not only are search engines looking for great content, but they also use other clues within your content that it will use to display to users. These can be headers, images, and keywords it finds on the page. Make sure to optimize your pages for one to three keywords that are unique across your site. Make sure your images have alt, or alternative text added to them to explain what the image is about. Write and add meta titles and descriptions that use your keywords and give users information and a great marketing message that will make them want to click through to your page.</p> <p class="toolTip"><strong>Read More:</strong> Get more tips and information about SEO in our article "<a title="Learn the Basics of SEO" href="/company/blog/learnthebasicsofseo/">Learn the Basics of SEO</a>"</p> <h3>Final Review</h3> <p>After making any updates from your proof reader, do a final review of your post or page using a preview, if available. Ask yourself the following questions:</p> <ul> <li>Does your title still fit with your ideas presented in the content?</li> <li>Does the first paragraph grab your reader&rsquo;s attention?</li> <li>Does the article make you sound like an authority on the topic?</li> </ul> <p>Creating small, manageable tasks can make writing content blog articles an enjoyable task with great, measurable results. Find what works best for you and write on!</p> Thu, 01 Sep 2016 00:00:00 GMT CRMs - One Size Doesn't Fit All! <p>Would you like to increase engagement and sales for your business? One option for your company to consider would be utilizing a Customer Relationship Manager (CRM) that is tailored to your company&rsquo;s specific needs.</p> <p>Customer Relationship Management (CRM) is a marketing strategy adopted by businesses to engage current and prospective customers by analyzing data trends across different communication channels. Having a centralized hub makes it easy to manage and analyze customer interactions and information from your company website, phone calls, email marketing, surveys, social media sites, etc. Data collected can provide detailed information about your customer&rsquo;s purchasing history, buying preferences, as well as concerns. Information collected and stored in a CRM systems allows businesses to cater their marketing efforts towards the preferences of their clients and allows for automation of workflow processes.&nbsp;</p> <p><img style="float: right; margin-left: 30px; margin-right: 30px;" src="/images/imagebank/Blog/CRM/crm3.jpg" alt="Customer Relationship Manager" />There are many different CRM options for businesses to choose from. In many cases, off-the-shelf CRMs are difficult to implement, come with inflated costs, and often don&rsquo;t include features that accurately reflect certain business&rsquo; marketing campaigns. Businesses may also end up choosing a CRM that includes many features that they will never use, or is a minimalistic CRM system that doesn&rsquo;t reach all channels of their marketing efforts. Because of the lack of customization for many off-the-shelf CRMs, our clients have come to us to develop CRMs specifically tailored to their business needs that fully integrate with their website, web applications, and align with their marketing strategy.</p> <h3>Integration Into Your Daily Workflow</h3> <p>Companies should have a CRM that fits their current business needs and be scalable for future needs. Custom reporting and engagement features should reflect the company&rsquo;s business identity and reiterate the business&rsquo; nomenclature to ensure these features make sense to staff, as well as &nbsp;prospective or current customers; many off-the-shelf solutions do not allow for this type of flexibility. &nbsp;</p> <p>A&bull;VIBE conducts discovery meetings that can help tailor a CRM to best fit your business. Some factors we consider are:</p> <ul> <li>Appropriate nomenclature that makes sense to you and your staff</li> <li>Addressing the different sources of engagement from outreach calls to inquiries from your website</li> <li>Strategizing on best response practices and leveraging cross marketing tactics</li> <li>Managing campaigns</li> <li>Utilizing data reporting, graphs and charts to learn more about your customers</li> <li>Statuses and notices for customer follow-ups</li> <li>Contact information for specific individuals related to a conversion opportunity</li> <li>Scheduling repeated events</li> <li>Searching and reporting</li> </ul> <p class="toolTip"><strong>TIP: </strong>CRMs can be very valuable for custom reporting. The data collected can be used to identify customer pain points. For example, if your CRM is syncing with your website, you can leverage customer feedback to discover areas of improvement regarding the user experience (UX) of your website or services.</p> <p><img style="float: left; margin-left: 20px; margin-right: 20px;" src="/images/imagebank/Blog/CRM/crm2.jpg" alt="" />We created a CRM for one of our clients that handles lead management, data visualization, marketing efforts, and much more. &nbsp;All of the CRM&rsquo;s features have been integrated into the Website Administration System that we had previously built. They are able to manage all business processes from accounting, correspondence, sales management, and registration processes from start to finish; as well as update the content on their website at any time through this system. Last but not least, their CRM reflects the look of their current Administration and Content Management System so it is recognizable and intuitive for all team members, thus reducing time needed for training on new features.</p> <p>Lastly, keeping track of your customers will allow you to correspond with them regularly and help to maintain positive relationships with them. Regular correspondence is paramount in providing quality customer service and customer retention. Although it is wonderful how technology has evolved our communication channels with customers, it is important to remember that word of mouth conversations will never go out of style; human interactions convey the highest amount of trust to customers.</p> <p class="blockBlue">If you are interested in learning more about A&bull;VIBE&rsquo;s CRM capabilities to determine if a custom-built CRM is a good fit for your business, we would love to chat! Contact us for a <a href="/consultation/">free consultation</a>.</p> Mon, 01 Aug 2016 00:00:00 GMT Meaningful Insights with Geographic Information Systems (GIS) <p>Data is fundamental to all businesses and industries &ndash; from small mom-and-pop businesses to large corporations like Google. Having access to large amounts of data is only as useful as a businesses' ability to gain insights from it. As businesses collect more and more data the ability to analyze the data can become a costly task. Since not all of us are blessed with a love or flair for numbers; there are valuable, yet often underutilized, tools to easily dissect data by visualizing it geographically.</p> <p>Geographical Information Systems (GIS) are the tools required to display data as it relates to positions on the Earth&rsquo;s surface. Being able to map your data can unleash its potential. Showing where customers are located, your company&rsquo;s events, or where purchases are being made can help you effectively market to your target audience. GIS allows businesses to connect with their customers in new and meaningful ways. It is easy to monitor data changes over time which allows for informed decision making and project management. There are many different GIS products available, but choosing the right GIS for your business is paramount to balancing insights and cost.</p> <p class="toolTip"><strong>TIP:</strong> All you need to start mapping your data is an address. Turning a customer, client, or location&rsquo;s address into the geographic coordinates is easy with third party APIs like Google Maps Geocoding API, Yahoo BOSS, and SmartyStreets.</p> <h3>Considering Your Options</h3> <p>Companies should choose a GIS that fits their current business needs, is scalable for their future needs, and takes in account ease-of-use and overall costs. Take a look at our recommended GIS options to handle any of your mapping needs:</p> <p><strong>Leaflet</strong></p> <p><strong><img style="display: block; margin-left: auto; margin-right: auto;" src="/images/imagebank/Blog/GIS/leaflet.png" alt="" /></strong></p> <p>Leaflet is a JavaScript library that simplifies the coding of web based maps. Leaflet&rsquo;s built-to-order nature allows for direct integration into existing systems. Since Leaflet is designed based on a business&rsquo; existing infrastructure and needs it tends to be easier to use. However unlike a comprehensive GIS option, new features require additional development work.</p> <h4>Pros</h4> <ul> <li>Ease-of-use</li> <li>Integrates into existing systems and workflows</li> <li>Budget option for maps with limited or consistent features</li> <li>No licensing costs</li> </ul> <h4>Cons</h4> <ul> <li>Higher initial development costs</li> <li>Mapping features and styling limited to initial scope</li> <li>Updates and maintenance require additional development work</li> </ul> <p>&nbsp;</p> <p><strong>CartoDB</strong></p> <p><img style="display: block; margin-left: auto; margin-right: auto;" src="/images/imagebank/Blog/GIS/carto-db.png" alt="CartoDB" /></p> <p>CartoDB is an online map visualization platform. It is not a full GIS suite, but has a streamlined interface and is quite efficient. CartoDB&rsquo;s built-in visualization options allow for a wide variety of stylized maps. CartoDB is easier to use than high-end GIS suites but still requires some investment in training.</p> <h4>Pros</h4> <ul> <li>Good balance of price and flexibility</li> <li>Includes a wide variety of built-in visualization options</li> <li>Customizable map styling</li> </ul> <h4>Cons</h4> <ul> <li>Does not directly integrate into existing systems</li> <li>Requires training on application</li> <li>Moderate on-going licensing costs</li> </ul> <p>&nbsp;</p> <p><strong>ArcGIS</strong></p> <p><img style="display: block; margin-left: auto; margin-right: auto;" src="/images/imagebank/Blog/GIS/arcgis.png" alt="ArcGIS" /></p> <p>ArcGIS is an enterprise-level fully featured GIS suite. Maps created in ArcGIS can be synced with existing applications via API. Map creation is very flexible and it&rsquo;s supporting tools and features are top-of-the-line. However, the extra features come with a steep learning curve and high licensing costs.</p> <h4>Pros</h4> <ul> <li>Includes cutting edge features, tools, and map creation options</li> <li>Highly customizable map styling</li> <li>Syncs with existing systems with robust APIs</li> </ul> <h4>Cons</h4> <ul> <li>Requires in-depth training</li> <li>High on-going licensing costs</li> </ul> <p class="blockBlue"><strong>Example: </strong>Take a look at <a href="http://uk.isidewith.com/map/M54j/support-for-european-union#z7">a heat map of the Brexit voting results</a>. Turning large amounts of data into visual maps makes it much easier to understand.</p> <h3>Our Methodology</h3> <p>A&bull;VIBE conducts discovery meetings that can help you understand how to best leverage GIS and what GIS tools will best fit your business. Some factors to consider are:</p> <ul> <li>What insights are available from mapping your data</li> <li>The cost and time commitment to start visualizing data</li> <li>How existing data can be geocoded and mapped</li> <li>The frequency and type of data you collect</li> <li>The complexity and flexibility of the maps you want to create</li> <li>The value of automated geocoding and map creation</li> <li>The value of density visualizations</li> <li>The need to create maps showing change over time</li> <li>How to publish maps externally&mdash;and if it is worthwhile</li> </ul> <p>We worked with a long-standing client to develop a Leaflet GIS solution that handles up to four datasets, flexible boundary layers, interacting tool-tips, on-map filtering, density visualizations, publishing, and much more. We were then able to integrate all the GIS features into the client&rsquo;s existing Website Admin. With the new mapping solution, the client is able to intricately filter and display their events and customers to gain actionable insights on market presence and create marketing goals. Last but not least, their GIS system matches their current Admin so creating maps was intuitive for the team.</p> <p>Recognizing geographic patterns in your data leads to better-informed decisions. The ability to easily and quickly create a map allows you and your team to take a fresh look at your valuable data. If you are interested in learning more about A&bull;VIBE&rsquo;s GIS capabilities to determine how GIS can help you reach your business goals, we would love to chat! Contact us for a <a href="/consultation/">free consultation</a>.</p> Fri, 01 Jul 2016 00:00:00 GMT 15 Must Dos In and Around Portland <p>We love Portland! There are so many things to do in and around the city. Here is our list in no particular order. How many places have you been?</p> <h4>1. &ldquo;Food Cart Friday&rdquo;</h4> <p>The first on our list would have to be the <a title="Food Cart Locations" href="http://www.foodcartsportland.com/category/location/downtown-location/sw-10th-and-alder/" target="_blank">SW Food Carts at 10<sup>th</sup> and Alder</a>. Every Friday the staff goes down to pick up delicious food from the wide variety of selections available.<br /><br /><img style="margin-top: 10%px; margin-bottom: 10%px;" src="/images/imagebank/Blog/15ThingsPortland/foodcarts.jpg" alt="Food Carts in SW Portland" width="100%" /><br /><br /></p> <h4>2. Hiking in the Gorge</h4> <p>You cannot really say you live here until you have hiked the <a title="Multnomah Falls" href="http://www.fs.usda.gov/recarea/crgnsa/recarea/?recid=30026" target="_blank">Multnomah Falls</a> area at least once.</p> <h4>3. International Rose Garden &amp; Japanese Gardens</h4> <p>Both places are just <a href="https://www.portlandoregon.gov/parks/finder/index.cfm?action=viewpark&amp;propertyid=1113" target="_blank">breathtaking</a>, and offer a great view of Portland. Watching snow fall on the <a href="http://japanesegarden.com/" target="_blank">Portland Japanese Gardens</a> should be on your bucket list.</p> <h4>4. Brunch</h4> <p>If there is one thing Portland loves, it is brunch. With so many delicious places to choose from, it is hard to pick just one. <a href="http://www.olympiaprovisions.com/" target="_blank">Olympia Provisions</a>, <a href="http://tinshedgardencafe.com/" target="_blank">Tin Shed</a>, <a href="http://screendoorrestaurant.com/" target="_blank">Screen Door</a>, <a href="http://www.veritablequandary.com/" target="_blank">Veritable Quandary</a>, and <a href="http://www.verdecocinamarket.com/" target="_blank">Verde Cocina</a> are some of our favorites though. It&rsquo;s important to take advantage of the only acceptable time to day drink in public.</p> <p><img src="/images/imagebank/Blog/15ThingsPortland/brunch.jpg" alt="Brunch at a Winery" width="100%" /></p> <h4>5. Powell&rsquo;s Books</h4> <p>You need a book that only had a print run of 100 copies with paper made from Palm Trees that only faced South? <a href="http://www.powells.com/" target="_blank">They have it</a>.</p> <h4>6. Breweries</h4> <p>You can&rsquo;t throw a rock in Portland without <a href="http://www.portlandbeer.org/breweries/map" target="_blank">hitting a brewery</a>. If you can&rsquo;t decide what delicious brews you want to drink, see how many beers you can taste at <a href="http://loyallegionpdx.com/" target="_blank">Loyal Legion</a>.</p> <h4>7. Saturday Market</h4> <p>An <a href="http://www.portlandsaturdaymarket.com/" target="_blank">upscale flea market</a>, and a great place to spend a Sunday morning with coffee in hand. Where else can you get handmade crocheted knee warmers? Nowhere.<br /><br /><img style="margin-top: 10%px; margin-bottom: 10%px;" src="/images/imagebank/Blog/15ThingsPortland/nate.jpg" alt="" width="100%" /><br /><br /></p> <h4>8. First Thursdays / Second Saturday Art Walks</h4> <p><a href="http://www.firstthursdayportland.com/" target="_blank">Explore galleries and artist exhibits</a> during the summer, and it's a great way to flex the right side of your brain.</p> <h4>9. Happy Hour</h4> <p>A much needed cocktail and &lsquo;appys is always a great way to end the week. Some of our favorite locations (in order of classiness): <a href="http://departureportland.com/" target="_blank">Departure</a>, <a href="http://matadorrestaurants.com/" target="_blank">Matador</a>, and <a href="http://cheerfulbullpen.com/" target="_blank">Cheerful Bullpen</a>.</p> <h4>10. OMSI</h4> <p>From Sea to Space, <a href="http://www.omsi.edu/" target="_blank">this place has it all</a>. And you don&rsquo;t need to be a kid to enjoy it!</p> <p><img style="margin-top: 10%px; margin-bottom: 10%px;" src="/images/imagebank/Blog/15ThingsPortland/omsi.jpg" alt="OMSI After Dark" width="100%" /></p> <h4>11. Theater</h4> <p>Yes, Portland can be fancy! Newmark, Keller, Schnitzer, Winningstad, Brunish, and Portland Center Stage all offer a <a href="http://www.portland5.com/" target="_blank">wide variety of entertainment</a>.</p> <h4>12. Tom McCall Waterfront Park &amp; Eastbank Esplanade Loop</h4> <p>One of the great pleasures of <a href="http://rideoregonride.com/road-routes/waterfront-park-eastbank-esplanade-loop/" target="_blank">Portland&rsquo;s downtown</a>. Bonus points if you do it on a <a href="http://www.portlandbysegway.com" target="_blank">Segway</a>!</p> <h4>13. Punch Bowl Social and Ground Kontrol</h4> <p><a href="http://groundkontrol.com/" target="_blank">Video games</a>, beer, bowling, <a href="http://punchbowlsocial.com/portland/" target="_blank">darts</a>, shuffleboard, corn hole and more! It&rsquo;s like being at home, without having to worry that your tipsy friends will spill their drinks everywhere!<br /><br /><img style="margin-top: 10%px; margin-bottom: 10%px;" src="/images/imagebank/Blog/15ThingsPortland/darts.jpg" alt="" width="100%" /><br /><br /></p> <h4>14. Shanghai Tunnels</h4> <p>Who doesn&rsquo;t love the thrill of unexpected visitors getting drunk, kidnapped, and human trafficked in the late 1800&rsquo;s? Beware, the Halloween tours are not for the faint of heart proclaiming itself as the <a href="http://www.shanghaitunnels.info/" target="_blank">most haunted place in Oregon</a>.</p> <h4>15. Swift Watch</h4> <p><a href="https://www.youtube.com/watch?v=uhNqso6VElE" target="_blank">The ultimate team building exercise!</a> A truly entertaining site to watch thousands of birds swirl down to roost for the night in the Chapman School&rsquo;s chimney.</p> Wed, 15 Jun 2016 00:00:00 GMT Learn the Basics of SEO <p>Search Engine Optimization (SEO) is key to most business websites, yet it can be a very confusing topic to understand. Taking some time to get a basic understanding of SEO will help you create short and long term goals for optimizing your site.</p> <p><img src="/images/imagebank/Blog/SEO/SEO-image.jpg" alt="Areas required for SEO" width="100%" /></p> <h3>User Experience</h3> <p>A portion of SEO relates to User Experience (UX). If users do not have a positive experience on your website, it does not matter how well it ranks. Before starting any SEO campaign, it is important to take a hard look at your current site, or even get other&rsquo;s opinions. Some questions to ask are:</p> <ul> <li>Is your site modern in its design?</li> <li>Is it responsive?</li> <li>Is it easy to navigate?</li> <li>Does it load quickly?</li> <li>Does it use headers and images to break up content and make it easier to read?</li> </ul> <p>If you answered yes to all of these, great! If you answered no to one or more, then it might be time to redesign and restructure your website.</p> <p class="toolTip"><strong>Tip:</strong> Want more information about sitemaps, page structures, and navigation? We got you covered! Read our article about <a href="/company/blog/sitestructure/">Site Structure</a> for more details.</p> <h3>On-Site Optimizations</h3> <p>On-site optimizations refer to updates that can, and should be made to an existing site. These are sometimes called "On Page" optimizations as well. These include:</p> <ul> <li>Site Security</li> <li>Page Load Times</li> <li>Navigation and Site Structure</li> <li>User Experience</li> <li>Image Sizes and Descriptions</li> <li>Sitemaps</li> </ul> <p>There are numerous free tools that Google offers that can provide information about your website, as well as your website visitors, including: <a href="https://www.google.com/analytics" target="_blank">Analytics</a>, <a href="https://developers.google.com/speed/pagespeed/insights/" target="_blank">Page Speed Insights</a>, and <a href="https://www.google.com/webmasters/tools/mobile-friendly/" target="_blank">Mobile-Friendly Test</a>. Analytics provides information about bounce rates, site exits, and traffic flow within your site. Page Speed Insights gives your site a desktop and mobile score, and even provides optimized images for you. Mobile-Friendly Test shows you if Google views your site compatibile with smart phones, which is important for mobile searches.</p> <p>Using the above tools can help with the on-site optimizations and provide more immediate options to improve your rankings for SEO. These updates can be considered one of the easiest to understand and accomplish because of all the available online resources.</p> <p class="toolTip"><strong>Tip:</strong> Did you know if your site takes 1 second longer to load than a competitor&rsquo;s, you may be losing customers? Read more about site optimizations in <a href="/company/blog/designingforperformance/">Designing for Performance</a>.</p> <h3>Keyword Research and Usage</h3> <p>With over 1 billion websites online, the internet has become saturated with general content which has changed how users search. Many years ago, searching only required one or two keywords; now it usually takes three or more keywords to specifically find what users are searching for. Finding key phrases of three to five words with lower competition will increase your rankings, especially if your business is in a saturated market. Google&rsquo;s &ldquo;related searches&rdquo; can also provide valuable keywords.</p> <p>If you have high competition for general phrases that relate to your business, try finding a niche that you can optimize. For example, searching &ldquo;web design&rdquo; returns millions of results. A&bull;VIBE could optimize for localized results for by adding &ldquo;Web Design Oregon&rdquo; or even smaller with &ldquo;Web Design Portland.&rdquo;&nbsp; Even those keywords have really high competition. Using Google&rsquo;s Related Search suggestions, we could get into more detail with &ldquo;Portland Web Design Agency&rdquo; or &ldquo;Web Design Company in Portland.&rdquo; Just make sure you don&rsquo;t get too specific with your terms. Showing up in the first position in Google is great, but will not help your business if no one is searching for it. Google&rsquo;s Key Planner can provide great insights to the amount of searches per month for specific keywords.</p> <p>Mobile phones and auto assistants such as Amazon&rsquo;s Echo are also changing the way users search. With voice searching, users tend to use complete sentences, like normal conversations. Instead of typing in &ldquo;Pizza&rdquo;, users might say &ldquo;Find a good pizza place that delivers.&rdquo; This also leads to Keyword Interpretation, localized results, and reviews - our next topics.</p> <h3>Keyword Interpretation</h3> <p>If someone were to walk up to you on the street and ask you to recommend to them a &ldquo;good place to eat&rdquo;, you would probably give them one or two of your favorite restaurants in the area. Since a computer cannot recall personal experiences, it uses a combination of keyword interpretation, reviews, and localized results to provide you with recommendations. Google interprets &ldquo;good&rdquo; by checking on reviews and ratings posted by other users. Using GPS, Google provides results that are near to you - on your street or neighborhood.</p> <h3>Reviews, Business Pages, and Social Media</h3> <p><img style="margin-left: 40px; margin-right: 40px; float: right;" src="/images/imagebank/Blog/SEO/businessPage.jpg" alt="Google Business Page for AVIBE" />As mentioned above, Google takes into account many factors in order to display relevant information to you. The first of these are reviews and ratings left by other users. These can come from Google, or other sources like Yelp. If you are in a business that requires a lot of customer service, such as a restaurant or professional service, having customers give positive feedback can actually increase your rankings.</p> <p>One easy way to accomplish this is to be sure to claim your Google Business Page. If you Google your business name, most likely you will see the business page to the right on desktop, or in the main view on mobile. Make sure to claim this page, update your information if needed, and add photos. This shows Google you are serious about your business, and increases your local search results by listing an address and contact information for your business.</p> <p>The last factor is social media. If Google sees social media pages linked from your site, like Facebook and Twitter, it can see how often you are posting and the interactions you are having with your customers. While we would not recommend having social media if you will not be able to update and maintain it, setting aside some time once or twice a week (or more, depending on your business), can be a good marketing strategy in general, while also contributing to your SEO.</p> <h3>Blog Writing</h3> <p>While the term &ldquo;Blog&rdquo; may stir up some negative connotations, having a blog or something similar is great for SEO. By keeping it updated regularly, Google has fresh content to index all the time, which makes Google very happy. Blogs are also a great marketing tool, and when done correctly, it highlights your company as a leader in your industry. You should write for your audience and your field, including tips, tricks, and insights to educate your customers. Unless you are an animal adoption agency, don&rsquo;t post cute cat videos if it has nothing to do with your field. Make sure to keep your blog updated often; having an out of date blog will give off a negative impression to prospective customers.</p> <h3>Create Your Own Plan</h3> <p>This is a basic guide to understanding some components of what is involved in SEO. Just like how every business is unique, creating a plan for SEO should also be tailored to a business&rsquo; website specific needs. Instead of asking, &ldquo;How can I be number one in Google?&rdquo; you should instead ask, &ldquo;Am I providing a great experience for my customers on my website?&rdquo; And remember to remain patient throughout the process of optimizing your site as it usually takes 8-12 weeks to see changes in your website&rsquo;s rankings. While we recommend partnering with an SEO expert, creating short and long term goals for your website is a great first step in increasing your SEO.</p> Wed, 01 Jun 2016 00:00:00 GMT Speed Up Your Website with Optimization <p>Looks are not the only important feature of a website, it is important to consider what&rsquo;s running in the back-end as well. Many times the most visually pleasing and interactive websites cause the most user frustration; the more images and animations there are, the slower the website loads.&nbsp; Optimization is pertinent for top tier websites and applications that A&bull;VIBE develops. One of our clients has a web application that is specifically tailored to all of their unique business needs. This application is where they manage all of their daily workflow, and their customers use the website to login and manage their accounts. The application is so robust that it had to be optimized to ensure a quick load time for front-end users on all devices and network speeds; as well as have the ability to run large queries or reports from their interconnected Back Office. There are many tricks to improve the load time of a website and application, here are some of the options available and utilized by the A&bull;VIBE team that proved successful.</p> <h3>Render Blocking<strong><br /></strong></h3> <p>Render blocking is what occurs when a browser loads a static asset (external resources like fonts or scripts from other websites) before loading the content.&nbsp; Loading static assets first causes a delay for users receiving content on the page, what they are actually looking for. Render blocking is most apparent with JavaScript files. Typically, JavaScript files are coded into the header tag of an HTML file; this is above the body tag where the visual content for a website is housed. Browsers read code like a person reads a book, from the top to the bottom. To avoid the delay in content generation, there are two options for developers:</p> <blockquote> <p><strong>Load Scripts at the End</strong></p> <p>Loading the JavaScript file right before the closing body tag, &lt;/body&gt;, allows users to access content much faster. The drawback to this option is default fonts, or JavaScript files used to control page functions; full content will not display until the page loads, which can cause a visual flash, or change, after the script fully loads. For example, if a website&rsquo;s default font is Arial and the content is in Futura, the Arial font will display first which can break the layout of the site until the correct font loads; this is the same scenario when loading scripts.</p> <p><strong>Load Scripts Asynchronously</strong></p> <p>Loading the JavaScript file asynchronously requests the file and then lets the browser continue to load the content in the body tag by appending async within the script. This option is good, but may cause problems with the interdependence of the JavaScript files. Some scripts are dependent on one another, and the site may break if one takes longer than the other to load. Developers should not deploy this optimization method if scripts are interdependent.</p> <p>Depending on how websites and applications are built, and how complex a page needs to be, developers can choose one or both of the above options that work best for the site&rsquo;s architecture.</p> </blockquote> <h3>Typography</h3> <p>Web fonts that are linked from other websites such as Google or TypeKit can cause unnecessary performance issues for load times. When a True Type Face (TTF) file is loaded, it usually includes different styling options, such as thin, medium, bold, italics, etc. and every character set within that font; some of which will never be seen by the public. There are a few methods to improving web font performance:</p> <ul> <li>Reduce the number of fonts used; stick with one whenever possible and use default fonts to compliment it</li> <li>Reduce the use of numerous font weights and styles throughout the site wherever possible</li> <li>Deploy <a href="https://medium.com/@iamtomnewton/dynamic-web-typography-with-typekit-eaca8d8091e" target="_blank">Dynamic Subsetting</a>; only rendering characters needed on the page to decrease the font file size</li> <li>Utilize <a href="http://betterexplained.com/articles/how-to-optimize-your-site-with-gzip-compression/" target="_blank">GZIP</a>; a server configuration that compresses text assets and speed up load time</li> </ul> <p>The tips and tools for saving bandwidth and improving loading time were very helpful when we were optimizing our client&rsquo;s web application. Their website is very content heavy and is comprised of ~200 pages of text rich content. We applied all of these techniques to our client&rsquo;s web application and greatly improved the load time of each page. While these techniques were very helpful, there is always room for improvement, so we continued optimizing.</p> <h3>Minification</h3> <p>Minification is the process of removing unnecessary characters, white space, comments, etc. from JavaScript or CSS files without changing the file&rsquo;s functionality &ndash; very cool! Minification can be done through a Gulp script; or through many other programs depending on your coding language. While this may not make a huge file size savings, making numerous small changes can add up to a big difference.</p> <p class="toolTip"><strong>Tip:</strong> Don't minify your files until you are ready to push to a production environment, and always make a copy of your working files to easily make changes in the future.</p> <h3>Image Optimization<strong><br /></strong></h3> <p>Optimizing the file sizes of scripts can be very beneficial in reducing load times, but there are other, more obvious improvements that can be made. Images are what makes a website or application visually pleasing, but the larger the image and the higher the image quality, the longer it will take for the page to load. Our client&rsquo;s web application is very visual and includes a slideshow on the home page as well as large photos throughout the website. We had to apply some tricks to optimize their images to reduce the loading time. Here are some resources that A&bull;VIBE utilized:</p> <div class="column span_1_2"> <blockquote> <p><strong>JPEGmini</strong></p> <p><a href="http://www.jpegmini.com/app" target="_blank">JPEGmini</a> is a great tool for reducing the size of images without losing quality and keeping the original formatting. It can be puchased and downloaded for desktop use, or you can upload images through their website for free. One of the homepage banners on our client&rsquo;s website started at 636 KB. After we ran the image through the JPEGmini application, we were able to reduce the file size down to 128 KB and the image looks just as vibrant as the original. Plus, it shows you a total of all space saved, as well as for the current image that was just optimized.</p> </blockquote> </div> <blockquote> <div class="column span_1_2"><img style="margin-top: 40px; margin-bottom: 40px;" src="/images/imagebank/Blog/Optimization/JPEGmini.jpg" alt="JPEGmini" width="100%" /></div> </blockquote> <div class="clear">&nbsp;</div> <blockquote> <p><strong>TINY PNG</strong></p> <p><a href="https://tinypng.com/" target="_blank">Tiny PNG</a> is a free tool for shrinking PNG and JPG files, allowing for up to 500 free image compressions per month. This tool utilizes compression without losing the original image quality. When testing our client&rsquo;s homepage banner image using this method, we were able to reduce a JPG image size from 636 KB to 143 KB.&nbsp; A&bull;VIBE was more successful at reducing the image size using JPEGmini than Tiny PNG, but it is very useful for PNGs that do not usually allow for compression through programs like Photoshop.</p> <p><img src="/images/imagebank/Blog/Optimization/tinyPNG.jpg" alt="TinyPNG" width="100%" /></p> </blockquote> <div class="clear">&nbsp;</div> <div class="column span_1_2"> <blockquote> <p><strong>Sprites</strong></p> <p>Combining multiple, smaller images into a sprite also reduces the number of page requests that a server handles by only needing to load one image. <a href="/scripts/tiny_mce/http:/www.avibeweb.com/websiteoptimization.com" target="_blank">Websiteoptimization.com</a> states that, &ldquo;The more HTTP requests that your pages require, the slower and less consistent their response time will be.&rdquo; For our client&rsquo;s website, we combined numerous smaller images into one larger image, or sprite. This may require a little more developer time, but the website will only load the image once, making for instant normal, hover, and active states for all the images.</p> </blockquote> </div> <blockquote> <div class="column span_1_2"><img style="margin-top: 60px; margin-bottom: 60px;" src="/images/imagebank/Blog/Optimization/cta-pinpoints.png" alt="Sprites" width="100%" /></div> </blockquote> <div class="clear">&nbsp;</div> <h3>Designer Savvy<strong><br /></strong></h3> <p>Thankfully, we have some very talented designers here at A&bull;VIBE that have done a lot of homework when it comes to compression. One of the hardest places to optimize is large banner slideshows because of the amount of photos needed to be loaded. The slideshow image we were optimizing had part of the image covered by another graphic, so we were able to flatten out the colors used in the overlapping portion of the image. Having areas of the picture with solid, flat color, helped us achieve a much smaller file size because it required less colors to be saved to the file. We compressed the image in Photoshop, and then used the programs mentioned above to reduce file size even further.</p> <p class="blockBlue"><strong>Pro Tip:</strong> Having many tools under your &lsquo;belt&rsquo; to reduce image file size is always the best approach. Sometimes it will take some experimenting to know what will work best, but the time spent will be well worth it in the end.</p> <h3>External Tools</h3> <p>There are many trusted websites that can analyze your website and report on where your website needs work. Two are listed below that we use before launching our websites:</p> <blockquote> <p><strong>Google PageSpeed Insights</strong></p> <p><a href="https://developers.google.com/speed/pagespeed/insights/" target="_blank">Google PageSpeed</a> is a great resource for developers to test the load time for scripts, images, and other items. We have recommended it numorous times in our articles. When you enter the website domain that you want to test, Google PageSpeed lists what images can be further optimized and it provides you with a zipped file of the newly optimized images &ndash; very convenient! Google even looks at the page loading speeds when considering ranking, so having an optimized site looks good to Google. Utilizing page speed compression and some other image adjustments by our designers, we were able to take our client&rsquo;s homepage banner image from 636 KB to about 80 KB; the best results yet!</p> <p><strong>WebPageTest.org</strong></p> <p>Another resource for content breakdown and a list of various metrics is <a href="http://www.webpagetest.org" target="_blank">WebPageTest.org</a>. Using this website you can see a nice pie chart that lists all components of the website. The pie chart shows where the files are the heaviest and clearly states what areas need improvement. They even have videos and slideshows to easily see how, and at what second intervals, your website is loading.</p> </blockquote> <h3>Results</h3> <p>A&bull;VIBE applied numerous tests and resources to our client&rsquo;s web application optimization process to achieve some great results. By deploying a combination of the optimization tricks listed above, we were able to reduce the number of bytes for the first, initial homepage view on the website by half! These techniques and resources are proven effective when optimizing websites and can help decrease your website&rsquo;s loading time. Run your website domain through <a href="https://developers.google.com/speed/pagespeed/insights/" target="_blank">Google&rsquo;s PageSpeed</a> test and see where your website can be optimized!&nbsp;&nbsp;</p> Sun, 01 May 2016 00:00:00 GMT Touchscreen Takeover <p>Look around you, no matter where you are or where you look you will always see heads down looking at their mobile device. While browsing on your phone, tablet, hybrid (touchscreen laptop), or &ldquo;phablet&rdquo; (picture an iPhone 6 Plus- bigger than a typical phone but smaller than a tablet), many mobile users don&rsquo;t think about the design process that goes behind responsive websites or web applications which allow content and functionality to display properly across all mobile devices.&nbsp; A&bull;VIBE always acknowledges best practices with every responsive interface we design to ensure a great user experience.</p> <h3>Hand Grips and Touch Target Placement</h3> <p>I bet you never thought about the way you grip your phone while browsing the web or playing a game is important &ndash; well it is! User grips can vary by what type of application you are using, and can differ based on what you are doing in the &ldquo;real world&rdquo; - walking versus sitting. You may be right handed by nature but when the busy world around you intervenes you may notice ambidextrous tendencies with the grip you have on your phone.&nbsp;</p> <p>A <a href="http://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php" target="_blank">study by Steven Hooper</a> shows that, &ldquo;the thumb drives 75% of all phone interactions&rdquo;. Our designers and developers already have to take into account that the website or web application they are creating has to look and function properly on all mobile devices; they also need to create a design or layout that works well with the different hand grips commonly used for each mobile device.&nbsp;</p> <h3>Three Basic Phone Grips</h3> <ol> <li>One handed grip &ndash; Accounting for 49% of all users and the most popular grip</li> <li>Cradled phone in one hand and use the opposite hand&rsquo;s finger or thumb to navigate &ndash; In a close second, this grip accounts for 36% of all users</li> <li>Two handing typing using both thumbs &ndash; Last but not least, this grip comes in third place with 15% of users</li> </ol> <p><img src="/images/imagebank/Blog/Takeover/phone-grips.jpg" alt="Users holding a mobile phone" width="100%" /></p> <p style="text-align: center;"><span style="color: #999999;"><em>Image Source: Clark, Josh., 2015. </em><a href="http://alistapart.com/article/how-we-hold-our-gadgets" target="_blank"><span style="color: #999999;"><em>http://alistapart.com/article/how-we-hold-our-gadgets</em></span></a></span></p> <h3>Fingers Are Not a Stylus</h3> <p>Styluses are sleek and slim, unlike any human&rsquo;s finger. Styluses are able to click on the smallest touch targets that our fingers cannot possibly click with ease. Although styluses have been helpful in the past when navigating mobile friendly sites, they are not helpful in the fact that they are easy to misplace.&nbsp;</p> <p>The layout and navigation of A&bull;VIBE&rsquo;s designs are intuitive for all mobile users, this ensures a pleasant experience while navigating the websites and applications that we develop. Now that many websites are becoming responsive, standards have been established that cater to &ldquo;the human stylus&rdquo; &ndash; fingers!</p> <p>The way different users hold their mobile devices is so important when we are designing for touchscreen devices. If our designers didn&rsquo;t acknowledge the most common grips, each web experience would become a user&rsquo;s nightmare; your hands would be blocking important content which leads to user frustration and possible hand strain. The image below emphasizes the importance of touch target placement; it is pertinent that there are no touch targets in the upper left portion of the screen seeing that can take up to 1,527 milliseconds to reach and tap that area of the screen.</p> <p>This image displays the number of milliseconds it takes from tile highlight to user tap event.</p> <p><img src="/images/imagebank/Blog/Takeover/iphone-touch-time.jpg" alt="Touch Times for iPhone" width="100%" /></p> <p style="text-align: center;"><span style="color: #999999;"><em>Image Source: Schmidt, Mikkel Bo., 2014. </em><a href="https://medium.com/@mibosc/mobile-ui-ergonomics-how-hard-is-it-really-to-tap-different-areas-of-your-phone-interface-bb043d409af8#.4e19cslrf" target="_blank"><span style="color: #999999;"><em>https://medium.com/@mibosc/mobile-ui-ergonomics-how-hard-is-it-really-to-tap-different-areas-of-your-phone-interface-bb043d409af8#.4e19cslrf</em></span></a></span></p> <h3>Typing On Mobile Devices</h3> <p>Typing takes time, especially when typing on mobile devices and user error is very common and frustrating. How many times have you opted to sign in into a website or application using your social media account because it was easier than typing in your username and password? When designing and developing responsive applications, for usability purposes, it is best to make the user type as little as possible on mobile devices.</p> <p>Utilizing shortcuts, and prefilling fields where applicable is the best option when designing for mobile devices. Large, detailed online forms are fine to fill out on a desktop but a longer form displayed on a mobile phone is daunting for any user.&nbsp;</p> <p>There are many other shortcuts available to help input data without the user having to type it in. Phones are &ldquo;smart&rdquo; these days, they are capturing data without us even knowing. Geolocation data can be utilized to pin point the closest grocery store chain to a user based on their GPS coordinates. Cameras are used to scan QR codes or barcodes to eliminate the need to type the specifics of an item that users want to search for; more recently cameras are being used to enter credit card information.&nbsp; Using Voice Activation features, like Siri are often used to get information quickly without having to go through the trouble of opening up Google and manually searching for answers. A&bull;VIBE caters all projects to the user&rsquo;s experience and performs extensive usability testing to ensure that every web experience is enjoyable for all users and that experience translates across all screen sizes.</p> <p class="toolTip"><strong>Tip:</strong> Enhance mobile experiences by utilizing familiar mobile patterns like rotate, flick, pinch, and spread.</p> <h3>Design Standards for Touchscreen Devices</h3> <p>A&bull;VIBE adheres to the recommendations listed below for designing for mobile devices:</p> <ul> <li>To avoid touch errors, make clickable items bigger with lots of padding.&nbsp; The minimum touch target size should be <a href="https://developers.google.com/speed/docs/insights/SizeTapTargetsAppropriately" target="_blank">7mm</a>.&nbsp; For designers and developers, pick your poison: 7mm=44px=75em, although it is recommended that you use EM&rsquo;s or REM&rsquo;s when coding responsive websites or applications.</li> <li>The standard font size should be <a href="https://developers.google.com/speed/docs/insights/UseLegibleFontSizes" target="_blank">16px</a> with the default line height of 1.2em.&nbsp; Seeing that mobile devices are held closer to the user&rsquo;s eyes, the font can be a bit smaller than 1em.</li> <li>When applicable, it is best practice to prefill forms whenever possible to improve usability.</li> <li>There is no need for a full menu on mobile websites, a simple dropdown icon for navigation is all the user needs.</li> <li>Conduct proper usability testing prior to launching a website or web application to ensure that the chosen layout responds properly and is easy for users to navigate.</li> </ul> <p>To optimize performance, it is necessary to develop for spotty networks to ensure a quick loading time to not waste user&rsquo;s data.&nbsp; For other tips on optimizing performance, check out <a title="Designing for Performance article" href="/company/blog/designingforperformance/">&ldquo;Designing for Performance&rdquo;</a>.</p> Fri, 01 Apr 2016 00:00:00 GMT 7 Signs Your Site Needs a Redesign <p>Technology ages in dog years, every normal year that passes equates to seven years in the tech world. Spotting outdated websites is easy to see, but there are also some underlying reasons why you may want to consider a redesign. Here are some items to investigate within your current website to see if you are in need of a redesign.</p> <div class="column span_1_2"> <h4>1. It Does Not Display Well on Mobile Devices</h4> <p>Google&rsquo;s algorithm changed in 2015 for searches on mobile devices. Every business now needs a website that can display well on phones, also known as mobile-friendly. Smartphones have bypassed desktop searches and account for as much as 60% of all online searches. Not having a mobile-friendly or responsive website will hurt your business, if not today, then in the very near future.</p> </div> <div class="column span_1_2"><img style="margin-top: 50px; margin-bottom: 50px;" src="/images/imagebank/Blog/RWD/monitors.png" alt="Respnsive Website Design" width="100%" /></div> <div class="clear">&nbsp;</div> <p class="toolTip"><strong>Tip:</strong> Not sure how your site is ranked? Check out <a href="https://www.google.com/webmasters/tools/mobile-friendly/" target="_blank">Google&rsquo;s mobile-friendly test</a> and read our article on <a href="/company/blog/whatisresponsivewebdesign/">Responsive Design</a> to learn more.</p> <h4>2. No Content Management System</h4> <p>Content Management Systems, or CMS&rsquo;s, have jumped leaps and bounds in the past five years to keep up with responsive websites. Our team at A&bull;VIBE has completely revamped our custom CMS to reflect the necessity of devising a system that is intuitive and flexible for the portable devices so prevalent today. One of our largest pet-peeves is seeing a website that has a very outdated copyright date. The copyright date is so simple to update, but seeing that it is 2 or more years old makes your content seem out of date and unreliable. Having a CMS allows your team to update content at any time; with content being the most important factor for viewers and SEO, this becomes extremely valuable for your company. If you are still relying on web firms to update your content, it is time to upgrade to a scalable solution.</p> <div class="column span_1_2"> <h4>3. Visitor Bounce Rates</h4> <p><img style="display: block;" src="/images/imagebank/Blog/7SignsRedesign/Bounce-Rate.jpg" alt="High Website Bounce Rates" width="100%" /></p> </div> <div class="column span_1_2"> <p>We love working with our clients on their website Search Engine Optimization to ensure it performs just as well in searches as it displays. Using Google Analytics, it is easy to check on bounce rates for your website. A bounce rate means a user left on the same page they entered on. If the homepage bounce looks like a great test score, you have some serious problems. Google also uses this information for rankings within searches, and a high bounce rate tells search engines that visitors do not like what they see on your website.</p> </div> <h4>&nbsp;</h4> <h4>4. You Have a &lsquo;Frankenstein&rsquo; Website</h4> <p>Ok, while your website may not literally have angry, torch-wielding villagers chasing it, if you have made many small updates to your website over numerous years without consider the overall design, it may be considered a Frankenstein site. Having multiple places where your website does not match the original design can create a negative attitude of your company by your customers. One place we see this often is with blogs being in a different website, like WordPress. A web strategist can help you create a plan for a strongly branded and integrated website.</p> <p class="toolTip"><strong>Tip:</strong> Stay away from cluttered content and stick to a great color palette throughout the website. You can play with colors using <a href="https://color.adobe.com/create/color-wheel/" target="_blank">Adobe Color</a>.</p> <h4>5. Your Competitors Are Killing It</h4> <p>While your website may look fine, your competitor&rsquo;s website may look amazing. Websites only have a few seconds to capture the audience&rsquo;s attention or users will go somewhere else. Your website is your virtual storefront, and needs to looks its best. In the internet age where the visual display is king, your customers should not view your website as a joker.&nbsp;</p> <div class="column span_1_2"> <h4>6. Weak Speed or Performance</h4> <p>Users expect websites to load in two seconds or less; if it doesn&rsquo;t, a large share of people will click to another site. If a competitor&rsquo;s website loads 250 milliseconds faster than yours, research has shown that many people will choose the faster loading website. Keeping your page load time to a minimum will make your customers, and search engines, very happy.</p> </div> <div class="column span_1_2"><img style="margin-top: 50px; margin-bottom: 50px;" src="/images/imagebank/Blog/7SignsRedesign/Loading.jpg" alt="Website Loading and Performance" width="100%" /></div> <div class="clear">&nbsp;</div> <p class="toolTip"><strong>Learn More:</strong> Read our article <a href="/company/blog/designingforperformance/">Designing for Performance</a> to get more information on designing and optimizing websites.</p> <h4>7. The Design is Outdated</h4> <p>We understand how fast trends can come and go, but exceptional design can stand the test of time. Unless your brand sells to a trendy demographic, stay away from what&rsquo;s hot right now and choose a design that will look good years into the future; choosing a redesign also applies if your brand or services have changed since the website began and your design no longer matches your company. An aesthetically pleasing website translates into trust from your customers.</p> <p>While design is important, having a functional website that works for both your company and your customers is key. Website performance, capable displays, and fresh, updated content will make your business stand out among your competitors. A&bull;VIBE&rsquo;s team of web strategists, talented designers, and knowledgeable developers can help you achieve this goal! <a href="/consultation/">Schedule a Consultation</a>, or contact our Marketing Specialist at 503.296.8499 to learn more!</p> Tue, 01 Mar 2016 00:00:00 GMT UX Simplicity leads to Conversion Success <p>A New York Times study was conducted at a grocery retailer where employees set up a table with 24 different flavors of jam, and then the next day with only six different flavors of jam.</p> <p><span>Prior to this study, the common marketing theory was that more choices are better for customers. People like more options, so providing more flavors should lead to more sales. The<span class="apple-converted-space">&nbsp;</span>results from this study<span class="apple-converted-space">&nbsp;</span>proved otherwise.</span></p> <h4>Jammed with Jams</h4> <p><img style="float: right; padding: 0px 0px 0px 20px;" src="/images/imagebank/Blog/UX%20Simplicity/_jams.jpg" alt="" width="341" height="659" />During the time periods when 24 flavors were offered, 20% more people stopped to sample the jams than when only six jams were offered. These numbers seem to favor more choices, but the important question is this: which group actually purchased more?</p> <p><span>When all those people sampled many flavors, only 3% purchased because there was too much information to analyze. The customers who sampled only six flavors, had a whopping 30% purchased! That&rsquo;s a huge increase.</span></p> <p><span>Customers might be attracted to a large number of choices, but when it comes time to make a purchase, too many options make decisions too complicated and lead to fewer sales.</span></p> <p>There is a name for this, it&rsquo;s called <a href="https://en.wikipedia.org/wiki/Analysis_paralysis" target="_blank">Analysis Paralysis</a> where too many options become stress for our short term memory to process, hence rendering us incapable of making a decision or taking action.</p> <p><span>People have created shortcuts around this problem. You go to the store and see that there are 1,505 different toothpastes all stacked up: Cavity Prevention, Enamel Protection, Sensitivity, Healthy Gums, Fluoride, Teeth-whitening, Multiple Flavors, so what do you do? You quickly buy the brand you recognize, can depend upon, and then get away from there as fast as you can to avoid the stress of having to analyze.</span></p> <p><span>However, your company wants people to take a risk, stepping out of their comfort zone and trying your brand. You have tons of information to offer about why your brand is better, but you have to make it feel smart and easy.</span></p> <p class="toolTip"><strong>TIP:&nbsp;</strong>If the online process you&rsquo;re building is complicated, break it up into smart bite sized chunks and let the complex seem invisible.</p> <h4>How does this apply to your website?</h4> <p><img style="float: right; padding: 0px 0px 0px 20px;" src="/images/imagebank/Blog/UX%20Simplicity/_fields.jpg" alt="" width="341" height="659" />Too many decisions will tire the users and creates less interest in accomplishing any task, including a simple click.<span> Overcomplicated main navigations, paragraphs and paragraphs of text, too many images, multiple ads and buttons, etc. all contribute to Analysis Paralysis and fatigue the user.</span></p> <p><span>Every attempt should be made to reduce the user&rsquo;s responsibilities. Find the balance of content, attention choices, and lead the user&rsquo;s eye through the composition of what you want to communicate and what the user wants to accomplish.&nbsp;</span></p> <p><span>A study was conducted that used an online contact form comparing eleven form fields to four form fields. When the form fields were narrowed to only four, the weekly submissions increased by 160%, and complete conversion rates increased by 120%<span>. Less is more.</span></span></p> <p><span>Getting &ldquo;many&rdquo; leads is not really the main goal, the priority should be getting many high quality leads. A high quality lead can be someone who has already learned about your products or services and is now impressed at how easy you have made it for them to contact you.</span></p> <p><span>If your website looks like the Las Vegas strip with blinking lights and signs everywhere, this will excite them, but will also create numbness and apathy. If everything is simultaneously shouting equally at them, inaction will certainly be the outcome.</span></p> <p><span>It&rsquo;s simpler to create complex interfaces because it&rsquo;s so complex to simplify them. Everyone should invest the time because interface simplicity is proven more successful.</span></p> <p class="toolTip"><strong>Read more: </strong>Check out our other articles about this topic in <a title="Site Structure" href="/company/blog/sitestructure/" target="_self">Site Structure</a> and <a title="Designing UX" href="/company/blog/designingux/" target="_self">Designing UX.</a></p> <p><em>Thank you Neil Patel for your inspirations and observations.</em></p> Mon, 01 Feb 2016 00:00:00 GMT Top 15 Logo Changes From 2015 <p>Finding that perfect balance of refresh and homage is a real challenge for designers. Solving design problems such as awkward shapes that don't work well, colors that go out of fashion, or showing a company's change and modernization are all real reasons for a branding refresh, but sometimes it does appear as though a change was never really needed in the first place.</p> <p>While some logos look "undesigned", appearing like the "just rolled out of bed hairstyle but it actually took 30 minutes to accomplish." Other logos are a departure from their tried and true self. What defines why logo redesigns need balance? What do you think of these logo changes from 2015?</p> <h4>#15 LA Clippers</h4> <p><img src="/images/imagebank/Blog/2015%20Logo/laclippers.jpg" alt="LA Clippers Logo" width="100%" /></p> <p><span>One of the few on our list that changed their logo away from flat design</span>, the Clippers abandon their retro look. The curved lines could resemble the seams in a basketball, or the mad/squinty emoticon to show you how tough they are. With a stylized acronym, inside a ball, sitting on top of lines, on a title, on other lines - it's really a logo in a logo on a logo, but, when you hold a <a href="http://www.designcrowd.com/special/la-clippers-logo-redesign" target="_blank">design contest</a> for a new logo, we never expect a good result. Dear Designers, please never particpate in a design contest! When you do, you devalue your worth and every designer on the planets' worth. The poor Clippers trying to get by on their shoe-string budget. Don't do it people!</p> <p>&nbsp;</p> <h4>#14 Best Western</h4> <p><img src="/images/imagebank/Blog/2015%20Logo/bestwestern.jpg" alt="Best Western Logo" width="100%" /></p> <p>Also not using flat design, Best Western goes a completely different direction. They removed all interest and color contrast, and since designers are taught how to make a shiny glass ball in their first semester at school, this design looks like they landed circa 2003 with someone using the generic trinity of Photoshop blending modes: drop shadow, bevel, and gradient. &nbsp;What, no stroke or lens flare?! #blahfailuninteresting</p> <p>&nbsp;</p> <h4>#13 Microsoft Edge</h4> <p><img src="/images/imagebank/Blog/2015%20Logo/edge.jpg" alt="Microsoft Edge" width="100%" /></p> <p>With Microsoft now ditching most support for their earlier versions of its mainstay browser Internet Explorer, the attempt to rebrand their new browser, Edge, could have used a few more revisions. Some people will argue that Microsoft is hanging on to the familiarity of the "e" shape to help their classic users find the shortcut icon and click, but we think that in order to prove to the rest of the world that something dramactic has changed they should have embrace an entirely different design direction. Although very professional, this logo is safe and too convienent to ignore.</p> <p>&nbsp;</p> <h4>#12 Verizon</h4> <p><img src="/images/imagebank/Blog/2015%20Logo/verizon.jpg" alt="Verizon Logo" width="100%" /></p> <p>So yeah, it's pretty easy to improve on the old logo, but while the new shape is probably much easier for their designers to work with, and the heavier font will read easier on mobile devices, it really fails to have any interest, imagination, or make any statement about the company. Unless what they are saying is: "we are a thick lowercase company that's absent of color, red check." Our thoughts are that they think their brand is so recognizable and solid enough that it only needs to have minimal design applied; we'll have to wait 10 years to find out. Stay tuned!&nbsp;</p> <p>&nbsp;</p> <h4>#11 Spotify</h4> <p><img src="/images/imagebank/Blog/2015%20Logo/spotify.jpg" alt="Spotify Logo" width="100%" /></p> <p><br />Welcome to flat design! Oh, Spotify. We're not sure there needed to be any change at all. We love your program, but not your new <em>(fashionable?)</em> color. Don't be surprised when this logo changes again this year, it's not easy being this color of green.</p> <p>&nbsp;</p> <h4>#10 KFC</h4> <p><img src="/images/imagebank/Blog/2015%20Logo/kfc.jpg" alt="KFC Logo" width="100%" /></p> <p>Here's a brand that is looking to its history with veneration, and it's turning out quite fun and gloriously simple. Although here we are only comparing the old and new marks, the entire branding and packaging has received an overhaul using large red striped bars, flat design, plenty of negative space, and a nice oversized font. Blending the best of what is great now, with what was great then, makes it feels solid, secure, and trustworthy. Read this <a href="http://www.underconsideration.com/brandnew/archives/new_identity_and_packaging_for_kfc_by_grand_army.php#.VphBTfnF-So" target="_blank">review</a> to see more details about their rebrand.</p> <p>&nbsp;</p> <h4>#9 Johnnie Walker</h4> <p><img src="/images/imagebank/Blog/2015%20Logo/johnniewalker.jpg" alt="Johnnie Walker Logo" width="100%" /></p> <p>Maintaining their classic main dandy character, Johnnie Walker desperately needed an update to their scripted font. The handwritten fonts just don't work at the smaller sizes required by mobile devices nowadays and their new all caps serif is working splendidly. Some might be concerned about adding more details to the 5th major variation of the Johnnie Walker illustration, but we think it shows that there are fine details to crafting a product with quality. The older version was too anonymous for our times, similar to the old Apple iPod silhouettes.</p> <p>&nbsp;</p> <h4>#8 OpenTable</h4> <p><img src="/images/imagebank/Blog/2015%20Logo/opentable.jpg" alt="Open Table Logo" width="100%" /></p> <p>Once again the new overall shape is much easier to work with and the heavier font will make the brand much easier to read on mobile devices. While the color red is notoriously used to make us hungry, and this brightened version of red is lighthearted and candied, we are slightly confused by the logo shape. Are we looking at the top of a wine bottle with the cork off to the side? Is it a bullseye? Or is it just a big "O"?</p> <p>&nbsp;</p> <h4>#7 Oculus</h4> <p><img src="/images/imagebank/Blog/2015%20Logo/oculus.jpg" alt="Oculus Logo" width="100%" /></p> <p>The new VR lens logo definetely moved in the right direction. The all-black is a bit bland, but we do understand how it fits the sleek non-descript aesthetic they are creating. They're allowing what the product <em>does</em> to be the life and color of their brand and the new mark looks like their product, so, BONUS!</p> <p>&nbsp;</p> <h4>#6 TV Land</h4> <p><img src="/images/imagebank/Blog/2015%20Logo/tvland.jpg" alt="TV Land Logo" width="100%" /></p> <p>When everyone is switching to all lower case, we like the fact that TV Land is switching to ALL CAPS! Since TV Land is appealing to Gen Xers who grew up with them, the maturity of the entertainment and the branded look needed to keep up as the old logo was too young and whimsical. The new flat banner shape adds interest, while showing upward movement on a slight angle. The new color is definitely cultivated, but, more like a color to paint your living room than an eye-catching logo. We wonder if they will play around with the color in future uses? Nice job!</p> <p>&nbsp;</p> <h4>#5 Coors Light</h4> <p><img src="/images/imagebank/Blog/2015%20Logo/coors.jpg" alt="Coors Light Logo" width="100%" /></p> <p>One of the best examples of the shift to flat design on our list. They held onto their collegiate Coca-Cola script but cleaned it up and flattened it out adding a killer new font for the "Light", much better! This is quite a big move and somehow feels exactly what you think the brand to be, that's a strong balancing act right there, kudos! Though we are not sure we agree with cutting off the "C", it does look great overall.</p> <p>&nbsp;</p> <h4>#4 IHOP</h4> <p><img src="/images/imagebank/Blog/2015%20Logo/ihop.jpg" alt="IHOP Logo" width="100%" /></p> <p>"Turn your frown upside down!" Another good example of a shift to simple, flat design. We do love the fact that they are not taking themselves too seriously. They are saying that they are a clean, family-friendly, fun place to enjoy a meal. The old font still works nicely and getting out of that trap of a rectangle helps to make it feel open and light-hearted. FYI, take note that the International House Of Pancakes first started using the acronym IHOP way back in 1973. OMG!</p> <p>&nbsp;</p> <h4>#3 Spike</h4> <p><img src="/images/imagebank/Blog/2015%20Logo/spike.jpg" alt="Spike Logo" width="100%" /></p> <p>Definitely an <a href="https://en.wikipedia.org/wiki/Onomatopoeia" target="_blank"><span class="comment-copy">onomatopoeia</span></a> (or should we say f<span class="comment-copy">ontomatopoeia, haha). The action of the new font is very cool, it offers opposing directions and conflict, yet neutral and full of impact. The new logo is super simple, but looks like its name. We are down, Spike.</span></p> <p><span class="comment-copy">&nbsp;</span></p> <h4><span class="comment-copy">#2 Facebook</span></h4> <p><span class="comment-copy"><img src="/images/imagebank/Blog/2015%20Logo/facebook.jpg" alt="Facebook Logo" width="100%" /></span></p> <p><span class="comment-copy">Such a subtle change, most people did not even notice. We like the softer logo, Facebook, with a small shift toward popular circle typefaces and it is clearly the best example of "undesign" on the list. Refreshed and under the radar, well done.&nbsp;<br /></span></p> <p><span class="comment-copy">&nbsp;</span></p> <h4><span class="comment-copy">#1 Google</span></h4> <p><span class="comment-copy"><img src="/images/imagebank/Blog/2015%20Logo/google.jpg" alt="Google Logo" width="100%" /></span></p> <p><span class="comment-copy">We thank you Google for the new, well deserved logo. Hopefully the old one gets to retire in a nice community with other venerable logos. That being said, the reality is that Google has the most flexible logo ever and we have flexed right along with it. Google has changed their logo hundreds of times to represent an historic day, or to play a witty game, or to pay tribute to a sad or mournful moment in time. Because of their business model and value to the masses, we might never see a company logo that has that same capacity. So with their new sans serif, soft, clean look and a nod to their colorful history, the new Google logo is #1 on our list!<br /></span></p> <p class="toolTip">&nbsp;Hungry for more? Read the top <a href="/company/blog/8notablelogochangesin2014/">8 logo changes from 2014</a>.</p> Fri, 15 Jan 2016 00:00:00 GMT Building a Robust Web That Lasts <p>With the Internet going into its 3<sup>rd</sup> decade, it is good to look back and see how it all began. A computer scientist named Tim Berners-Lee proposed a concept of hypertext in the 1980&rsquo;s. In the late 1980&rsquo;s, Berners-Lee had an idea to connect hypertext to Transmission Control Protocol and the domain name system which created HTML and the World Wide Web. In 1990, he created the first web browser.</p> <p>The first website was activated on August 6, 1991, and can still be found online today at <a href="http://info.cern.ch" target="_blank">http://info.cern.ch</a>. It provided information on what the World Wide Web was, how to use the browser, and how to set up a web server. In 1994, Berners-Lee founded the W3C foundation (World Wide Web Consortium) which created standards to improve the web. They decided this information should be free, with no patents or royalties. This allowed for the expansion of the web to what we see today.</p> <p class="toolTip"><strong>Fun Fact:</strong> The two forward slashes in the beginning of a web address (http://) were &ldquo;unnecessary&rdquo; when it was first created, but Berners-Lee thought it seemed like a good idea at the time.</p> <p>HTML is one of the few things within the technology world that is backwards compatible. The site listed above still works to this day, over 30 years later. One reason for this is that HTML was designed to be resilient and fault tolerant. This means if a web browser does not understand a tag, it will just ignore it and display the content within.</p> <p>During the time period of 2002 &ndash; 2006, W3C developed an alternative language to HTML called XHTML 2, which was the next step for XHTML. It was short lived because of the strict syntax, no backwards compatibility, and it was too strict for general web coding. In 2009 it was retired after being rejected by the web community.</p> <h4>The Robustness Principle</h4> <p><img class="imageRight" src="/images/imagebank/Blog/Robust/phone.gif" alt="credit card example" />Jon Postel was a computer scientist who was key to the development of Internet standards. He was famous for the quote, &ldquo;Be liberal in what you accept, and conservative in what you send.&rdquo; This is known as the Robustness Principle. This principle allows information to be accepted in many different ways, but returns it in the same format every time. This can be seen across the Internet when it comes to forms. From entering addresses to credit card numbers, people have many ways they enter their information. The Robustness Principle suggests that developers should try not to force users to enter information in a certain way, but accept the information and then format it properly.&nbsp;&nbsp;</p> <h4>Responsive Imagery</h4> <p>Images are another good example of how HTML is resilient. There are many tags that can be added within an image tag. A recent tag from HTML5 that is helpful in responsive websites is the &ldquo;srcset&rdquo; tag. This tag allows browsers to display higher resolution image, usually for retina displays. Here is an example of the srcset tag:</p> <p>&lt;img src="small.jpg" srcset="medium.jpg 1000w, large.jpg 2000w" alt="yah" /&gt;</p> <p>&nbsp;If the browser is older and does not understand srcset, it will just skip it and use the typical src tag. If it does understand, it can display different images based on viewport size, as shown with the 1000w and 2000w. &nbsp;</p> <p class="toolTip"><strong>Tip:</strong> Using the srcset tag with an image allows for the smallest version of the image <span>that fits the screen size&nbsp;</span>to display, increasing page download speed.</p> <h4>Progressive Enhancement</h4> <p>&ldquo;When an escalator breaks, it becomes stairs. Websites should be able to partially break and still allow you to get things done.&rdquo; &ndash; Christian Heilmann</p> <p>With new functionality and enhancements happening every day within web development, we should remember to keep building a robust web that lasts. By identifying core functionality within links, forms, and data displays, a plan can be developed to allow fallbacks for these features. These fallbacks should be the same format that has been around for over 30 years, HTML and CSS.</p> <blockquote> <p><em>Thanks to An Event Apart San Francisco 2015 and the presentation by Jeremy Keith for the information.</em></p> </blockquote> Tue, 01 Dec 2015 00:00:00 GMT Designing for Performance <p>Performance is user experience. User experience is the core of what we do here at A&bull;VIBE. We strive to create a great user experience in all of our web applications. Designing web applications is a balancing act between business goals and user needs. We want fast, functional, and lightweight applications; but we also want beautiful, memorable, and on-brand applications.</p> <p>Audiences want content fast. Fast websites build trust and are memorable. According to a <a href="http://www.nytimes.com/2012/03/01/technology/impatient-web-users-flee-slow-loading-sites.html?pagewanted=all&amp;_r=1" target="_blank">2012 New York Times study</a>, shoppers expected pages to load in two seconds; at three seconds, a large share abandoned the site. People will visit a website less often if it is slower than a close competitor by more than 250 milliseconds&mdash;that is a quarter of a second! We can market performance as a feature to our clients and to their users.</p> <p>In order to optimize performance, a web application&rsquo;s images, custom web fonts, interactions, style sheets, and third party scripts must be considered. &nbsp;There are numerous ways we can optimize these to increase speed and performance. Fast websites do not have to be boring!</p> <p>Goals should be created to prioritize performance from the beginning of a project by setting a performance budget, being deliberate in decisions and actions, and by communicating these actions. While doing so, keep mobile users in mind: create reusable patterns, avoid unneeded styles, and get designs into code earlier. Web applications should be tested on real devices and tested using different connection speeds.</p> <p>A performance budget is a goal used to guide design and development. It is a tangible way to talk about performance. Consider every project decision as an item that has consequence. These budgets can be browser-based or user-experience-based. For example, set a budget of ten seconds for the amount of time that a page should load over a sub-3G connection, or set a per-page budget of 400kb or 15 requests. The important thing to note is that the budget should be followed at every step of the development process. If an image exceeds a page weight budget, then consider replacing the image, optimizing it, or removing some other page feature.&nbsp;The key to designing for performance is communicating performance goals to the team and to clients. Include performance budgets in project documents.</p> <p><img class="imageRight" src="/images/imagebank/Blog/Performance/graphs-and-mouse.jpg" alt="" />A user experience assessment can be created by identifying the strengths and weaknesses of current user experiences, including:</p> <ul> <li>Usability</li> <li>Content</li> <li>Navigation</li> <li>Information architecture</li> <li>Performance</li> <li>Workflow</li> <li>Brand</li> </ul> <p>It is also important to set a web font budget. Each unique font added to a web application can require an external request to the font source and adds additional loading time. Each font style&mdash;like italic or bold&mdash;can also add extra requests and loading. Do more with fewer fonts, and always include font fallbacks.</p> <p>Another way to improve performance is by manipulating the images to be used. SVGs can replace simple images and can scale up for retina devices. If they are defined inline, they also eliminate the need for an HTTP request. JPEGs are able to reduce noise and other complexity. The export quality can be decreased and unimportant areas can be blurred.</p> <p>Web applications can also be optimized through code enhancements. Create repurposable code. Rename non-semantic elements. Remove inefficient selectors. Remove unnecessary elements. Create patterns through style guides.</p> <p class="toolTip"><strong>Fun Fact:</strong> <a href="http://www.Webpagetest.org" target="_blank">Webpagetest.org</a> is a great tool for analyzing a web application&rsquo;s performance.</p> <p>A great way to optimize web applications further is by analyzing them, using tools like <a href="http://www.webpagetest.org/" target="_blank">webpagetest.org</a>. This site provides data on page weight, time that a page takes to start to render, time that a page takes to fully load, number of HTTP requests, and speed index. According to <a href="http://www.webpagetest.org/" target="_blank">webpagetest.org</a>, "The Speed Index is the average time at which visible parts of the page are displayed. It is expressed in milliseconds and dependent on size of the view port." This tool allows you to view the data in graphs, videos and charts. It also allows you to compare site performance.</p> <p>Using these tips, we can continue to produce beautiful and&nbsp;functional&nbsp;user&nbsp;experiences.</p> <blockquote> <p>Thanks to An Event Apart San Francisco 2015 for presenting topics on performance. In particular, the presentations <em>Design Decisions Through the Lens of Performance</em> by Yesenia Perez Cruz and <em>Designing for Performance</em> by Lara Hogan provided great insight.</p> </blockquote> Sun, 15 Nov 2015 00:00:00 GMT Is Your Website Secure? <p>The Internet can be very powerful and allows us to do some amazing things with data. But as Uncle Ben once said, "With great power, comes great responsibility." Ensuring your data is secure and safe in the constantly fluctuating battlefield of cyberspace is very important to us. This article will explain a few ways in which malicious users may attempt to put your data at risk. While not a comprehensive guide, this will serve as an eye-opener to the many things web developers have to be concerned about when it comes to security.</p> <h4>Protect Your Sessions</h4> <p>Two important concepts for web applications to protect against are Session Hijacking and Session Fixation. Any time you interact with a website, that website creates a unique session for you and your browser. Protecting that session is paramount. If an attacker can manipulate the website using your session, the website will not be able to distinguish your valid actions from those of an unwanted user. A malicious user may hijack a session using various approaches from "sniffing" data being sent across non-secure means, to inserting persistent cross-site scripting code to run in other users&rsquo; sessions.&nbsp;</p> <p>Data sniffing can be stopped by having a Secure Socket Layer, also known as an SSL, on your website. You can tell when a site is secure because the URL will start with https:// instead of http://. You will also see a padlock icon in most browsers that can be clicked for more information. SSL's are relatively inexpensive and should be used anywhere where personal, or sensitive data is being sent or received. Some websites are even choosing to secure the entire site, rather than only securing forms or login sections of the site.</p> <p class="toolTip"><strong>Tip:</strong> Even if a website is secure, sending email is NEVER secure. You should never send unencrypted personal or sensitive information over email as this can easily be intercepted, or could be stored on a computer that has the potential for getting hacked. You should only send this information within forms that have an SSL.</p> <p>Cross-Site Scripting (XSS) uses scripts to run a malicious action. This can be reflected, using a direct link to run the script; or stored (also known as persistent) where a script is injected into the database and triggers each time that data is accessed. Sites that have comment sections or forms that submit to a database can be especially vulnerable to XSS. Developers can add validation to these forms which rely on whitelisting (allows only certain characters) or blacklisting (allows everything except the specified&nbsp;bad items). Most commonly, these would prevent custom HTML, JavaScript, or DIV tags from being entered into form fields.</p> <p>The history of the Internet is riddled with famous examples of large and well-known companies falling victim to such attacks. One famous example is the "samy" hack. Through the use of a cross-site script, over one million MySpace user profiles were updated to say, &ldquo;but most of all, samy is my hero.&rdquo; A hacker used JavaScript in DIV tags so that whenever someone viewed a profile with this code, they would automatically be added as his friend and the quote above would be added to their profile; from there the code would propagate even further. After five hours, "samy" had 1 million friends and MySpace closed the site for repairs shortly after.</p> <h4>Protect Your Database</h4> <p><img class="imageRight" src="/images/imagebank/Blog/Security/secure.jpg" alt="Website Security" />The last example of cybersecurity concerns is that of Structured Query Language (SQL) injection. Data stored on a database is very often stored and accessed via a programming language known as SQL. SQL injection is an attack to insert and have the database run unwanted SQL code, which can compromise the data within. For example, if a site uses SQL and it allows any text in a form to be run by its queries, an attacker may type SQL code in a form field that in essence means, &ldquo;give me all the users&rsquo; login information, too!&rdquo;</p> <p>Session security and protection from SQL injection are just a couple of the many security risks web developers must be mindful of today. &nbsp;Fortunately, there are many tools to utilize and we at A&bull;VIBE take these situations seriously. The first step in defending a site from these risks is to develop sites with security in mind and avoid the na&iuml;ve assumption that an attack will never happen.</p> Sun, 01 Nov 2015 00:00:00 GMT PDX Palettes Fall 2015 <table style="width: 92%;" border="0"> <tbody> <tr> <td style="padding: 0 2%;"> <p style="text-align: center;"><img src="/images/imagebank/Blog/PDXPalettes/Mercury.jpg" alt="" width="100%" /></p> <p style="text-align: center;">NW Portland</p> </td> <td style="padding: 0 2%;"> <p style="text-align: center;"><img src="/images/imagebank/Blog/PDXPalettes/MtHood2.jpg" alt="" width="100%" /></p> <p style="text-align: center;">Mt. Hood</p> </td> </tr> <tr> <td style="padding: 0 2%;"> <p style="text-align: center;"><img src="/images/imagebank/Blog/PDXPalettes/Deer.jpg" alt="" width="100%" /></p> <p style="text-align: center;">NW Portland</p> </td> <td style="padding: 0 2%;"> <p style="text-align: center;"><img src="/images/imagebank/Blog/PDXPalettes/33rdyamhill.jpg" alt="" width="100%" /></p> <p style="text-align: center;">SE Portland</p> </td> </tr> <tr> <td style="padding: 0 2%;"> <p style="text-align: center;"><img src="/images/imagebank/Blog/PDXPalettes/Quarter-to-Four.jpg" alt="" width="100%" /></p> <p style="text-align: center;">SW Portland</p> </td> <td style="padding: 0 2%;">&nbsp;</td> </tr> </tbody> </table> <p style="text-align: center;">&nbsp;</p> <p>&nbsp;</p> <p style="text-align: center;">&nbsp;</p> Thu, 01 Oct 2015 00:00:00 GMT What is Responsive Web Design? <p>The term &ldquo;responsive web design&rdquo; has greatly increased in popularity over the past couple of years. It has become so mainstream that web designers have almost completely adapted this concept as the new standard. The takeover of responsive design has come about because of the explosion of touch screens and mobile devices. According to <a href="http://techcrunch.com/2015/01/12/80-of-all-online-adults-now-own-a-smartphone-less-than-10-use-wearables/" rel="nofollow" target="_blank">some sources</a>, 75-80% of US adults own a smart phone as of December 2014. This is not far behind the 91% that own a Personal Computer or laptop.</p> <h4>Responsive Web Design Explained</h4> <p><img src="/images/imagebank/Blog/RWD/monitors.png" alt="how responsive design works on different devices" width="100%" /></p> <p>The idea behind a responsive website means the website will respond, or react, depending on the user's screen size, whether on an iPhone 3G screen or a large desktop monitor.&nbsp;Websites respond to screen sizes using a fluid grid system, where each column of the grid can resize or reposition depending on the width of the screen size. Within each proportion, the columns can shrink or grow to maximize the display area. For smaller screen sizes, the columns can stack on top of each other to allow for easy readability while not losing any elements of the content.</p> <h4>How Google is Changing Searching, Again</h4> <p><img style="float: right;" src="/images/imagebank/Blog/RWD/mobile-friendly-search.jpg" alt="Google's Mobile-Friendly listing" width="33%" />Starting April 21, 2015, Google will be updating their search algorithms by giving higher priority to websites that are mobile friendly. They have already been identifying websites that are mobile friendly with a tag placed before the website description. This has the possibility of having a huge impact on organic search rankings for companies that have not made the decision to create a mobile-friendly website. While not only affecting rankings, it will also influence a viewer&rsquo;s choice of which website to visit, with mobile-friendly being a top choice. While Google has verified that users on a tablet will be treated like desktop users, this will be changing in the not-so-distant future.&nbsp;</p> <p><a title="Google Analytics" href="http://www.google.com/analytics/" target="_blank">Google Analytics</a> provides great data on how many of your users are on a mobile device; the average for websites is about 30% currently, but this number is expected to be over 50% within the next couple of years. Even if your reports show smaller precentages, current trends indicate that <a href="http://en.wikipedia.org/wiki/Organic_search" target="_blank">organic search engine rankings</a>, both mobile and desktop, will continue to be based on whether or not your website is mobile friendly.</p> <p class="toolTip"><strong>Tip:</strong> Websites can be verified if Google sees them as mobile friendly or not by going to this website: <br /><a href="https://www.google.com/webmasters/tools/mobile-friendly/" target="_blank">https://www.google.com/webmasters/tools/mobile-friendly/</a>.</p> <h4>Mobile-Friendly Websites</h4> <p>In the past, one way a company could adapt is by creating a separate mobile website, which meant they would have two different versions of a website: one version for phone and another version for desktop. While a mobile website is a good start, it is restrictive. First, businesses must update separate versions of their websites, which can double the time it takes to make any edits to the site. It also leaves out a large portion of users on tablets. From Microsoft&rsquo;s Surface to Apple&rsquo;s iPad, many people are opting for a device that is much easier to carry with them than a laptop. Even with the limitations of a mobile site, some companies are finding mobile sites to be a good temporary measure based on the needs of their customers.</p> <h4>The Future of Responsive Web Design</h4> <p><span>There is no longer a standard phone, tablet or monitor display size, and new screen sizes and resolutions for these devices rise each year. Our methods of interacting with the web and the accessibility of the Internet continue to evolve. Having a responsive website is the best way to know your site will give your customers the best user experience possible.</span></p> <p><span>Technology has proven that it can progress quickly. How many times have you bought a new phone just to have something better come out a short time later? So, what does this mean for responsive web design? Will it be a thing of the past in the near future? While responsive web design does have a few limitations, its flexibility and power will be around for many years to come.</span></p> Tue, 15 Sep 2015 00:00:00 GMT Put a Nerd On It <p>Did you know that Dr. Seuss coined the term &ldquo;nerd&rdquo; in his 1950 book <em>If I Ran the Zoo</em>? We love the term and have put it on everything from ink pens to t-shirts. If you love it as much as we do, show us your nerd love by downloading our wallpaper &ldquo;Put a Nerd On It,&rdquo; in honor of the TV show Portlandia&rsquo;s quote &ldquo;Put a Bird On It.&rdquo;</p> <p>&nbsp;</p> <p><img style="display: block; margin-left: auto; margin-right: auto;" src="/images/imagebank/Blog/NERDONIT.png" alt="" width="497" height="308" /></p> <h4>Sizes:</h4> <ul> <li><a href="/downloads/files/Wallpapers/1280x800.JPG" target="_blank">1280x800</a></li> <li><a href="/downloads/files/Wallpapers/1400x900.JPG" target="_blank">1400x900</a></li> <li><a href="/downloads/files/Wallpapers/1680x1050.JPG" target="_blank">1680x1050</a></li> <li><a href="/downloads/files/Wallpapers/1920x1080.JPG" target="_blank">1920x1200</a></li> <li><a href="/downloads/files/Wallpapers/2560x1600.JPG" target="_blank">2560x1600</a></li> <li><a href="/downloads/files/Wallpapers/2880x1800.JPG" target="_blank">2880x1800</a></li> <li><a href="/downloads/files/Wallpapers/iPad.JPG" target="_blank">iPad</a></li> <li><a href="/downloads/files/Wallpapers/iPhone%205.JPG" target="_blank">iPhone 5</a></li> <li><a href="/downloads/files/Wallpapers/Samsung%20Galaxy%20s5.JPG" target="_blank">Samsung Galaxy s5</a></li> </ul> Sat, 01 Aug 2015 00:00:00 GMT Designing UX <p><span>User experience: You&rsquo;ve heard of it, but what does it mean? What does it affect? Why is it important? All great questions&hellip;shall we get started?</span></p> <h4>Who<strong>&nbsp;</strong></h4> <p><span>Arguably, the most important thing to consider when doing user-experience- focused design is grasping audience attention. Do you want to sell skateboards online? If so, you probably want to think of targeting your advertisements and web experience to young, athletic adults.</span></p> <p><span>Now, the tricky part of this is not pigeonholing your design toward one user type. Counter intuitive? Map out all the user types you would expect to visit your website and come up with a way to make your online shopping cart easy to use for both 18-year-old Johnny Doe, as well as Jane Doe, his 54-year-old mother, buying the skateboard for his birthday.</span></p> <h4>What&nbsp;</h4> <p><img class="imageRight" src="/images/imagebank/Blog/UI%20UX/lost-tourists.jpg" alt="Lost Tourists" />UX is a strategy used for designing <strong>processes</strong> that users interact with. This is most frequently referenced when designing for web, but it doesn&rsquo;t stop at the digital world. Here are some examples of UX in our daily lives:</p> <ul> <li>Bus routes</li> <li>Checking into a hotel</li> <li>Being served at a restaurant</li> <li>Filling prescriptions</li> <li>Changing settings on the TV</li> <li>Shopping in a mall</li> </ul> <p><span>It may be strange to think that some of the listed items start with a UX design process. A good user experience design should be invisible to the end users.</span></p> <p><span>Every year, hundreds of thousands of patents are filed through the U.S. Patent Office. Most new inventions are created to make specific tasks <em>easier. </em>There is a constant need and desire to make things more accessible and effortless.</span></p> <h4>When&nbsp;</h4> <p><span>Let&rsquo;s jump back into the beginning of the digital age. The first website was introduced in 1991. Those who owned a computer in the early 90&rsquo;s can vouch that there was a pretty strong learning curve for this brand new technology. Home computers and the concept of the Internet were unique and unfamiliar, and designing for this new concept was in its infancy. No one really knew how people would interact with this thing since there were very few users of computers at the time. There were precedents that needed to be set for UX, and now after 25+ years there are a lot of studies on what works, and what doesn&rsquo;t.</span></p> <p>We have become spoiled with good UX design, so it is easy to tell when more work is needed to create a successful design. The attention span of current web users is so short that <a href="http://time.com/12933/what-you-think-you-know-about-the-web-is-wrong/">55% only spend 15 seconds on a website</a>. Still think your website doesn&rsquo;t need a refreshing new look with great UX? Think again.</p> <h4>Where&nbsp;</h4> <p><span>Think about an average morning: Alarm clock buzzes, coffee maker brews, and smart phones need to be checked. All of these mechanisms have been designed to be easy and simple to use, and those are just the ones used before 9:00 a.m. How many things do you interact with on a daily basis that have been specifically created to make your life easier or more luxurious?</span></p> <p><span>With an ever-growing number of people partaking in personal technology, the world is learning at a remarkable rate what people want. Smart devices have allowed designers to dive into more personal and advanced UX. A person can go into a physical store, download the store&rsquo;s app, and view an interactive map of the store&rsquo;s floor plan. Not only is this type of user experience portable, but it makes everything more efficient.</span></p> <h4>Why&nbsp;</h4> <p><img class="imageRight" src="/images/imagebank/Blog/UI%20UX/planning-a-user-interface.jpg" alt="Planning User Interfaces" /></p> <p><span>User experience is being studied for a number of reasons, from personal safety to outright enjoyment. From a marketing standpoint, the better the UX, the more successful the business. A grocery store with an intuitive shopping environment, a drive-thru car wash, a restaurant with attentive staff, or a tech company with an easy-to-use website are all examples of businesses working for their audience.</span></p> <p><span>Consumers are more likely to use or shop for items based on how simple their experience was. The inspiration for user experience is the phrase, &ldquo;Don&rsquo;t make me think.&rdquo; If a user can get from point A to point B with little effort and thought, you&rsquo;ve done your job.</span></p> <h4>How&nbsp;</h4> <p>Some of the best technological UX design is meant to resemble human nature. Have you ever entered your password wrong and the login box shook at you? That small animation is a human gesture letting the audience react to a &ldquo;no&rdquo; head shake directing them to the error made.</p> <p><span>We have learned that hiding distracting information and consolidating actions into fewer steps makes the process easier to digest.&nbsp; Letting users see how long a process takes helps users comprehend time expectancy on any given task. It is in our nature to want to see the end of something before starting&mdash;a race, a book, a road trip, or a blog.</span></p> <h4>Sorted Out<strong> &nbsp;</strong></h4> <p><span>It is easy to forget how integrated technology is in our everyday lives, until it is not available. The various intuitive processes we depend on came into being through extensive studies and research that created a natural and invisible user experience.</span></p> <p><span>When starting your own design process, think of the who, what, when, where, why, and how. Do your ideas complicate things or make them easier? Does the process feel intuitive and natural? Choose your two most drastically different users and plan their journey through your design. Once it feels smooth&hellip;try it ten more times.</span></p> <p><span>Whether you are planning an event, creating a new company advertisement, or designing a new web interface, UX design should be a top priority. Pay attention to studies and ask your users questions. Find out what people want and how it can be handed to them. Work with an intelligent team that has experience with UX design and look into all possible routes before committing to the first idea.</span></p> <p>&nbsp;</p> Wed, 15 Jul 2015 00:00:00 GMT 10 Year Anniversary <h3 style="text-align: left;">Thank you to all of the amazing clients we have worked with over the years. We appreciate each and every one of you!</h3> Sun, 14 Jun 2015 00:00:00 GMT Site Structure <p><span>Creating great site content is based on having a strong foundation that comes from building an organized sitemap. With every company being different, there isn&rsquo;t one exact formula that everyone has to follow, but there definitely are some important strategies that should be considered when formatting site content.</span></p> <p>Before we dive into building the architecture, let&rsquo;s get organized. Look at the first draft of your site map and ask yourself the following questions:</p> <ul> <li>Will I be able to provide unique and compelling content for all of the pages I want?</li> <li>Can any of these pages be grouped into one larger page?</li> <li>Are the titles of the pages clear to a broad audience?</li> </ul> <p>Now we are ready to dig in. Here are some hints, ideas, and guidelines to consider when creating your site map.</p> <h4>Cover the Basics</h4> <p><span>Two pages you want to start thinking about immediately are the home page and the contact page.</span></p> <p>Believe it or not, there is no need for a &lsquo;home&rsquo; button to be included in your navigation. At one time this was necessary, but luckily we are creatures of habit and have learned that the site logos will 99.99% of the time work the same as a &lsquo;home&rsquo; button.</p> <p>One of your top level pages, preferably the last one, should be your contact page. Many users, especially on mobile, come to your site to get contact information. The biggest mistake you can make when creating your site map is making this page difficult to find.</p> <h4><span>Categorize your pages and be obvious</span></h4> <p><span>The main navigation should be clean, clear and concise. Your users won&rsquo;t mind dropdowns if they are easily taken to where they want to go. Start small. Most sites can fit into a structure containing 3-7 top navigation links.</span></p> <p><img src="/images/imagebank/Blog/Structure/1.jpg" alt="Navigation Example" width="100%" /><br />http://www.tinyfootprintcoffee.com/</p> <p><img src="/images/imagebank/Blog/Structure/2.jpg" alt="Navigation Example" width="100%" /><br /> http://www.stopcmv.org</p> <p><img src="/images/imagebank/Blog/Structure/3.jpg" alt="Navigation Example" width="100%" /><br /> http://www.privategetaways.com</p> <p><img src="/images/imagebank/Blog/Structure/5.jpg" alt="Navigation Example" width="100%" /><br /> http://www.clarkdesigngroup.com</p> <p><span>Your site visitor came to your website for a reason; let them find what they are looking for. If your navigation is simple to manage, they won&rsquo;t have any trouble. The way a business thinks vs. how a customer thinks can vary greatly. Think to yourself, &ldquo;How would a customer search for this product?&rdquo; Just because your products and services are clear to you, doesn&rsquo;t mean a customer won&rsquo;t have some trouble knowing the exact page to visit for the information they want.</span></p> <p><img src="/images/imagebank/Blog/Structure/6.jpg" alt="Navigation Example" width="100%" /><br /> http://www.microsoft.com</p> <h4>This isn't the labyrinth</h4> <p><span>Users should not ask themselves, &ldquo;How did I get here?&rdquo; or, &ldquo;How do I get back?&rdquo; If a visitor doesn&rsquo;t know how he got to a certain page, he won&rsquo;t know how to get back. He&rsquo;ll be confused and his overall experience will be nerve-racking. This subject can be brought up during the design process to make sure there are clear indicators to show a user&rsquo;s location on the site. Breadcrumbs are a proven example of this:</span></p> <p><img src="/images/imagebank/Blog/Structure/breadcrumbs.jpg" alt="Breadcumbs Exmaple" width="100%" /><br /> http://www.newegg.com</p> <p>&nbsp;</p> <h4>Time to study</h4> <p>Check out sites that you frequent and find new sites to explore. What works with their navigation? What would make it better? How are your competitors doing it? Sites like <a href="http://www.webdesign-inspiration.com/" target="_blank">http://www.webdesign-inspiration.com/</a> have collections of beautiful web pages and can filter web pages by industry. Exploring and taking notes will provide you with the best idea for your own site map. Good luck!</p> Fri, 15 May 2015 00:00:00 GMT Above the Fold <p>A company website is now arguably as important as a physical store front. Many people look at a company site to decide whether or not they even want to visit the store. A quick search online gives users immediate information regarding business hours, location, contact, and store offerings.</p> <p>The world of web design is constantly changing with new trends, languages, and functionality. What used to be a design standard does not apply anymore.</p> <p>Designers had to change layouts when the world created new devices. Now that <a href="http://www.pewinternet.org/fact-sheets/mobile-technology-fact-sheet/" target="_blank">over 58%</a> of American adults own a smart phone, it&rsquo;s high time designers and business owners alike considered the ever-growing number of mobile users and how they interact with the web. What is the most natural gesture to use on a tablet or phone? <strong>Scroll. </strong>For years there was a taboo idea that <em>users didn&rsquo;t scroll down</em>. This is no longer the case.</p> <h4>The Dreaded 'Fold'</h4> <p>This is a design term that originally came from newspapers. The goal was to make the front page content enticing enough to convince a passerby to purchase the newspaper and continue reading. Unfortunately, this idea adapted itself into the web world. The &ldquo;digital fold&rdquo; would be the bottom of your view port, whether this is a laptop, tablet, or phone. What you see on your desktop will change dramatically on your mobile phone. The concept is to put the most important information &ldquo;above the fold,&rdquo; or the top portion of a folded newspaper.&nbsp;</p> <p><img src="/images/imagebank/Blog/Fold/scissors.jpg" alt="" width="100%" /></p> <h4>A Better Concept</h4> <p>If all of the important web content is crammed into one small area, it makes it difficult to read and navigate. If you owned a retail store, you wouldn&rsquo;t put your entire inventory in your front windows. You would pick some special elements that will convince the customers to come in and browse. Your home page is a store front, and it should be treated the same way as the front window.</p> <h4>The New Store Front</h4> <p><img src="/images/imagebank/Blog/Fold/storefront.jpg" alt="" width="100%" /></p> <p>The first impression of your website is very important. The top content needs to be enticing and informative without going overboard. Decide with your team and web designer what kind of impression you want to make on visitors. What are the ultimate goals or actions you want a user to take?</p> <p>Give your visitors an easy introduction into your business. Start small with a logo, slogan, imagery, intro statement, etc. Avoid adding multiple &lsquo;Call to Actions&rsquo; and don&rsquo;t pester the user to make decisions before they have read about your company.</p> <h4>Organizing Content</h4> <p>The first step of page organization is <a href="/company/blog/sitestructure" target="_self">creating a site map</a> of every page you need included on your website. If you intend to have secondary navigation, nest any pages that fall under main categories; for example, &lsquo;Our Staff&rsquo; may go under &lsquo;About.&rsquo; This can be done in numerous programs such as Word or Excel, and you can find many examples online on how this can be set up. Having a visual reference will help to determine if similar pages can be combined, or conversely, if you need additional pages to make it easier for a user to find the information they are looking for.</p> <p><span>Consider your user&rsquo;s goals when viewing your site. Most companies design websites based on what they think users should see or do. Instead, ask yourself, &ldquo;What does the user want from my site?&rdquo; You can find this information through market studies, reviewing you own Analytics data, or providing surveys to your different types of users (casual browsers, returning users, and frequent visitors).</span></p> <p><img src="/images/imagebank/Blog/Fold/pencilsbook.jpg" alt="" width="100%" /></p> <h4>Scrolling Isn't Bad</h4> <p><img class="imageRight" src="/images/imagebank/Blog/Fold/scroll.jpg" alt="Scrolling is not bad!" /></p> <p><span>With the World Wide Web now fitting in pockets across the globe, web design needs to adapt to hand held devices. Touch screen devices require scrolling on a regular basis, whether you&rsquo;re looking through contacts, text messages, emails, etc. This action has become second nature. Scrolling is a way for viewers to discover interesting sections of your website. &ldquo;Mobile first&rdquo; design theories are becoming commonplace for web designers. Having a key concept about how your website will be displayed on phones replaces the former idea of designing for mobile afterward. This makes it easy to carry the design forward into desktop monitors with longer pages that require scrolling.</span></p> <h4>Laying Out Pages</h4> <p><span>Think of each page within your site as a chapter in a book. Chapters can go across multiple pages within a book; your website sections can expand vertically in the same way. Each new thought on your page needs plenty of breathing room. Think how important paragraphs are. Imagine trying to read a book without paragraphs where all the text is crammed together. That, for sure, would not be on the bestseller list.</span></p> <p><span>Make sure that your site is easy for users to navigate; don&rsquo;t ask them to read everything all at once. Your &lsquo;Call to Actions&rsquo; should direct your visitors to important information they want to see, rather than ask them to take an action without knowing about your company.</span></p> <p>&nbsp;</p> <p><img src="/images/imagebank/Blog/Fold/book.jpg" alt="Organizing Content" width="100%" /></p> <h4>In A Nut Shell</h4> <p>When you hire a web company to create a new site or redesign your current one, discuss with them the current standards of web design and user experience. Scrolling should be fun, not scary. The easier your website is to browse, the more time visitors will spend reading. Let the users explore your website like a <em>Choose Your Own Adventure</em> story and allow them to discover fun and inviting sections. Use call to actions in a smart way and users will navigate through the site with ease. Allow web content to breathe so that you may give users the ability to digest the information at their own pace. No more cramming content!</p> <p>&nbsp;</p> <p>Hey look! You made it to the end of the blog. Congrats for all of that scrolling. It wasn&rsquo;t so bad was it?</p> Sun, 15 Mar 2015 00:00:00 GMT Rebrand—Rebland <p>A company is a living and breathing thing in this world. Successful businesses and corporations grow and adapt to their surroundings. In order to stay current these companies need to update their missions, rethink their marketing, and put a fresh coat of paint on the walls.</p> <p><span>Brands are signatures, and there will always be some reservations about updating the branding for a successful company; however, <strong>it</strong> <strong>must. be. done.</strong> Unless a c</span>ompany hit gold the first time, like the Nike swoosh in 1971, chances are their branding will need a facelift after some time.</p> <p>Here are some of the most notable logo changes in 2014. As you will be able to tell, flat design is so hot right now!</p> <h4><strong>8. Fandango</strong> <em>Movie Guide</em></h4> <p><img src="/images/imagebank/Blog/Rebrand/fandango.jpg" alt="Fandago Logo Update" width="100%" /></p> <p>This one probably flew under the radar for most people, but the changes are a step in the right direction.</p> <p>Originally, the black outline with yellow and red, oh, and some shadows, wait, and it looks like a ticket, and an 'F'&hellip; &nbsp;In short, they cut the unneeded elements out of the old mark. The new capital 'F' is in proportion and people will be able to recognize the &lsquo;ticket&rsquo; look of the mark.</p> <p>The previous typeface had too much spacing and the letters didn&rsquo;t even look like they came from the same family. What is going on with that &lsquo;D&rsquo; in the original logo? The updated title has more a defined and harmonious presence.<br />&nbsp;</p> <h4><strong>7. Netflix</strong> <em>Online Movie &amp; TV Network</em>&nbsp;</h4> <p><img src="/images/imagebank/Blog/Rebrand/netflix.jpg" alt="Netflix Logo Update" width="100%" /></p> <p>Dramatic isn&rsquo;t it?</p> <p>Take a good idea, and then make it better. Netflix tossed the drop shadow and updated the font. The arch still works and the letters are easier to read. The logo on the left may be iconic, but the new logo will give Netflix more freedom. And that&rsquo;s what this country it all about, right?!<br />&nbsp;</p> <h4><strong>6. ThinkGeek</strong> <em>Online Retailer</em></h4> <p><img src="/images/imagebank/Blog/Rebrand/thinkgeek.jpg" alt="ThinkGeek Logo Update" width="100%" /></p> <p>ThinkGeek is a beloved online market for many things geeky, from Star Trek robes to HTML baby books. The old logo never quite hit the mark for the product or the audience. The logo is silly and maybe a bit geeky&mdash;with the brain and the typewriter font&mdash;but it was never quite right. What is that, a cigarette?</p> <p>How exciting, a new logo for ThinkGeek! Oh&hellip;that&rsquo;s it? While I appreciate the aesthetics&hellip;the colors, the backward-ness and the slogan&hellip;where&rsquo;s the geek?!</p> <p>With a thousand ways to make a logo geeky, they used absolutely zero. Our recommendation would be to create a simple &lsquo;base&rsquo; logo, and then make a series depicting various geeky themes, like Mario, Dr. Who, and Star Wars. This could have been <strong>your</strong> Google doodle, guys!</p> <p>&nbsp;</p> <h4><strong>5. Cricket</strong> <em>Wireless Provider</em>&nbsp;</h4> <p><img src="/images/imagebank/Blog/Rebrand/cricket.jpg" alt="Cricket Logo Update" width="100%" /></p> <p>We all know the 90's were a crazy time, but what were you thinking?! Are those cricket legs? Grass? We don&rsquo;t even know anymore. Forgive and forget is what they always say.</p> <p>The updated Cricket logo came paired with an entire new brand approach, now found in all of their advertising, and it&rsquo;s a huge improvement. Keeping the green mark in the 'K'? Fantastic. Keeping the whole logo as a cohesive unit, even better!<br />&nbsp;</p> <h4><strong>4. Hershey</strong> <em>Chocolate Company</em></h4> <p><img src="/images/imagebank/Blog/Rebrand/hershey.jpg" alt="Hershey Logo Update" width="100%" /></p> <p style="line-height: 150%;">Hershey&rsquo;s summer redesign received quite a lot of attention. Most people hadn&rsquo;t really thought of Hershey even having a logo. It simply looks like the iconic chocolate bar. Well, apparently this was their business logo, and to be frank, it needed an update. In the old logo, nothing is aligned with intention, the letter embossing is difficult to work with, and a photorealistic chocolate kiss is not print friendly.</p> <p>The new design, however, has received some scrutiny for what the flat kiss candy resembles. Sure, maybe it looks like something your dog might leave in the back yard, but hasn&rsquo;t the Hershey&rsquo;s kiss always resembled that? Eventually people will stop teasing the look of this logo, because, deep down, we all know it&rsquo;s chocolate.<br />&nbsp;</p> <h4><strong>3. Olive Garden</strong> <em>Italian Restaurant</em></h4> <p><img src="/images/imagebank/Blog/Rebrand/olivegarden.jpg" alt="Olive Garden Logo Update" width="100%" /></p> <p style="line-height: 150%;">After 32 years, Olive Garden finally updated their tacky old-world logo. Would you believe that the new logo finally has olives on it? Honey, those purple things on the right were grapes. The logo that they have been dragging around since the 80's is one of the most difficult logos to work with. Texture, background, shadows, gradients...oh the inhumanity! How would a newspaper publisher even create a black and white version of this logo? It&rsquo;s been a long time coming, OG, and we are happy for you!</p> <p>&nbsp;</p> <h4>&nbsp;<strong>2. Foursquare</strong> <em>Location-based social network</em></h4> <p><img src="/images/imagebank/Blog/Rebrand/foursquare.jpg" alt="FourSquare Logo Update" width="100%" /></p> <p>Foursquare announced their rebranding early this summer, along with a new business approach. Essentially, they are dividing the app into two separate experiences and keeping the Foursquare name with the new &lsquo;Yelp-esque&rsquo; travel and recommendation app.</p> <p style="line-height: 150%;">Now that users won&rsquo;t be checking into locations with this app, the previous logo/icon had to go. The logo grew out of its lowercase, heavily stroked look and traded it in for a crisp, uppercase, geometric typeface. The icon mimics the classic &lsquo;pinpoint&rsquo; look found on maps, but with their own signature 'F.'</p> <p>No opinion yet in regards to the split being a good business move, but the branding is a step up.<br />&nbsp;</p> <h4><strong>1. Airbnb</strong> <em>Travel Rentals</em></h4> <p><img src="/images/imagebank/Blog/Rebrand/airbnb.jpg" alt="airbnb Logo Update" width="100%" /></p> <p>Airbnb had a very interesting time this year rebranding themselves. Founded in 2008, Airbnb started out with a modest &ldquo;lighter than air&rdquo; type logo. The subtle shadow, large white stroke, handwritten bubble script font, and the light blue gradient were meant to give you a cloud-like euphoric feeling. The perfect innocuous logo for a new company.</p> <p>Well&hellip;the times have changed, the company grew, and Airbnb got a makeover. They rebranded with an identifiable mark, dropped the gradient and shadow for a flat design, and adopted a sans-serif font.</p> <p style="line-height: 150%;">The controversy around this logo is fierce. So far the new mark has sparked major ridicule. There is even a song about it by the awkward British synth-pop band, <em>The Brett Domino Trio</em>, and within the depths of the Internet, much, much more.</p> <p>There have also been claims of plagiarism. <a href="https://www.automationanywhere.com/">Automation Anywhere</a> has an extremely similar logo:</p> <p><img src="/images/imagebank/Blog/Rebrand/automation.jpg" alt="" /></p> <p>Since this comparison, Airbnb and Automation Anywhere released a joint statement:</p> <p>&ldquo;In early 2014 both Airbnb and Automation Anywhere began use of new logos that, by coincidence, have similar designs. Airbnb and Automation Anywhere are working cooperatively to address this issue, and Automation Anywhere is in the process of transitioning to a new logo design that is not similar to the Airbnb logo.&rdquo;</p> <p>They say all publicity is good publicity, but one could argue that point.</p> <div> <div> <div id="_com_1" class="msocomtxt"><!--[if !supportAnnotations]--></div> <!--[endif]--></div> </div> Sun, 01 Feb 2015 00:00:00 GMT