响应式网页设计

身为前端网页设计师，响应式网页已不是特殊需求，而是常态。移动装置（手机，平板电脑等）超越桌上电脑，使用响应式设计来设计网站对设计师来说成为家常便饭。基本上，核心归结爲一句话就是，在不同设备上自动符合不同的内容。而我们爲了让网站样式能够支援响应式设计，其中最关键的因素就是 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框架的制式图案，因此非常常见于许多行动网站。 对于桌面网页使用者来说，这种按钮是相当生疏的一种介面，因此设计师决定动手做了一点小改…