-
Notifications
You must be signed in to change notification settings - Fork 1
Markup Changes
When I go to add a simple element, like a heading or button, it gets wrapped in a div with a massive ID. Can we eliminate some of these divs. Here is a comparison of the markup that produces the same output
On Github:
<div class="module-container">
<h3>Admissions</h3>
<div class="frame">
<div class="hover-caption-container">
<a href="http://www.youtube.com/embed/cBgIkhinRww?autoplay=1" class="image-shadow video-modal-link" data-target="#videoModal" data-toggle="modal" data-title="Admissions Video">
<img src="./img/wu-admissions.png">
</a>
<i class="icon-play-circle"></i>
<div class="caption">
<p>Colten Yamagishi talks about how easy it is to live, study and have fun at UAlberta.</p>
</div>
</div>
</div>
<p>UAlberta is a <strong>Top 5 Canadian university</strong> and one of the <strong>Top 100 in the world</strong>, home to more than 170 graduate programs, 200 undergraduate programs and 400 active student groups.</p>
<a href="#" class="btn btn-apply">Apply Now</a>
</div>
This exact same thing in our Sitecore environment has this markup:
<div id="ctl15_ctl00_phsecondarycontent_0_componentContainer" class="module-container ">
<div id="ctl15_ctl00_phsecondarycontent_0_phcomponentcontentc5f6d79b1f074f1495bda2fbc1401935_0_componentContainer">
<h3>Admissions</h3>
</div>
<div id="ctl15_ctl00_phsecondarycontent_0_phcomponentcontentc5f6d79b1f074f1495bda2fbc1401935_1_componentContainer">
<div id="ctl15_ctl00_phsecondarycontent_0_phcomponentcontentc5f6d79b1f074f1495bda2fbc1401935_1_videoModalWrapper" class="frame">
<div class="hover-caption-container">
<a id="ctl15_ctl00_phsecondarycontent_0_phcomponentcontentc5f6d79b1f074f1495bda2fbc1401935_1_videoLink" class="image-shadow video-modal-link" data-target="#videoModal" data-toggle="modal" data-title="Admissions Video" href="http://www.youtube.com/embed/cBgIkhinRww?wmode=transparent&amp;autoplay=1"><img id="ctl15_ctl00_phsecondarycontent_0_phcomponentcontentc5f6d79b1f074f1495bda2fbc1401935_1_videoThumbnail" src="/-/media/ualberta/wu-admissions.png"></a>
<i class="icon-play-circle"></i>
<div class="caption">
<p>
Colten Yamagishi talks about how easy it is to live, study and have fun at UAlberta.
</p>
</div>
</div>
</div>
</div>
<div id="ctl15_ctl00_phsecondarycontent_0_phcomponentcontentc5f6d79b1f074f1495bda2fbc1401935_2_componentContainer">
<p>UAlberta is a <strong>Top 5 Canadian university</strong> and one of the <strong>Top 100 in the world</strong>, home to more than 170 graduate programs, 200 undergraduate programs and 400 active student groups.</p>
</div>
<div id="ctl15_ctl00_phsecondarycontent_0_phcomponentcontentc5f6d79b1f074f1495bda2fbc1401935_3_componentContainer">
<a href="/admissions.aspx" id="ctl15_ctl00_phsecondarycontent_0_phcomponentcontentc5f6d79b1f074f1495bda2fbc1401935_3_lnkButton" class="btn btn-apply">Apply Now</a>
</div>
</div>
The SiteCore markup (1943 bytes) is almost 4 times larger than the original (561 bytes). This has an impact on mobile users, source code readability, and search engine optimization.
Change:
<a href="#" id="dLabel" class="dropdown-toggle hidden-desktop" data-toggle="dropdown">
To:
<a href="#" id="ql-toggle" class="btn btn-grey btn-small hidden-desktop" data-toggle="dropdown">
Change:
<ul class="quick-links" role="menu" aria-labelledby="dLabel">
To:
<ul class="quick-links" role="menu" aria-labelledby="ql-toggle">
Audience nav has empty <i> tags. Remove.
<li role="menuitem"><a href="/prospective.aspx"><i class=""></i>Prospective Students</a></li>
<li role="menuitem"><a href="/students.aspx"><i class=""></i>Current Students</a></li>
<li role="menuitem"><a href="/facultyandstaff.aspx"><i class=""></i>Faculty & Staff</a></li>
<li role="menuitem"><a href="http://www.alumni.ualberta.ca/"><i class=""></i>Alumni & Friends</a></li>
Classes do not match the github environment. Comparing http://ualberta.github.com/institutional-framework/why-ualberta.html to http://ualberta-beta.ualberta.ca/why.aspx
In Sitecore:
- Remove
image-scrollerclass - First
.fma-slideelement should have.fma-activeclass added to it - Slides have both
slideclass andfma-slideclass. Tabbed FMA module should only havefma-slideclass.
Does not match github. As seen on current students and faculty and staff. https://ualberta-beta.sitecore.ualberta.ca/facultyandstaff.aspx vs. http://ualberta.github.com/institutional-framework/faculty-and-staff.html
Change:
<div id="ctl15_ctl00_phsecondarycontent_3_componentContainer" class="module-container ">
<div id="ctl15_ctl00_phsecondarycontent_3_phcomponentcontent752c364730e34f9a9cdad88ea4ba0dda_0_componentContainer">
<h3>Keep in Touch</h3>
</div><div id="ctl15_ctl00_phsecondarycontent_3_phcomponentcontent752c364730e34f9a9cdad88ea4ba0dda_1_componentContainer">
<div id="ctl15_ctl00_phsecondarycontent_3_phcomponentcontent752c364730e34f9a9cdad88ea4ba0dda_1_pnlSocialMediaButtons">
<div>
<ul class="unstyled social-media-list">
<li>
<a title="facebook" class="icon-facebook" href="http://facebook.com/ualberta"></a>
</li>
<li>
<a title="twitter" class="icon-twitter" href="http://twitter.com/ualberta"></a>
</li>
<li>
<a title="tumblr" class="icon-tumblr" href="http://greenandgoldforever.tumblr.com"></a>
</li>
<li>
<a title="foursquare" class="icon-foursquare" href="http://foursquare.com/ualberta"></a>
</li>
<li>
<a title="youtube" class="icon-youtube" href="http://youtube.com/ualberta"></a>
</li>
</ul>
</div>
</div>
</div>
</div>
To:
<div class="module-container">
<h3>Keep in Touch</h3>
<ul class="unstyled social-media-list">
<li><a href="http://facebook.com/ualberta" class="facebook hide-text">Facebook</a></li>
<li><a href="http://twitter.com/ualberta" class="twitter hide-text">Twitter</a></li>
<li><a href="http://greenandgoldforever.tumblr.com" class="tumblr hide-text">Tumblr</a></li>
<li><a href="http://foursquare.com/ualberta" class="foursquare hide-text">Foursquare</a></li>
<li><a href="http://youtube.com/ualberta" class="youtube hide-text">YouTube</a></li>
<li><a href="http://feeds.feedburner.com/UofAExpressNewsArticles" class="rss hide-text">RSS</a></li>
</ul>
</div>
Markup incorrect compared to github pages (faculty and staff and current students). Results in bolded links. Dates not required in this area. Also, the RSS icon should be in an unordered list with the class module-actions. The link itself should have btn and btn-grey classes.
https://ualberta-beta.sitecore.ualberta.ca/facultyandstaff.aspx vs. http://ualberta.github.com/institutional-framework/faculty-and-staff.html
Change:
<div id="ctl15_ctl00_phsecondarycontent_2_componentContainer" class="module-container ">
<div id="ctl15_ctl00_phsecondarycontent_2_phcomponentcontent8a90fd65515c463585d4555c1f3fffc0_0_componentContainer">
<div class="module-heading">
<h3>Subscribe to Daily News</h3>
<a class="heading-link" href="http://feeds.feedburner.com/UofAExpressNewsArticles" rel="tooltip" data-toggle="dropdown" data-original-title="Subscribe to RSS feed"><i class="icon-rss"></i></a></div>
</div>
<div id="ctl15_ctl00_phsecondarycontent_2_phcomponentcontent8a90fd65515c463585d4555c1f3fffc0_1_componentContainer">
<div id="ctl15_ctl00_phsecondarycontent_2_phcomponentcontent8a90fd65515c463585d4555c1f3fffc0_1_dataListHeading"></div>
<ul id="ctl15_ctl00_phsecondarycontent_2_phcomponentcontent8a90fd65515c463585d4555c1f3fffc0_1_dataList" class=" data-list">
<li class="data-row"><div class="data-description"><h4><a href="http://feedproxy.google.com/~r/UofAExpressNewsArticles/~3/63V4y0QGsPU/UAlbertaphysicaltherapistnamedtoOrderofCanada.aspx">UAlberta physical therapist named to Order of Canada</a></h4><p class="date">January 04, 2013</p></div></li>
<li class="data-row"><div class="data-description"><h4><a href="http://feedproxy.google.com/~r/UofAExpressNewsArticles/~3/H5ebb8fHfbg/Dinosaurshooktailfeathersformatingshow.aspx">Dinosaur shook tail feathers for mating show</a></h4><p class="date">January 04, 2013</p></div></li>
<li class="data-row"><div class="data-description"><h4><a href="http://feedproxy.google.com/~r/UofAExpressNewsArticles/~3/HAPCNRyzpA4/Thetop12researchstoriesof2012.aspx">The top 12 research stories of 2012</a></h4><p class="date">January 03, 2013</p></div></li>
</ul>
</div><div id="ctl15_ctl00_phsecondarycontent_2_phcomponentcontent8a90fd65515c463585d4555c1f3fffc0_2_componentContainer">
<div class="daily-news">
<div class="subscribe-form"><i class="icon-envelope"></i><input id="mailinglistid" name="mailinglistid" value="27070" type="hidden"> <input name="failure" value="http://www.news.ualberta.ca/DailyNewsSubscribe.aspx" type="hidden"> <input name="continue" value="http://www.news.ualberta.ca/success.aspx" type="hidden"> <input name="success" value="http://www.news.ualberta.ca/confirm.aspx" type="hidden"> <input id="errorparm" name="errorparm" value="error" type="hidden"> <input id="email" class="email-input" name="email" type="text" placeholder="Enter email address"><button class="btn btn-grey btn-small" type="submit">Subscribe</button> </div>
</div>
</div>
</div>
To:
<div class="module-container daily-news">
<div class="module-heading">
<h3>Subscribe to Daily News</h3>
<ul class="module-actions">
<li>
<a href="#" class="heading-link btn btn-grey" data-toggle="dropdown" rel="tooltip" data-original-title="Subscribe to RSS feed">
<i class="icon-rss"></i>
</a>
</li>
</ul>
</div>
<ul class="data-list">
<li><a href="#">Research harnessing viruses to fight cancer</a></li>
<li><a href="#">Conference centre achieves green standard</a></li>
<li><a href="#">Preventing premature births worldwide</a></li>
</ul>
<div class="subscribe-form">
<i class="icon-envelope"></i>
<input type="text" class="email-input" placeholder="Enter email address">
<button type="submit" class="btn btn-grey btn-small">Subscribe</button>
</div>
</div>
Upcoming events sidebar module content does not follow github markup. Results in bold links and incorrect hover states. Puts <h4> tag in content that is preceded by <h5> interrupting the logical markup flow of the document.
https://ualberta-beta.sitecore.ualberta.ca/campuslife.aspx vs. http://ualberta.github.com/institutional-framework/campus-life.html
Also an issue on news feeds on news page: https://ualberta-beta.sitecore.ualberta.ca/news.aspx
Change events sidebar list from:
<ul id="ctl15_ctl00_phsidebar_0_phsidebarcomponentcontent3ec1f39807b7475b8df0795119c41cb0_0_dataList" class="events-list data-list">
<li class="events-row"><div class="events-description"><h4><a href="http://www.med100uofa.ca/signature-centennial-events/centennial-launch.aspx">Medicine Centennial Launch</a></h4><p class="date">January 17, 2013 1:30 PM - 3:30 PM</p></div></li>
<li class="events-row"><div class="events-description"><h4><a href="http://www.globaled.ualberta.ca/InternationalWeek.aspx"> International Week 2013</a></h4><p class="date">January 28, 2013 6:30 AM - February 1, 2013 8:00 PM</p></div></li>
<li class="events-row"><div class="events-description"><h4><a href="https://uofaalumni.inviteright.com/event/response/E25634CA/JTk4JUJFJTI0eCU5NyUwMiU1QyU4QSVCOSUyOCVEOCUwOSVDQkJmYm8lMjElODYlQzAlRkIlMjIlMURY/0">Educated Luncheon: Investing in young children</a></h4><p class="date">February 13, 2013 12:00 PM - 1:00 PM</p></div></li>
</ul>
To:
<ul>
<li><a href="#">Sustainability Awareness Week<span class="date">October 29-November 2</span></a></li>
<li><a href="#">Tenses and Pizza<span class="date">October 31</span></a></li>
<li><a href="#">How to Write In-class Essays, Short Answer Exam Questions<span class="date">November 22</span></a></li>
</ul>
If the user is browsing with <IE6 message currently reads:
<!--[if lt IE 7]><p class="alert">Your browser is <em>ancient!</em> <a href="http://browsehappy.com/">Upgrade to a different browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to experience this site.</p><![endif]-->
Please change to match whatever is being used on the maps page for old browsers.
We'll size the fields on the grad search form manually. Could you take out the span# classes on the fields?
<select class="select-box span5" id="sFacultyList">
and
<input class="span4 search-input" type="search" placeholder="Search by Major" id="gradSearchBox">
The sub-lists in the accordion are wrapped by a <div>. When there is not a sub-list there is an empty <div> which is causing issues in IE7. Can we remove the <div>?
Change:
<li>
<a href="http://www.ales.ualberta.ca/">Agricultural, Life and Environmental Sciences</a>
<a class="accordion-toggle icon-plus"></a>
<div>
<ul>
<li>
<a href="http://www.afns.ales.ualberta.ca/">Agricultural Food and Nutritional Science</a>
</li>
</ul>
</div>
</li>
To:
<li>
<a href="http://www.ales.ualberta.ca/">Agricultural, Life and Environmental Sciences</a>
<a href="#" class="accordion-toggle icon-plus"></a>
<ul>
<li>
<a href="http://www.afns.ales.ualberta.ca/">Agricultural Food and Nutritional Science</a>
</li>
</ul>
</li>
Icons that appear next to headings should be in an unordered list with the class module-actions. The link itself should have btn and btn-grey classes to match "Subscribe to Daily News" here: https://ualberta-qa.sitecore.ualberta.ca/students.aspx?sc_lang=en
Places where this needs to be updated:
- Announcements: https://ualberta-qa.sitecore.ualberta.ca/students.aspx
- Latest Headlines: https://ualberta-qa.sitecore.ualberta.ca/news.aspx
- Upcoming Events: https://ualberta-qa.sitecore.ualberta.ca/news.aspx
There should be a nav-current class on the navigation item corresponding to whatever page the user is currently on. For example, if the user is on the Campus Life page, the markup for the campus life navigation item should be:
<li role="menuitem" class="nav5 nav-current"><a href="/campuslife.aspx">Campus Life</a></li>
We need more specific IE classes in the opening <html> tag.
Change:
<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"><![endif]-->
<!--[if IE 7]><html class="no-js lt-ie9 lt-ie8" lang="en"><![endif]-->
<!--[if IE 8]><html class="no-js lt-ie9" lang="en"><![endif]-->
<!--[if IE 9]><html class="no-js lt-ie10 ie-9" lang="en"><![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js" lang="en">
<!--<![endif]-->
To:
<!--[if lt IE 7]> <html class="no-js lt-ie10 lt-ie9 lt-ie8 lt-ie7 ie6" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie10 lt-ie9 lt-ie8 ie7" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie10 lt-ie9 ie8" lang="en"> <![endif]-->
<!--[if IE 9]> <html class="no-js lt-ie10 ie-9 ie9" lang="en"> <![endif]-->
<!--[if IE 10]> <html class="no-js ie10" lang="en"> <![endif]-->
<!--[if gt IE 10]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
Clicking the play icon will not play the video in IE. Move the icon into the <a> tag.
Change:
<a href="http://www.youtube.com/embed/cBgIkhinRww?autoplay=1" class="image-shadow video-modal-link" data-target="#videoModal" data-toggle="modal" data-title="Admissions Video">
<img src="./img/wu-admissions.png">
</a>
<i class="icon-play-circle"></i>
To:
<a href="http://www.youtube.com/embed/cBgIkhinRww?autoplay=1" class="image-shadow video-modal-link" data-target="#videoModal" data-toggle="modal" data-title="Admissions Video">
<img src="./img/wu-admissions.png">
<i class="icon-play-circle"></i>
</a>
Can we get rid of the empty <div></div>? It's causing spacing issues in IE7.
<div id="ctl15_ctl00_phsidebar_4_content" class="sidebar-content collapse in sidebar-collapse">
<div>
<div></div>
<ul class=" data-list">
<li class='data-row'><a href='http://www.alumni.ualberta.ca/en/Alumni News/2012/April/CreativeLicence.aspx'>Creative Licence</a></li>
<li class='data-row'><a href='http://www.alumni.ualberta.ca/en/Alumni News/2012/May/OutoftheAshes.aspx'>Out of the Ashes</a></li>
<li class='data-row'><a href='http://www.alumni.ualberta.ca/en/Alumni News/2012/May/QuestionPeriodLesleyScorgie.aspx'>Question Period: Lesley Scorgie </a></li>
</ul>
</div>
</div>
Need a way to hide the / on the last item of the breadcrumb in IE. Can we add a bc-here class to the last <li> in the breadcrumb?
Currently if you click on a video thumbnail to open up a modal window on youtube it will take you straight to the youtube embed URL. It will be a better experience for the user if they go straight to the YouTube page for the video instead.
Instead of:
if($(window).width() < 500) {
window.location = videoSrc;
}
We need to do something like this:
if($(window).width() < 500) {
var videoId = videoSrc.match(/.*(?:youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=)([^#\&\?]*).*/);
if(videoId[1] !== null) {
window.location = "http://www.youtube.com/watch?v="+videoId[1];
} else {
window.location = videoSrc;
}
}
I don't know if this is the best way, but you get the idea.
Navigation is expanded by default on every page. Should only be like this on the homepage. Remove the in class.
Change:
<ul id="nav-list" class="main-navigation in collapse" style="height: auto;">
To:
<ul id="nav-list" class="main-navigation collapse" style="height: auto;">
There is a calendar icons that shows up beside "Upcoming Events" on the news page. This was intended to bring up a calendar so the use could filter events, but we don't have time, so take it out for now.
iOS bug: https://github.com/h5bp/html5-boilerplate/issues/824
Change:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
To:
<meta name="viewport" content="width=device-width">
<article>
<header>
<h1 class="page-title">
{TITLE}
</h1>
<p class="teaser">
{TEASER}
</p>
<p class="date">
{DATE}
</p>
</header>
<div class="article-content">
<div class="story">
{STORY_IMAGE}
{STORY_CONTENT}
</div>
<aside>
{SHARE_THIS_STORY}
{RELATED_LINKS}
{TOP_STORIES}
</aside>
</div>
</article>
Change share this story to:
<div class="social-media-actions">
<ul class="data-list">
<li style="height: 21px;">{GOOGLE_SHARE}</li>
<li style="height: 21px;">{TWITTER_SHARE}</li>
<li style="height: 21px;">{FACEBOOK_SHARE}</li>
</ul>
</div>