The semester is over. Grades are submitted. You may be gearing up for a new summer term or perhaps a summer vacation. Either way, its a good time to take a look at your people.ua.edu website. Does the content need updating? Do you have some new pictures to add? Now's the time.
Don't forget to take a look at the stats on your dashboard, too! It's always interesting to see how many visitors you've had to the site and which pages are most visited. While you're at it, share the site with your colleagues. Let them know how easy it was to build your site and send them here to www.people.ua.edu so they can request a site of their own! While the campus is just a little bit quieter, I hope you'll take some time to refresh your site. If you need some help, give us a call or send an email and we'll be glad to assist you. Happy Summer! Adding images to your site is a great way to make it visually appealing and interesting. However, images may sometimes take a long time to load, especially for people attempting to view your site from a slow internet connection. Luckily, there is an easy way to reduce your image's file size without reducing the visual size or quality of the image. The key is to "Optimize" the image. Many photo editing tools provide this option when publishing/producing an image. However, there are other online sites that will optimize images, as well. In this post, we'll look at Image Optimizer -http://www.imageoptimizer.net/Home.aspx Once there, look at the box in the lower left-hand corner. Click the "Choose File" button to select the image you want to optimize. If your image's width or height is larger than the specifications, adjust them to accommodate the image so it is not resized. Then, click "Optimize Now!" On the next page, your newly optimized image will be available for download. The site will tell you how much it was able to decrease the file size without sacrificing quality. The one we uploaded was shrunk by hundreds of KB! Optimizing images is an easy way to make your site load faster without sacrificing quality. If you are looking to speed up your site for slow connections, this is a great way to eliminate unnecessary bulk on your pages!
Happy designing! One of the major points we emphasize is the concept of accessibility. As you design your website, it is essential to remember that people of different abilities will be accessing your site. Poor design can create barriers to accessibility. To illustrate this concept, today we will discuss screen readers and how your website's features can help or hinder their performance. A screen reader is a software application that interprets the content on a computer screen to a format that can be accessed by visually impaired people. Commonly, screen readers convert visual text to spoken words to which the person can listen. Here is a highly informative video showing a screen reader in action: As demonstrated in the video, the layout of a website is important to its accessibility. The distinction between titles and body text becomes essential to a site's ease of access. It can be tempting to use the "Title" element to make text big and bold, but if the content is not actually a title, the screen reader becomes less effective in examining the content of a page.
If you would like to edit the size and boldness of text to emphasize it, edit the text of the "Paragraph" element to do so rather than using the "Title" element. Make your text bold, italicized, underlined, a different color, larger, or smaller, all from the blue toolbar that appears as you edit the content of the "Paragraph" element. For instructions on how to do so, visit our First Elements page of our Online Training Guide: http://www.people.ua.edu/first-elements.html For more information about accessibility, visit our Accessibility Guidelines page: http://www.people.ua.edu/accessibility-guidelines.html There, you will find a fun and educational infographic on the best design practices for your website. Happy designing! This week, we focus on Dr. Douglas Gibler's website. He utilizes many of the fun and informative features that the people.ua.edu web development platform offers. The first thing you may notice is that he uses columns to design his page in an easy-to-read way. Columns help to break up the monotony of long blocks of text, making them more visually appealing and eye-catching to the reader. If you would like to learn how to use columns on your page, visit http://www.people.ua.edu/alter-the-layout.html.
Next, he has embedded a feed of his Google+ posts into his page. You may do this with Twitter or any other service that has an embeddable feed, as well. You can use this to add all kinds of fun and interesting features to your page. This is done using the Custom HTML element, the feature we spotlighted last week. If you would like to learn more about embedding custom HTML, visit http://www.people.ua.edu/custom-html-element.html. Finally, you will see that he uses one of the less commonly utilized design elements: the Google Map. This feature can be incredibly helpful for people who are not familiar with the layout of UA. You may learn how to use this element by visiting http://www.people.ua.edu/add-a-map-to-your-site.html. Weebly's features make creativity and design fun and easy. We hope these Site Spotlights encourage you to experiment with your people.ua.edu website. Visit Dr. Gibler's site and the other showcased sites at http://www.people.ua.edu/showcase.html. If you see a feature you like, but don't know how to create it, let us know. We will be glad to assist you. We welcome you to leave any commends on this blog as well. Happy designing!
"Embed HTML Code" is an intimidating phrase. For those of us who are not tech-savvy, it may seem easier to avoid dealing with HTML codes altogether. However, Weebly does an excellent job of simplifying this aspect of the web design process, just like it does with so many others.
As an example, we will be using SlideShare, a popular website which allows you to upload and share your presentations with the world. You can embed your SlideShare presentation - or any other HTML code - in your people.ua.edu site with just a few simple steps. When designing your site, you can find the option to embed HTML code under the "Basic" tab. I have highlighted the correct element in green in the picture below.
As with any element, you will drag and drop it into your site's page. The next step is to acquire the code for the object you wish to put on your page. You need not understand HTML code to find it; the code will often be provided for you by the website your object is from.
For example, using SlideShare, we can find the HTML code for the presentation we wish to share under the "Embed" option, highlighted here:
When you click on the "Embed" option, the following dialog box will pop up:
The next step is to copy the code provided to you. SlideShare makes this task especially easy by providing a simple "Copy" button that does all the work for you, but some sites will require that you highlight and copy the code yourself.
Once you have copied the code, you are ready to embed it. Click on your custom HTML element on your site and paste the code into the box. When you click outside of the box, your object should appear where the code was. If it does not, there might be an error in the code; try copying the code again from its original source to make sure you did not miss any brackets or lines of code when you copied it the first time. Voila! We have the final result, which just so happens to be a great presentation on the importance of web accessibility for differently abled people. We here at people.ua.edu are working on a series of blog posts to address the issues of web accessibility and how you can ensure that everyone can access your website equally. For now, we recommend acquainting yourself with the concepts of web accessibility in this presentation. One of Weebly's newest features are the Social Icons. These little buttons can be used to link to your Twitter, Facebook, Google+, and more with a simple click. You will find the drag-and-drop option for Social Icons under the "More" tab of the Website Editor. Once you add the social icons to your page, you can edit the links so that they lead to your pages by clicking on the element. Simply type in the URLs which lead to your page, and voila! Visitors to your site will have easy access to your profiles on other websites.
Happy designing! One of Weebly's newest features is a search bar for your site. Previously, search bar capabilities were limited to HTML codes provided by outside sources, which often required signing up for accounts and other complications. Thankfully, Weebly has made it much easier to allow visitors to search your site for specific words and phrases. When editing your page, you can find the drag-and-drop search bar feature in the "Basic" elements category. Simply place the search bar wherever you would like it to go within your site. Some ideas for separating search results from the general text of your website include creating a separate page for the search bar and results or placing the search bar within a column of its own.
Don't you just love the slideshows that appear at the top of many UA websites? Now your site can have that same feature! When you create a new page, you will be given two layouts to choose from. You can even add the slideshow (or just one image) to your existing pages by changing the layout on the Pages tab.
Learn how by visiting Slideshow and Image Headers. Once you've added some images, leave a comment or give us a call and let us know what you think about this new feature. Welcome to our blog!
Here's where you'll find current information as we release new features to People.ua.edu. Be on the watch for updates to our Showcase as we highlight one or more sites each month, provide tips and tricks, and answer user questions. We love receiving comments (the nice ones) and suggestions for future postings. We are super excited about people.ua.edu and will do our very best to provide relevant information to help keep your site looking its best! |
Archives
November 2021
Categories
All
Follow us! Right-click and copy the link below. Create an RSS feed right in your Outlook or other feed reader application.
|