How Site Manager Differs
If you are working on a fully responsive website with FaithWebsites, some of your Site Manager features and tools will work differently than they do on a fixed-width site. You will notice this in tool properties, during content building, and see the differences in enhancements and changes on your web pages.
Getting Started
Responsive means that all content is scaled and moves to resize and shape itself to the end-users screen. By "content", we are including all text, images, links / hyperlinks, media (audio, video), social media and widgets that you enter or flow to your webpages.
FaithWebsites CMS is built so that content you enter in tools and modules flows to your webpages and is automatically responsive in behavior. However, the system has limitations to what it can do with your content, so understanding how to build content for responsive web pages is important. We'll define more of that below.
While we approach this as building responsive web content, we really are building for modern use and must factor in touch friendly (fat finger) content and design, as well as new standards for higher resolution screens and technology. It's a lot of changes hitting us at once, but we're confident that with some dedicated learning, you'll master building content responsively in no time!
The list and detail below provides you with an overview of the largest changes and most important things to know. You can find more specific how-to articles in our support center, or just contact us.
#1 - Images
Images play a rapidly growing role in all web communications. You cannot build successful web pages or online media without visuals. Even your search engine results are now greatly influenced - negative or positive - by your image based content.
We also have increasingly advanced screen resolution and display technology, combined with responsive technology and faster site load technology. This creates a demand for high quality and larger sized images.
- All responsive sites require high resolution images and in most applications, large size. The best rule of thumb is to be sure to obtain the best quality images you can at the start, and don't downsize those photos!
- Realize that for one user on the latest retina-advanced large monitor will see the SAME image as another user on a small smart phone screen. The same exact image must look great at 2000+ pixels as it does at 200 pixels. Site Manager will take care of the scaling, and keep your picture in the correct aspect ratio and pixel perfect for each screen. Your part is to use the best quality, highest resolution image file you have.
- Because images are essential in all forms of web communication, many of Site Manager's tools have greatly expanded image functionality, and more tools have cropping feature integrated. While cropping is another step in building content, it ensures a quality layout for all end-user sizes.
#2 - Navigation.
Navigation is driven both by the design choice your organization made, and by what navigation you have built.
In responsive sites, the navigation will change depending on the users screen size / device.
Main Navigation
Main navigation (also referred to as top navigation or primary navigation) exact location is design specific but is most often across the top width of the site.
- Desktop computers and larger screened hybrid devices: If the user is on a desktop computer, they'll see the typical main navigation at full size, and then any courtesy, utility, dropdown, flyout, or other navigations as designed.
- For most tablets:
- Tablets held in the portrait (or vertical) position will show the touch friendly navigation icon, which will expand / collapse for the full menu
- Tablets held in the landscape (or horizontal) position will show the designed navigation, very similar or identical to a full desktop monitor.
- Not all tablets operate the same. Tablet displays and options are controlled by device manufacturer and operating systems and all sites will vary.
- Smart phones and smaller devices: the site will show a touch friendly navigation icon, and all the main navigation will be organized in this touch expand/collapse menu. Sometimes utility navigation menu items are also included, this is design-unique.
Inside Page Navigation (or Left Nav)
Inside navigation is the level 1, 2 and 3 pages within each category, or directory in your site. This is most commonly found on the left side of a site, although current design trends are positioning internal navigation on the right side.
Your inside navigation will float responsively to the screensize, just like your main navigation. Once the screen size is small, the internal navigation will always drop to the bottom of the page, positioned just above the footer.
#3 - Page Layouts
Within FaithWebsites, you can create 4 different page layouts. This is a combination of left navigation on/off, right side bar on/off, etc.
You can still create all your page layout combinations, but in responsive each of these sections are no longer tied to just the left or just the right. As with all responsive content, it will resize to a point for smaller screens, but when the screen becomes too small to read the content well, the content will break apart. The order of the content for smaller screens, top to bottom is:
- Header / Main Navigation / Banner / Page Title (as applicable)
- Main Body Content, in the order you have entered the content
- Right Side Content, in the order you have entered the content
- Left Navigation and/or Internal Navigation
Understanding that your content moves fluidly creates new best practices in building content:
- Create proper page titles for all pages
- Use tool headings often - if not always
- For right side content - the very first tool should have a tool heading OR create the very first tool as your visual heading for the entire right side content (use a content editor tool and create a heading with H2 or H3). This is very important for users to understand the organization of the content when they are scrolling downward on a tablet or smaller screen!
- Organize all of your content - both main body and right side - using multiple headings.
- Use images throughout all your content and in most situations, you'll want to have your images set to align either left or right of content.
If you are unsure of how to lay your content out - please ask us! We're here to help and offer you suggestions too.
#4 - Space and Spacing
In our responsive CMS, tool outputs have changed to create more space, or padding, between everything. Line height, space between tools, space between navigation and more.
This is not directly related to responsive, but rather to the changes touch screens require. Your finger is much larger than a mouse-pointer. As a direct result, all designs are, well, larger.
You can also help build proper spacing in your content by separating large quantities of content into separate tools per page, and above all - use the correct tool for the content type.
Examples of good tool use for spacing/output would include:
- If you are creating a list of links (for document, PDFs, or external/internal web links), use the links list tool. Even if you only have a few links, this will help ensure that your links work responsively and for touch
- If you are looking to divide content, consider using the column tool
- If you are needing to have a large amount of content organized by header and/or subcategory, consider the Resource / Content Tool with the display expandable content feature turned on. Or, perhaps the Expand / Collapse Tool.
- For bio, profile or contact, consider using the Profiles Tool.
- If you are a school, create your directories using the Faculty Directory Tool.
- If you a church, create your members directory using the Members Directory Tool.
Please do not try to enter extra space or force alignment. Doing so manually will only create broken pages or odd pages for some of your viewers.
#5 - Significant Tool Changes in Site Manager
If you are an existing FaithWebsites customer moving your site to responsive, there's a learning curve on a few tools:
- Calendar. The calendar view on your web pages is all new! Featuring many enhancements including images, a rollover/hover state, icons and a much improved list view!
- Profiles. The profiles tool is totally new, with an all new look to the web pages. Also included is the addition of social media links in profiles.
- Faculty and Members Directories. Also boasting an all new look, the clean directory is visual and touch friendly and features one-touch for more information in your directories.
Many other tools have changes or minor updates and enhancements to enable fully responsive behavior.