猫灿先生博客,简约即美
标签归类 » 网站设计

Maocan.com新版首页设计

2013 年 06 月 05 日 下午 11:20

maocan_site

我的个人网站Maocan.com首页,之前一直沿用自2010年11月就开始启用的第一版设计,之间仅仅更换一些首页链接和背景图像,觉得是时候设计一版全新的首页了。新版重点考量的因素包括,更为友好的界面设计(链接区域扩展为方块,更容易点击,尤其在平板电脑和手机上),跨设备最优显示(自适应网页设计,参考日志),更好的SEO效果(加入微格式,以往存在问题修正),重视社交(突出社交平台链接)。首页的最主要功能还是以导航为主,帮助访问者快速定位需要的信息,将各个子站点联系起来。新版基本上是按照Win8的Metro风格来设计的,尽管微软这一最新的操作系统市场占有率还不足5%,但是这种主推的设计风格会越来越多为人们所熟知,所以采用了这个基调。为实现Responsive Design重写了CSS样式,确保在电脑、平板和手机上访问看到的是最好的效果。手机访问时将不加载jQuery和背景图像,加快响应速度。

当前还有一些内容需要完善,比如增加更多的文字介绍,提高“文本/ HTML比例”,这是SEO挺重要的一个因素。至于在不同设备上的显示到底如何,刚好经过Challenger(新加坡的电器连锁店),进去用不同的平板电脑试了一下,效果都挺不错。如果有什么建议欢迎留言,完成这个任务可以继续好好写日志了。

Maocan Sites正式上线

2013 年 03 月 20 日 上午 1:25

Maocan Sites

一直有个想法就是将Maocan.com各个公开的子站汇集到一个页面上,即一个界面友好的Sitemap,便于管理,还方便访客和搜索引擎了解我都做过哪些网站。现在Maocan.com名下有十多个子域名,每个都是各有分工,需要维护。有一些很久以前做过的站点长期不整理,路径又藏得比较深,可能就比较难发现,访问量受到影响。所以,是时候制作一个集成站点,将适合公开的我制作的各个site信息整合在一起。Maocan Sites用纯HTML5打造,闪亮闪亮的,为每个站都提供截图和文字介绍。顺便说一下网站的截图来自Wordpress.com的mshots功能,可提供截图更新,这样图片维护就节约不少时间,不用隔一段时间手动更新截图。就介绍到这里,Maocan Sites已加入首页链接,欢迎来访。

前往访问Maocan Sites

Photo Gallery重新整合上线

2013 年 03 月 04 日 上午 2:47

Photo Gallery

最近一段时间网站都有在进步,外观上未作大调整,主要是功能上的优化完善,提升整站的响应速度。由于网站托管在美国,本来就有一定的速度限制,如果不精简冗余的code,执行起来会更耗时。因此重写了主站和各个子站的模板,全部从XHTML1.0标准升到HTML5,而且通过W3C的认证,这个过程也学习了很多新知识。HTML严格来讲不是编程语言,仅是一种标记语言,构建网站的大框架,其中的具体功能则需要像PHP这样的面向对象网络编程,与数据库进行交互得以实现。现在主流的HTML4还是1999年互联网泡沫时代前的技术,十多年过去网络技术迅猛发展,新的技术标准也随之应运而生,就是正在开发中的HTML5。HTML5增加了更多标签,力求做到功能强大又易于操作,少依赖第三方插件如Adobe Flash,可以看看一个地址定位的示例,纯HTML5打造,具体来讲有以下几个开发标准:

  • New features should be based on HTML, CSS, DOM, and JavaScript
  • Reduce the need for external plugins (like Flash)
  • Better error handling
  • More markup to replace scripting
  • HTML5 should be device independent
  • The development process should be visible to the public

既然HTML5还未官方正式发布,不是所有浏览器都能支持这个新技术的全部特性,当前支持最好的是Chrome,因为谷歌是新标准核心开发成员之一。我曾经在博客里讲过,Chrome是当前性能最优的浏览器,IE虽暂时凭借装机量依然市场占有第一,但已逐步被Chrome和Firefox取代,至于什么所谓的360浏览器之类,都是在别人的核心上面加点皮毛。采用新技术如jquery编写的网站,在Chrome中有着极好的表现。所以大部分的Web Developers很鼓励访问者使用Chrome,对IE的不足勉强做个补丁支持一下。针对移动用户,则大多是Safari使用者,而且限于屏幕尺寸,网站需要重新设计。我们以前提到过,对于Wordpress博客可以用WP-Touch这类的插件判断来访者是否使用移动设备,切换为另一套适合移动设备的template,用不同的设备查看Bamboo Talk!就可以理解区别在哪里以及为什么要做这些改进。至于网站如何优化提速,包括像script应该放在文档的什么位置这样既简单却无统一答案的问题,Google开始着力于解决这些疑问,具体的内容本文不多述,请查看Web Performance Best Practices

好了,要说重点了~就是原来的Photo Gallery和喵星看图整合了,成为全新的Photo Gallery,作为我的网络相册展示。对于网络相册的管理实行站内组合站外(包括百度相册Picasa,分别对应国内国外访问者),站外相册更全面,站内相册主要是精选,而且图片也不托管在本地,而是采用外链,这点谷歌的Picasa做得非常好。虽然Picasa网站在国内不能访问,但是图像外链却是可用的,正好可以用来托管图库。主题基于iphoto重新设计,javascript进行了打包,结合多说社会化评论模块,整体界面精简同时功能齐全、强大。主页采取Pinterest布局,建议还是用Chrome访问会比较流畅。不在于访问量多少,就是帮我管理好值得收藏的照片。不追求站点的高排名,高Page Rank,只要这个开发和使用的过程是让我感到愉悦的,我想就可以了。

前往访问新版Photo Gallery

Secret ver 1.0

2011 年 03 月 03 日 下午 11:01

这篇日志的主要内容请见这个链接http://italk.maocan.com/2009/11/secret/,Secret ver 1.0是我一年多前做的一个解密游戏网站,换域名后逐渐将这个版块又加了进来。暂时还没什么更新,这不过是一次复制,让以前在我的网站接触过这个游戏的朋友还能再看到。最初做这个游戏完全是一种兴趣,编设了15个level,开始发到学校的小百合BBS,当晚的访问量就上万,居然还挺受欢迎,得到大家的认可也挺高兴的。如果你到本站想找些有意思的内容不妨看一看,一些关卡或许能引起你的共鸣~点击访问~

全文阅读 »

jQuery&CSS实现变换彩色文本效果

2011 年 01 月 31 日 下午 9:16

这篇文章介绍的是设计Photo Gallery网站标志时使用的一个技巧,利用jQuery和CSS实现Logo图片里的文字随时间变化颜色,如夜晚霓虹灯一般,具体样式请进入art.maocan.com首页查看。这个应用适用于设计炫彩标题,对于熟悉jQuery、CSS和Photoshop的童鞋可以很快上手,如果配色得当效果相当不错。

全文阅读 »

Photo Gallery正式上线了…

2011 年 01 月 30 日 下午 11:21

我的个人相册收藏站点Photo Gallery今天正式上线了,这里作为精选照片展示平台,目前包括美术设计生活收藏三个分类,主要以看图为主,辅以简约的文字介绍。整个站点在设计时重点关注图片观赏的体验,主要是面向Chrome用户,暂不提供IE6支持(IE6用户进入内页网页布局会出现浮动问题,特别推荐使用极速的Chrome浏览器),如有好的改进建议欢迎给我留言,访问Photo Gallery请点击进入art.maocan.com

全文阅读 »

页数:1/2  «上一页 1 2 下一页»
-->
Bamboo Talk! is Mr. Maocan's private blog. Hope you enjoy your every visit here!