Tag Archives: CSS

Responsive Layouts: How To Maintain Hierarchy Through Content Choreography

Responsive LayoutsHow To Maintain Hierarchy Through Content Choreography

One of the issues we need to be concerned with in responsive design is how to maintain hierarchy as elements on the screen are resized and reflowed. Trent Walton first called attention to the issue with his post “Content Choreography,” which showed how visual hierarchy gets lost when columns are dropped below one another.

While techniques exist to help with part of the problem, the solution also requires conscious thought in how you structure blocks of content in your HTML. You need to think about how you’ll want to rearrange blocks of

Article source: http://feedproxy.google.com/~r/SmashingMagazine/~3/_zOCmUIGq8E/

Improve Mobile Support With Server-Side-Enhanced Responsive Design

Case StudyImprove Mobile Support With Server-Side-Enhanced Responsive Design

In many ways, responsive Web design (RWD) deserves a big share of the honor for making the Web more usable on non-desktop devices. This trend of letting the browser determine more about how a Web page should be displayed makes sense, especially now that mobile browsers are slightly more trustworthy than in the old days of mobile.

However, a responsive website is not automatically a mobile-friendly website. Amid the buzz of trendy Web development techniques, the good ol’ Web server doesn’t get the spotlight it deserves. Modern Web development should be about finding

Article source: http://feedproxy.google.com/~r/SmashingMagazine/~3/2PP82YdNi-E/

Responsively Retrofitting An Existing Site With RWD Retrofit

OptimizationResponsively Retrofitting An Existing Site With RWD Retrofit

Since the introduction of the iPhone in 2007, touchscreen mobile devices have exploded in popularity. They have introduced new problems, new solutions, new interactions, new ways of thinking and, of course, new costs to our clients.

The most important question on everyone’s mind — clients and developers alike — is, “How can we provide a great Web experience to our users on mobile?”

It All Started With iPhone

The mobile Web was rarely considered before the iPhone (mostly because mobile browsers were so bad). But after the phone’s release, clients jumped on the bandwagon and were clamouring for “mobile-friendly”

Article source: http://feedproxy.google.com/~r/SmashingMagazine/~3/h8m2gb6UWxw/

Freebie: Brands Icons And Color Style Guides (100 Icons, PNG, CSS)

FreebieBrands Icons And Color Style Guides (100 Icons, PNG, CSS)

Another weekend, and yet another freebie. Today, we are happy to feature a useful icon set, the Simple Icons by Dan Leech. Dan’s set contains 100 PNG icons for popular websites, apps and organisations, all in eleven sizes (16, 24, 32, 48, 64, 128, 256, 512, 1024, 2048 and 4096 pixels squared).

The white icons have transparent backgrounds, which makes them ridiculously simple to style with CSS. As a bonus, simpleicons.org maintains a list of official background colour values that can be used in conjunction with the icons, thoroughly researched and

Article source: http://feedproxy.google.com/~r/SmashingMagazine/~3/et0j7Gvg0OE/

Adapting To The Ink: Tips And Tricks For Print Style Sheets

Adapting To The InkTips And Tricks For Print Style Sheets

Print continues to be treated somewhat cursorily by most Web designers, who tend to be obsessed with pixels rather than printers. In the real world, a significant portion of people rely on pages printed from websites for reference: there’s still something about having a physical sheet of paper in one’s hands, even in this age of digital saturation.

Web developers can take several steps to bridge the gap between the worlds of printers and LCD screens: