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

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

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?

How to Override the Max Width of Twitters Embeddable Timeline Widget

According to twitters instructions the embeddable timeline widget has a maximum width of 520px. If you need your widget to be wider than 520px you will not be able to use the width attribute. If you need it wider you’ll need to override the max width using the following CSS (change width accordingly):

By | 2017-06-16T12:22:23+00:00 June 6th, 2013|Web Development|Comments Off on How to Override the Max Width of Twitters Embeddable Timeline Widget

Vertically Aligning Inline Images Inside of a Paragraph

By default any inline image will align with the baseline of the paragraph, unless a “margin-bottom” is applied to the paragraph’s baseline.

There are six lines that can be used for vertical alignment:

  1. Top line is the line above all of the content.
  2. Text-top line is top of the text that also includes any accent marks.
  3. Middle line is the middle of the letter x-height.
  4. Baseline is where all letters sit.
  5. Text-bottom line is the bottom of all text that includes descenders.
  6. Bottom line is below all content.

Given the above information, you can then determine how you want to change the vertical position of images in its surrounding text using the CSS “vertical-align” property. These properties can include, top, text-top, middle, baseline, text-bottom, bottom, sub, super, percentage and length.

Below are examples of each:

  1. Top: img.class-name {vertical-align:top;}
  2. Text-top: img.class-name {vertical-align:text-top;}
  3. Middle: img.class-name {vertical-align:middle;}
  4. Baseline: img.class-name {vertical-align:baseline;}
  5. Text-bottom: img.class-name {vertical-align:text-bottom;}
  6. Bottom: img.class-name {vertical-align:bottom;}
  7. Sub: (aligns with the baseline position of subscript content) img.class-name {vertical-align:sub;}
  8. Super: (aligns with the baseline position of superscript content) img.class-name {vertical-align:super;}
  9. Percentage: (0% is baseline, by raising or lowering the value it can go above or below the baseline), example 1: img.class-name {vertical-align:5%;}, example 2: img.class-name {vertical-align:-5%;}
  10. Length: (0px is baseline, by raising or lowering the value it can go above or below the baseline), example 1: img.class-name {vertical-align:5px;}, example 2: img.class-name {vertical-align:-5px;}

The above information was gathered from maxdesign.

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 | 2016-11-18T14:24:40+00:00 December 14th, 2012|Cascade CMS|Comments Off on Vertically Aligning Inline Images Inside of a Paragraph

So Many Rights & So Many Wrongs

Some people think there is no ‘right’ or ‘wrong’ way to code. I agree and disagree. I’m not saying there is only one right way and all developers should live by this method. I’m saying that there is a wrong way for anything. People can go about the same thing in many ways and it would be considered right. Each developer has their own style and comfort zone in how they do things and as long as it is efficient, doesn’t bear on page performance and doesn’t fall into the ‘wrong’ category then it’s still considered good code.

Right

  • Following the rules that the W3C has defined for creating websites
  • Following Web Standards, Best Practice and the KISS principle
  • All code validates and runs error free
  • Separate content from presentation
  • Semantically correct markup
  • Fully minimized and clean
  • Makes sense

 

Wrong

  • Using things in a manner they were NOT meant for (ex. tables for layout)
  • Hacks that are unneeded (hacks are normally only needed for bad code)
  • Overly complex (adding in some code because it was too simple)
  • Re-writing built in functions (re-inventing the wheel of php)
  • Doesn’t make sense

 

Right

To fully explain things there is the W3C which is an organization that standardizes Web technologies. They are the people who define how the web works in terms of HTML. Following these rules will not only keep the need for hacks at bay but it will also keep your code valid because that is what you are validating against when it comes to HTML and CSS. Yes… you are validating your code against the rules they have outlined for you. So tell me again why we wouldn’t follow the rules?

As for fully minimized and clean I mean can I look at it and point out anything not being used? Did the old stuff get cleaned out? Are there unnecessary things? Are there too many unneeded wrapping divs? Is the programming of the code logical? Can it be done in a simpler way? Basically take the code and remove everything you can from it. Make it as small and compact as you can without losing any functionality. Once you’re done it is minimized and clean.

Overall when I say there is a ‘right’ way I mean when any knowledgeable developer can look at the code and figure it out almost instantly because it is done the way it was intended and follows Web Standards and common sense then it is good code.

 

Wrong

Ahhhh the ‘wrong’ way. Man oh man is there a definite wrong way of doing anything in life. Let’s take going to a grocery store that is half a mile down the road. What is the right way to get there? There are a few ways that would work I mean you could walk, take a bus, ride your bike or even drive your car. All these work and are logical. Well what about walking 1 mile the opposite direction to get on a bus that takes you to the airport where you fly round trip to the furthest destination and on return get a rental car and drive straight to the grocery store. This in my eyes is wrong.

It may seem dramatic to some but you have to admit that’s not the most efficient way to get to the grocery store. You might catch yourself thinking ‘Why would anyone do that?’… And that is a good indicator question that determines bad code.

On a less obvious side there are other things that make it the ‘wrong’ way including invalid, erroneous, weighted, hacked and non-logical code. When people use tables for layout it is actually wrong because it is invalid. If errors pop up or it takes triple the time to load due to controllable factors it is wrong. If you use JavaScript to apply CSS classes or inline styles when there is no JavaScript functionality on the page then it is wrong. If you are re-writing built in functions for any scripting language then it is wrong. These are just a few examples that there are wrong ways of coding things.

 

Conclusion

In conclusion I understand that some developers use floats and some use positioning this is their style and both methods work. There is a difference between that style factor and the just plain wrong or outdated factor.

I know I can’t make everyone a believer overnight, some will just always believe if it runs then it must be good code. However I encourage you to Google the ‘benefits of web standards and best practices‘ and after a few good reads go ahead and try to search for the ‘downfalls of web standards and best practices‘. Since I don’t know of any downfalls please comment below if you do find any.

Also stay tuned for more blog posts about this topic.

By | 2016-11-21T17:44:20+00:00 July 21st, 2011|Web Development|Comments Off on So Many Rights & So Many Wrongs
Load More Posts