显示标签为“网站设计”的博文。显示所有博文
显示标签为“网站设计”的博文。显示所有博文

2013年8月28日星期三

那些让网站设计者们深感意外的事情


作为网站设计者，对自己的行业前景，人人都有自己的看法，然而，任何行业都有出人意料的地方。著名的网站开发设计博客 Nope.com 曾向他们的读者做了一个调查，请他们列举网站开发领域那些让他们感到意外的事情，收到了各种各样的反馈，本文就是这次调查的结果与分析。

移动互联网的爆发

移动互联网为网站开发与设计界带来了变革，成为一种时尚与不可逆转的趋势。曾几何时，网站设计者们认为，随着网络带宽的增加以及显示器的变大，我们的 Web 画面会越来越大，那些传统的 960 网格已经显得局促，然而事实却往相反的方向发展，网站开始被放进那些狭窄的小屏幕，人们喜欢这种变化，随时随地用掌上设备访问网站。
我们从中学到的东西是，相对于展示效果，人们更看重方便性。

社会网络主导一切

关于社会网络，曾经的那些质疑声还萦绕在耳，一个140个字符的博客平台有什么出息？社会网络管我什么事？我开的是公司，不是学校。然而，似乎一夜间，社会媒体网络遍地开花并迅速主导一切，老网民热烈拥抱，新网民也一拥而上。我们从中可以学到的是，当网络将人们连接在一起的时候，它所爆发的力量是惊人的。

网站开发与设计已经成为成熟的市场

帮人设计网站曾经是你赚外快的业余职业，是吧，如今，网站开发与设计已经成为非常稳定且成熟的市场，专业的开发设计有大量的需求。

从 XHTML 到 HTML5

拥有严格语法和代码规范的 XHTML 曾被认为是 Web 的未来，然而不是，Web 的未来是 HTML5。当然，导致 HTML5 受宠的不是它松散的语法（XHTML 严格的代码规范仍然是一种很好的习惯），而是它强大的原生功能，原生的媒体播放能力，本地数据库，画布等等。当网页从单纯的文档向应用转变的时候，丰富的原生功能是非常必要的。

苹果与 Flash 之争

Flash 曾是众多网站开发与设计者的最爱，当然，它也惹恼了同样多的人。突然有一天，苹果站出来向 Adobe 发难，乔布斯在众多场合指责 Flash 不稳定，不实用，iPhone 和 iPad 均不支持 Flash，当苹果在移动互联网领域凭借 HTML5 主宰市场的时候，Adobe 风光不再。我们从中得到的教训是，没有任何技术会成为永远的明星。

JavaScript 重放异彩

曾经，JavaScript 是用来让一些画面在网页上飘来飘去的，如今，JavaScript 成了 Web 开发与设计中不可或缺的东西，现在的网站开发者甚至不再考虑用户是否禁用了 JavaScript 这样的问题。当网站逐渐成为一个应用平台的时候，JavaScript 成了这个平台中最强大的工具。

jQuery 成为真正的明星

JavaScript 虽然强大，但很难用，至少在 2006 年之前是这样的，接着，一个叫 jQuery 的 JavaScript 框架面世，这个开源的，跨浏览器兼容的 JavaScript 框架拥有强大的功能与简单的语法，迅速风靡 Web 开发与设计界，并成为真正的明星。如今，运行 jQuery 的著名站点多不胜数。

CSS 动画

CSS是网页式样语言，动画，那不是 JavaScript 的事吗？然而，从2007年开始，Webkit开始尝试 CSS 动画，并最终将这一梦想变成现实。

一个真正的符合 Web 标准的 IE浏览器诞生

在经过 9 个版本更替后，我们终于看到了一个真正符合 Web 标准的 IE 浏览器。在 Web 开发设计界，人们对 IE 的忍耐到达了极限，最终，很多人宣布不再支持 IE 的某些版本，IE9 的出现将改变这一现状，我们从这件事可以学到的东西是，施以压力与时间，任何顽固的东西都会改变。
相关阅读
发帖者 时间： 没有评论:
标签： , ,

2013年8月5日星期一

传统网站如何变为响应式设计


响应式网站设计已经成为目前主流的网站设计模式，那么对于传统网站，应该如何让它实现响应式设计呢？是否需要进行网页的重构？
WDOPS提倡在XHTML（HTML） + CSS文件里将页面内容、布局、颜色、字体设计等分开，如果在当初进行设计时严格遵守了这一原则，那么在响应式设计中，只需要更改页面布局相关的CSS内容。对于固定宽度和像素的页面，需要按比例换算成百分比模式。
是否需要进行页面重构，这就要看网页在"裸奔"情况下是否可以有序的展示，如果在CSS无效的情况下网页无法有序地展示内容，那么是必须重构的，其实这跟是否进行响应式设计无关，符合W3C的HTML + CSS标准，是对网页结构的最基本要求。
一般而言，出于展示的原因，移动设备不太适合内嵌网页地图等元素，这就需要在CSS文件里面做相应的调整。另外，若从用户的手机流量和网速方面考虑，大页面最好还是进行重构，以减小用户向服务器请求的数据量。因为过大的数据请求一方面会增加用户在手机流量上的开销，更重要的一方面会降低页面的加载速度，导致移动设备的用户体验变差。

支持响应式网站设计的条件

响应式设计之所以会产生是由于新出现的各种设备(如智能手机、Pad、Tablet、宽屏电视、普通电脑显示器等)的浏览器(或浏览器模块，如android系统的webView等)支持对CSS3 Media Queries的解析。
响应式网站设计无法普及到传统的非智能手机，但是对于采用主流移动操作系统的手机都是可以支持的。对于将来的新设备，只要其中的浏览器支持CSS3特性，那么它依然可以支持响应式设计。

响应式网站设计是大势所趋

响应式设计是在展示设备日趋多样化这一背景下产生的，可以预见，只要设备生产厂商一日不统一，响应式设计就会一直发展以满足不同规格设备的页面展示，如此看来确实给我们呈现出一种时代产物的感觉。
我们在这里提及响应式网站设计中两个紧密的伙伴： HTML5和CSS3，HTML5是最新的标准，用来做一些性能出色的Web应用。而响应式设计利用CSS3的特性可以弹性布局页面上的元素，对HTML5开发的Web应用而言是最好的协助。二者的结合已经成为当前网站设计的趋势。
相关阅读
发帖者 时间： 没有评论:
标签： , ,

2013年7月31日星期三

响应式设计逐渐成为趋势


现今，无论是移动设备还是平板电脑亦或是PC屏幕，屏幕大小各不相同，若是针对每个屏幕大小单独设计一个解决方案，则会大幅增加网站建设的复杂程度和运营成本。响应式Web设计的概念就是可以让网页根据用户的使用环境进行自动调整，有效的改善用户体验。

什么是响应式设计？

响应式设计的概念由著名网页设计师 Ethan Marcotte 在2010年5月份提出，其目标是要让设计的网站能够响应用户的行为，根据不同终端设备自动调整尺寸。通俗地讲，响应式设计是指可以自适应屏幕宽度、并做出相应调整的网页设计。一个网站能够兼容多个终端(iphone、ipad、android)，而不是为每个终端做一个特定的版本，这样就可以不必为不断到来的新设备做专门的网站版本设计了。

响应式设计的基本原理

网页的宽度使用百分比制以及利用CSS3 Media Queries语句事先设定各种分辨率下的页面布局。相当于对同一个网页，设计师要进行好几份设计(例如宽屏下的三栏设计、普通屏幕下的两栏设计以及移动设备上的单栏设计等)。但现在似乎还没有一个比较统一的CSS框架或设计模式来减少CSS设计师的工作量。

响应式设计的用户体验

一个网站若是没有良好的用户体验，即便有诱人的内容也无法很好的吸引用户。响应式设计虽然可以合理的呈现给我们想要的内容，但并不是将整个网页完美的缩放给我们。由于移动设备屏幕大小的限制，在其上进行显示的内容一般是经过精心筛选的。过多的内容会使页面看起来杂乱不堪，用户也很难找到自己想要的东西，根据WDOPS的经验，比较好的做法是留下少部分最重要的内容直接进行展示，其余的部分可以先隐藏起来，用户点击时再展开。这样信息都保留在了页面上，但是不会一次性的全都推到用户面前，用户可以按需索取想要了解的内容。对于移动设备流量上的考虑，可以设计成AJAX模式，而不是预先加载所有的页面数据，这样可以节省一部分的流量。

响应式设计对于SEO的影响

相对传统的网页设计来说，响应式设计对搜索引擎更加友好。Google的官方建议也是优先采用响应式设计。https://developers.google.com/webmasters/smartphone-sites/

响应式设计正成为通行的趋势

越来越多的公司开始采用响应式设计，今年微软也开始重新设计自己的网站。

WDOPS为您建设的网站采用响应式设计

我们依据"一次设计，普遍适用"的原则，让您的网站能自动适应不同大小的屏幕，根据屏幕宽度，自动调整布局（layout），能同时适应个人电脑，平板电脑，手机等各种的平台，提供优秀的用户体验。
发帖者 时间： 没有评论:
标签： , , ,

2013年6月17日星期一

优秀的网站性能归功于专业网站设计


网站性能关乎用户访问体验，专业网站设计可以提升网站性能，让网站支撑更多用户，让每个用户的等待时间更短。我们通过在网站设计采用高效率的 HTML 代码渲染，数据库优化以及内容缓存技术，来阐述如何提高网站的性能：
使用 XHTML + External CSS + External Javascript 降低 Http 请求
网页设计应当将页面的内容，修饰，行为分开，内容为纯粹的 XHTML，修饰为外部 CSS 文件，行为为外部 Javascript 文件，这种模型的好处是，浏览器可以对外部 CSS 和 Javascript 进行缓存，每次只需从服务器端请求 XHTML 内容，大大降低页面的请求尺寸，对性能的改善有很大的帮助。
使用干净代码（XHTML, Javascript, CSS）
HTML 代码，Javascript 和 CSS 文件需要包含干净的代码，干净，符合 W3C 标准的代码不仅短小，而且降低浏览器的负担，浏览器不需要进行各种容错分析，完全按照标准输出内容，执行效率大大提高。
使用成熟优化的网页渲染技术
ASP.NET是优秀的网站表现层的 HTML 渲染引擎，需要注意的是，为了满足绝大多数应用场合并尽可能降低用户代码量，使用了可能降低性能的技术，如 View State，专业的网站设计需要优化这些技术，提高页面渲染和执行效率。事实上，WDOPS CMS通过直接渲染 HTML 代码生成网页，获得了非常理想的性能。
使用CSS Sprite提升页面性能
CSS Sprite是一项前端开发技术，旨在减少文件请示次数和文件大小，这同时实际上还带来另一个好处，那就是预加载。网页用到的背景图片、ico全部整合在一张图片里，然后通过CSS中的background-position显示背景中图片不同部位来实现背景的切换。由于所有的图片都在一个文件里出现，当客户端浏览器请求任何一个页面时所有用到的图标会被一次下载并缓存起来，当访问者再查看其他页面时，浏览器将不会再重复下载而直接显示，这将节省大量时间。
对数据库进行优化设计
合理使用 Index，使用高效 SQL 语句，减少数据库表的扫描，只返回必要的数据，这些都是非常有效的数据库优化方式，而使用 Store Procedure 进行数据库和网站业务层的数据交流被证明是非常高效的。数据库往往是一个网站的性能瓶颈，专业网站设计就需要对数据库进行持续地优化，每一点微不足道的性能提高，累积起来都会带来质的改变。
启用内容缓存技术强化网站性能
启用静态内容缓存，将网页的元素整合在缓存的文件中，不仅可以提升网站性能，还可以让网站支撑更多的用户。WDOPS CMS拥有完美的缓存技术，将网站的动态数据高效地转化为静态内容，缓存在服务器端，从而极大的提升了网站对客户端的响应性能。
当然，对于网站运行的环境而言，优质的服务器资源也从很大程度上改善了网站性能表现，但是归根结底，优秀的网站性能首先要归功于专业网站设计。
发帖者 时间： 没有评论:
标签： ,

2013年5月31日星期五

符合W3C标准是网站建设的发展趋势



万维网联盟(World Wide Web Consortium，简称W3C)是Web技术领域内最具权威的中立的机构，关于Web的一切标准均由W3C制定。

W3C 标准使全球的网站设计人员和浏览器制造商之间有了一个共同的标准，遵守这个标准的网页，在所有遵守 W3C 标准的浏览器上都可以获得一致的表现，由于世界上主流的浏览器（包括 IE6+），目前都遵守 W3C 规范，所以，如果您的网站是基于 W3C 标准建立的，您可以完全不必担心浏览器兼容问题。
符合W3C标准是网站建设的发展趋势
目前，几乎所有的浏览器都使用W3C标准，W3C标准保证您的网站在所有主流浏览器中都获得一致的表现，WDOPS网站设计完全遵循W3C标准。
网站建设中常用W3C标准
网站建设中最常用到 W3C 标准有三个 HTML, XHTML, CSS。其中 HTML 和 XHTML 用来提供内容，CSS 用来对内容进行修饰。如今，HTML + CSS 或者 XHTML + CSS 已经成为最有效的网页表现形式，这种表现形式的本质是，将内容同修饰分开，这样便于网站设计师在更新内容的时候，不必关心修饰，而更新修饰的时候，不必理会内容。
XHTML 1.0 （Transitional和Strict）
XHTML + CSS是目前公认最严格的标准，可以保证您的网页拥有干净的置标代码，稳定的兼容性能和最广泛的浏览器支持，这种标准的网页在 SEO （搜索引擎优化）中也会获得好的表现。
HTML5
HTML5是用于取代1999年所制定的 HTML 4.01 和 XHTML 1.0 标准的HTML标准版本，预计于2014年正式发布。HTML5技术强化了网页的表现性能，而且大幅追加了Web应用的功能。
关于W3C标准，您还可以参考下面的文章或资源：
W3C 官方网站的一些资料：
发帖者 时间： 没有评论:
标签： , ,

2013年5月30日星期四

从用户体验角度谈网站设计理念


网站建设中用户体验尤为重要，如果说内容是一个网站最有价值的部分，那么网站设计则是内容的载体，体现了一个网站的素养，然而并不是说您应当过分设计，网站设计风格应结合您的行业，原则上应该简洁，清新，优雅，平和，网站的界面设计仅仅是在用户浏览您的内容时获得一种外在印象，不可喧宾夺主。网站设计应遵循以下原则：
为网站初次访问者传递专业的第一印象
好的网站设计会给初次访问者带来难忘的第一印象，然而网站设计的好与坏从来都是仁者见仁，智者见智的，没有统一标准，如果硬要设置一条标准，就是优秀的网站设计应给人以专业感，所谓的专业感，通俗地讲，就是设计的要象个样子，不妨拿您的网站和世界500强的作个对比，您就会知道专业感是个什么样子。
网站设计要遵循优雅原则
一些粗鲁的设计会让用户觉得受到侵犯，所谓优雅，举个例子，您的网页顶部放着20个五颜六色跑马灯在那里不停闪烁就绝对不是优雅，优雅的设计显得有礼貌，有品位，有艺术感，让用户受到尊重，且不可让用户觉得您是在对他们大喊大叫。
网站设计遵守平和原则
不应该使用过分强烈的色彩或字体对比让用户感到不安，或感到疲劳，好的设计是把自己的网站设计理念平平常常地展现出来，而不是总害怕人看不到，用户可能感觉不到您的良苦用心，而觉得不舒服，您就是在以平和的心态设计。
网站设计不能喧宾夺主
或者说，不可过度设计，您需要始终记住，用户来到您的网站，他们真正想看的是内容，而不是您的网站设计，何况，所谓设计，更多是一种主观的东西，随着这个世界的流行趋势而变，现在的网站设计风格多以简洁为美，一定不要将您的网站搞得象古典艺术品。
面向行业的网站设计
如果您是机械行业，使用粉红色系作页面的配色就不恰当，不同的行业有不同行业的风格，您的网站在设计上应符合这个行业的风格，不同行业的网站，设计风格一般以不同行业的消费群体的口味而定，这就好比以专业摄影师为目标市场的相机一般都是以黑色，结实，手感沉重为卖点，而消费类相机则以银色或彩色，轻薄时尚为卖点。如果您不知道您的行业风格是什么，不妨看看您的成功的竞争对手的企业网站。
专业网站设计应包含醒目的Logo
在现代商业化日趋极致的营销环境中，您的企业网站Logo要非常醒目，它们是您的视觉标志，不要把它们埋藏到一些乱七八糟的色彩中。
网站要包含一套非常吸引人的企业网站Banner
企业网站Banner是指一组图片或其它视觉元素，放在网站的上部，一般在Logo下方，导航条附近，用来展示企业的形象或动态，它类似广告Banner 但只用于展示企业自身。企业网站Banner 要有良好的设计，体现企业的商业造诣，或文化、价值观，要定期更新。
企业网站Banner应当定期更新
企业网站Banner应该是您的网站中最醒目的部分，对于长期访问用户，它们应该成为用户注意力的中心，比如，微软每次有新产品，新动向，都会设计全新的企业网站Banner 放在首页，如果您的公司有时间或精力定期对网站内容进行大规模更新，更新企业网站Banner 并与企业动态结合起来，会让人觉得您的网站一直在活跃地更新。
企业网站Banner体现企业动态
如果您有一个大型展览会要举办，或者参加某项活动，或者在行业获得某个成就，奖励，或者有重大产品的发布，都可以用企业网站Banner的形式告诉来用户，如果您自己对这些动态重视，您的用户也会。
合理安排网页页面重心，不可有头重脚轻的感觉
人类能接受的最佳构图是三角构图，重心位于页面的左侧偏下，然后重心向右，向上逐渐减轻。否则会有画面不稳的感觉。因此需要注意，如果在页面顶部罗列太多的视觉元素，网站设计可能会给人头重脚轻的感觉。
全站遵守一致的网站设计风格
全站的配色与页面布局应该是一致的，要给人以连贯感，避免网页之间有太突兀的变化。
对图片进行优化
对于网站内容优化和用户体验而言，图片在整个网站设计中的地位也非常重要，适当地使用图片元素可以较好的诠释您的主题，图片比文字更容易理解，但您必须在网页内容更新前准备好优化处理过的图片，否则图片的体积将使您的网站变得非常缓慢笨重。优秀的网站设计师在图片处理方面也颇有造诣，Photoshop工具的"保存为Web专用格式"功能就可以很好地帮助您对图片进行优化。图片优化的原则是，应该保持图片的视觉正常，避免拉伸和压缩。对于颜色比较丰富细腻的照片，应以 JPG 格式保存，适当选择压缩比例（一般是60%至80%之间，一个 400x400 像素的图片以 JPG 保存时的尺寸应低于 30K 才合适；对于大色块的图形，以 GIF 格式或PNG保存比较好，可以考虑适当降低颜色数以显著降低图片尺寸。
发帖者 时间： 没有评论:
标签： , , ,
订阅： 博文 (Atom)