Aggressive Timelines – The Cohesion of Web Design, Web Development, and Testing

Where do you start on the importance of the synergy between design, development, and testing when faced with an aggressive timeline when their importance has been written about for years? A good place to start is to discuss the real life impacts of testing on E-Commerce and site redesign projects. Beacon recently completed an e-commerce upgrade and site redesign for a local client. While challenging, the project was worthwhile for the client, and a learning experience for those involved as to the benefits of effective design, coding, and testing. Our client had requested a very aggressive design software testingtimeline to get their new site and upgraded e-commerce engine into production. Beacon accommodated that request and our client was rewarded with a robust design with clean lines, a strong e-commerce engine in AspDotNetStorefront 9.5, and a responsive web presence to allow them to focus on selling their products and using their new web/commerce engine to further that pursuit. Beacon was able to accomplish this goal in a short period by compressing design, development, and testing without losing our focus on quality and the end goal. Being constantly quality focused throughout the software development life cycle pays its own dividends. As the old saying goes, a quality effort produces quality results.

Design

Beacon makes it a point to generate strong designs that fit our clients’ needs and that follow their organizational personalities. Extensive work is put into the designs and includes feedback from Beacon developers and clients throughout the process to produce a synergistic site that is functional, adaptable, and attractive. Beacon designs for style and functionality, but also tries to match the client’s organizational personality. Beacon successfully delivered a project like this very recently. The client was using a design that had been in existence for five+ years without change and sought to upgrade their presence. Beacon was able to create a design that met or exceeded their expectations and that brought them into the era of responsive web presence.

Development Developers should be highly focused on producing quality code. It should almost be a competition of quality to ensure that a developer’s code was better than the time before, or better than their office neighbor. This shows in the results of code releases. Before our testers are given the opportunity to test applications or site design modifications, our developers have already exhaustively tested their own work. I understand that is supposed to be the norm but many software development organizations do not approach their work in that manner. As a result of that approach, we are able to eliminate a large portion of our bugs before our own internal testers touch the product. The benefit to the client is quicker time to production and reduced downstream error rates.

Software Testing

Following the testing by the developers, the code and site were released to our testers to put the site through its paces. The site was extensively tested for desktop, mobile, and handheld responsive traits. The design itself was robust, and handled the testing very well with very few hiccups. The e-commerce engine, AspDotNetStorefront 9.5, was also very strong, and its new responsive skin features were easy to implement and adapt. As a result, Beacon was able to employ a very aggressive timeline for development, and deliver a quality product to the client.

 

Successful cohesion of design, development, and testing. The siren song of software development and a goal that is attainable. As an aside, for further more in-depth reading on AspDotNetStoreftont 9.5, I would suggest this article regarding the new release of aspdotnet storefront 9.5.

Darin Humbard
Darin Humbard is a Project Manager with Beacon.
By | 2017-06-16T12:20:09+00:00 November 9th, 2015|Web Development|Comments Off on Aggressive Timelines – The Cohesion of Web Design, Web Development, and Testing

Style Guides for Web Design and Development

style-guide

Developers, designers and web administrators are always looking for ways to improve how they manage the look, feel and complexity when building a web site. This can be difficult when we have multiple team members or new members involved in ongoing projects. So how can we help maintain global branding and development patterns for sites that all users can utilize? Style guides.

What is a style guide?

A style guide is a document of code standards that details the various elements and patterns of a site or application. It is a one-stop place to see all visual styles of the site such as headers, links, buttons, color pallets and any visual language that is used on the site.

2015-09-15_1518

Check out a few of the other style guides below published by some great brands.

Why should you use a style guide?

Style guides take extra time to develop up front but we have found that they have numerous beneficial factors for developing.

  • Faster build time for new sections and pages.
  • Design consistency is easier to maintain
  • Designers, developers and content owners have a one-stop guide to reference.
  • New team members joining the project can refer to the guide for the exact style use.
  • Keeps both code and design consistent throughout the site.
  • The guide allows us to standardize our code (CSS, JS, HTML), keeping it small and quick to load.

Steps to building a style guide?

Template

Start your guide with the sites foundations. These will include elements like color palette, fonts, headers, body text and grid layouts. These basic elements are the foundation global elements of your site that set the tone for your style guide.

Patterns

Next start adding in your site patterns. These would include buttons, logos, images, icon library, form styles, etc. Any element that belongs on your site should be included.

2015-09-15_1511_001

Documentation

Documentation is essential to make a style guide successful. Your documentation is the key to keeping a consistent style and development pattern throughout the site. Documentation can be done in the code itself with comments or using interactive modals or tool tips in the style guide.

Cascade Implementation

After completing the base code you can start integrating it into your CMS system. Not only can we use a style guide for visual and front end documentation but also for how the content functions within your CMS.

The following elements can be added to help guide developers in with the site setup:

  • Formats
  • Blocks
  • Template regions such as header, footer, navigation, widgets and dynamic feeds for news/events.
  • Build out full examples of your data definition regions. See example below of Cascade Server data definition containing all site content input areas.

2015-09-15_1526

Using the guide

So you have completed building your style guide. Now what? The first step is talking to your team about how to use the guide and what updates should continue to be made during projects to it. As new member join your team reference the guide as a way to introduce them to your site styles and code languages. Utilize the style guide when testing new code or modules on your site or just as a way to present new design elements to the team. The possibilities are endless.

Your style guide will never be complete and should continue to evolve as your site does.

References

 

Keana Lynch
Keana Lynch is the Director of UX Design & Development at Beacon where she has provided leadership and consultation for over 35 Higher Education projects. She specializes in the analysis, design, and implementation of websites. Keana is very passionate about design and development strategies focused on user experience, accessibility, multi-device interactions, and technical best practices. Outside of work Keana enjoys spending time with her three dogs, hiking, kayaking and volunteering with local animal rescue groups.
By | 2017-06-16T12:24:15+00:00 September 17th, 2015|Cascade CMS|Comments Off on Style Guides for Web Design and Development

jQuery Mix It Up! Great for Galleries and Listings

This jQuery plugin is great for portfolios and sorting sections. It has a lot of great effects, such as randomizing, load options, animation effects and more. It’s definitely worth a look and maybe assist you in a project.

Check it out here: https://mixitup.kunkalabs.com

Zedric Myers
Zedric Myers is a Web Designer for Beacon Technologies. After earning his degree in Advertising and Graphic Design, he spent 11 years with an advertising agency in Greensboro, NC where he was initially hired as a designer and transitioned to being a Web Developer.
By | 2017-06-16T12:44:25+00:00 June 17th, 2015|Web Development|Comments Off on jQuery Mix It Up! Great for Galleries and Listings

New WordPress Website Launch: Matthews Specialty Vehicles

Beacon is pleased to announce the recent launch of a new WordPress site for Matthews Specialty Vehicles. The new site features new imagery and a responsive design that works well on tablet and mobile devices.

Here is the old site:

msv-homepage

And here is the new site:

msv-responsive

Visit the live site here.

If you are looking for a content management system to help you maintain your website, we have different solutions depending on the needs of your business. Contact us today to see how we can help.

Deb Paylor
With a B.S. from East Tennessee State University and a Masters Degree from Kansas State University, Deb Paylor joins Beacon with over 18 years of experience in the project management and IT space. In her spare time, Deb enjoys reading, crafting and cooking.
By | 2017-08-08T08:39:00+00:00 May 1st, 2015|Beacon News|Comments Off on New WordPress Website Launch: Matthews Specialty Vehicles

New Website Launch: Used Bus World

Beacon is pleased to announce the recent launch of a new WordPress site for Used Bus World. The new site features new imagery and a responsive design that works well on tablet and mobile devices. Here is the old site:

bus-shopper-homepage

And here is the new site:

 

UBW-responsive

Visit the live site here. If you are looking for a content management system to help you maintain your website, we have different solutions depending on the needs of your business. Contact us today to see how we can help.

Deb Paylor
With a B.S. from East Tennessee State University and a Masters Degree from Kansas State University, Deb Paylor joins Beacon with over 18 years of experience in the project management and IT space. In her spare time, Deb enjoys reading, crafting and cooking.
By | 2017-08-08T08:38:47+00:00 April 29th, 2015|Beacon News|Comments Off on New Website Launch: Used Bus World

3 Ways Personas Help Build a Better User Experience

Redesigning a website isn’t easy, cheap, or fast- so don’t rush into it and build out your new site without fully understanding your primary user base. Google Analytics and heat maps can give you a lot of information about how people are currently (and historically) engaging with your website, but these tools don’t reveal too much about your audience – sure, GA has a “demographics” report, but you will learn so much more if you actually go out and talk to people. Yes, like real-world, face-to-face conversations.  Conduct user research, host focus groups, watch people use your website as it currently exists. You’ll be amazed at what information you can gather through these exercises; age range, interests, device usage, websites frequented, how they communicate with peers, and so much more. All of this will lead up to the development of personas – a fictional person that represents your target audience. So why should you spend all this time before diving into a full redesign?

  1. Messaging: When you conduct all this research, you gain an overwhelming amount of knowledge about the people that use your website. Leverage this by using it to drive your messaging in your headlines, your navigation labeling, your content, even your calls to action. Speak in a language that your audience relates with and they’re much more likely to take the actions your website is designed for.
  2. Look + Feel: Certain demographics have expectations of what a website should look like and how the navigation should be structured. Having a persona in front of you as you work on information architecture, navigation structure, sitemaps, etc., will be immensely helpful in ensuring your audience finds your website easy to use and engaging in ways beneficial to both you and your users.
  3. Synchronicity: Personas help with all kinds of things when it comes to developing your marketing strategy and site structure. But more importantly, having a persona (or set of personas) will get your whole team on the same page and you will all be creating for the same audience. Without this, your web development team is working for one goal, while your marketing team is working to achieve their goals, and those 2 things aren’t necessarily congruent with each other. When personas enter the picture, everyone has the same user(s) in mind and the end result is better UX, improved marketing KPIs, and everyone involved wins.

Benefits of Persona Development

Have you considered a redesign recently? If so, were you planning on doing this research up front?

Logan Ray
With a B.S. Degree from the University of North Carolina at Greensboro, Logan Ray joins Beacon as a Digital Marketing Specialist. Outside the workplace, Logan’s interests include spending time with his wife and dog, board sports and outdoor adventuring.
By | 2017-08-11T16:25:06+00:00 March 20th, 2015|Digital Marketing|Comments Off on 3 Ways Personas Help Build a Better User Experience

Building a paginated listing with only HTML and CSS for Responsive Design

Most paginated listings on the web are managed either with server side logic, javascript, or a combination of both. With the first option, the user’s browser wait on network traffic back to the server and back down again. Even if the data is as succinct as possible, a bad connection or crowded wi-fi can make your site look slow. An example of this sort of method can be seen on google search results. Each page requires a new querystring and page load. With the second option, the html for each page can be loaded into the dom on the first page load and then a script will manage displaying each separate page or section of data as the user interacts with the page’s navigation. The downside of this approach is that if script is disabled, as is so often the case on computers with high security settings, the only ways to recover are to display either a single page at a time using server side logic, or to display the entire listing without pagination at all, which can make for an enormously long page. The last option uses a combination of both, and can result in a smoother user experience, but also then suffers from the drawbacks of both. This last option can be seen in effect by scrolling to the bottom of a facebook page; the first “page” of content is loaded up first, and only by scrolling down is additional content then called down from the server and added to the page via javascript.

I think that’s enough of the bad news! You’re here to find a way to circumvent all of these headaches so that you can give even the most restrictive browsers as much access to your content and with the very best user experience possible.

Lets get started shall we?

We’ll start with a sample of how you might list results currently. For ease of reading and instruction we’ll keep the content short and sweet, and we’ll keep our pages limited to 3 results per page.

We have to make a few changes to this to make it work in pages. Let see what that looks like:

Now that we’ve got them separated into page containers there’s one thing that’s important to make note of. You may have noticed that page1 is actually listed last. It’s also important to note that the order of all pages that aren’t the first page isn’t relevant to this process, only that the page you want displayed by default, or first, is the last child of the .pages container. This is so that we can take advantage of a special kind of css selector in order to get around css’s inability to select nodes up the dom. If you intend to use my advanced method below however, it is necessary to display the pages in order with the only exception still being that the first page be listed last.

That selector is called the General Sibling selector, which is the last selector outlined here. This selector selects all elements that match the right hand selector that are siblings of the left hand selector only as long as they appear in the html after the left hand selector. In our sample, a rule for “#page3 ~ .page” would select #page2, and #page1, but “#page2 ~ .page” would only select #page1.

We’re going to use that selector to hide all pages that aren’t the first one.

This ensures that when the webpage loads, only one page of your list will display, and that it will be the first page. In order to give the user a way to change the pages, we need to create a page listing in our html.

The new .pageNav element can go anywhere on the page, but it must not be added as the last child of the .pages div so that our previous rules will continue to show and hide the correct divs. To get those links to functionally show their respective pages we need to make an additional tweak to our css:

These new rules showcase the two selectors that make this whole thing work. One we’ve already discussed. The new one is the :target selector, which applies to an element if it has an id that matches the hashtag (for lack of a better word) in the url. When one of the nav links is clicked, it appends it’s href to the url. A live demo of this in action is available here.

The key to this html/css trick is just outputting your first page last, which is easily possible in most content management systems. The rest of it is very simple. This solution is responsive, is 508 compliant, and search engine friendly.

Another benefit this method has over javascript is that it take advantage of the browser’s ability to remember the previous page’s hash tag, which means that if a user follows a link in your paginated listing, and clicks the back button, they’ll retain their active page.

To be fair to the other pagination methods above, this too comes with a drawback, although it is in my opinion a minor drawback. In order for this method to be fully encapsulated by html and css all html content for all pages must be loaded on the first page load, which can slow down the page if the content of each page is exceptionally large. In the case of most paginated listings however, that is rarely the case.

Advanced

Now that the base concepts have been outlined, I’d like to show you what I consider to be the correct and most exhaustive solution for applying this sort of method to a responsive site where we don’t want to limit the user to only the core html/css experience if they’ve allowed scripts on their browser.

NOTE: This implementation uses jQuery for ease of understanding, and portability. jQuery is, however, a very large library and might not be the most efficient way of accomplishing this from a performance perspective.

First, lets look at some easy changes to the html:

Specifically what we’ve done here is add previous and next buttons to each page. The reason these have been added here, and not with the rest of the navigation buttons is because without javascript enabled, we can’t properly style or control the behavior of them dynamically, so we need static but functional links that we’ll only render on our mobile view. Functionally, at smaller screen sizes (like smart phones), requiring the user to click on one of several small links next to other small links can be frustrating, and giving them the same pagination functionality, but restricting them to only previous and next navigation is a simple process that drastically improves user experience. For all of these changes, we’ll need to update our css:

You’ll notice several new lines, so lets break them down.

  • The first change is to our existing rules. We’ve added :not(.js) to the .cssPagination selector. This is going to enable us to maintain css control over the general layout of the elements, even if (when) we upgrade the functionality with javascript.
  • Next we’ve taken the liberty to hide the next and previous buttons by default, so that we don’t have two lines of navigation controls for the user to interact with.
  • The next 3 lines are going to work specifically with the two new classes (js and paginationActive) in order to give our script the ability to manage pagination without having to get its hands dirty mucking about with styles.
  • Last is the media query. If you’re familiar with responsive design and development you’re already familiar with what this does. For those of you who might not recognize the tag: this call “@media screen and (max-width: 480px)” tells the browser to only enable these rules when the device reading the browser has a screen, and the current resolution is 480 pixels wide or less. For more information on media queries read here.

Lastly we’ve added a script section, which will take over pagination when scripts are enabled (and in our case when jQuery is present):

To see this all together in action click here. To see how this setup looks without javascript enabled all you need to do is set addInjQuery at the top of the script file to false. The demo also demonstrates how the previous and next buttons respond in a responsive manner to the available screen resolution both with and without the script enabled.

NOTE: To use this script as is, I recommend using the version shown here and not the one in the demo, as it is hard-coded to a specific version of jQuery, rather than this version which is compatible with virtually any version of jQuery that you might already have on your site.

The script that was added now only works when scripts are enabled and jQuery is available. This allows the content to be enhanced progressively depending on what features are or aren’t enabled on your user’s browser and device. This ensures that no matter what device or browser your client is using they will get the best possible experience from your site in the most efficient manner possible.

To recap this method for how to paginate a listing on a web page is responsive, not dependant on javascript, not dependant on posts to the server (either synchronous or asynchronous), 508 compliant, and in most cases incredibly efficient. It is also heavily customizable to fit in any website design in any language.

That’s all for this topic. To read more by some of our other incredibly talented staff see below:

John Vine
John Vine been developing website and web applications since 2010. He grew up in Greensboro, NC and was very happy to be able to return here after graduating from Full Sail University with a bachelors in game development. John prefers the open feeling of his motorcycle which he rides right up until the cold of winter forces him back into his car. He is a Green Bay Packers fan and hopes to one day have season tickets.
By | 2017-06-16T12:34:34+00:00 March 10th, 2015|Web Development|Comments Off on Building a paginated listing with only HTML and CSS for Responsive Design

How To Make The Most Out Of Your Web Design

I spend a lot of time inside and outside of work studying design. I think it gets to a point for everyone where design becomes difficult to ignore, as it influences our every day decisions. It’s important to understand design elements and how they not only affect you on a day to day basis, but your customers as well. You can ask yourself the following questions:

How does my target audience perceive my brand?

Does my website’s design go hand in hand with my content?

What kind of experiences are users having when they land on my website?

Is my design making an emotional connection with my customers?

Because websites are so multi-dimensional, there is no one way to answer these questions. It’s an ever changing industry and with new technology comes updates on how we approach design. Lucky for you, Beacon has been in the industry for 16 years. We love answering these questions because these are the questions you have to ask to get to a successfully designed website.

Since being in the website industry, I’ve had the opportunity to wear many hats. This has helped me approach website design and development from every angle with all considerations in mind. Below I have listed a few elements to consider when designs a website.

 

User Experience

  • A beginners guide to UI design. Read more.
  • How to beat the paradox of choice in UI design. Read more.

Fonts

Colors

  • An introduction to color theory for web designers. Read more.
  • How to get a professional look with color. Read more.
  • Five web design colors that encourage visitors to click that subscribe button. Read more.

Images

  • How to use images effectively in websites. Read more.
  • How to use photography in web design. Read more.

And finally…

 

In today’s world, your website is one of your most vital marketing tools. If you would like to find out more about how redesigning your website can push your business forward, let us know!

By | 2017-08-15T15:50:26+00:00 April 11th, 2014|Cascade CMS|1 Comment

Holiday Gifts for Web Developers

Holiday WreathSeason’s greetings from Beacon! Today I’ve got a couple handy gifts that can help solve some tricky web development problems.

First lets unwrap how you can calculate line height on a client’s machine. This can be helpful when trying to truncate a block of text to not be more than say 3 lines tall. In order to do this across various browsers, devices, and zoom settings you need to see exactly how the font is rendered to the screen. To test this you need to sacrifice a chicken… sort of. See below:

You may have to add certain styling rules to the chicken if you want to measure a certain kind of font or what have you, but that’ll be different for each implementation. Now that you have that you can use whatever method you choose to measure individual line lengths to fit your container and still truncate properly, but one way I recommend is by initially truncating your string to the minimum character count that can fit in your area (like in a string with nothing but apostrophes) and then truncating by removing whole words until the element height is equal to 3 * lineHeight.

Lets see if there’s anything else to unwrap… Oh look here, have you ever wanted to post a javascript object (or array of objects) to your code behind and maybe pass the data along to the database? Did you know that by simply adding an empty asp control that uses postbacks that the page will come pre-equipped with a javascript function that allows you to do just that? Simply add this on your design file:

and suddenly you’ll notice that this function is defined on your page “__doPostBack” and with it you can post data directly to the back end. By calling the function with a target and an argument like this:

your data will be passed to this snippet on the back end:

In my example the javascript variable “myData” is a json array, and the vb.net type “MyDataObject” is a structure with matching properties so that the entire array can be quickly digested by the vb.net code. This also works in C#, though you’ll have to update the syntax.

I hope these gifts help you as you develop your own, hopefully festive, websites. Until our next festive update, Happy Holidays!

By | 2017-06-16T12:20:14+00:00 December 20th, 2013|Web Development|Comments Off on Holiday Gifts for Web Developers

Is Flat Design For You?

As technology and the familiarity with it grows, designers and developers are now more than ever trying to enhance the website design world. Inevitably, this leads to countless passing trends that come and go much like any design industry. Which leaves us begging the question, how do we know what is more than just a trend and does it fit our website needs?

Flat design has been a fairly controversial topic since the beginning. Industry leaders such as Microsoft, Apple, and Google have all jumped on board lending us to believe there may be something more to this. So how can flat design benefit your site?

Flat Design Is Responsive Friendly

writer-responsive-blog-theme

Image credit to: www.wpexplorer.com/writer-blog-wordpress-theme

More and more we are finding people are using smartphones as a replacement for their computers. In 2012, more tablets and smartphones were purchased than computers. Because of this, responsive websites have now become a necessity. With the simplistic nature of flat design sizing elements down to fit a mobile device or tablet becomes that much easier. By using a lot of white space and large buttons flat design becomes very flexible when considering responsive website.

 

Flat Design Is Content Friendly

The mystery of, “What is more important? Content? Or Design?” has been solved. The answer is neither. Both equally important. Design attracts your users, but your content keeps them on your site. So why would you not leverage your design to showcase your content? Flat design’s clean and minimal layouts provide an environment that allows your content to stand out. Content communicated in a simple and clear manner is more easily digested by the user.

 

 Flat Design is User Friendly

Although minimal, flat design has a high level of focus on aesthetics generally utilizing bright colors and large imagery. This coupled with the elimination of borders and shadows entices the user’s eye to flow across your site with ease. Flat design strips down to the most basic form of design that can be appreciated by anyone.

The goal for any website design is to carry the message of your business across to the user. Your design should always highlight the content and focus on the user’s experience. Here at Beacon, we are constantly researching design trends and movements to ensure that our client’s websites are ahead of their time and solidified as legitimate marketing tools.

 

By | 2016-11-18T14:23:20+00:00 November 25th, 2013|Web Development|Comments Off on Is Flat Design For You?
Load More Posts