响应式网页设计

身为前端网页设计师，响应式网页已不是特殊需求，而是常态。移动装置（手机，平板电脑等）超越桌上电脑，使用响应式设计来设计网站对设计师来说成为家常便饭。基本上，核心归结爲一句话就是，在不同设备上自动符合不同的内容。而我们爲了让网站样式能够支援响应式设计，其中最关键的因素就是 CSS 中的 media queries，media queries 可帮助我们定义不同内容和尺寸的设备上的样式。   起手式：使用 Media Queries 首先，你要先定义响应式网页设计主要对应的尺寸，上面我们说…

iWare长久以来经手了很多医疗与无障碍设计的网页设计需求，因此经常会关注当今的无障碍网页设计的最新发展。最近我们注意到随着COVID19冠状病毒疫苗的问世，美国进行大规模注射疫苗的活动时，告知大众可以透过网站进行疫苗的预约注射。 这一点让我们感到好奇，究竟如何运用网站进行疫苗的注射预约呢？我们查访了几个美国的州政府卫生局网站，可惜的是有一些网站会阻挡境外IP使用，所幸我们找了一个阿拉巴马州卫生局的疫苗注射预约，从中学习卫生服务网页设计的精神。   捨弃传统横式选单，直接採用汉堡选单 …

受疫情影响之下的网页设计趋势 今年全球受到新冠肺炎的影响，人类的生活受到了重大影响：旅行禁令、封城、停校停课…深远影响了所有人，人们利用科技抗疫，网页自然也没有缺席，因此今年许多网页设计的趋势都围绕在防疫上。 举例来说：为了维持业绩，企业大多投注了更多预算于线上商城上；美食外送成为主流，许多食品公司也顺势推出线上订购料理包的服务，甚至是教育机构将课程班上网路，让学生减少外出的机会避免染疫…这些变化势必仍会延续到2021年。人们对于网页设计的期盼更高，也希望透过网页能够得到…

进入2020年，网路扮演的角色不再只是资讯传达的媒体，新的5G技术将于2020年登场，而智慧手机再度成为科技界的关键平台。正当所有的一切服务都走向行动化，网页设计的行动化、高品质化、实用化的势必不可挡。 行动网页设计的主流技术以「响应式网页设计」(RWD)为主流，自2014年陆续就有相关的应用技术，至今已经有大量的网页採取RWD技术，但不少RWD只是针对显示解析度加以调整网页版型布局，其实还有许多行动网页设计的需求将大爆发。 以下我们整理了各国对于2020年，网页设计在版面、技术、行动化的方向观…

几年前，曾有一个厂商想要了解网页设计的服务，提到了一个看似常见，但却又不太可能实现的「网站一键改版」这种技术。 客户：我们的网站要改版了，在此之前我们想要找一种解决方案，是未来不用一直改版，只要一个按钮，就能够改版的技术，如此我们就不用一直找人做网站了。 iWare专案师：就我们目前所知，没有这种技术。 客户：跟你们分享一下，以往承包我们的网站设计公司，表示他们的技术十分先进，用了一段时间想要改变网站的版型样式，只要「一键」就能搞定。例如今天是A版型，过了一两个月要改成B版型，只要跟他们说一下，…

之前我们曾经有分享过常见的网页设计错误分享，不知道大家是否还有印象呢？现在的网页设计者可以参考的资源很多，也有更好的工具可以辅助设计，如今网页设计师的水平普遍不会犯下过去十年前常见的错误，例如字体的滥用或是图片解析度不足、图片过大等滥用情形，现在都已经很少见了。 现代的网页设计变得更为简单、轻鬆吗？其实这也未必，因为现在的设计网站多以响应式网站的方式进行，要顾虑的不仅是网站看起来要丰富、要内容，还要顾及是否可以于智慧手机平板上正常运作？是否能够达到ThinkWithGoogle针对网站优化的要求…

许多设计师关注网页设计的宽度，但是网页的长度却很少人提及。关于网页长度的论点不多，早期曾设计师提倡：网页就像是一个有图文的媒体，不要捲动画面的前提下，可以让人一页看完，就是最好的网页设计。 不过随着手机等智慧装置的问世，这样的设计论点就已经不再被提出了，因为在手机的环境下，要一页显示全部的内容是几乎不可能的，加上手机捲动网页也远比滑鼠简单，因此网页最适当的长度就任凭设计师们自由发挥，尤其是网页的底端非常适合做当作次要选单，让网页的长度几乎无止尽的不断的延伸下去。 来到2018年，手机优先的设计有…

现代人每天使用网路的时间越来越多，不论是吃喝玩乐都会常常透过网路来搜寻相关资料，也因为线上付款的方便简单，网路购物的情况也是越来越频繁，小从电池大到家电都有人在网路上购卖，使的越来越多人前仆后继的迈进网路这个巨大市场。 在进入网路时最好有自己的一个网页，放上最想呈现且最具吸引力的资讯，吸引着消费者前往观看进而购买，而在考虑製作网站时，相信在询问製作时都会听到一个名词-RWD，而这到底是什么呢? 响应式网页设计(Responsive Web Design)简称RWD，又称适应性网页、自适应网页设计…

  虽然现在已经来到2017年，基本上网页设计的风格大致没有太大的变化，以CSS+Javascript结合自适性网页设计为主流，因此这三年可以看到网页设计趋势基本上没有太多差异，但如果你已经三年以上没有接触网页设计，那你可能还是会觉得市场有极大的变化。     不少公司习惯比较竞争对手，但可能会遇上两种情况，第一种是竞争对手的网站并没有变化，设计与功能都不如今日的网站；另外一种情况是竞争对手使用的技术十分先进，但如果完全参考又容易落入抄袭的可能，因此，你需要一个良好…

  Google积极的鼓励网页设计公司，以及正在製作网站的公司，一定要将行动用户的需求考量进去，鼓励设计师多使用新的网页设计技术，例如HTML5与RWD的组合，反之，使用老旧技术的网站如Flash就会受到限制与惩罚。   要如何得知你的网站是否行动友善，其实Google已经推出了很多工具，这一次他们做出了一个更炫的网站：Think with google，让使用者可以透过Google的角度，来看看自己的网站设计是否合格。   Google 网站设计三大分析工具 分析…

2016年3月Apple推出了令人可以理解，却又有点难以置信的新产品：iPhone SE，市场的反应複杂，许多人认为这是毫无新意的产品再次包装，也有评论家认为这是小尺寸手机仍受到市场欢迎的最佳证明。   让我们回顾一下2013年iPhone 4推出时，网页设计师才正要摸索响应式网页设计技术，这是一种能够让网站根据使用者的显示设备，自动调整显示版型、样式、资讯的崭新网站设计技术，如今，大部分的设计师多半已经会相关的设计技巧了。     响应式网站的出现主要满足了行动族…

响应式网页设计(RWD)已经风光了两年，马路科技iWare的客户几乎都使用上了这样的技术，但只要手机的网页浏览画面看起来正确的显示，就是一个好的响应式网页设计吗？ 今天我们分享一个网页设计师，利用自己的网站进行了一个行动网页选单测试，仅只更换选单的图样，就能带来意想不到的结果。 首先响应式网页设计最常见的选单按钮，为平行三条线的图样，这样的图样是根据Bootstrap框架的制式图案，因此非常常见于许多行动网站。 对于桌面网页使用者来说，这种按钮是相当生疏的一种介面，因此设计师决定动手做了一点小改…

「网站瘦身」是许多网页设计师製作网站后，将网站的图片、影音、程式档案大小优化后，能够提昇网站开启速度，增加客户满意度的技巧。当瘦身已经无法满足客户时，低频宽网站设计就是最好的解决方案。   即使今日4G高速无线网路服务已经开通，智慧手机佔有率超越了传统手机，低频宽的网页设计仍有很高的价值。举例来说，可口可乐公司于非洲的行销，顾及到大多用户只有2G手机以及频宽不佳，因此透过脸书的幻灯片技术，取代今日流行的影片行销，由于幻灯片的读取速度很快，剧情又很吸引人，用户很乐于按讚与分享给其他朋友，…

越来越多手机网页设计的技术推出，例如HTML5与RWD设计都已经十分纯熟，但为何手机开启网站的速度越来越慢？根据英国BBC报导指出，手机网页浏览越来越慢的最大元兇在于无所不在的广告。 报导指出，当使用手机观看一个媒体网站，会出现多达40％与主题毫无相干的内容显示，有些是动态图片，有些是遮蔽式广告，更糟糕的是有些媒体广告居然自动载入影片播放于智慧手机上。影片往往比图片佔用了更多频宽，也可能会连线到其他网站，让网页的读取更为缓慢。 即使今日智慧手机的处理器性能已经大幅提昇，观看影片不成问题，但是频宽…

美国联邦首席资讯长最近发表了美国网页设计标準(U.S. Web Design Standards)的网站，规範出日后政府的网站，应该遵循文件的原则，製作出对人民有帮助的网站。 即使美国联邦资讯处的网站目前看起来十分老旧，整体设计与功能停留在好几年前的标準，这一次他们发表的设计标準文件，却有很大的影响力，主导了今后美国政府机关网站改版需要遵循的规则，以下为这一份文件的大纲： 简单就是美 这一份文件的标準告诉网页设计师，使用简易的开发工具，製作最丰富的内容，就能够成就一个理想的网站 高可读取性 为了…