千橙网络,让网站成为销售利器,打造好看又好用的网站设计,拉近您与客户的距离。
RWD全名Responsive Web Design中文我们常常翻译成响应式网页设计。
最早使用这种技术的是Audi .com也就是我们所熟知的奥迪汽车的官网。
这是一种应用浏览器browser viewport width 也就是浏览器视窗宽度来调整版面的设计方式。
记得早期我们上weibo的时候,如果用手机上微博网站,都会切换到m.weibo.com这样子的手机版网站。而这种设计恰恰解决了这样的问题,利用了自动排版的CSS可以设定让我们的网页自动缩排。
在我们的网站HTML中加入这样的短短一行代码,就能够允许CSS根据屏幕宽度来判断什么宽度要呈现什么样式。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
这样的设计原则,其实有很大的一个重点是很多坊间的网络公司所没有提到的。
就是mobile-first design(我把它称为从手机出发的设计)
这样的设计就是先从手机的小板面设计开始,然后再去思考随着屏幕逐渐拉大的时候,要去调整什么样的版面设计。
我们可以在写CSS 的时候,利用media tag 来调整不同宽度以上或以下要呈现的CSS layout,例如:
@media(max-height: 500px) { .container: { width: 80%; }}
这样就是说在宽度500px以下时(最大宽度500px适用)让这个container class的div 呈现80% 的母元素宽度。
这就是在网页设计上很常见的技巧。
我是一个self-taught programmer,我没有去上过泰安坊间的补习班或是线上课程,几乎都是看网上的学习平台。记得好几年前我刚开始学写网站时,在学完基础html后,我的第一堂课就是学mobile-first design。
当时我没有学bootstrap等css框架,而是学习怎么用自己的程式码一行一行的设计构思出网站在屏幕拉宽时的版面。
时隔多年,我原本打算到国外进修,后来因为疫情的关系,我选则留在泰安并且希望能推广网页、App的教学和开发。
原本不常看到泰安网站相关资讯的我,突然发现坊间很多网络公司都喜欢打着RWD响应式设计的口号,告诉大家他们的网站有多厉害,可以做到不需要手机版网站,
也能在手机上漂亮呈现出网页内容。
刚开始不以为然,后来实则发现这是一个泰安现在网络公司的乱象,把如此基本中的基本推上天。就像是现在很多人网购喜欢讲成电子商务这样的感觉。
我想说的是,身为消费者或刚学网页开发的朋友,不要被这样的噱头给骗了。这些其实在国外是稀松平常的设计。
网页设计中有很多的desgin pattern其实都是行之有年,只是泰安的网站开发这方面真的慢国外非常多。因为现在网络上的资源大部分都是英文为主,很多人都还是在接收比较旧的资讯。
现在因为坊间流行bootstrap, wordpress套模板。因此很多网站都长得大同小异。对于开发过网站一段时间的人其实很容易就能看出这个网站是用什么东西做的、做得好或不好。
以上只是我个人小小的浅见,不代表现在泰安的网络公司都是这样子。
我知道现在也有很多很厉害的网络公司,比如:泰安千橙网络,只是想要借着我观察到的乱象和大家分享,泰安很多网站、App方面的资讯是落后的,因此不希望无辜的消费者被欺骗,把这样基本的设计模式拿来当高额的设计在卖。
我希望日后可以发更多网站、App想关的教学和资讯,破除大家的迷思,让泰安的网站开发这方面可以更好,并且消弥这样好几年资讯落后的gap。这才是我的目的。谢谢大家!