一晃距离上次改版也已经有两年了!真是时光荏苒啊。上一次改版是根据苹果的主页做的,样子还不错,但问题在于用了太多的背景图片,切割得比较白,不细究不要紧,但如果读者放大或者缩小浏览器,图片间会出现蛋疼的白边;而要是用iMac这样的大屏幕电脑看,整个页面就小而惨得可怜了。

2012年3月22日主页截屏:

20120307 synyan.net
20120307 synyan.net

去年10月底曾经想把主页做成瀑布流形式。搞了一天后无奈放弃。前几天Betty提了个很不错的建议,将主页的图片链接到对应文章,于是前几天一鼓作气弄好了。今天吃完中饭回家后比较空闲,就趁着这股子热乎劲儿,把主页全改了,总体设计思路是简单化、扁平化,且可自适应iPhone等触摸屏设备的屏幕大小;还优化了主页的代码,把主页中的php代码提取出来放到了易管理的文件夹,删减了不必要的大段存废和注释(以前乱七八糟的代码有25多kb,切片图200多kb,加上大图达到400多kb,本次精简后只剩下15kb+170kb,其中100多kb是抬头大图),增大文字便于阅读等等。最关键的是今后要修改任何内容可以直接右键文本编辑修改文字,而非打开蛋疼的Fireworks、Dreamweaver和Photoshop三件套了……

开发过程中倒也不是一帆风顺,曾碰到几个问题有:如何自适应屏幕、将图片与<li>文字放一行、抬头图背景色的设置等等。还好有度娘,基本上花点时间也就搞定了。目前还没想好要不要加更多的功能,暂时先这样吧。

在两台笔记本的若干浏览器和两台移动设备分别测试了,截图如下:

PC上的测试:

20140202 lenovo pc screenshot
20140202 synyan.net

iPhone 4s上的测试:

20140202 synyan.net
20140202 synyan.net

Samsung Tablet上的测试:

20140202 synyan.net
20140202 synyan.net

最终效果见:走遍世界的随想。欢迎各位提宝贵意见!


总感觉边上留了太多的空白不好看,尤其上周去店里用iMac试了一下后感觉更加如此。因此参考最早的主页版本,用了几个小时将主页继续优化了一下,效果明显舒服多了。

20140220 synyan.net
20140220 synyan.net

共有 4 条评论

  1. Betty

    上海

    我Mac看下来,效果跟你的PC版一样

    但两侧的空留肯定要比PC版贴图来的多

    十年前 Firefox 26 · Mac OS X 10.8

    回复

    • S

      江苏

      @Betty 嗯我猜也是。这个无解了。有空帮我截图给我看下。

      十年前 Wordpress App 3 · iPhone iOS 7.0.4

      回复

      • Betty

        上海

        @S 截图已截,给你看已给
        注意查收,如果没有,记得垃圾箱里找

        十年前 Firefox 26 · Mac OS X 10.8

        回复

        • S

          江苏

          @Betty 感谢通知。你直接发的信应该不会到垃圾箱里了。

          十年前 Wordpress App 3 · iPhone iOS 7.0.4

          回复

       

发表评论

您的电子邮箱地址不会被公开。 必填项已用 * 标注