响应式网页设计 事实上已经是一个的标准。很多人仍然以为网页设计是平面设计师的工作,仍然停留在千禧年代初那个 Dreamwaver 盛行的年代。今天网站网页设计的要求是:
· 快。不单是网站载入速度要快,更新内容亦要快。这不仅仅是关乎用户体验。 亦关乎网站排名。
· 网页制作要使用方便,更新内容不用依赖其他人或特殊工具。
· 响应式网页设计适合移动设备。今天更多的人使用移动设备而不是台式计算机来浏览网站。
· 兼容不同浏览器 (Chrome, Firefox, Internet Explorer, Safari)。
· 整合不同渠道 (Facebook, Instagram, Tweeter …) 作网上推广。
· SEO 优化结构, 并支持最新 CSS 3 和 HTML 5 技术。
· 可以添加插件 Plug-ins 扩展功能配合业务流程。
· 稳定可抗黑客入侵。
以上加起来都不是一个二个甚致三四个专家可以独力完成的事情。而是要利用集体智慧,开放源码的方式经过好几年的努力才能令其完备,很像 Android 系统,有人牵头但并无独家权利。
什么是度身订造?
度身订造必需经过几个阶段。第一阶段就是分析客户需求 User Requirements 生成一份功能规格 Functional Specification. 中间至少不免要一两会面商谈。功能规格是作为报价用的。在香港一般不能向潜在客户收取准备功能规格的费用。当双方同意功能规格并签订合同,第二阶段就是从功能规格再细致描述为可执行的系统规格 System Specification, 规范例如外观,互动效果等等,中间又要多次会面讨论。系统做出来后又要进行测试验收 (这里正规的做法是需要推弄出一个测试计划 Test plan),少不免又要几次会面。你我都知道 IT 人工在那个水平,所以就算非常非常简单的度身订造网站亦要十万八万元,而这未必不是一般中小企可以负担。就算可以负担,亦未必有人力资源可以管理这样的项目。解决方案提供商随便抛几个专业名词或用一些技术细节耍你,你也无可奈何?只可以选择接受付钱买贵嘢或项目烂尾。
坊间所谓响应式网页设计其实是什么?
响应式网页设计 RWD 包括以下特性:
· 采用流体网格 fluid grid 要求页面元素大小以百分比的相对单位,而不是像像素或点的绝对单位。
· 要求图像以相对单位来确定大小,而不是像像素或点的绝对单位,以防止它们显示在其包含的元素之外。例如:在HTML 中,style 是 width=”100%” 而不是 width=”650px”
· 采用媒体查询 Media Queries 语法查询设备显示的特性,最常见的是浏览器的宽度,进而使用不同的CSS风格规则。
大部分网页设计都是基于开于源码 Open Source 的系统(如:Wordpress,Joomla)上稍为修改。解决方案提供商喜欢对外行客户说成度身订造设计,原因是可以抬高价钱。过去十年网站设计之所以普及是由于采用开放技术和将很多设计细节标准化,标准化就可以采用部件完成,因此能够降低成本。例如:网站页面始终包含共同页眉和页脚,侧边栏等等。公司徽标在左侧或右侧或居中等等:
标准化的缺点是多了一些限制。标准化的做法适合绝大部份用户。但确实未必附合有一些大企业的严格要求。
什么是网页模板?
几年前网页模板比较粗糙,只可以改动颜色,字体,页眉页脚等等。今天由于需求愈来愈多,市场不断增长,网页模板除了处理外观外,亦不断增加和整合其他功能(如:联系表格,论坛),更多弹性令一般设计外观无需透过程序改动完成。
由于网页模板是以授权形式发售,购买者愈多,开发者愈有利,所以网页模板开发商会不断增加功能,升级模板版本,解决兼容性问题,确保模板的质素。如果网站是由小开发商度身订做,很难想象网站交货以后还会进行升级维护,因为下一个客户的要求很可能不一样,重用的机会很小。
专业模板采用最新技术,例如 HTML 5 和 CSS 3. 专业模板一般提供界面让用户变更外观,例如调较颜式,字体大小等等。有一些较细致的地方,模板没有提供预设界面调较时,你可以通过自定义 CSS 来处理。例如:网站中文字体。中文字体由于体积大不能以 webfont 形式发布。所以网站使用中文字体会设定为常用系统(例如:Windows, Android 等等)字体。需要利用自定义 CSS 设定:
网站流程设计
另一种网站设计是关乎流程设计,常见流程往往需要加入其他插件来扩展功能,例如:在课程内容页内容中间插入一张报名表格,浏览者需要填写一些资料再按 “提交” 张表格发送给网站管理员。
这中间牵涉一些表格程序的罗辑处理,一般的造法是加入插件 (联络表格)或模板提供短代码 shortcode, 例如:
当网页被访问时短代码被译出成为完整代码支援所代表的功能。只有当要求的流程或功能是非特别无法以现有插件完成时才考虑自己开发。
页面编辑 – Visual Editor
以前 CMS 页面编辑是利用类似 Word 的编辑器,一般文字,图片,超链接等等的处理没有太大问题。但当应用在响应式布局 Responsive Layout 以配合移动设备如手机和平板计算机,较复杂的内容需要配合 Cascade StyleSheet (CSS) 的 class 才能达致响应式效果。
举例:一个三列表格在移动设备下只能缩小,但太小就看不清楚内容。但如果采用 column 来定义,当板面阔度太窄,第二第三列可以自动调整滑到下一行。但 column 不是标准 HTML 语法,虽然模板以 CSS 形式配合,这时你只可以切换到 HTML code view 模式加入短代码并设定 class. 就算懂 HTML 代码的人,编辑时亦很费时失事。
高阶模板的解决方案是加入 Visual Editor, 让用户以切积木形式加入内容,然后再定义每条积木的内容。积木之间的相对位置可以透过拖放 drag and drop 来调位。编辑员无需懂 html 代码或短代码。就算普通用户无需设计亦可以造出精美页面。
本文来自投稿,不代表重蔚自留地立场,如若转载,请注明出处https://www.cwhello.com/48324.html
如有侵犯您的合法权益请发邮件951076433@qq.com联系删除