Scranton 3.0
43
Scranton.edu 3.0 A Sneak Preview of our Responsive Website
description
Scranton.edu 3.0. A Sneak Preview of our Responsive Website. What we’re going to cover today. Web Projects Overview Responsive Design – what is it, why convert to RWD? Scranton.edu 3.0 – review of new look New Undergraduate Admissions Site How does this impact you? - PowerPoint PPT Presentation
Transcript of Scranton 3.0
Scranton.edu 3.0A Sneak Preview of our Responsive Website
What we’re going to cover today
Web Projects Overview
Responsive Design – what is it, why convert to RWD?
Scranton.edu 3.0 – review of new look
New Undergraduate Admissions Site
How does this impact you?
More Tips & Best Practices
Live Demo
Overview of ProjectsTwo major projects to enhance the University
website in appearance and usability
Conversion to Responsive Web Design
Creation of new Undergraduate Admissions microsite
Both projects are scheduled to go live in July.
What is Responsive Web Design?
Responsive web design allows the layout to change according to the screen size of the user’s device.
•Flexible Web design is proportional from the smallest to the largest device, without those proportions straining.
•After widths or heights hit a certain point the design would then change style sheets to alter content availability, layout structure, and more.
This approach of designing once for all devices (desktops, large screens, tablets and mobile
phones) is a more efficient way to maintain and future-proof higher ed websites.
Why convert to Responsive Design??
Who Doesn’t Love Stats?Mobile on Black Friday 2012
Over $1 Billion spent on mobile alone!
What do People do on Smartphones?Everything!
Performance is Important!74% of mobile web users leave a site if it takes
more than 5 seconds to load (src)
Mobile GrowthMobile Web growth has outpaced desktop Web
growth 8x
Global mobile data traffic should grow 26x over next 5 years
By 2015: Over 50% of all Internet traffic will be from mobile devices!
Source
What about Scranton.edu users?
Smartphones Visits to Scranton.edu
Year Visits % Increase % of Total Visits
2008 2,298 n/a Way < 1%
2009 15,468 573% < 1%
2010 53,984 249% 2.0%
2011 131,420 268% 5.8%
2012 190,126 109% 8.5%
2013 YTD (4/30)
107,287 102% 12.3%
In 2013, we also had 55,770 visits from tablets bringing total mobile traffic YTD to 18% of total
traffic to our website.
Same data but since I love charts….
The trend in websites in general is to wider, more visual sites and we used this opportunity to refresh the design of our entire site.
Screen Resolution - Visitors to Scranton.edu 4/30/13 YTD
Resolution Visits % of Total Visits
1920 x 1080 34,944 4%
1680 x 1050 25,627 3%
1600 x 900 57,477 7%
1440 x 900 71,281 8%
1366 x 768 109,914 13%
1280 x 1024 63,983 7%
1280 x 800 170,518 19%
1024 x 768 68,561 8%
The screen resolution of 69% of Visitors to our website this year was 1024px wide or higher.
How does this Impact You?As a CMS User…
Current Banner Image Size: 768 x 180 pixels
New Banner Image size: 1280 x 361 pixels
Three Steps to Changing Banner Image
Step 1 - Choose an image. Pre-sized images are available in the online photo gallery at scranton.edu/webcms/photo-gallery.shtml
Step 1 - Choose an image. If you prefer to use an image of your own, you
will need to resize it to the correct dimensions1280 x 361 pixels
If you use your own image you should also optimize your image using one of the options that will be outlined in the next section
This will decrease the amount of time it takes your image to load in the page on your site.
Step 2 – Load Image into CMS
After choosing, correctly sizing and saving the photo to your desktop, load the image into the images folder in the CMS.
Step 3 - Place the new image in the main photo asset
More Tips & Best Practices
Help our Search Engine Results! Fill out keywords and description
When linking to External pages, choose open in new window
Other Tips and Information
Once the new Undergraduate Admissions site is live, use External links for linking to Undergraduate Admissions pages
If using tables in the WYSIWYG editor, limit them to two or three columns.
Best sizes for Photos in WYSIWYG Editor
Small horizontal 290 x 194 pixels
Small vertical: 194 x 290 pixels
Keeping Your Site LightOptimize all the things!
Why Optimize images?Load faster
No loss in quality
Reduce data consumption (mobile date caps)
Why Optimize images?Load faster
No loss in quality
Reduce data consumption (mobile data caps)
Before
After
19.2% smaller!
How well does it work?
79% image size reduction
A Live Demo!!
And now for…
Scranton.eduHomepageAcademics Section Page2-column Template Page3-column Template Page
Undergraduate Admissions MicrositeHomepageWho We Are Section Page
Resources& Further Reading
Internal ResourcesQuestions about CMS Training: Jack Williams
[email protected] x9999
General CMS/RWD Questions: Val [email protected] x8888
Tech Questions: Joe Casabona or Matt Wren [email protected] x7798matthew.wren@scranton x6383
Want to know more? Responsive Web Design
the book
Best Practices
A List Apart
Brad Frost
Luke W
