background preloader

Responsive Web Design: What It Is and How To Use It - Smashing Magazine

Responsive Web Design: What It Is and How To Use It - Smashing Magazine
Advertisement Almost every new client these days wants a mobile version of their website. It’s practically essential after all: one design for the BlackBerry, another for the iPhone, the iPad, netbook, Kindle — and all screen resolutions must be compatible, too. In the next five years, we’ll likely need to design for a number of additional inventions. When will the madness stop? It won’t, of course. In the field of Web design and development, we’re quickly getting to the point of being unable to keep up with the endless new resolutions and devices. Responsive Web design is the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation. The Concept Of Responsive Web Design Ethan Marcotte1 wrote an introductory article about the approach, “Responsive Web Design992,” for A List Apart. Transplant this discipline onto Web design, and we have a similar yet whole new idea. Adjusting Screen Resolution

http://www.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/

Related:  User-centered designResponsiveResponsive WebHTML + CSSweb design

iQ Blog - a blog about usability, accessibility and user-centred design We’re a small country. And Ireland probably isn’t the first place that jumps to mind when you think about international creativity hubs. That’s why OFFSET, the annual creative industry festival held in Dublin’s Docklands, is all the more remarkable. It’s an event that punches above its weight on the international scene, to the point where it was recently ranked as one of the most significant milestones in modern design by Computer Arts Magazine (just beside the iPad). And over the years has attracted luminaries and legends of design, illustration and photography including Paula Scher, George Lois, Bob Gill and Oliviero Toscani. These heavy hitters speak alongside an amazing pedigree of Irish talent; this year alone featured Maser (street art), Richard Moss (photography), Brown Bag Films (animation) and Chris Judge (illustration).

35 Responsive Web Design and Development Tutorials These days, everyone is using a different device, browser and screen size when browsing the web. Whether it’s large format displays and multiple monitors, or tablets and smart phones, keeping track of all the possible sizes your website could be viewed at is almost impossible. Responsive website design can be the answer in many cases. A responsive website means quite literally that it responds properly to all devices and screen sizes. It is done by scaling down or re-organizing content on the page using some CSS and HTML trickery, in order to create the best possible user experience on your site.

Responsive Web Design The English architect Christopher Wren once quipped that his chosen field “aims for Eternity,” and there’s something appealing about that formula: Unlike the web, which often feels like aiming for next week, architecture is a discipline very much defined by its permanence. Article Continues Below A building’s foundation defines its footprint, which defines its frame, which shapes the facade. Each phase of the architectural process is more immutable, more unchanging than the last. Creative decisions quite literally shape a physical space, defining the way in which people move through its confines for decades or even centuries. Working on the web, however, is a wholly different matter.

Responsive Column Layouts Typically, to create a column layout, you would need to add the first or last classes to reset the margin space and clear the float. Today I’m going to share a very simple CSS trick to create a responsive column layout using nth-of-type pseudo class. I use this trick to code the WordPress themes at Themify. It doesn’t require any first or last class and the number of columns can be adjusted base on the viewport.

50 Useful Tools and Resources For Web Designers - Smashing Magazine Advertisement An effective, well-organized workflow is an important asset of professional web designers. The more useful and time-saving your tools are, the more time you can focus on important things, thus creating a foundation for timely good-quality results. The problem is that there are just way too many tools, services and resources out there, so it has become difficult to keep track on them and find those tiny little time-savers that will spare you headaches and save time in a long run. And this is where we come in. Back in old days, Smashing Magazine used to publish lists after lists, with plethora of links that covered different topics all somehow related to web design and development.

67 Percent of Online Shoppers Will Leave a Website Due to Slow Performance, New Harris Poll Reveals—Consumers Will Quickly Go To a Competitor When Experiencing Site Glitches August 14, 2013 67 Percent of Online Shoppers Will Leave a Website Due to Slow Performance, New Harris Poll Reveals—Consumers Will Quickly Go To a Competitor When Experiencing Site Glitches Riverbed Technology, an application performance company, recently announced the results of one of the most extensive surveys to date on website performance and mobile shopping. According to the Riverbed-sponsored Harris Poll, once online, shoppers consult three websites on average before making a purchase and poor website performance causes the shopper to go to a competitor.

Foreground images that scale with the layout This tutorial is slightly adapted from Chapter 9 of my book, Flexible Web Design: Creating Liquid and Elastic Layouts with CSS. You can download most of Chapter 9 for free as a PDF at the Flexible Web Design companion site, as well as download the HTML, CSS and image files that go along with this tutorial. Since the area available for an image to display within a flexible layout changes on the fly, your images may need to as well.

Responsive & Adaptive Web Design If you work in or with the web and make even a modicum of effort to remain buzzword compliant, you're probably uber-familiar with the term "responsive web design." Perhaps you've also heard of "adaptive web design" and "progressive enhancement"? If you're like me, you may have found yourself wondering what exactly these words mean, what the differences are, and why everyone seems so giddy to use them in a sentence. Humble Beginnings Let's start by acknowledging that the web, by its very nature, began as a rather "responsive" thing. Menus Menus are vertical by default. Minimal default styling and low-specificity selectors make them easy to customize. By default, menu items take up 100% of the width of their container, so you may want to limit the menu width or set the menu to display:inline-block. To create a horizontal menu, add the pure-menu-horizontal class name.

A Collection of Mini Icon Sets Icons can add a lot of meaning to a website or web app design. Used appropriately, they can make it faster for your visitors or users to complete the tasks they need to complete. But not every website design has space for normal, full-size icons (often 32×32 to 48×48 or sometimes even larger). That’s where mini icons can come in handy. With the smallest versions of these icons sometimes coming in as tiny as 8×8 pixels and the largest generally being 16×16 pixels (though sometimes they’re slightly larger than that), they can fit into virtually any design. And there’s a huge variety out there that can fit with almost any aesthetic style.

Usability articles and resources Browse by topic Browse by category Latest article 5 reasons why your first user research activity should be a usability test 4 April, 2016 - A usability test is the wrong research method when you want to discover if there's a real user need for your product; when you want to understand the environment where your system is used; and when you want to find out how people use your product in their daily lives. So why do I almost always recommend a usability test as a team's first user research activity?

The orientation media query Page last changed today Right now Jason Grigsby’s excellent summary of the orientation media query is making the round of blogs and tweets, and that’s well deserved. Media queries will become extremely important in the near future, when we have to build websites that work on any device resolution from 300px to 1280px or more. Still, there’s one tiny nitpick I’d like to make, so that you fully understand when to use orientation and when to use device-width. 用 jQuery Preload 預先載入圖片 一個幫助你預先載入圖片的 jQuery 插件 說明 做網站時常常會需要預先載入圖片來帶給使用者更好的體驗, 像是滑鼠滑過去改變背景圖, slideshow 改變圖片等等. 預先載入圖片可以避免滑鼠滑過時背景圖消失了幾秒才出現, 或是使用 slideshow 等待下一張圖切換過久的問題.

Related:  HTML5 & CSS3 StudiesUI DesignResponsive Web DesignRESPONSIVE DESIGNTutorials RWDDesign interface web - projet PCUCResponsive designdesign & trendsResponsive DesignResponsive WebdesignUXreferences