30个使您的网站看起来更好的快速构想
我还将讨论流行的HTML5编码技术 ，这些技术可以帮助Web解析器和Spider正确地对数据进行分类。
并非所有这些都完全基于前端设计。
在本文中，我想提出30个扎实的想法，您可以快速实施这些想法 ，以使您的网站更加友好。
当我们启动较新的项目时，很容易忘记更新较旧的博客和网站。
现在，构建可伸缩的响应式网站布局比以往任何时候都要容易，这种布局在任何数字屏幕上看起来都很好，所以让我们着手完善我们的网站。
这些想法使开发人员可以在设计以及如何使网站看起来更漂亮方面进行思考。
并非每个网站都需要更新，本文也不提供每种可用的技术。
1. UX测试
只能通过Google Analytics（分析）之类的工具或使用其他第三方资源来进行用户体验研究。
通过研究用户与您的网站的互动情况，您可以学到很多有关典型用户交互的知识 。
我并不总是在我的网站启动上运行测试是有罪的，但是只要有可能，这就是我最喜欢的活动之一。
听您网站上的一些真实的人为反馈可能会提供您无法通过计算机屏幕获得的结果。
考虑不仅使用数字工具，而且要使用您的朋友和同事。
用户体验测试有助于Web开发人员了解其网站的哪些区域令人烦恼，损坏或可以改善。
您可以找到的潜在利益是巨大的。
2.空格
但是，请考虑您的目标受众，并考虑其中有多少人不具备年轻一代的计算机知识。
如果某些用户已经习惯了这种布局，那么他们将不会介意狭窄的布局。
我们可以将空格视为页面中元素之间的空间量。
或仅将其打开，看看您能想到什么！
您可以通过拆分A / B测试并保留用户反馈来确定需要额外间距的区域。
3.网络字体
包括对第三方字体样式表的引用将不再对您的DL速度产生重大影响。
由于大多数普通的Internet用户都使用了体面的DSL / T1 /光纤连接，因此这种趋势变得越来越流行。
动态Web字体使设计人员可以构建网页而不受限于典型字体系列。
完整的设置过程仅需3个步骤，您可以在几分钟内在您的网站上运行自定义Google字体。
即使您没有Google帐户，也可以访问该应用程序，尽管注册需要一定的时间。
最好的字体提供者是通过Google Webfonts 。
4. CSS3阴影
将此效果附加到您的容器，包装纸或内部页面框上，将为您的网页提供瘦身的3D效果。
对于布局中的div和box来说，流行的box-shadow确实很棒。
当我谈论使用阴影来改善布局时，实际上是指两个不同的属性。
通过添加与字体颜色相反的文本阴影（深色阴影为白色阴影，浅色文本为黑色阴影），可以建立令人畏缩的效果。
苹果公司是最早在其布局中全面实现文本阴影的公司之一。
但是，也值得考虑使用CSS3 文本阴影属性进行排版，该属性可跳出页面。
5.纹理和重复图案
最酷的免费Web应用程序之一是Noise Texture Generator ，它可以在任何浏览器上运行。
但是要使您的网站真正脱颖而出，您可以考虑添加纹理并在背景中重复铺砌瓷砖。
仅使用标准配色方案即可获得很多网站。
它们具有大量可用纹理，您可以免费下载。
如果您正在寻找图案和图块，那么我建议您使用Subtle Patterns 。
只需选择BG颜色和要使用的噪声量，然后该应用程序将动态创建平铺的背景图像。
6. CSS3渐变背景
这些渐变不仅可以作用于身体，还可以应用于导航栏和页脚以及布局中的其他重要区域。
这些为Web开发人员提供了巨大的好处，使他们脱离了Adobe Photoshop的Web背景。
在讨论背景时，我应该提出广受欢迎的CSS3渐变 。
7. Boostrap
Bootstrap的最常见用法是在新应用程序的登录页面中。
这包括按钮，表单输入，链接，列和大量其他预格式化的页面对象。
Twitter的Bootstrap很可能是Web开发人员最伟大的前端UI框架。
但是，开源开发人员在为其发布的库，插件或迷你脚本构建演示页面时，也会利用Bootstrap。
下次您启动具有特定目的的网页时，请考虑使用此前端库：登陆页面，产品演示，移动应用程序网站等。
但是，发现最大好处的开发人员正在使用Bootstrap作为推出自己的UI设计的快速替代品。
我觉得Bootstrap已经发展到如此之大的程度，以至于如今它们可以应用于任何网站。
8. HTML5 Kickstart
我不会说这与Bootstrap一样受欢迎，但是那又是什么呢？
您可以从一组预定元素中进行选择，例如渐变按钮和下拉菜单。
但是，有一些代码示例可以同时生成两个。
这是另一个前端UI库，它比普通HTML5布局更注重美观的设计美学。
大多数Web开发人员尚未听说过99Lime创建的HTML5 Kickstart 。
Kickstart当然并不适用于每个项目，但是在绑定时可以节省大量时间。
构建一个小的沙盒布局，看看您是否喜欢每个UI元素的默认感觉。
如果您有时间和耐心，建议您对该库进行快速测试。
9. jQuery UI
开发人员忽略了这一点，认为它不能为额外的KB提供太多回报。
对于前端开发人员来说，这是最常见的开源JavaScript库，但是它也有一个配套库jQuery UI 。
动画，滑块和淡入淡出元素通常在jQuery库中运行。
这意味着您可以为任何下拉菜单，淡出项，滚动幻灯片以及其他所有动态内容自定义jQuery动画类型。
但是，包括UI库意味着您可以为任何动态页面动画更新easing调用。
jQueryUI网站上有一个轻松的演示页面 ，您可以在其中测试多种变体，并查看是否喜欢任何特定的动画类型。
10.奢华的BG照片
大型背景在吸引用户的注意力方面做得很好，同时也暗示了您网站的类型。
如果您可以找到高分辨率的照片样本，看起来像是背景图像，则此技术可能值得添加到您的布局中。
如今，有无数网站利用了全屏背景图片效果。
但是对于反对JavaScript方法的开发人员，我建议在CSS-Tricks上发布CSS3全页图像技术 。
只需一行代码，您的新背景就可以使用任何分辨率正确地进行缩放。
如果您正在寻找快速解决方案，请查看jQuery Backstretch插件 。
11.菜单图标
您可以找到大量的免费图标集，这些图标集在您的顶部导航，侧栏或页脚区域中看起来非常完美。
但是，经常为每个菜单链接设计的自定义图标给我留下深刻的印象。
标准菜单链接通常足以正常运行并帮助用户在页面之间导航。
为了吸引更多访问者的注意力，可能值得在您的网页中包含一个小图标集。
12.更新的配色方案
考虑使用诸如配色方案设计器之类的在线工具来改善您的轨迹。
某些感兴趣的项目可能包括锚链接，标题，背景和工具栏。
在经过几个月又几个月的相同布局运行后，很高兴更新较小的区域并惊讶地吸引回头客。
我实际上并不是要更改整体的配色方案设计，而是要添加新的颜色。
13.增强的浏览器支持
正在寻找想法的开发人员可以考虑对浏览器测试进行一次小型试用。
尽管运行Internet Explorer 6的人很少，但它仍显示在我的一些Google Analytics（分析）报告中。
建立一个由所有主要旧版浏览器完全支持的网站是很困难的。
IE8同样具有开发人员工具模式 ，您可以在其中切换到旧的渲染引擎进行调试。
您可以使用IETester软件运行快速渲染测试。
但是Internet Explorer 6-8仍在企业和较旧的计算机实验室中广泛使用。
更重要的主流浏览器包括最新版本的IE9，Mozilla Firefox，Opera，Chrome，Safari，以及可能的Camino / SeaMonkey。
14.适合的版式
更不用说它更容易阅读，并且在较大的屏幕分辨率下会占用更多空间。
我觉得大型字体可以更容易地适应布局。
您可能会发现您的旧版式仍在有效地利用文本样式，但这并非总是如此。
您可以浏览几页并在10-15分钟内更新这些样式。
“适合排版”的想法是对文本进行样式设置，以使其适合您的网站 。
15.社交媒体分享
然后，访问者可以在不离开您的网站的情况下将您的链接共享到这些网络上。
Facebook，Twitter，Reddit，Pinterest，Dzone和许多其他外部网络提供了可以嵌入网站的代码。
到目前为止，我确信大多数开发人员都熟悉流行的社交网站中使用的共享徽章。
我还建议在社交媒体工具栏上浏览我们的帖子，这可能会产生类似的效果。
这是一项出色的技术，因为您经常可以将它们悬停在它们没有阻挡任何重要内容的身体区域之外。
在某些博客或网络杂志上，您会注意到这些徽章将跟随您向下滚动页面。
16.用户讨论
但是随着开源技术的兴起，开发人员现在可能会实现更好的解决方案，例如Disqus 。
但是，在创建静态网页时，您需要设置自己的数据库系统以模仿此功能。
如果您正在运行WordPress或Drupal之类的CMS，则默认情况下可以包含评论表单。
即使是厌倦了Akismet的WordPress用户也可以使用Disqus评论系统插件进行切换。
尚未拥有Disqus帐户的用户可以使用流行的社交网络配置文件快速进行连接，也可以直接从您的页面进行注册。
使用这种方法，您将不会经常从讨论区域清除垃圾邮件和垃圾邮件。
17.扩大页脚区域
但是现代Web设计趋势支持带有大量元链接的大型页脚的想法。
这可能包括一些基本的版权信息和一些主页链接。
大多数较小的网站布局在底部页脚部分都会非常保守。
当然，不要尝试将其强行放入不属于它的布局中，但是，如果打开较大的页脚区域可以改善您的网站体验，则值得深思。
这些通常出现在初创公司和大公司网站上，其中包含许多其他信息。
18.负责形象
最常见的技术是应用width: 100%在所有img元素上使用CSS的width: 100% 。
现在将图像设置为固定的宽度几乎是荒谬的，因为调整窗口大小后会脱离容器包装。
动态流畅和响应Swift的网页图像本身已成为一种趋势。
这是对仍使用基于桌面内容的移动版式的绝佳补充。
只需将其包含在您的页面中，然后运行针对页面上所有图像的单行代码即可。
ResponsiveImg是这样一种具有很小文件大小的jQuery插件。
但是您也可以考虑其他一些可能在绑定中有用的开源方法。
19.菜单辅助功能
我觉得值得回顾一下您的导航系统和集思广益，是否有更好的方法来实现子菜单链接 。
我不会说这是您应该不断尝试在布局中进行更新的内容，但是开发人员和设计人员第一次都不正确。
只要您的菜单链接快速且易于访问，用户群之间就不会出现任何问题。
但是，请考虑带有下拉菜单或滑动子菜单的水平导航栏。
侧栏和内容区域通常会保留手风琴菜单，因为垂直方向上有足够的空间。
20.语义微格式/微数据
最终，这些结果可以帮助Google确定各个关键字以及其他引擎（例如图像和视频搜索）中您网站的排名 。
这些属性提供有关您的内容以及它与页面上其他内容的关系的更多信息。
微格式和较新的微数据规范用于在HTML代码内部扩展元数据。
所有主要搜索引擎均支持该Schema语法，并会在语义元数据设计的未来发展。
他们的网站提供了使用语义模式标记返回和编辑HTML内容所需的所有信息。
最受支持的Microdata文档版本称为Schema.org 。
21.重新排列导航链接
花点时间浏览您的网站，并表现得就像您是任何其他访客一样 。
同样，有些物品很少能找到！
但是我发现在一些较大的商业网站或投资组合中，某些导航链接被赋予了太多的优先权。
对于某些网站，在固定内容导航上运行可能不是一个真正的问题。
这些内容可能包括您的网站的简要历史记录，有关团队的信息，联系方式，隐私问题，新闻稿等。它还可能有助于收集用户反馈，并查看他们的愿望与对新页面或更新页面的需求之间是否存在关联。 。
考虑您最感兴趣的链接，以及可能希望添加的任何链接。
22.返回页首链接
此链接的最佳位置是漂浮在您的容器旁边，或者就如我们在Hongkiat上实现的那样直接位于页脚中。
用户不希望按下Home键，并且可能会一直滚动到令人讨厌的位置。
如今，几乎到处都可以找到滚动的“返回首页”链接。
如果您的网站发布了很长的内容页面，那么这是布局中必不可少的元素。
23.自定义代码/前置标签
一些网站不需要这些元素，但是以防万一，对它们进行样式设置仍被认为是一种好习惯。
它们用于封装预格式化的源代码语法，就像在文本/ NFO文件中看到的那样。
标头和段落很常见，但是pre标签或内联代码标签呢？
首次创建网站样式表时，许多开发人员将忽略典型的页面元素。
24.添加图像的宽度/高度属性
但是，如果您在网站中找到没有定义宽度/高度的图像，则可能需要对其进行更新。
现在，根据要经过多少张图像，此任务可以轻松地花费一些时间。
同样，这对所有人都没有帮助，但是在某些情况下作为快速修复程序值得注意。
这将导致您的网页和滚动条在加载新图像时跳转。
通常，缺少这些属性的图像在完全加载之前将显示为1×1 px的正方形。
25. JavaScript通知
但是也有带有“是/否”按钮的确认警报，以及要求用户输入的提示框。
您可以设置一个警报框，为用户提供一个确定按钮，仅显示信息。
任何使用JavaScript的开发人员都知道典型的对话框。
如果您需要匹配自己CSS样式，设置起来非常快捷，并且易于定制。
这是一个非常小的开源库，用于设计您自己的前端警报框。
所有这些都可以使用alertify.js进行自定义。
26.响应式媒体查询
无论哪种方式，您都可以快速设置循环样式以处理显示器，平板电脑和智能手机的各种显示尺寸。
可以将响应式查询添加到现有样式表中，也可以将其添加到新的响应.css文档中。
这看起来好像不需要添加一些代码，但是实际上并不需要太多时间。
您可以从我们的响应式网络教程集中了解有关媒体查询的更多信息。
然后，您可以显示一个完全响应的迷你页脚，该页脚最初隐藏在桌面布局中。
有时，这些内容可能只会隐藏一些内容，例如细长的侧边栏或较大的页脚。
响应查询并不总是需要完全响应您的布局。
27.会员链接
如果您的版面中有多余的空间，请向您的利基市场（搜索Google）中的相关网站发送几封电子邮件，要求其加入联盟。
但是，与其将网络变成一场竞赛，不如营造一种友好的氛围呢？
其中大多数是现有内容的分支和模仿。
很少有新想法被创造出来。
总是会有类似的网站在线建设与您的领域相关的内容。
另外，获得具有Google权限的网站的反向链接只会帮助您提高域名的信誉。
这为新用户打开了大门，使他们可以更快地找到您的网站，并看到您也被包含在其他网站的社区中。
您可以交换链接并帮助彼此带来流量。
28.基于图标的字体
基于图标的字体出于多种原因是完美的，包括导航菜单，有序/无序列表，甚至是基本页面内容。
这让我开始思考网页设计的未来，以及HTML / CSS如何极大地影响前端编码。
最近，我在阅读有关24ways的文章，该文章讨论了图标字体和数据属性 。
这也意味着更多的语义设计风格，而不仅仅是使用PNG图标。
这意味着您不需要依靠Typekit等第三方服务来托管字体。
可以使用@font-face将许多这些字体快速添加到您的网站中。
29.图像框阴影
好的网页设计， 大气和美感十足。
您的网站可能已经存在这种情况，但是，如果您的风格平淡无奇，那么人们会在其他地方寻找。
如果您想让访问者在页面上停留的时间更长，那么您需要提供一些真正高质量的内容。
可以帮助您的图片跳出屏幕并在文字段落中脱颖而出的任何内容。
这可能还包括边框和填充物的小方框阴影 。
我建议建立一个快速的图像类，在页面图像周围包裹边框。
30.备用样式表
并且不要忘记并不总是支持投影和打印介质。
这在台式机显示器，笔记本电脑，平板电脑甚至可能是智能手机上必须看起来不错。
考虑构建单个网站布局时必须包括的所有各种媒体样式。
老实说，它不需要花费很多时间来编辑普通打印机的默认网站布局。
如果有足够的需求，那么您的访客将永远感激不已。
可以根据诸如print.css之类的媒体类型对它们进行标记，或将其添加到现有样式表中。
如果您有大量受众使用这些晦涩难懂的媒体，建议您设置自己的备用样式表的样式 。
最后的想法
这些构想中的大多数构想都不会花费超过1-2个小时的时间，而许多构想只需15-30分钟即可完成。
创意设计师，尤其是前端Web开发人员有望在此列表中找到一些有用的技术。
如果您需要快速更新，这是一个很棒的想法集合，值得一看。
重新评估您的网站布局并时不时地以新趋势更新通常是个好主意，尤其是对于CSS3属性的较新版本，这些属性允许使用本机浏览器阴影，动画和圆角。