CMS Super Powers: Top 5 Underused Features in Cascade

Superheroes possess super powers that enable them to do the unimaginable with speed and precision. Similarly, the Cascade Server CMS enables it’s users to do things that other content management systems cannot. In both cases, these unique, underused or underappreciated features warrant further examination.

Accordingly, I’ve created a list of Cascade Server “super powers”. These features that are often overlooked but can give unworldly abilities to the Cascade users who possess them.

Personalized Dashboards

Judge performance at a glance thanks to a dashboard with widgets that can be re-arranged and/or removed to suit your informational needs. Your dashboard can include Google Analytics performance metrics, too. Within this dashboard, you can view Pageviews and Unique Visitors without having to enter a GA account. There are widgets for History and a Link Checker, New and Stale Content, just to name a few. Many of the features below can be reviewed through Cascade’s personalized dashboard.

Superhero equivalent: Arm Fall Off Boy (DC Comics). A superhero from the 30th century, Arm Fall Off Boy can rearrange and/or remove his arms. He can even use them as weapons. Never has there been a more malleable superhero. Kinda like our dashboard.

Stale Content

Within hundreds of website pages, it is so easy to lose track of old content that requires updating. Located under the dashboard, the stale content feature enables one to find stale content and change it so as to ensure a better user experience. The administrator can set defaults that specify folder, time lapse, etc.

Superhero equivalent: Diaper Man (Terrytoons). An animated superhero conceived by legendary animator Ralph Bakshi, this superhero uses his bottle to bludgeon bad guys into submission. He’ll never grow old, much like your website content if you’re in Cascade.

Content Review

With the Content Review feature, one can send new content to a colleague for review in advance of the scheduled publish date. An email goes out to the specified party while the article is still in draft. The recipient just clicks the link, reads, reviews and responds. Catastrophe avoided.

Superhero equivalent: Doorman. (Marvel Comics). Doorman is a living portal. However, he can only travel to adjacent rooms. If you need to reach your colleague in the office next door, then he’s your man.

Remove Formatting

This feature is part of the Cascade WYSIWYG. MS Word doesn’t translate well into HTML, yet many people prefer to do their drafts in this format. Remove Formatting to the rescue! With a click of a button, it translates any out of date or inaccurate code into the correct HTML code.

Superhero equivalent: Type Face (Marvel Comics). With his sidekick SpellCheck, Type Face defeats the bad guys by hurling letters a them. He’s a living, breathing WYSIWYG.

Saved History

Your entire session history is saved so you can easily navigate from one page to another, edit and migrate content. History is saved between logins so you can easily pick up where you left off before you were so rudely interrupted by whatever super-villains lurk within your office space.

Superhero equivalent: Martian Manhunter (DC Comics). An original member of the Justice League of America, Martian Manhunter had an eidetic memory.

As a long standing partner of Hannon Hill, we’ve got more experience with the Cascade CMS than just about anyone. If you’re searching for a content management solution and want to talk about what Beacon and Cascade Server can do for you and your organization, feel free to contact me with your questions or comments. If it’s urgent, pick up the phone and call one of our Cascade experts at 855.447.8276.

And remember. With great power comes even greater responsibility.

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-08-28T09:30:55+00:00 August 29th, 2017|Cascade CMS|Comments Off on CMS Super Powers: Top 5 Underused Features in Cascade

Wow! Lees McRae College Launches New Website

We are proud to announce the launch of the new Lees McRae College website.  The college is truly brought to life through the new highly visual design and unique features that are inviting and engaging to students, parents, faculty and alumni, especially when you compare it to the old site (see below).  While emphasizing Lees McRae’s brand and messaging consistently throughout, the new website also has a firm foundation on best practices for higher education, accessibility and high performance across multiple devices and browsers.

Old LMC Site

OLD WEBSITE

new lmc website

NEW WEBSITE

 

The home page is full of fantastic imagery that engages and informs visitors, especially the “Find Your Place” feature that shows an aerial view of the campus, allowing you to click on various areas to learn more. Once again, teamwork was the key as Beacon and Lees McRae worked together closely through the analysis, design, development, content migration, testing and launch of this incredible new website in only 9 months!

 

Built with Cascade CMS, the underlying templates are extremely flexible to support a variety of content requirements.  They allow Lees McRae content owners to easily manage the content while keeping the site SEO friendly. Here are a few of these creative features:

  • The home page impact image loads randomly along with an information box that stays with the image, allowing each image to link to different pages.
  • The home page impact image can be used for a video rather than static images, if/when the content owner desires.
  • The ‘Your Future Elevated’ section on the home page transforms nicely from 10 boxes on the desktop to 5 on mobile – allowing content owners to specify which boxes they want displayed on mobile devices.
  • Interior/landing pages have full width background color options. The color bands can optionally include a faded image behind the color. Both examples seen here in gray and here in green.
  • Content boxes can be framed with different colors within a page. Lees McRae uses a lot of gray and dark green – you can see an example here.
  • Impact images on interior pages can be content width or full width and can optionally include an inset line which is a part of LMC’s brand. Example here.

 

Lastly, and probably most importantly, all of the pages and features were packed into a small number of templates that facilitate modularity. This allows each page to be somewhat unique by turning various features on, or off, based on need.  For example, users can choose to use (or not use) right navigation, full-width banners (mentioned above), and custom right-column widgets that can be changed and published to apply to all pages where they are included.

 

From our client: “Thank you ALL so much for your hard work and patience with us on this project! We’re very happy with the finished product!”

Mark Dirks
Mark Dirks is the CEO for Beacon Technologies, but claims that Senior Web Business Consultant is more fitting. With a Masters Degree from Kansas State in Information Systems and a BS from Wake Forest in Mathematics/Computer Science, his passion is helping clients get the most out of their website and internet technology. Mark co-founded Beacon after spending a couple of years with RJ Reynolds and 13 years at AT&T. Outside of Beacon, he is an avid racquetball and softball player, while also coaching youth baseball and football.
By | 2016-11-18T14:26:47+00:00 September 28th, 2016|Cascade CMS|Comments Off on Wow! Lees McRae College Launches New Website

HTML5 and Javascript Charts

If you need a nice chart for your website for things such as charity drives or school donations, these are some great resources. Some are easy to install and some require knowledge of javascript.

  1. CanvasJS Chart Types – Includes many chart types and covers all most any time of chart you could need.
  2. Chart.js – This is for the advanced user, but you can modify and create charts with animations effects and build for responsive sites.
  3. AnyChart – This one has a trial version, before purchase. This is great for out to box functionality and can be customized. Used by many large corporations and businesses.

html5 charts

Image Source: data-ink.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:46:39+00:00 September 23rd, 2016|Cascade CMS|Comments Off on HTML5 and Javascript Charts

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

Cascade Server Help and Training Resources

Those that have worked with Beacon Technologies on Cascade Server projects know that our experienced staff is available for “as needed” content management help through our Preferred Client Services department as well as for customized training sessions and user manuals specific to the site designed for your organization. However, did you know that Hannon Hill, the developers of Cascade server, also offer a wide variety of training and help resources? Here are a few that you might find helpful:

Hope you find these resources helpful and please add your own in the comments below!

By | 2017-08-07T16:00:13+00:00 February 10th, 2015|Cascade CMS|Comments Off on Cascade Server Help and Training Resources

Adding Velocity Foreach Conditionals

There are different approaches to adding conditionals in a foreach loop. These are just a few code examples that are simple and easy to integrate in Velocity.

Note the examples would are what go in the foreach loop. Your set would be applied above with your specific variables.

Example 1: Gets the last value in the foreach loop and applying HTML or code element.

#if ( $foreach.count == $group.size() )

HTML can be placed here.

#end

Example 2: Gets any value except that last one in the foreach loop and applying HTML or code element.

#if ( $foreach.count != $foreachGroup.size() )

HTML can be placed here.

#end

Example 3: Gets any value with a specific count and then uses #break. (Note: #break in a foreach loop is available in version 1.6 or higher)

#if ( $foreach.count > 3 )

#break

#end

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-16T13:14:07+00:00 June 2nd, 2014|Cascade CMS|Comments Off on Adding Velocity Foreach Conditionals

Quick Flexslider Scrolling Fix for iOS Devices

After browser testing Flexslider on iOS devices, we’ve found a small issue that prevents the browser from responding or making the screen scroll up or down while sliding up and down on the slider.

There is a small fix that works for our preference and can get around that, until an upcoming update of Flexslider resolves the issue. So swiping once it stays on position to view the slider, swipe again and it will reactivate the scrolling.

To get the slider to work properly again for swiping up and down to get past the slider on a smaller screen add the following to the parameters of the JQuery function.

Original Source: GitHub Flexslider Forum

Parameter to add to your JQuery Flexslider call:

useCSS: false

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:31:36+00:00 April 29th, 2014|Cascade CMS|Comments Off on Quick Flexslider Scrolling Fix for iOS Devices

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

CSS Only Tabs

Have you wanted a simple tabbed interface without the use of javascript? There’s an easy way using only CSS.  This provides better page load so it doesn’t have to rely on javascript and also prevents the page from jumping when javascript isn’t enabled. The source code below is a simple example.

CSS:

<style>

* { margin: 0; padding: 0; }

body { padding: 1em; font-family: sans-serif; background-color: #777; }

ul { list-style-type: none; }

input[type=radio] { position: absolute; left: -9999px; top: -9999px; }

.tabs { position: relative; z-index: 999; height: 42px; white-space: nowrap; font-size: 0; }

.tabs label { display: inline-block; vertical-align: bottom; margin-right: 4px; margin-bottom: -1px; margin-left: -1px; background: #EEE; padding: 12px 24px; border: solid 1px #DDD; border-radius: 5px 5px 0 0; cursor: pointer; background-color: #EEE; text-transform: uppercase; font-size: 11px; letter-spacing: 1px; box-shadow: 0 -1px 6px rgba(0,0,0,0.1) inset; color: #666; }

.tabs label:first-child { margin-left: 0; }

.tabs label:hover { background-color: #DDD; }

input:nth-child(1):checked ~ .tabs label:nth-child(1), input:nth-child(2):checked ~ .tabs label:nth-child(2), input:nth-child(3):checked ~ .tabs label:nth-child(3), input:nth-child(4):checked ~ .tabs label:nth-child(4) { padding: 14px 24px; border-bottom-color: #FFF; background: #FFF; box-shadow: none; color: #000; }

.sections {} .sections li { display: none; height: 180px; padding: 1em; border: solid 1px #DDD; border-radius: 0 5px 5px 5px; background-color: #FFF; box-shadow: 1px 1px 20px rgba(0,0,0,0.4); }

input:nth-child(1):checked ~ .sections li:nth-child(1), input:nth-child(2):checked ~ .sections li:nth-child(2), input:nth-child(3):checked ~ .sections li:nth-child(3), input:nth-child(4):checked ~ .sections li:nth-child(4) { display: block;}

</style>

HTML:

You can see the demo and also get the source code here.

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-16T13:05:42+00:00 December 30th, 2013|Cascade CMS|Comments Off on CSS Only Tabs

Random Images on Page Load

If you need to rotate random images on page load each time, there is a simple way to do it with javascript. The below will take you through the steps on how to achieve the effect.

1. Create the folder you would like to pull the dynamic images from.

2. Add in the image tag and a class or ID, like: <img class=”shuffle” alt=”” />

3. Set your script inside the head tag of your page. You can set your own preference for the folder location and image file names you want to rotate

//you can change these defaults to your own preferences.

path: ‘images/’, //change this to the path of your images

myImages: [‘image1.jpg’, ‘image2.jpg’, ‘image3.jpg’, image4.jpg’, ‘image5.jpg’ ] //put image names in this bracket. ex: ‘harold.jpg’, ‘maude.jpg’, ‘etc’

4. Last step is to call the script function to have it begin rotate. The first one below is using the path in the script, or you can call the folder in the call below in the second call example below.

$(‘.shuffle’).randomImage();

//or to change the default path

$(‘.shuffle’).randomImage({path: ‘myOtherPath/’});

Source: www.robwalshonline.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:31:32+00:00 October 25th, 2013|Cascade CMS|Comments Off on Random Images on Page Load
Load More Posts