当我们启动较新的项目时，很容易忘记更新较旧的博客和网站。 在本文中，我想提出30个扎实的想法，您可以快速实施这些想法 ，以使您的网站更加人性化。 并非所有这些都完全基于前端设计。 我还将讨论流行的HTML5编码技术 ，这些技术可以帮助Web解析器和Spider正确地对数据进行分类。

并非每个网站都需要更新，并且本文中没有可用的每种技术。 这些想法使开发人员可以在设计以及如何使网站看起来更漂亮方面进行思考。 现在，构建可伸缩的响应式网站布局在任何数字屏幕上看起来都比以往任何时候都要容易，所以让我们着手完善我们的网站。

1. UX测试

我不总是在我的网站启动上运行测试而感到内gui，但这是我最喜欢的活动之一。 通过研究用户与您的网站的互动方式，您可以学到很多有关典型用户互动的知识 。 只能通过Google Analytics（分析）之类的工具或使用其他第三方资源来进行用户体验研究。

您可以找到的潜在利益是巨大的。 用户体验测试有助于Web开发人员了解其网站的哪些区域令人烦恼，损坏或可以改善。 考虑不仅使用数字工具，而且要使用您的朋友和同事。 听您网站上的一些真实的人为反馈可能会提供您无法通过计算机屏幕获得的结果。

2.空格

我们可以将空格视为页面中元素之间的空间量。 如果某些用户已经习惯了这种布局，他们将不会介意。 但是，请考虑您的目标受众，并考虑其中有多少人不如年轻一代具备计算机知识。

您可以通过拆分A / B测试并保留用户反馈来确定需要额外间距的区域。 或仅将其打开，看看您能想到什么！

3.网络字体

动态Web字体使设计人员可以构建网页，而不必局限于典型的字体系列。 由于大多数普通的Internet用户都使用了体面的DSL / T1 /光纤连接，因此这种趋势变得越来越流行。 包括对第三方字体样式表的引用将不再对您的DL速度产生重大影响。

最好的字体提供者是通过Google Webfonts 。 即使您没有Google帐户，也可以访问该应用程序，尽管注册需要一定的时间。 完整的设置过程仅需3个步骤，您可以在几分钟内在您的网站上运行自定义Google字体。

4. CSS3阴影

当我谈论使用阴影来改善布局时，实际上是指两个不同的属性。 对于布局中的div和box，曾经流行的box-shadow真的很酷。 将此效果附加到您的容器，包装纸或内部页面框上，将为您的网页提供瘦身的3D效果。

但是，也值得考虑使用CSS3 文本阴影属性进行排版，该属性会跳出页面。 苹果公司是最早在其布局中全面实现文本阴影的公司之一。 您可以通过添加与字体颜色相反的文本阴影（深色阴影的白色阴影，浅色文本的黑色阴影）来创建令人生畏的效果。

5.纹理和重复图案

仅使用标准配色方案即可获得很多网站。 但是要使您的网站真正脱颖而出，您可以考虑添加纹理并在背景中重复铺砌瓷砖。 最酷的免费Web应用程序之一是Noise Texture Generator ，它可以在任何浏览器上运行。

只需选择BG颜色和要使用的噪声量，然后此应用程序将动态创建平铺的背景图像。 如果您正在寻找图案和图块，那么我建议您使用Subtle Patterns 。 它们具有大量可用纹理，您可以免费下载。

6. CSS3渐变背景

在讨论背景时，我应该提出广受欢迎的CSS3渐变 。 这些为Web开发人员提供了巨大的好处，使他们脱离了Adobe Photoshop的Web背景。 这些渐变不仅可以作用于身体，还可以应用于导航栏和页脚以及布局中的其他重要区域。

7. Boostrap

Twitter的Bootstrap很可能是Web开发人员最伟大的前端UI框架。 这包括按钮，表单输入，链接，列和大量其他预格式化的页面对象。 Bootstrap的最常见用法是在新应用程序的登录页面中。

但是，开源开发人员在为其发布的库，插件或迷你脚本构建演示页面时，也会利用Bootstrap。

我觉得Bootstrap已经发展到如此之大的程度，以至于如今它可以应用于任何网站。 但是，发现最大好处的开发人员正在使用Bootstrap作为推出自己的UI设计的快速替代品。 下次您启动具有特定目的的网页时，请考虑使用此前端库：登陆页面，产品演示，移动应用程序网站等。

• Twitter Bootstrap入门
• Bootstrap 201：模态窗口插件

8. HTML5 Kickstart

大多数Web开发人员尚未听说过99Lime创建的HTML5 Kickstart 。 这是另一个前端UI库，它比普通HTML5布局更注重美观的设计美观。 但是有一些代码示例可以同时生成这两个代码。 您可以从一组预定元素中进行选择，例如渐变按钮和下拉菜单。 我不会说这与Bootstrap一样受欢迎，但是那又是什么呢？

如果您有时间和耐心，建议您对该库进行快速测试。 构建一个小的沙箱布局，看看您是否喜欢每个UI元素的默认感觉。 Kickstart当然并不适用于每个项目，但在绑定时可能会节省大量时间。

9. jQuery UI

动画，滑块和淡入淡出元素通常在jQuery库中运行。 对于前端开发人员来说，这是最常见的开源JavaScript库，但是它也有一个配套库jQuery UI 。 开发人员忽略了这一点，认为它不能为额外的KB提供太多回报。

但是，包括UI库意味着您可以为任何动态页面动画更新easing调用。 这意味着您可以为任何下拉菜单，淡出项，滚动幻灯片以及其他所有动态内容自定义jQuery动画类型。

jQueryUI网站上有一个轻松的演示页面 ，您可以在其中测试多种变体，并查看是否喜欢任何特定的动画类型。

• 如何设置jQuery UI手风琴样式
• 带有jQuery UI Slider的音量控制器
• 自定义主题jQuery UI Datepicker
• 使用jQuery UI Sortable进行拖放

10.奢华的BG照片

如今，有无数网站利用了全屏背景图片效果。 如果您可以找到高分辨率的照片样本，该样本看起来像背景图像，那么可以将这种技术添加到您的布局中。 大型背景在吸引用户注意力方面做得很好，同时也暗示了网站的类型。

如果您正在寻找快速解决方案，请查看jQuery Backstretch插件 。 只需一行代码，您的新背景就可以使用任何分辨率正确地进行缩放。 但是对于反对JavaScript方法的开发人员，我建议在CSS-Tricks上发布CSS3全页图像技术 。

11.菜单图标

为了吸引更多访问者的注意，可能值得在您的网页中包含一个小图标集。 标准菜单链接通常足以正常运行并帮助用户在页面之间导航。 但是，经常为每个菜单链接设计的自定义图标给我留下深刻的印象。 您可以找到大量的免费图标集，这些图标集在您的顶部导航，侧栏或页脚区域中看起来非常完美。

12.更新的配色方案

我并不是要改变整体的配色方案设计，而是要增加新的颜色。 在经过几个月又几个月的相同布局运行后，很高兴更新较小的区域并惊讶地吸引回头客。 某些感兴趣的项目可能包括锚链接，标题，背景和工具栏。 考虑使用诸如配色方案设计器之类的在线工具来改善您的轨迹。

13.增强的浏览器支持

建立所有主要的旧版浏览器完全支持的网站是很困难的。 尽管运行Internet Explorer 6的人很少，但仍显示在我的一些Google Analytics（分析）报告中。 正在寻找想法的开发人员可以考虑对浏览器测试进行一次小型试用。

更重要的主流浏览器包括最新版本的IE9，Mozilla Firefox，Opera，Chrome，Safari和Camino / SeaMonkey。 但是Internet Explorer 6-8仍在企业和较旧的计算机实验室中广泛使用。 您可以使用IETester软件运行快速渲染测试。 IE8同样具有开发人员工具模式 ，您可以在其中切换到旧的渲染引擎进行调试。

14.适合的版式

您可能会发现您的旧版式仍在有效地利用文本样式，但这并非总是如此。 我觉得大型字体将更容易适应布局。 更不用说它更容易阅读，并且在较大的屏幕分辨率下会占用更多空间。

“适合排版”的想法是对文本进行样式设置，以使其适合您的网站 。 您可以浏览几页并在10-15分钟内更新这些样式。

15.社交媒体共享

到目前为止，我确信大多数开发人员都熟悉流行的社交网站中使用的共享徽章。 Facebook，Twitter，Reddit，Pinterest，Dzone和许多其他外部网络提供可以嵌入到您的网站中的代码。 然后，访问者可以共享您到这些网络上的链接，而无需离开您的网站。

在某些博客或网络杂志上，您会注意到这些徽章将跟随您向下滚动页面。 这是一项出色的技术，因为您经常可以让它们悬停在它们没有阻挡任何重要内容的身体区域之外。 我还建议您在社交媒体工具栏上浏览我们的帖子，这可能会产生类似的效果。

16.用户讨论

如果您正在运行WordPress或Drupal之类的CMS，则默认情况下可以包含评论表单。 但是，在创建静态网页时，您需要设置自己的数据库系统来模仿此功能。 但是随着开源技术的兴起，开发人员现在可能会实现更好的解决方案，例如Disqus 。

使用这种方法，您将不会经常从讨论区域清除垃圾邮件和垃圾邮件。 尚未拥有Disqus帐户的用户可以使用流行的社交网络配置文件快速进行连接，也可以直接从您的页面进行注册。 即使是厌倦了Akismet的WordPress用户也可以使用Disqus评论系统插件进行切换。

17.扩大页脚区域

大多数较小的网站布局在底部页脚部分都会非常保守。 这可能包括一些基本的版权信息和一些主页链接。 但是现代Web设计趋势支持带有大量元链接的大型页脚的想法。

这些通常出现在初创公司和大公司网站上，其中包含许多其他信息。 当然，不要尝试将其强制设置为不属于它的布局，但是如果打开较大的页脚区域可以改善您的网站体验，则值得深思。

18.负责形象

动态流畅和响应Swift的网页图像本身已成为一种趋势。 现在将图像设置为固定的宽度几乎是荒谬的，因为调整窗口大小后会脱离容器包装。 最常见的技术是应用width: 100%在所有img元素上使用CSS的width: 100% 。

但是您也可以考虑其他一些可能在绑定中有用的开源方法。 ResponsiveImg是一个这样的jQuery插件，具有很小的文件大小。 只需将其包含在您的页面中，然后运行针对页面上所有图像的单行代码即可。 这是对仍使用基于桌面内容的移动版式的绝佳补充。

19.菜单辅助功能

我不会说这是您应该不断尝试在布局中进行更新的内容，但是开发人员和设计人员第一次都不正确。 我觉得值得回顾一下您的导航系统和集思广益，是否有更好的方法来实现子菜单链接 。

侧栏和内容区域通常会保留手风琴菜单，因为垂直方向上有足够的空间。 但是考虑一下带有下拉菜单或滑动子菜单的水平导航栏。 只要您的菜单链接快速且易于访问，用户群之间就不会出现任何问题。

20.语义微格式/微数据

微格式和较新的微数据规范用于在HTML代码内部扩展元数据。 这些属性提供有关您的内容以及它与页面上其他内容的关系的更多信息。 最终，这些结果可帮助Google确定各个关键字以及其他引擎（例如图像和视频搜索）中您网站的排名 。

支持最明显的Microdata文档版本称为Schema.org 。 他们的网站提供了使用语义模式标记返回和编辑HTML内容所需的所有信息。 所有主要搜索引擎均支持此Schema语法，并支持该语法，并且有可能演变为语义元数据设计的未来。

21.重新排列导航链接

对于某些网站，在固定内容导航上运行可能不是一个真正的问题。 但是我发现在一些较大的商业网站或投资组合中，某些导航链接被赋予了太多的优先权。 同样，有些物品很少能找到！ 花点时间浏览您的网站，并表现得就像您是其他任何访客一样 。

考虑您最感兴趣的链接，以及可能希望添加的任何链接。 这些内容可能包括您的网站的简要历史记录，有关团队的信息，联系方式，隐私问题，新闻稿等。它还可能有助于收集用户反馈，并查看他们的愿望与对新页面或更新页面的需求之间是否存在关联。 。

22.返回页首链接

如果您的网站发布了很长的内容页面，那么这是布局中必不可少的元素。 如今，几乎到处都可以找到滚动的“返回首页”链接。 用户不希望按下Home键，并且可能会一直滚动到令人讨厌的位置。 此链接的最佳位置是浮动在您的容器旁边，或者就如我们在Hongkiat上实现的那样直接位于页脚中。

23.自定义代码/前置标签

首次创建网站样式表时，许多开发人员将忽略典型的页面元素。 标题和段落很常见，但是pre标签或内联代码标签呢？ 它们用于封装预格式化的源代码语法，就像在文本/ NFO文件中看到的那样。 有些网站不需要这些元素，但以防万一的样式仍然被认为是一种好习惯。

24.添加图像的宽度/高度属性

现在，根据要经过多少张图像，此任务可以轻松地花费一些时间。 但是，如果您在网站中找到没有定义宽度/高度的图像，则可能需要对其进行更新。

通常，缺少这些属性的图像在全部加载之前将显示为1×1 px的正方形。 这将导致您的网页和滚动条在加载新图像时跳转。 同样，这对所有人都没有帮助，但是在某些情况下，作为快速修复程序值得注意。 仍然有CSS技术使用固定属性来响应图像 。

25. JavaScript通知

任何使用JavaScript的开发人员都知道典型的对话框。 您可以设置一个警报框，为用户提供一个确定按钮，仅显示信息。 但是也有带有“是/否”按钮的确认警报，以及要求用户输入的提示框。

所有这些都可以使用alertify.js进行自定义。 这是一个非常小的开源库，用于设计您自己的前端警报框。 如果您需要匹配自己CSS样式，设置起来非常快捷，并且易于定制。

26.响应式媒体查询

这看起来好像不需要添加一些代码，但是实际上并不需要太多时间。 响应式查询可以添加到现有样式表中，也可以添加到新的响应.css文档中。 无论哪种方式，您都可以快速设置循环样式以处理显示器，平板电脑和智能手机的各种显示尺寸。

响应查询并不总是需要完全响应您的布局。 有时，这些内容可能只会隐藏一些内容，例如细长的侧边栏或较大的页脚。 然后，您可以显示一个完全响应的迷你页脚，该页脚最初隐藏在桌面布局中。 您可以在我们的响应式Web教程集中了解有关媒体查询的更多信息。

27.会员链接

总是会有类似的网站在线建设与您的领域相关的内容。 很少有新想法被创造出来。 其中大多数是现有内容的分支和模仿。 但是，为什么不将网络变成比赛，却不营造友好的氛围？ 如果您的版面中有多余的空间，请向您的利基市场（搜索Google）中的相关网站发送一些电子邮件，询问其会员。

您可以交换链接并帮助彼此带来流量。 这为新用户打开了大门，使他们可以更快地找到您的网站，并看到您也被包含在其他网站的社区中。 另外，获得具有Google权限的网站的反向链接只能帮助您提高域名的信誉。

28.基于图标的字体

最近，我在阅读有关24ways的文章，该文章讨论了图标字体和数据属性 。 这让我思考了网页设计的未来以及HTML / CSS如何极大地影响了前端编码。 基于图标的字体出于多种原因是完美的，包括导航菜单，有序/无序列表，甚至是基本页面内容。

可以使用@font-face将许多这些字体快速添加到您的网站中。 这意味着您不需要依靠Typekit等第三方服务来托管字体。 这也意味着更多的语义设计风格，而不仅仅是使用PNG图标。

29.图像框阴影

如果您想让访问者在页面上停留的时间更长，那么您需要提供一些真正高质量的内容。 您的网站可能已经存在这种情况，但是，如果您的样式乏味，那么人们会在其他地方寻找。 好的网页设计， 大气和美感十足。

我建议建立一个快速的图像类，该类在页面图像周围包裹边框。 这可能还包括一个小方框阴影以及边框和填充。 可以帮助您的图片跳出屏幕并在文字段落中脱颖而出的任何内容。

30.备用样式表

考虑在构建单个网站布局时必须包括的所有各种媒体样式。 这在台式机显示器，笔记本电脑，平板电脑甚至可能是智能手机上必须看起来不错。 并且不要忘记并不总是支持投影和打印介质。

如果您有大量受众使用这些晦涩难懂的媒体，建议您设置自己的备用样式表的样式 。 可以根据诸如print.css之类的媒体类型对它们进行标记，或将其添加到现有样式表中。 如果有足够的需求，那么您的访客将永远感激不已。 老实说，它不需要花费很多时间来编辑普通打印机的默认网站布局。

最后的想法

创意设计师，尤其是前端Web开发人员有望在此列表中找到一些有用的技术。 这些构想中的大多数都不需要花费超过1-2个小时的时间来实施，而许多构想可以在15-30分钟内完成。

重新评估您的网站布局并时不时地以新趋势更新通常是个好主意，尤其是在CSS3属性的较新版本中，这些属性允许使用本机浏览器阴影，动画和圆角。 如果您需要快速更新，这是一个很棒的想法集合，值得一看。

翻译自: https://www.hongkiat.com/blog/ideas-to-nicer-websites/