我刚刚在网站上发布了一个新的主导航。原因有两个。
第一,我需要在网站上添加几个新部分。去看看吧!我添加了一个画廊部分,可以在其中发布我喜欢的设计作品的屏幕截图。我一直使用 LittleSnapper 来捕捉这些内容,所以我想也在线上发布一下。还有一个目前正在开发中的年鉴部分,我希望在那里提供所有 CSS 属性和选择器的实用文档。我还将“优惠”部分移到了主导航栏中。我甚至不会在这里链接到它们,所以您可以访问网站并自己尝试一下导航。
第二,我需要为网站的新主要赞助商腾出空间:Treehouse。Treehouse 是 Carsonified 重塑品牌的 Think Vitamin 会员资格。但这不仅仅是品牌重塑,而是一个全新的应用程序。只需支付月费,即可访问大量网页设计和开发培训视频。然后,通过完成关于这些材料的测验来运用这些培训。如果通过,您将获得徽章。通过您的公开资料,这些徽章可以作为您掌握相关知识的社会证明。您还可以遵循学习路径,这些路径将引导您从头到尾创建 Web 应用程序。我很高兴能有 Treehouse 作为赞助商。我绝对推荐它。
保持响应式
让新设计适应网站的响应性是一个有趣的挑战。自己尝试一下,看看它的效果。以下是四种不同状态的屏幕截图
Treehouse 广告也具有响应性,并会重新调整自身以适应可用空间,并且始终可见。
看起来棒极了!
关键是要让用户在网站的类别和子类别之间进行过多导航,这种类型的菜单仅适用于信息类网站或包含许多类别信息的博客。
看起来很棒!而且 Treehouse 是一个非常酷的平台;)
在你发布这篇文章之前,我早就注意到了新的导航和赞助商。我在这里坐了 20 分钟分析你的 CSS 查询,因为我正在尝试自己开始使用响应式网页设计。我很高兴找到你的网站。你的视频和帖子极大地提高了我的设计技能和知识。继续努力,Chris!
新的导航看起来很棒。
问题是,你使用 WordPress 作为你的网站……你的导航是如何在后端编码的,或者你使用的是自定义菜单?
我赞同那个问题。
³
教程会很棒。
在移动 Safari 上看起来很棒,但在 Opera mini 上头部/导航区域出现故障,而且斗鸡眼生物仍然是绿色的。
附言
那是 iPhone 上的移动 Safari 和 Opera mini。我没有 iPad,所以我无法检查该设备。
太棒了!我目前正在一个项目中做同样的事情,所以很高兴在网络上看到与网站响应式元素相关的帖子,而不是仅仅是整个网站的演示。
继续努力——一如既往的出色工作!
David
我看到了设计的未来
你很棒
在 iOS 上看不到 Treehouse 广告,所以一定是 Flash,对吧?在这种情况下,它应该占据的空间被浪费了。你可能告诉他们这件事。
我不知道,伙计。我看到的是:http://cl.ly/C7XC
哦,等等,是那个 iframe 吗?http://imgur.com/0z787
看起来很棒,Chris! :)
完全喜欢新的 TeamTreeHouse!我在两天内解锁了近 30 个徽章,并正在努力学习 iOS 开发。课程变化很棒!
看起来真的很棒。你设计移动导航的方式让我重新设计了我自己的一个项目:P
顺便说一句,赞助商很棒。
我现在沉迷于缩小和放大我的浏览器,就像一个病态而扭曲的怪人。看看你对我做了什么,Chris,我希望你为自己感到高兴!
说真的,干得好,伙计!
我是不是眼花了?或者当浏览器缩放超过 1200 像素时,黄色的青蛙是否会短暂地看起来很害怕,然后被绿色的青蛙替换掉?
哈哈,我喜欢青蛙变成绿色的样子。
好,喜欢它!
资源也需要响应式,而不仅仅是代码。你在大多数页面上占用相同的带宽,而实际上只需要更少的带宽就足够了。
仔细想想,没有理由不围绕移动使用情况来改变网站,而不是简化大型网站。您可以通过根据视口显示和隐藏一些标签来轻松地做到这一点,不是吗?
移动设备仅占 css-tricks 所有访问者的 1.7%。这是否值得“围绕移动使用情况来改变网站,而不是简化大型网站”?我认为不是……但这只是我的两分钱。
我在 teamtreehouse 网站上购买了会员资格,感谢你的推荐。我从基础开始,以确保我的知识没有漏洞。老实说,我认为测试不够难,感觉我过得太容易了。不过,挑战非常棒。
嘿,Chris!网站的绝佳补充,喜欢新的导航栏。
我刚刚在 Kindle Touch(不是 Kindle Fire)的实验性浏览器上查看了你的网站。它完美地转换,并且对于黑白电子墨水显示屏来说看起来很棒。访问你网站的人中,使用该浏览器的人并不多,我想让你知道。
喜欢新的导航,颜色与网站的中性主题非常搭配。:D
还有那只青蛙也很完美。又酷又令人毛骨悚然,从角落里盯着你看。:0
新的导航很棒。#响应式网页设计 #胜利
@chris… 我觉得它坏了。 CSSTricks 坏了 是吗?不应该这样显示吧?(IE9 – 宽屏显示器 – Win 7 – 2011年11月26日晚上7:08)
很棒的重新设计(再次),Chris!保持改进并继续提供好的内容!
看起来真的很棒,我认为布局现在流畅多了。我喜欢在刷新主页时主导航的动画效果。很棒的细节。
d.
非常专业!
新设计看起来很棒!很容易找到我想要的东西,而且我喜欢它可以根据我的屏幕进行调整,因为大型屏幕分辨率通常会出现网站只占据屏幕一小部分,其余部分是未使用的空间的问题。
而且第一次听说 Treehouse,但它看起来很有希望。
喜欢它!
看起来很棒……
我希望你为 Treehouse 的广告赚了很多钱!
我认识你的网站还不到一周,你已经重新设计了……:}P 你的 Lynda.com 教程是一项很棒的作品,教会我如何制作 WordPress 网站……我们是否可以期待 TreeHouse 也能做到这一点……?以及在哪里可以获得它的免费优惠券……哈哈
我想我从未见过如此响应式的网站。
这是一个很棒的代码,干得好。你是如何处理旧浏览器支持的?JavaScript?
恭喜获得赞助!你是否考虑过将年鉴社区化/基于维基,也许在你最终批准更改上线之前?
很棒。
嘿,Chris-
新的布局做得不错。我发现自己越来越频繁地访问这里……是为了内容!是否有替代品可以弥补这种经常缺乏的属性?我相信你同意我的观点。;) 干得好!
我非常喜欢这个新的布局。额外的空白空间非常棒,响应性也非常好。看起来不错!
Chris,新的导航太棒了!我忍不住要调整浏览器窗口大小。即使我是一个忠实的读者,我认为如果我不查看源代码,我也无法弄清楚你是如何做到的。
喜欢它,Chris!!我在 Twitter 上询问,如果我们从你的网站访问 Treehouse,是否可以获得折扣。我可能会注册。干杯,看起来很棒!!!
我喜欢微笑的青蛙:D
一个让我好奇的问题:上面的响应式导航,当顺序分成两/四列时,你是如何使用媒体查询将视频菜单和论坛/视频/图库分割成块菜单的?你是剪切它还是只是调整适当宽度的计算,然后让多余的元素自行向下流动?
哦……我真的不明白.. T_T
干得好,伙计,我太喜欢了!
继续努力!鼓舞人心的东西!
你实际上是在我浏览网站的过程中更改了网站,一开始让我有点不知所措,但我立即检查了你是否实现了任何响应式设计,不出所料,你确实实现了一些我认为相当直观的东西。
看起来真的很酷。
新的导航很棒,但你不觉得文章和年鉴的图片应该互换一下吗?哈哈。
我爱上了新的导航!另外,因为你说“rejiggers”而加分,因为它让我想起了《飞出个未来》里的那个老妇人……“我的kajigger!”
导航和响应式设计的绝佳示例。谢谢!
喜欢图标设计,Chris。继续努力。
我真的很喜欢它(并且在过去几天里一直在分析它),但像@Hompimpa一样 - 我很想看到一篇关于你如何将响应式概念应用于导航栏的文章或一些信息。
我了解响应式设计的所有概念,并希望将其应用到我的项目中 - 但是我并不真正知道实际实施它的最佳方法(尽管使用了过多的定位,我并不太喜欢这样做)。
极好!喜欢它,Chris :)
超级!Chris,喜欢彩虹
超级!伙计,继续做你很棒的工作!
干得好!但在 Windows XP 的 Opera 和 Chrome 中,所选字体在渲染方面存在一些问题,请查看:http://i.imgur.com/0P5VT.png
此致
当我更改缩放级别并看到导航时,然后得到……什么是特殊的。看起来真的很棒和专业!!!我也喜欢主页导航的刷新。
非常棒的更新,Chris。这是一个响应式设计的绝佳示例。
虽然对于许多人来说,浏览源代码并弄清楚它是直截了当的,但像其他许多发表评论的人一样,我想看到一篇关于你对这种设计的技术方法以及你对所用 html/css 的评论的文章。
我渴望知道你是否一开始就考虑了这四种宽度?在你编写代码之前,你是否模拟了每种宽度的样子?在你的设计过程中,你是从宽到窄(删除元素)还是从窄到宽(添加元素)思考的?
我喜欢新的导航,新的部分也很棒。
哇,Chris,
说真的,自从 CSS Zen Garden 的鼎盛时期以来,我还没有对“可能性”如此印象深刻。向某人的高超技能学习总是好的。你的作品一直令人印象深刻,但这些新的响应式更改设定了新的标准,并为所有人提高了标准。
继续努力,感谢你继续分享你正在做的事情以及你的学习成果。
– Josh
我不确定我是否理解 Team Treehouse 上的徽章。我理解获得徽章来表示你已经完成了课程的概念,但是这些徽章是如何分配给你的,以及它们在 TTH 网站上给你带来什么虚荣的益处?你是否有包含你获得的所有徽章的个人资料,其他用户可以看到吗?他们的网站上没有说明(就我所见)。
不错的导航设计。我想知道,在响应式设计的编码方面,我们是否看到了下拉菜单系统的终结?似乎许多响应式设计都省略了此功能。对此大家有什么想法吗?
我非常喜欢它。继续努力!
我爱你的新导航……太棒了!!
我只是喜欢你的青蛙在网站大小调整时如何变形:D。
听到你被黑客攻击的消息我感到非常抱歉。这个人可能是sohtanaka.com等网站黑客的可能性并非没有道理。
另一件值得一提的事情是,这些都是与设计师相关的网络空间(嗯)
喜欢新的导航。真的很棒。
我真的很喜欢!而且它确实非常聪明,尤其是在我上班时,屏幕仍然是1024×768的屏幕。