Design Library: Enhancing Your Web Experience
Bits & Bytes Recap
In our recent forum, we discussed how to implement pages from our Design Library,
as well as tips for use, best practices, and things to watch out for. The following
is a recap of our discussion:
What is the Design Library?
The Design Library is a collection of pre-designed pages aimed at providing quick and easy solutions for your web needs. Each page is verified for accessibility upon initial download, ensuring a seamless experience for all users. Over the past six months, we've introduced several new pages and a user-friendly method for downloading and uploading these pages without needing assistance from the Web Support & Usability team.
Uploading an Example Page
Step 1: Navigate to the desired example page and select the Download generic example X link. This will download a zip file containing the example page.
Step 2: On your site, navigate to the directory where you want to add the example page. This could be a specific section of your website where you want to implement the new design.
Step 3: In that directory, select the Upload button in the top right corner. This will open a pop-up window for uploading files.
Step 4: In the Upload pop-up, select Import Zip File as the type. Add the example zip file by selecting the blue + ADD button. Once the file has loaded, select Start Upload. This process will extract the contents of the zip file into your chosen directory.
Step 5: Under the Zip Import page, verify the extraction location and change the file name from generic-example-X.pcf to the correct file name using the pencil Edit icon. Ensure the file has a ".pcf" extension after renaming to guarantee proper upload.
If you plan to use this template page to replace a current page, we recommend naming the page the same as the replacement page with a dash and some signifier that it is a template page. One recommendation is to add your initials at the end of a page name.
Step 6: Once everything is verified, select Finish Upload in the bottom right corner. This completes the upload process, and your new template page is now ready for editing.
For a full guide, including images, check out our Example Layout Upload Walk-through guide.
Notes and Best Practices
There are a few updates needed after uploading the template page. If you check out the page and go to its properties, you'll see the Page Title is Template #. This needs to be changed to ensure the correct title appears when sharing the page or viewing it in a browser tab. We also encourage adding a description and some keywords or phrases to enhance your SEO. This helps search engines understand the content of your page, making it easier for users to find.
If there's a section you don't want to include in your final design, we recommend removing all content in that section and then “turning off” the section. This can be done in the page properties. Turning off a section rather than deleting it allows you to easily re-enable it in the future if needed.
Additionally, always review the accessibility of your page after making changes. Ensure that all images have alt text, links are descriptive, and the page is navigable using a keyboard. These practices help make your website more inclusive and user-friendly.
Wrap up
By following the steps outlined above, you can seamlessly integrate these templates into your site, ensuring a professional and user-friendly experience for your visitors. Remember to update the page properties, optimize for SEO, and maintain accessibility standards to get the most out of your new template pages.
We hope this guide has been helpful in navigating the Design Library and making the most of its features. If you have any further questions or suggestions, feel free to reach out to the UIT Web Support & Usability team.
Happy designing!