I searched through the internet and was surprised that I didn't see much related information. As Eric mentioned in my other post: Any good reason for using lightning component . Every app should be lightning ready before 2017-3. So it is almost critical for us to prepare for it now. What is the criteria for an app to be lightning ready in App Exchange?
[SalesForce] the entry criteria for lightning-ready app
Related Solutions
I don't think you will need to worry about Canvas App being embedded in your visualforce for passing through lightning ready certification for your application .Since canvas app is essentially a mashup with external system,you don't have to match CSS with lightning design system .
For lightning Ready Certification, here are key things SFDC looks in your application :
Use SLDS Design Systems for CSS in your visualforce.This is mandatory .With Bootstrap I doubt you will be able to certify your app to lightning ready .There is significant difference in both Frameworks. SLDS uses SVGs for icons .
Test for supported browsers .(IE,Firefox,Chrome,Safari)
Make sure your app is responsive and at a viewport minimum of 1024px wide and a maximum of 1920px wide. Make sure that your app responds elegantly when the left-hand nav opens and closes
Do use the new Salesforce Sans typeface. It should not be accompanied by any other typeface, with the exception of your logotype.
Try to Align with Basic Page Layouts like salesforce Edit ,List view and Detail View on Lightning experience .
In short your App should be functional in Lightning Experience and the CSS should match as closely as possible to Lightning Experience .
Here is a little screenshot on how the badge looks for apps that are lightning ready and ones that are not.
WINTER-18 Update
new property for VF <apex:page> tag lightningStyleSheets="[false|true]" will supposedly be the single thing you need to do to convert VF pages to SLDS type styles
https://releasenotes.docs.salesforce.com/en-us/winter18/release-notes/rn_vf_lightningstylesheets.htm
Previous Comments
Too much for a comment
This is the Template page I use for all VF pages now. It allows me to control the Navigation and add SLDS styling all starting from the same point:
<apex:page name="SLDS_template" showHeader="false" standardStylesheets="false" applyHtmlTag="false" applyBodyTag="false" docType="html-5.0">
<head>
<apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"/>
<apex:insert name="title"/>
<apex:stylesheet value="{!URLFOR($Resource.SLDS, 'assets/styles/salesforce-lightning-design-system-vf.min.css')}" />
<style>
#loader {
position: fixed;
left: 0;
top: 0;
bottom: 0;
right: 0;
background: #000;
opacity: 0.6;
filter: alpha(opacity=100);
z-index: 99999;
}
</style>
<script>
function goHome(){
ForceUI.isSalesforce1() ? sforce.one.navigateToURL('/home/home.jsp',true) : window.location.href='/';
}
function goretURL(){
ForceUI.isSalesforce1() ? sforce.one.navigateToURL('{!$CurrentPage.parameters.retURL}') : window.location.href='{!$CurrentPage.parameters.retURL}';
}
function gotoURL(u, isParent){ //isParent to indicate if Inline VF
ForceUI.isSalesforce1() ? sforce.one.navigateToURL(u) : (isParent ? window.top.location.href = u : window.location.href=u);
}
function showProcessing() {
$('#loader').show();
}
function hideProcessing() {
$('#loader').delay(300).fadeOut(400);
}
(function(myContext){
myContext.ForceUI = myContext.ForceUI || {};
myContext.ForceUI.isSalesforce1 = function() {
return((typeof sforce != 'undefined') && sforce && (!!sforce.one));
}
})(this);
</script>
</head>
<div class="slds">
<body>
<apex:insert name="header"/>
<div id="loader" class="slds-spinner_container">
<div class="slds-spinner slds-spinner--large" role="alert">
<span class="slds-assistive-text">Loading</span>
<div class="slds-spinner__dot-a"></div>
<div class="slds-spinner__dot-b"></div>
</div>
</div>
<apex:insert name="body"/>
</body>
</div>
</apex:page>
Add in your own Error Message div to replace the standard page messages and use code to populate the message and go from there.
My VF pages now start like so:
<apex:page id="THEID" showHeader="false" sidebar="true"
standardController="Account" extensions="EXTENSION" tabStyle="Account"
standardStylesheets="false" applyHtmlTag="false"
applyBodyTag="false" docType="html-5.0" cache="false">
<html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<apex:composition template="SLDS_Template">
<apex:define name="title">
</apex:define>
<apex:define name="body">
</apex:define>
</apex:composition>
</html>
</apex:page>
Best Answer
We need to run our app in Lightning Experience Enable org and fix if something is broken. Then we need to update Salesforce that our app is lightning ready.
As per Salesforce docs:
How do I get my apps ready for the new Lightning Experience?
User experience (UX) is one of the most important aspects of this initiative — it’s practically in the name: “Lightning Experience”. Accordingly, we want to help our partners evolve their applications to this new era of UX.
So what does this mean for your existing app? Many apps feature customizations, including custom objects, custom buttons, Visualforce pages. In preparation for the Lightning Experience release, all partners should test their apps to ensure functionality continues working properly in the new experience. Partners can also get their apps designated as “Lightning Ready”. Apps that are Lightning Ready will work in Lightning Experience and offer a more consistent experience with other Lightning pages. If your app uses standard Salesforce UI, objects, page layouts, but no custom Visualforce pages, then you should expect them to display properly in the new Lightning Experience with the new look and feel. In general, Visualforce pages will work in the new UI, but they should be tested to ensure all features are properly supported and functioning correctly.
To earn the Lightning Ready certification, Visualforce pages in apps should be updated to offer a more consistent user experience with Lightning. To assist in this effort, we are publishing the Lightning Design System, which is formal documentation around all the styles that make up the Lightning Experience across all form factors. The Lightning Design System is available to all, and will be made GA through an open-source project on GitHub for Dreamforce. It can be used to design apps built on the Salesforce Platform as well as on other platforms. https://www.lightningdesignsystem.com/
Are you ready for the new lightning experience