Web image specifications for designers
UK HealthCare Responsive Web Design
Lee Cundiff, digital marketing manager
version 3 – 10/5/15
This document contains specs for creating images for the UK HealthCare Responsive Design website
found at http://ukhealthcare.uky.edu/home
Overall instructions for creating images
Generally designers will not be required to upload images and PDFs to the site themselves, but if they will follow these
guidelines and create correctly formatted images, the web team can upload more easily.










All images on this site should be JPG format.
Insert text using Photoshop or Illustrator on all images EXCEPT the home page banner (web team will enter in CMS)
Text is inserted using Photoshop: Myriad Pro 28 Semibold
Preferred color for blue bar: HEX #083e7b
Save for Web in Photoshop as an optimized JPG at the correct final size. Balance making file size small with appearance.
For best results, then optimize the images using http://optimizilla.com/
Bonus: after optimizing, assign descriptive metadata to the image in the File > File Info screen so image can be found.
The person who uploads the image should apply alt tags to improve search and ADA compliance.
Images will automatically resize for smaller devices if image size has not been changed in Ektron image size settings.
Templates for these images are stored on the creative server: Media Assets > Web Graphics
Naming conventions for images
The name should be meaningful and as long as necessary to accurately convey the content of the file. It should be all
lower case with hyphens between words. It should not say “web” or “final” or “version3.” If you choose to put the
project number in the name, put it last:
boy-patient-with-dr-noble-6-6451.jpg
If a similar picture will also be uploaded I put the dimensions in the title so that it can easily be differentiated:
boy-patient-with-dr-noble-250x125.jpg
UK HealthCare Responsive Web Design image specifications for designers | v. 3. 10/5/15
Image sizing and formatting
1.1 Home page ‘hero’ wide rotating banner - sizing and formatting information










Width 1250 pixels
Height 470 pixels
72 DPI
JPG: Save for Web in Photoshop as an optimized JPG at the correct final size.
Then optimize the image using http://optimizilla.com/
Naming convention: hero-robinsons.jpg
Choose images with a close-up on the right side and out of focus background action on the left side.
Keep large scrolling banner image size under 100 KB; less if possible to save page weight.
No text is to be placed onto this image as the text is set within the CMS so it will be responsive.
To add text using the CMS, see instructions on page 7 for Homepage programming to add text and animation.
2
UK HealthCare Responsive Web Design image specifications for designers | v. 3. 10/5/15
Home Page banner area on desktop
3
UK HealthCare Responsive Web Design image specifications for designers | v. 3. 10/5/15
4
Call to action ads (CTAs) and other images used in the right hand column - sizing and
formatting information













Width 390 pixels
Height: 150, 225 or 250 pixels (smallest to fit content)
72 DPI
JPG: Save for Web in Photoshop as optimized JPG at correct final size.
Can use 1 pixel grey line around CTA if desired.
Then optimize the image using http://optimizilla.com/
Naming convention: ukhc-delivers-cta.jpg
alt=" ukhc-delivers-cta " title=" ukhc-delivers-cta "
Buttons, if used, do not change on rollover
Text is inserted using Photoshop: Myriad Pro 28 Semibold and family
Preferred blue: HEX #083e7b
For best results, choose light warm images with a close-ups of faces
Keep image size under 30 KB, less if possible.
Sub-site home page (with no banner) showing CTA placement
UK HealthCare Responsive Web Design image specifications for designers | v. 3. 10/5/15
1.2 Landing page banner - sizing and formatting information











Width 848 pixels
Height 244 pixels
72 DPI
JPG: Save for Web in Photoshop as an optimized JPG at the correct final size.
Then optimize the image using http://optimizilla.com/
Naming convention: uk-program-for-bioethics.jpg
alt=" uk-program-for-bioethics " title=" uk-program-for-bioethics "
Text is inserted using Photoshop: white Myriad Pro 28 Semibold
Preferred color for blue bar: HEX #083e7b
For best results, choose warm images with a close-up of faces.
Keep banner image size under 30 KB, less if possible.
Landing Page: Two columns with left menu and wide right column showing landing page banner placement
5
UK HealthCare Responsive Web Design image specifications for designers | v. 3. 10/5/15
1.3 Subsite home banner - sizing and formatting information











Width 870 pixels
Height 250 pixels
72 DPI
JPG: Save for Web in Photoshop as an optimized JPG at the correct final size.
Then optimize the image using http://optimizilla.com/
Naming convention: obgyn-at-hazard.jpg"
alt="obgyn-at-hazard" title="obgyn-at-hazard "
Text is inserted using Photoshop: white Myriad Pro 28 Semibold
Preferred color for blue bar: HEX #083e7b
For best results, choose warm images with a close-up of faces.
Keep banner image size under 30 KB, less if possible.
Subsite Home Page: Two columns with right column CTAs showing subsite home banner placement
6
UK HealthCare Responsive Web Design image specifications for designers | v. 3. 10/5/15
7
UK HealthCare Responsive Web Design image specifications for designers | v. 3. 10/5/15
1.4 Small CTA (call-to-action) ad for use under left menus - sizing and formatting information










Three column wide middle showing small CTA under menu
Width 262 pixels
Height 191 pixels (may vary)
72 DPI
JPG: Save for Web in Photoshop as optimized JPG at correct final size.
Then optimize the image using http://optimizilla.com/
Buttons, if used, do not change on rollover
Text is inserted using Photoshop: Myriad Pro 28 Semibold
Preferred color: HEX #083e7b
For best results, choose simple text messages.
Keep image size under 15 KB, less if possible.
8
UK HealthCare Responsive Web Design image specifications for designers | v. 3. 10/5/15
1.5 Provider photos - sizing and formatting information
Specs for images to be used on the website provider profiles:








Width 200 pixels
Height 267 pixels
72 DPI
JPG: Save for Web in Photoshop as an optimized JPG at the correct final size.
Then optimize the image using http://optimizilla.com/
Choose attractive smiling photos when possible; white coats when available.
The shortest side must be at least 200 pixels so it will create a thumbnail for
Facebook and other social media.
Keep image size under 15 KB; less if possible.
Provider profile page showing use of provider photo
9
UK HealthCare Responsive Web Design image specifications for designers | v. 3. 10/5/15
10
1.6 Images without captions
Example of a photo that is a good size for the page and the phone, http://ukhealthcare.uky.edu/gill/cardiac-rehab/

Width: 340 pixels is preferred.
 Height: 150, 225 or 250 pixels (whatever shape
fits content)

72 DPI
 JPG: Save for Web in Photoshop as optimized JPG
at correct final size.

Can use 1 pixel grey line around CTA if desired.

Optimize the image using http://optimizilla.com/
 Naming convention: ukhc-cardiovascularrehabilitation.jpg

alt=" ukhc-cardiovascular-rehabilitation " title="
ukhc-cardiovascular-rehabilitation "

If a color is used in the image, prefer blue: HEX #083e7b

For best results, choose light warm images with a close-ups of faces

Keep image size under 30 KB, less if possible.
Example of a photo with good visual style, though it is smaller than usual:
http://ukhealthcare.uky.edu/OBGYN/baby-friendly-hospital/
UK HealthCare Responsive Web Design image specifications for designers | v. 3. 10/5/15
11
Working with images in the CMS once they have been formatted
2 Home Page programming to add text and animation
2.1 Adding text
Home page banner text content is created by a CMS author using the HomePageBanner smart form. NOTE: this text will
break the formatting if the message is too long. This message is the optimal length:
CARING FOR THE PROPLE OF THE COMMONWEALTH
THAT’S WHY WE’RE HERE.
READ ERNIE’S STORY >
UK HealthCare Responsive Web Design image specifications for designers | v. 3. 10/5/15
12
2.2 Adding the banner to the rotation
The Home Page banner text content is created by a CMS Author using the HomePageBanner smart form:
Smart Form View:





 Banner Interval: This allow a CMS Author to determine how
long it will take to display the next banner item through a manual
scroll (fade in time)
 Reorder Icon Banner Quick Links: This Icon will allow the CMS
Author with appropriate permissions to reorder items, add items, or
remove items from this list. CMS author can add 3 Quick links, any
additional may break the HTML.
 Banner Quick Link Icon Class: This icon is from the style
sheets. To add an additional icon you must edit the appropriate style
sheet to include the image/ Image class.
 Banner Quicklink Link: This will be the link URL the site visitor
will be direct to after clicking on the Banner Quicklink text.
 Banner Quicklink text: This will be the clickable text for the
quick link
 Reorder Icon Banner: This Icon will allow the CMS Author
with appropriate permissions to reorder items, add items, or remove
items from this Banner.
Banner Image: This will be the large image for the banner. This banner will automatically resize itself to fit responsive
design. Be sure the largest image is uploaded for best desktop display.
Banner Title: This will be the top line(s) of text within the description box.
Image Sub Title text: This will be bottom line(s) of the description text displayed over the image.
Banner Link: This will be the main call to action URL for this specific banner image.
Banner Link Text: This will be the text that is read and clickable for the URL link entered in the field above.
Website View:
Desktop:
Mobile:
UK HealthCare Responsive Web Design image specifications for designers | v. 3. 10/5/15
13
2.3 Home Page Content Blocks
The homepage content blocks are managed through several HTML content blocks. Classes will be added to the html to determine
back ground color and additional information: Shown is HTML for each different type of content item:
HTML
<!-- All Services --><article class="pod">
<div class="titleBG"> <h1 class="podTitle">All Services</h1>
&#160;</div>
<ul class="blueBG semiBold no-bullets clearUL">
<li> <a>Adult Services A - Z ›</a> &#160;</li>
<li> <a>Pediatric Services A - Z ›</a> &#160;</li>
<li> <a>Primary Care ›</a> &#160;</li>
<li> <a>OB-GYN ›</a> &#160;</li> </ul> </article>
<!-- LOCATIONS --><article class="pod">
<div class="titleBG"> <h1 class="podTitle">LOCATIONS</h1>
&#160;</div>
<p>
UK HealthCare provides a high level of medical care to the
people of Kentucky and the region, and includes: </p>
<ul class="blueBullets clearUL">
<li> <a>Albert B. Chandler Hospital </a> &#160;</li>
<li> <a>UK Good Samaritan Hospital</a> &#160;</li>
<li> <a>Eastern State Hospital</a> &#160;</li>
<li> <a>Makenna David Pediatric Emergency Center</a>
&#160;</li> </ul>
<div class="large-12 medium-12 small-8">
<a class="viewAllBtn
button blue">VIEW ALL LOCATIONS <span
class="arrow">›</span></a> &#160;</div> </article>
<!-- Homepage CTA --><div class="row clearfix"> <section class="cta
homepageCTA blue">
<h1 class="ctaHeadline">
Our patients aren’t the only ones
who recognize world-class care...
</h1>
<img src="/images/contentImages/bestDoctorsLogo.png" alt="Best
Doctors" class="pull-left" />
<p>
More than 100 UK
HealthCare physicians affiliated with University of Kentucky Albert B.
Chandler Hospital, Kentucky Children's Hospital and UK HealthCare
Good Samaritan Hospital appear on the <a>Best Doctors in America®
list for 2014</a> – more than any other hospital in Kentucky.
</p>
</section> </div>
<!-- Notice --><div class="notice clearfix"> <div class="row">
<span class="semiBold">Notice:</span> <a>Breach of protected
health information reported</a> March 25, 2014 </div> </div>
Website View
UK HealthCare Responsive Web Design image specifications for designers | v. 3. 10/5/15
14
<div class="large-12 medium-12 small-8">
<a class="viewAllBtn
button blue">VIEW ALL LOCATIONS <span
class="arrow">›</span></a> &#160;</div> </article>
3
Captions, code to make images responsive
3.1 Caption snippet
There is a div class pull-left or pull-right to allow the image/caption to be on the left or right. Large-4 (Can be any
number up to 12) is the number of columns that the image and caption will cover in the large view. Small-12 will allow
the image and caption to cover the full width in the mobile and tablet views. It is recommended to use images that are
at least 640 px wide. Also, it is worth noting that this is only needed for images greater than 320 px since the smallest
size for the phone is 320 px.
Code Snippet:
<div class="pull-left large-4 small-12">
<img src="images/contentImages/hospital.jpg" alt="lorem ipsum" class="">
<div class="clearfix">test caption test caption test caption test caption test caption test caption test caption
test caption test caption test caption</div>
</div>
--
3.2 Code to make images responsive
Even if they don’t have captions, it makes images responsive. You just delete the yellow part if there is no caption.
Responsive caption code:
<div class="pull-left large-4 small-12">
<img src="images/contentImages/hospital.jpg" alt="lorem ipsum" class="">
<div class="clearfix">test caption test caption test caption test caption test caption test caption test caption
test caption test caption test caption</div>
</div>
3.3 Home screen launch icons
The images for the icons are located at:
IOS - /images/launcherIcon/ios/icon/Icon.png
Andriod - /images/launcherIcon/android/res/drawable-xhdpi/Icon.png
3.4 How to customize Mobile Quicklinks for subsites
Mobile quick links are managed by the OneMasterSitesData smart form
content.CMS authors can create links for the following smart form fields:



Find a doctor link
Directions Link
Appointments link
If you do not click on + mobile quick link no quick links will be displayed
for that specific sub-site.
UK HealthCare Responsive Web Design image specifications for designers | v. 3. 10/5/15
15
3.5 To activate the alert ribbon:
1. In the Home folder, open and edit the alert content item. It should be a short message that will not break on a phone. The
background color can be edited:
 Darker yellow rgb(r=255, g=204, b=0)
 Bright yellow rgb(r=255, g=255, b=0)

2. In the Configurations folder, open Site configurations, then open and edit the Alerts smartform.
3. Add the content ID number to the Value field. View source <> to ensure there are no <p> tags around the number. Do
not change the Text or Description fields. Save, publish, then run clearcache to activate. De-activate by removing the
number and running clearcache again.
UK HealthCare Responsive Web Design image specifications for designers | v. 3. 10/5/15
16