外包成功案例展示, 给设计世博会大楼的公司做的官网

[sdjl]

客户网站: http://teamminus.com
客户是做建筑设计的, 在五道口, 代表作有世博会的大楼等

由我们团队设计+开发, 设计费用1w, 开发费用1w, 一共2w

提供完整的后台编辑和管理功能, 所有文案和内容都可以自行修改, 比如导航中的title, 以及按钮的文案, 甚至背景图的切换速度和时间等.

整站使用单页面多个div切换的方式设计, 不刷新页面(除了换语言), 且考虑了图片的加载优化.

我们坚持网站外包是一种服务, 而不是贩卖商品, 优质的服务才会有优质的成品, 感谢你对我们团队的支持, 我们就是那个喋喋不休的~~ sparker5 :)

[for4]

可以再补充一下开发时长吗？

[sdjl]

@for4 设计上比较啰嗦, 因为要反复和客户的负责人对接, 另外客户还要和公司领导沟通, 然后再反馈给我们, 又反复修改. 因此设计上大概前前后后持续了一个半个月的时间. 当然这个时间内我们也在做其它事情.

这也是为什么设计我们要收取1w费用的原因. 如果客户自己设计, 就可以免去这部分费用.

设计完成后, 开发用了不到一个星期.

[brianlai]

@sdjl 楼主的联系方式是？

[GinoSin]

你们那个插件库貌似经常闪屏啊~~~

[sdjl]

@brianlai sdjllyh at gmail.com

@GinoSin 你说的是fx么? 哪一个fx?

[spark]

首页由于图片太大, 在单位200k小水管白屏了小一分钟啊...

那几张大图还有很大的压缩优化空间啊, 为什么不呢?

[sdjl]

@spark 嗯, 我优化一下先保证第一张图片展示出来再加载第二张大图

使用大图是客户的硬性要求

[RW667]

这种单页面真心 不想看到竖向滚动条..可是滚动条无处不在。。

另外，多切换几次后，明显切换会变得很卡 。。

[spark]

@sdjl 都不用什么工具, 直接用PS的 save for web -> 质量在75%, 就可以压掉50%的文件大小.

[sdjl]

@RW667 没有滚动条的话小白就不知道如何是好了
卡的问题, 我再测试测试, 我也感觉卡, 但不知道什么情况下会出现

@spark 只能通过改变加载顺序让体验变好, 不能压缩图片质量....

[sdjl]

感谢所有提供bug信息, 体验不好的信息的朋友

[saharabear]

看着这图片，够清晰的。

[alexrezit]

真心卡出翔了... 建议在加载完成之前加一个 loading view 盖住.

[est]

@sdjl 图片太大了。需要优化。我这里卡的不行。


原文件：1MB
http://teamminus.com/img/upload/Image/100_2000x.jpeg

优化后：201KB



可以对比看看有没有啥细节损失。

[eary]

首页图片加载方式有问题、栏目切换加载方式有问题。交互差。

[sdjl]

@est 谢谢, 你是通过什么方法压缩的?

@eary 嗯, 这个知道的, 会解决

[est]

@sdjl jpegmini.com

[emric]

@sdjl
在载入方面的却不近人意.
可以试试涛哥的cssgaga,在保证良好的压缩率同时亦能保持较低的失真率.

[mlc880926]

502??

[justfindu]

图片可以保存成渐进式~ 提高体验~

slideshow 好闪啊~

[shuaige]

@sdjl 发邮件没回。有个外包，留下你QQ，详谈~

[passluo]

这。。。。不好评价啊。。。。

呵呵后。。

[thinkif]

挺好的，没感觉到卡

不过，就是腾讯分析的按钮有点。。。

[izon90]

好静态

[bzw875]

楼主 ie8 分辨率1440*900下图片的宽被压缩了一些，感觉有些模糊.

[moxuanyuan]

我想知，你们开发后台编辑和管理功能，是不是专门为这个网站开发，还是本来就有一套现成的？

[Maninlab]

建筑设计公司都喜欢这么干。以为都是艺术家。：（

[sdjl]

@mlc880926 刚才在线调试了一下

@est 嗯, 这个不行, 因为不能要求客户自己去压缩, 我用convert压缩了

@shuaige 好的, 我看邮件回你, 最近几天比较忙, 接了一个口袋购物app的相关的外包

@bzw875 谢谢, 我刚才用convert把图片质量压缩到50%, 尺寸也改小了一些, 可能影响到了图片质量. 估计只有同时压缩图片+优化图片加载顺序

@moxuanyuan 我们有自己的基于webpy开发的代码库, 也算是一个可以重复使用的框架, 对于这个网站的后台, 只需要写一个配置文件就可以自动生成了, 配置文件大概如下:


可以在配置文件中设置数据的添加,删除,修改,图片裁剪,搜索,提示,验证,布局,排序,过滤,隐藏数据等等功能, 这些功能都是预先写好根据model文件中mysql表定义生成的, 只需要在配置中说需要什么功能, 后台就有了, 后台的大概样子是:



这是我们自己开发的python建站框架, 叫做zarkpy

[sdjl]

我们每个项目的代码都差不多, 思路差不多, 方法差不多, 部署等程序都一样.

后台一样, 只是配置不一样, 主要工作在于与客户沟通, 设计, 以及前端开发

[skyahead]

iPhone 上从欧洲访问，2分钟左右才能load完首页。然后图片切换的时候好像重新load，结果就是不停的load，load，load。。。。建议对手机优化？

mac上访问很卡（图片切换的时候）。

[sdjl]

@skyahead 我们不打算对手机优化, 因为客户不买这个单 :)

背景图片切换的时候么? 谢谢提醒

[skyahead]

背景图片切换再macbook上有明显的停顿感。

[sdjl]

@skyahead 我缩短了背景图片切换的速度, 再看一下是不是有好转?

[skyahead]

感觉不明显。我觉得让图片渐进效果会很好。google了一个，下面两个plugin感觉不错。。。

http://tympanus.net/Tutorials/CSS3FullscreenSlideshow/

http://www.htmldrive.net/items/demo/914/Nice-jquery-full-background-image-slider

[sdjl]

其实, 这里有一定的难度, 首先每张背景图片的尺寸是不一样的, 设计上要求每张图片都能竟可能的在不同尺寸上满屏显示, 也就是不同的设备和浏览器尺寸都要满屏显示, 同时还不能让图片变形

且此功能要兼容ie6, 因此使用了我们的bgimage的fx, 大概代码如下

<div>
<img src='a.jpg' fx='bgimage'/>
<img src='b.jpg' fx='bgimage'/>
<img src='b.jpg' fx='bgimage'/>
</div>

另外, 这里要求背景图片实现hover按钮时切换, 因此又使用了一个fx: cycle

代码大概变成这样:
<div fx="cycle">
<img src='a.jpg' fx='bgimage'/>
<img src='b.jpg' fx='bgimage'/>
<img src='b.jpg' fx='bgimage'/>
</div>

这是一个成本问题, 如果以上两个功能自己重写, 工作量就会很大, 特别是要兼容ie6的话


大家反应的切换时卡和闪的问题, 暂时没有找到确切的原因, 猜测可能主要是因为网速较慢, 导致图片还没有加载好就开始切换导致看到了空白

我们先通过下面几个小办法优化一下:


1 添加默认的背景平铺, 弱化"闪"的感觉
2 给第一张图片添加先隐藏, load完成后再fadeIn
3 适当延长第一次图片切换的时间, 给出更多时间来预加载图片
4 延迟"项目"图片的加载
5 适当压缩图片质量, 减少图片文件

[sdjl]

@skyahead
@eary
@GinoSin
@spark

之前有一个bgimage fx的功能, 就是在改变浏览器尺寸的时候调整背景图的显示, 保持完整图片显示, 这个功能估计比较占用cpu资源, 我已经去掉了, 请帮忙看看是不是有好转?

[jjplay]

@sdjl 看着不错,一开始以为 都是纯AJAX的额,仔细一看都是页面里的,我两年前做过一个 http://www.egrid2000.com/,根据不同的localtion.hash ajax切换,我看着也以为你是呢,呵呵

[sdjl]

@jjplay 额 , 没有必要做ajax, 文字本身没有多少, 主要是图片比较占用带宽, ajax就增加复杂度了, 做好图片仅需要的时候显示就可以了