background preloader

Showcase of Outstanding Responsive Web Designs

Showcase of Outstanding Responsive Web Designs
This showcase rounds up a collection of the most inspiring and outstanding examples of responsive web design. These websites not only look great at full scale monitor resolution, but are designed to gracefully scale according to the user’s screen size. Resize you browser, view the site on a smartphone, tablet or netbook and you’ll see the same design in a range of well presented formats. Websites are no longer viewed only on a computer monitor. Smartphones, tablets and netbooks throw a range of resolutions and different screen sizes into the mix for designers to now worry about. The idea of catering for various resolutions isn’t anything new. Ready for some examples? Alsacréations Sasquatch Festival Earth Hour Cognition Tileables Philip Meissner Interim Ribot Visua Design Laufbild Werkstatt Sweet Hat Club iamjamoy Andrew Revitt Stijlroyal Sleepstreet Pelican Fly eend Converge SE iwantedrock Joni Korpi Jason Weaver Cohenspire Think Vitamin CalebAcuity 3200 Tigres Marco Barbosa Jeremy Madrid Lapse Ryan Merrill Related:  Webdesign inspirationssites

Inspiration: Fluid & Responsive Design Responsive design all started with this article by Ethan Marcotte. Some people see it as a trend. But it is more than just a trend. It is a new design solution — it helps to resolve the design problems associated with the different resolutions and devices (desktop, laptop, tablet, and mobile). Adaptive Design The following sites are examples of adaptive design. iA Information Architects is one of my favorite minimal sites. Head London Although the Head London site is not fluid, but it did a pretty good job on the responsive layouts. Food Sense Pay attention to see how the Food Sense site responds. Fork CMS Go to the Fork CMS site, resize your browser window. London and Partners Design wise, I'm not a big fan of this site, London and Partners. Fluid & Responsive Now let's take a look at the fluid and responsive sites. Bitfoundry What caught my attention with Bitfoundry is the intro text. Ethan Marcotte Paul Robert Lloyd 10K Apart Forefathers Group Colbow Design CSS Tricks Electric Pulp Further Reading

帶頁碼的翻頁體驗與設計比較 - wowbox blog (網頁設計知識庫) [轉] 別看翻頁就占那麼點兒地方,它體現的是市場的策略、程序的算法和交互設計。我選擇了 Amazon、Google、Flickr、新浪和淘寶這五個網站,體驗他們的翻頁設計。這幾個站點應該還算有代表性,Amazon 是國外購物網站,Google 是搜索引擎,Flickr 是 Web 2.0 和 Yahoo 的代表,新浪是中國門戶,淘寶是國內購物站點(同時還擁有優秀的設計團隊)。 Amazon 商品列表頁的翻頁 是五個網站中唯一一個區分訪問過、沒訪問過的鏈接的顏色; 不需要「上一頁」、「下一頁」的時候就不顯示; 第一頁的鏈接永遠存在; 告知用戶列表總數量和當前顯示的數量(Amazon有些頁面將數量顯示在列表頂部); 不提供所有的頁,上圖中 400 頁是極限,400 頁之後的內容可以通過分類選擇來縮小範圍(同時給出提示)。 Google 搜索結果的翻頁 富有創意的設計; 不需要「上一頁」、「下一頁」的時候就不顯示; 「上一頁」「下一頁」的鏈接區域很大,容易點; 不提供所有的頁,上圖中 100 頁是極限,100 頁之後的內容或許可以更換關鍵詞重新搜索,但是沒有提示。 Flickr 照片列表的翻頁 「上一頁」「下一頁」永遠顯示,但不同情況顯示不同樣式; 按了「上一頁」或「下一頁」之後則邊框加粗(成為重點),引導你繼續往下點; 告知用戶列表的總數量; 數量少得情況下,提供了「最後一頁」的鏈接(圖上沒有); 可以訪問到所有的頁,可惜如上圖所示超過一定的頁碼,顯示上有問題(IE 和 FF 都這樣)。 新浪文章留言部分的翻頁 新浪評論部分的翻頁,Ajax 可以拖動翻頁(顯擺用的); 永遠提供「第一頁」「最後一頁」「上一頁」「下一頁」的鏈接,但是樣式基本一致沒有差別; 告知用戶列表的總數量; 提供批量翻頁(「上 10 頁」)。 新浪博客的翻頁 給出了「最後一頁」的鏈接,直接顯示為「第 n 頁」,如上圖中的「第 7 頁」; 在單個博客頁面上的翻頁,以「>>」作為下一頁,而不是常見的「>」; 提供了批量翻頁(「上 5 頁」)。 淘寶商品列表的翻頁 永遠顯示「上一頁」「下一頁」,並且狀態和形狀有區分;上一頁使用率較低,所以設計的較小; 永遠提供「第一頁」「最後一頁」的鏈接; 提供頁面的跳轉,但是默認值為當前頁; 在列表的頂部右側提供了一個簡化的翻頁,並且與底部的翻頁設計一致。

Media Queries Hirondelle USA Pack Japan news Muumilaakso nanoc The University of Vermont Erik Ford Designmodo Incredible Types A List Apart Modal Windows Creating a popup window is reasonably easy if you just want another browser window of a specified size and you don't care if your visitors swap back and forward between the various browser windows. Where it becomes difficult (if not impossible) is where you want the new window to stay in front of the original window and not allow your visitor to interact with the original window until the new window has closed. We call a window that insists on retaining the focus like this a modal window. The difficulty is that JavaScript does not have a standard way of creating a modal popup window the way it has a standard way to create an ordinary (modeless) window by using window.open(). A number of browsers (for example Netscape 4 or any version of Opera up to and including version 9) do not allow you to make a popup window modal at all. There are two groups of browsers that do allow you to create modal windows and each uses a different method to do so.

30 of the web's coolest 404 pages If you're starting a blog or website, don't forget the all-important 404 page – a standard response code in HTTP telling the user, in effect, that they've clicked on a broken link. It's traditionally been an immense source of frustration. But in recent years, creatives have taken up the challenge of designing bespoke 404 pages that use humour, great UX or beautiful design to at least sweeten the pill of finding out that you're in the wrong place. Done really well, a 404 page can become a mini-ambassador for the website itself. 01. Cloud Sigma is a cloud server and cloud hosting service operating in the US, Europe and Asia-Pacific region. 02. Another website to use humour on its 404 error page is Atlanta-based data strategy consulting firm BluePath. 03. Australian national newspaper The Australian, owned by Rupert Murdoch's News Corp Australia, has just redesigned its 404 error page. 04. It's not perfect. 05. Even the world's largest index of useless websites can have an off day. 06. 07.

Web Fonts OpenType Control Enable fine typography with kerning and letter spacing controls. Design with ligatures, alternate characters, fractions and other advanced typographic features. Dynamic Subsetting East Asian languages use thousands of characters making the fonts that support these languages very large in size. CSS Sucker A helpful utility for users of blogs, templates and those not hand-coding their sites, the CSS Sucker identifies CSS selectors used on your site, allowing you to easily apply Web fonts without diving too deeply into the code.

The Responsinator Responsinator · Make your own · About · Login iPhone 3+4 portrait · width: 320px We're hosted on Linode.com - signup, they're great. Remove these ads - make your own customised Responsinator. iPhone 3+4 landscape · width: 480px iPhone 5 portrait · width: 320px iPhone 5 landscape · width: 568px Crappy Android portrait · width: 240px Crappy Android landscape · width: 320px Android (Nexus 4) portrait · width: 384px Android (Nexus 4) landscape · width: 600px iPad portrait · width: 768px iPad landscape · width: 1024px Responsinator's Kindle Kindle portrait · width: 600px Kindle landscape · width: 1024px Make your own ResponsinatorBuy us a beer

Code Snippets

Related: