We’re working on making the website responsive/mobile-friendly. This means that we’re adapting the current site so it can respond to different screen widths such as tablets, phones and desktop computers. We’re planning to go live by mid-August. Hello 2016!
Changes you’ll notice:
The main menu (green area at the top) will have fewer links to allow the entire menu to be available at all screen widths.
We’re ensuring that all links currently available in the main menu will be available within two clicks.
The quicklinks currently at the top of the main menu that include “login” and “library” will be moved to the footer at the bottom of the page.
The search functionality has been enhanced to improve navigation and accommodate the reduction in menu links.
Multiple-column layouts will become single columns at smaller screen widths.
The common page layout (left sidebar with grey menu and page content on the right) will display as two columns at larger screen widths and as a single column at smaller screen widths.
All images will resize according to the screen width.
Not much will change on your end since the Drupal experience remains the same. However, we encourage you to start thinking about how your content displays at the different screen widths. Here are some tips to get you started.
Tips to optimize the website for the responsive layout:
Use the fewest number of columns possible.
When using multiple columns, be aware that the first column will display above the second column at smaller screen widths.
Do not use tables in your web pages. They will not display properly at smaller screen widths. Try reformatting your content if it currently uses tables. If you’re having trouble displaying content or data, we can help.
We’ve made some updates to the Event content type and display. If you take a look at the Event content type in Drupal at https://drupal.unbc.ca/node/add/event (note that you’ll have to be logged in to see this), you’ll notice that we’ve added in some new fields.
Descriptions on how to use the new fields are included within the form. Training videos and documentation for web editors will be updated in the coming months, but in the meantime feel free to get in touch if you have any questions.
Here’s a preview of what to expect:
Add an Event Cover Image
New field: Event Cover Image
The Event Cover Image will display the image at the top of the Event page display, and also on the Events landing page at www.unbc.ca/events.
This is an Event displaying with a Cover Image (shown at the top), a Video Gallery and an Image Gallery down below.
The Events landing page displays a preview of the Cover Image to the left of the Events listing.
Create a Video Gallery
We’ve added in the ability to add Youtube videos to Events! Just paste the Youtube link into the Videos field.
New field: Videos
Video Gallery display
Add an Image Gallery
Create an Image Gallery directly in the Event by uploading images into the Image Gallery field.
There are many ways to crop and resize images. The WYSIWYG editor allows us to resize images, but it does not allow us to crop them. Photoshop is our #1 photo editing software, but it can take time to learn and is costly. If you’re looking for a quick and easy way to crop photos, we recommend Pixlr, a browser-based photo editing tool. Visit http://pixlr.com and take a look at the tutorial below to learn more.
We’ve included some new button styles with the updated designs:
Buttons created before the design updates are displaying as solid grey buttons. To get the arrow or file extension to display, you will need to re-apply a button style as either a link style or document style.
Document Buttons will detect the type of document and display its extension.
If there is too much text for the button, the arrow or doc extension won’t display.
If there is way too much text for the button, the text will be cut off at the end of the button.
Buttons that take up the entire width of the page are not recommended.
If a link has too much text for a button, then it should be styled as a regular link.