There are a number of factors to account for when using images in hero unit sections of your website. Push10 has an excellent primer, and here is a helpful excerpt:
By default, the ideal website hero image size for full-screen background images is 1,200 pixels wide. However, if users are browsing on larger screens, these images need to scale up to fill the screen. This can often introduce some blur into the image. If the image is just a background image, this blur is often acceptable – even desirable. But if the image is a foreground image, or contains vital elements that must be sharp, we will often create larger source images in the range of 1,800 pixels or so. The upside? Sharper images. The downside? Larger files which lead to longer load times.
We have created a content style guide to help enforce consistency and uniformity in how information is presented throughout your ProudCity site.
Once you have collected the answers, we recommend tailoring the language with the tips provided in the content style guide.
As you finalize the questions and answers from the departments, we recommend you start placing them under their designated child category. If you see that your question does not belong to a specific child or parent category, create a new one. This will allow you to continue building the structure without having floating questions and answers.
Presented is an example of how we use the structure to create and format the answers and questions content. In the worksheet, you are provided with multiple parent and child categories to help you get started.
Culture & recreation ——————–> Parent category
Park permits and reservations ————————-> Child category
Is there a public swimming pool? ——————-> Question
Detailed answer ——————————–> Answer
Who do I call to reserve a park facility? ———–> Question
Detailed answer ——————————-> Answer
Parks and recreation ————————————–> Child category
How do I enroll my child in little league? ———-> Question
Detailed answer——————————–> Answer
Events ———————————————————> Child category
Where can I find a list of upcoming concerts and cultural events? ————> Question
Detailed answer——————————-> Answer
As we can see from this structure, there is only one parent with multiple children, where each child category has at least one question and answer.
Provided is a visual representation of how the parent, child, question, and answer will look when you follow the structure designed.
By creating FAQ topics we are able to distribute where the answers will display throughout the site. If you have already created a FAQ topic please skip to the “Create a question and answer content” or “Display frequently asked questions on a web page” section.
Go to dashboard
Click on ‘Answers’ on the left navigation bar
Click on ‘FAQ Topics’ on the left navigation bar
Add new FAQ Topics
Write a name for the FAQ topics
To distinguish the label as a FAQ, add ‘FAQs’ at the end of the name. For example, Finance FAQs
Leave the ‘Parent Category’ dropdown with the default text of ‘None’.
By creating a new contact that has staff member name, position, label, and form of communication either email or/and phone. We use labels to distribute where the contacts display throughout the site.
Got to the dashboard
Click on the ‘Contacts’ icon or the ‘Contacts’ label on the left navigation bar
Click on ‘Add New’
Add new staff member
Type in staff name
In the ‘Staff Member Info’
Optional fields – Facebook URL, Twitter Username
Try to be consistent with the information you fill in for each staff member.
Add staff member bio in the visual editor, this is optional
Add Staff photo, the photo will display similar to the feature image style
Headshot photos should be portrait orientation.
The tool is going to crop and resize images for responsive design, so before uploading the headshots, crop out areas with lots of space around the face area such as background or even chest and torso.
Pick from the media library
Click ‘Set Staff Photo’
The staff member can belong to multiple groups, select all that apply. For example, if someone should be displayed in ‘City Staff’ AND ‘Administration Staff’ you should select both groups. This would also be the case if someone should be displayed in the elected ‘Elected Official’ or ‘Council’ group.
By creating group categories we are able to distribute where the contacts display throughout the site. This is commonly used for lists for specific departments such as ‘Administration Staff’ to list the employees that make up that department. If you have already created a group category please skip to the “Create a contact” or “Display a list of contacts on a web page” section.
Go to dashboard
Click on ‘Contacts’ on the left navigation bar
Click on ‘Groups’ on the left navigation bar
Add new contact group
Write a name for the group
Leave the ‘Parent Category’ dropdown with the default text of ‘None’.
Whether you’re using the featured image or the add media feature you upload your files to ProudCity just like you would attach a file to an email.
Once you have selected and uploaded a file, make sure to fill in the file details: title, caption, alt text and description. This will help with SEO and in the future when searching the media library to reuse the file.
Once files have been uploaded to ProudCity they live in media library for future use so you do not need to upload a new file every time you would like to use media in your content. If you are diligent with you file descriptions as mentioned above, the search feature will be even more helpful as your media library goes.
Editing image in the dashboard
Once media is inserted into your content you can double click the image to get some quick edit options to format your text around your image.
If you click on the pencil icon you will get even more options for editing your media, including editing the size of the image. We recommend that you use the present thumbnail, small, medium, large and full size settings for consistency. If you need even more advanced editing capabilities, you can select “edit original” to rotate, crop and customize dimensions.
Credit & Licensing
There is a lot of free media out there, make sure that you are getting permission and licensing if you’re using media that you did not create or pay for.
Creative Commons (CC) is the most common media license to encounter on the web, and essentially breaks down into 3 concerns (the actual licenses are more nuanced, but the gist is):
Use my stuff, just cite me!
Use my stuff, just not for commercial uses and cite me!
Use my stuff, but you can’t change it and cite me!
Featured images are pre-formatted into some of our content types and templates such as news posts and departments. Oftentimes the feature post is highlighted in the header of content and previewed as a thumbnail on another page or list.
The add media option provides the admin with more flexibility to post media throughout their content. Simply put your cursor where you want the media to inserted and select add media to start the process.
Media input with the “Add Media” method will not show up in teasers lists, however. To have an image display in the teaser view and to take more direct control over the appearance of a post, simply check the “Hide Featured Image” checkbox on the edit page after selecting a featured image.
There are some instances where a “portrait” (taller than wide) or “landscape” (wider than tall) style image may look awkward or not fit nicely into your content. If you are starting from a very large image, it could be possible to crop (see below) the image to the appropriate aspect ratio. Often it is just easier to select a new image.
No minimum file size but some displays of images will not look great if you’ve started with a smaller image. For instance, the “Page Header” widget in “Header” or “Full Header” mode really needs an image at least 1100px wide to not become visually distorted.
The standard Microsoft-based Word document (doc, docx) is an acceptable format for most users but differences in versions, fonts, etc. can cause users to have different editing experiences. To “fool-proof” the appearance of your content, try exporting your document as a PDF.
ProudCity recommends that video and audio be posted through a free online account like YouTube. These services automatically make video streamable to mobile devices, and will easily reach the broadest audience. YouTube has the additional benefit of being consumable by the home page Social Wall.
Not especially. The standard file types listed above all have some level of “compression” and will be fine for web-based publishing. There are certain, more rare, image formats like .tiff and .raw that are “un-compressed,” will likely be too large for easy viewing on the web, and should be avoided.
Because government serves a wide constituency, structured content in web pages is critically important in addressing the needs of all website visitors. It is particularly important for presenting truly accessible web content.
While ProudCity addresses many content structure issues “behind the scenes,” whether you’re using the our visual or text editors, it’s important to understand the basics and best practices of structured content as you design your web pages.