跨浏览器：前端框架都在不同的浏览器测试通过。
一致性： UI 组件，如导航，按钮，标签，表单，下拉菜单，表格... 他们的风格都相互统一。
快速开发：您可以轻松，快速的构建一个布局。他们通常有代码片段和优秀的文档。
响应式：所有 CSS 组件和 Javascript 插件能够从桌面扩展到移动端。
InK
Ink 是一个用于快速开发 Web 界面的 UI 套件，简单易用和。它通过整合 HTML，CSS 和 JavaScript 来提供现代化的解决方案，构建布局，显示通用的界面元素，为你的用户实现内容为中心的和用户友好的互动功能。
HTML &CSS 组件：布局，导航，排版，图标，表格，提醒，表单。
JavaScript 组件：画廊，模态窗口，表格，可排序的日期选择器，选项卡，表单验证，行为（停靠，折叠，关闭）。
其它特性：支持 Sass 混入。
GroundworkCSS
GroundworkCSS 灵活的网格系统使你能够快速开发，并能够适应任何屏幕尺寸，从手持设备到大尺寸的显示屏。GroundworkCSS 构建在强大的 CSS 预处理器 Sass 的基础上。Sass 是对 CSS3 的扩展，并添加了嵌套规则，变量，混入，选择器继承等等众多特性。使用命令行工具或 Web 框架插件可以转换为标准的 CSS 代码。
HTML &CSS 组件：网格，布局，排版，按钮，瓷砖，表格，表格，图示，社会的图标，响应文本，消息，警报。
JavaScript 组件：导航，标签，工具提示。
其它特性：支持 Sass 混入。
Ivory
灵活，强大的响应式 Web 框架，使 Web 开发更快，更容易。支持 1200 像素到 320px 区间的响应式布局。
HTML &CSS 组件：网格，排版，表单，按钮，提醒，分页，面包屑，列表，表格。
JavaScript 组件：工具提示，选项卡，切换开关，手风琴。
Foundation
Foundation 是由加利福尼亚州的产品设计公司 Zurb 推出的。这是目前最先进的响应式前端框架，它有很多的模板布局，UI 组件的 CSS 样式，也收录了很多他们自己的 JavaScript 插件。
HTML &CSS 组件：网格布局模板，图标，字体，响应式表格，SVG 社交图标，分页，面包屑，边栏导航，按钮，字体，标签，提醒，面板，价格表，进度条，表格，缩略图。
JavaScript 组件：下拉按钮，分割按钮，开关，自适应视频，灯箱，下拉列表，导航，显示模态窗口，选项卡，工具提示。
其他特性：自定义皮肤的表单，SCSS 混入。
Grumby
Gumby 2 基于强大的 Sass 构建，Sass 是一个功能强大的 CSS 预处理器，这使我们能够快速的开发自己的 Gumby，并为您提供新的工具，让你能够在 Gumby 的框架基础上快速定制。
HTML &CSS 组件：网格，表单，按钮，导航，标签，Entypo 图标。
JavaScript 组件：切换开关，下拉框，选项卡，模态窗口。
其他特性：自定义皮肤的表单，SASS &Compass。
HTML KickStart
超精益的 HTML5，CSS &JS 模块，用于快速网站制作。它有一个全面的 UI 组件，也有一些有用的 JavaScript 插件，它的目标是成为设计师的朋友。
HTML &CSS 组件：网格，排版，按钮，按钮条，列表，表格，图标，面包屑，图像，表格。
JavaScript：菜单，工具提示，语法高亮，选项卡，幻灯片，表单验证。
其他特性：额外的 CSS 工具。
Maxmertkit
这个框架是由 Vetrenko Maxim Sergeevich 创建的，使程序员的生活更轻松。Maxmerkit 是基于部件修改器编码风格的一个 CSS 框架。
HTML &CSS 组件：网格布局，typograpghy，徽章，按钮，插入符，表格，图标，标签，菜单，进度表，下拉菜单，工具提示。
JavaScript 组件：按钮，转盘，模态窗口，通知，弹出层，选项卡，滚动侦测。
其他特性：支持 Sass, Coffee Script。
Twitter Bootstrap
Bootstrap 是基于 HTML，CSS 和 JavaScript 的简洁灵活的流行前端框架及交互组件集，由微博的先驱 Twitter 在2011年8月开源的整套前端解决解决方案。Bootstrap 有非常完备和详尽的开发文档，Web 开发人员能够轻松搭建出清爽风格的界面以及实现良好的交互效果。
HTML &CSS 组件： 网格，布局，排版，代码，表格，表单，按钮，图像，图标，按钮组，导航，面包屑，分页，选项卡，徽章，缩略图，提醒，进度条。
JavaScript 组件： 过渡，模态窗口，下拉框，滚动检测，标签，工具提示，弹出层，警报，按钮，手风琴，旋转木马，自动补齐。
其它特性： 支持定制， LESS CSS。
Skeleton
Skeleton 是一个小集合的 CSS 文件，可以帮助你迅速开发任何尺寸，外观漂亮的网站，例如用于 17 寸笔记本电脑屏幕或 iPhone 屏幕的。Skeleton 建立在三个核心原则之上：兼容移动端的响应式网格，快速入门，风格无关。Skeleton 对于大多数开发者是一个相当不错的选择，因为它是轻量级的且易于使用。
HTML &CSS 组件： 网格，排版，按钮，表单，媒体查询。
Kube
Kube 是由 imperavi （他也是著名的 Redactor 编辑器的作者）发布的前端框架，以使设计者/开发者的生活更轻松。简约而不简单，适应性和响应式能够使用各种需求。革命性的灵活网格和漂亮的印刷字体，没有任何强加的样式。
HTML &CSS 组件：排版，表单，网格，表格，按钮，导航，图标。
JavaScript 组件： 按钮，标签。
其它特性：支持 LESS CSS。
Helium
Helium 是一种前端响应式 Web 开发框架，用于 HTML5 和 CSS3 项目的快速原型设计和实际开发。它在许多方面与 Twitter Bootstrap 和 ZURB Foundation 相似。然而，不同于这两个框架的是，Helium 的目的是要更轻量，更容易更改。把它看成是一个典型的汽车，在那里你可以打开引擎盖，容易对发动机进行改装。
HTML &CSS 组件： 网格，按钮，排版，表格。
JavaScript 组件： 下拉框，表单验证，模态窗口。
其它特性： 支持 SASS &Compass。
Markup
Markup 框架是一个布局，窗口小部件，排版样式和其他的 UI 组件的集合，可以根据自己的需要进行整合。
HTML &CSS 组件：布局，网格，排版，表格，按钮，标题，面包屑，消息，导航列表，导航菜单。
JavaScript 组件： 无 Javascript，纯 CSS。
Topcoat
Topcoat 是一个 CSS 集合，用于简洁和快速的 Web 应用程序开发。它是一个开源库，不需要任何 JavaScript 内置的用户界面元素。
HTML &CSS 组件： 图标，字体，按钮，面包屑，按钮栏，表格，下拉列表，滑动开关，标签，切换按钮，选择，滑块
JavaScript 组件： 无 Javascript ，纯 CSS
PureCSS
Pure 是一组轻量的，响应式的 CSS 模块，您可以使用在任何的 Web 项目中。充分考虑了移动设备中的使用，保持文件体积尽量小，每行 CSS 都进行了仔细的考虑。Pure 基于 Normalize.css 构建，并提供布局以及 原生 HTML 元素的风格，加上最常见的 UI 组件。相信这些都是你需要的。
HTML &CSS 组件： 网格，排版，表格，按钮，表格，菜单。
JavaScript 组件： 无 Javascript ，纯 CSS。
其它特性： 皮肤制作器，YU 库。
移动端和PC端的优化大多数的点是相同的，针对如何做好移动端的优化，小编将从MATE标签、URL规范化、网站结构、网页简洁性以及技术优化方面来解答。1、MATE标签
Title、keywords和description可以设置与PC端不一致，移动端字数显示会相对少，在此需要精短，一语中的，最好每个页面都能独立设置MATE标签，设置需要考虑的因素除字数限制外，其他因素、规律和PC端大致相似。
移动端网站的Title区别PC端，尽量简短，体现关键词，8个汉字以内把页面内容描述清楚并且包括频道名称，避免所有的页面描述使用同一个关键词。
2、URL规范化
虽说移动端网站是一个二级的域名，但是也是要注意除首页外其他页面域名的规范化，最好设置成关键词的拼音或者是英文单词的URL，能够相应的提升关键词的排名。
对于多个板块的二级域名或者目录来说，使用规范、简单的url，尽量去除与页面内容无关的参数，如用来区分手机型号、区分访问用户，方便统计等的参数。
另外，建议页面url链接跳转最好是正常格式的目标url，不要中间进行跳转。
3、扁平式树形结构
手机或平板的屏幕比较小，操作起来没有PC断方便，要尽可能的减少用户的对页面的点击次数，让用户通过最少的点击就能找到所需要的内容，建议移动站点应该借用企业网站结构的设计，也就是整体结构是“首页——栏目页——详情页”的三层树形结构，不但便于用户的操作也更利于搜索引擎对网站结构的了解和内容的抓取。
对于移动版的企业站来说，网站结构最好不要超过3层，层次过多是不利于搜索引擎蜘蛛的爬行的，深层页面的内容不容易被蜘蛛抓取出来，树形结构是目前相对理想的结构，对于搜索引擎的蜘蛛来说较为友善，程序写得过于复杂、不好抓取的移动端网站，搜索引擎蜘蛛是会直接放弃抓取，不予收录；然而，不被收录的网站是没有资格谈排名的。
面包屑导航对于移动端的网站来说在设计上要求更是严格了，设计栏目或者按钮更要清晰明了，能够指导用户该怎么点击和引导用户想要到达的页面。
4、遵循网页简洁原则
移动版的网页要注重简洁性，鉴于多数的智能手机对于JS弹窗、FLASH动、JAVA等的效果读取不正常，这些效果对于手机用户来说都需要耗费过多的流量和时间来打开极不利于用户体验。
遇及使用功能过于复杂的网站，用户也是没有耐心研究的，相对来说，用手机浏览网页的用户时间都是相对碎片化，目的性不强，多为娱乐，所以，一定要遵守简洁性原则。
5、避免使用Flash或Java
避免Flash的很明显的原因是Apple产品不支持Flash功能，并宣称他们也不打算在将来添加此功能，而iPhones占据智能手机市场30%的市场份额，因此如果你使用Flash，很大一部分智能手机用户用不了这项功能。
同样，很多Android智能手机也不支持Java，而因为受到网速的影响，Java还会大大延缓页面下载的时间。
6、使用规范化的协议
一般来说手机建站有xhtml、html5、wml三种协议，最好使用规范化、标准化的协议格式，避免造成不必要的麻烦，也能够减少移动端网页遇及的优化难题，当然也可以做多个版本的站点，站点进行不同版式的自动适配。
手机页面进行合适的DOCTYPE声明有助于搜索引擎识别该页面是否适合手机浏览，<!DOCTYPE>声明位于文档中的最前面的位置，处于标签之前。
7、移动端网站的关键词优化
因为移动端与PC端的显示媒介不一样，所以在选择关键词时也会有所差异，比如，你想在上海某个地方来个短途旅游，那么你就会搜索上海+地点+景点，所以，建议各位在优化移动端关键词时，应择优选择核心关键词的搜索下拉词或相关词作为目标关键词。
8、技术上的优化
（1）、确保在手机网站或者PC端网站各个页面上有相应的导航或者提示链接，让用户可以在手机版和PC版进行切换，也便于搜索引擎更好的收录。
（2）、与PC端页面优化方法一致，全站需使用静态化链接使用静态链接，避免使用带“？”带参数的动态URL做为超链接。
（3）、注意移动端网站的死链问题，如果网站存在过多的死链时，技术上要做好404页面和301重定向的设置，其次便是要去百度快照投诉删除移动端的死链页面快照。
（4）、技术上要处理好兼容问题，解决浏览器或者是不同牌子手机的兼容性，这样是能增加页面的好感度，网站的回头率、访客也会增加，那么网站点击的次数多也是能提升网站的排名。
（5）、robots不要设置任何的限定，避免百度爬虫抓取不了，不久前百度官方声明百度spider的爬虫无论是移动端还是PC端的Baiduspider都是一致的，所以，这点上移动端和PC端的设置是一致的。
（6）、改版时，要做好移动端的重定向转向，减少用户的流失。
从用户角度出发，优化是要遵守“用户为王”，除此外，移动端的外链工作跟PC端是同步的。
总的来说，只有了解了移动端和PC端的区别后，才能更好的去着手优化问题。
三、移动端SEO优化的策略
如今，移动搜索、移动互联网将占据整个互联网的主体，换句话说现在已经进入了移动互联网时代，那么在移动互联网时代移动站点做SEO优化应该采取何种策略呢？
1、移动站和PC站彼此独立
百度对于移动端的排名规则是独立的移动站点优于适配站，适配站优于百度转码站，百度转码站优于PC站，如果有条件的话，建议大家还是做独立的移动站，将移动站和PC站分开。
也许有些人觉得两个站点维护起来比较麻烦，马海祥给出的建议是采用“一套人马两个班子”的策略，也就是移动站和PC站只在WEB端独立，二者共用数据库，这一点大家不用担心，小编也敲过两天代码，对编程也了解一些，这个问题对技术来说是简单的不能再简单的问题了，完全可以实现。
如果朋友们有做外贸生意的，网站的主要人群是外国人，重点关注的是谷歌，那么恭喜你，上面的策略可以忽略了，谷歌在移动端更推荐采用适配技术，也就是说偏向于谷歌的站点只需要从新设计模板或者是重新制作CSS样式达到网站自动适应PC端和移动端即可。
2、地区性移动站点的地域优化策略
地区性移动站点在标题中显示地域名称添加百度官方的地域扩展代码，当大家用手机通过百度搜索答案时，百度移动搜索将根据用户地理位置信息优先将具有地域属性的内容展现给用户，比如，网友在上海通过手机搜索“上海婚纱摄影”，百度会优先展示在移动站点中添加了百度地域扩展代码的站点。
具体的地域Meta协议如下：
<meta name="location" content="province=北京city=北京coord=116.306522891,40.0555055968">
name属性的值是location、Content的值为province=北京city=北京coord=116.306522891,40.0555055968；
province为省份简称，city为城市简称，均不可为空；
coord是页面信息的经纬度坐标，采用的是bd09ll坐标，若页面信息为城市级别，填写城市中心点即可。若页面信息有具体的地址，经纬度坐标填写该具体地址的坐标（可以通过百度地图的地址解析API获取）。
3、使用html5+css3建设站点
无论是彼此独立还是自动适配，采用html5+css3建设网站都是有利于网站排名的，百度给出的官方文档中也有说明，采用html5技术的移动站排名更有优势。
此外，在移动站点中还应该尽可能少的使用js文件。
网页前端设计一直是人才奇缺的行业，需要从业者在扎实的理论知识基础上还需要懂得SEO基础知识和丰富的实战经验。1、逻辑能力
身为运营者时常发现，设计师无法彻底理解项目的目的和对象属性，总是一个 人拿到页面盲目的进行网页标签化，网页由基本的文字和图片组成，网页也由最为重要的信息流架构而成，并不是所有的页面都必须遵守信息流，但作为一个好的网 页和受欢迎的网页，网页信息流是作为网页甚至网站生存的基础。
前端项目总是由一种需求点转化为一种切实的表现层，表现层的所有内容都由需求的重要程度和复杂性决定，希望设计师能强烈理解到这点。页面不是盲目赶出来的，也是不胡乱想出来的，网页寄载了特定信息的展现和流转，在需要用户和业务双赢的同时，也更需要搜索的认可。
简单的举例，设计师扪心自问下，作为一名设计师对于H标签的使用是否有自己一套的见解。H标签明显是记载网页内容重要程度，设计师可在切分平面时对于 平面中的内容进行重要性的1234进行标识，标识完之后我们就可以看到网页切分前的最基础框架，从H1到H6，根据网页内容的重要程度进行分列，这同时也 是为了搜索根据W3C标准索引页面而标准的标签化，请问在看的设计师，这点你做到了吗?
2、搜索知识
SEO基础知识可以说是目前前端设计师必须了解和掌握的知识点，一个好的页面在符合W3C标准后必须符合搜索的认可。从根据谷歌站长网站优化指南还是百度SEO站长指南也好，都无非强调一点，做到再好的网站，想要搜索的到必须遵守他们的游戏规则。
比如网页中的面包屑导航和网页描述中的内容建立，面包屑导航是目前每一个网站都必须具备的一点，而作为前端设计师，请问你知道为什么要吗?面包屑导航 实质就是一个目录路径的一种表现方式，本质在于引导和表明用户所处位置，有些前端设计师在制作时将面包屑导航缩小到让人无法理解的地步，有些则不明显和干 脆不要，试问这样处理的设计师，你是如何理解面包屑导航的呢?
前端设计师在进行前端设计时，还需要为SEO的进行创造一些条件，比如网页描述内容，在得知网站数据层结构的同时也在前端释放出这些内容，创造网页描述内容，这样即满足了用户寻找内容需求的同时，也为不同页面不同描述的SEO优化创造了有利条件.
