Posts Tagged ‘Responsive Web Design’

We are pleased to present below all posts tagged with ‘Responsive Web Design’.

Making Advertising Work In A Responsive World

Advertising has always had an uneasy relationship with the media because of ethical considerations on both sides of the printing press. On the one hand, journalists are reluctant, quite rightly, to be seen as under the thumb of an advertiser, and on the other side, advertisers don’t want to be seen to be enforcing their views on the free press.

Making Advertising Work In A Responsive World

The relationship between the media and marketeers is the greatest sham marriage of all time: convenience, rarely love. We need each other. Writers need to be paid, and people making products need to be paid too. That being said, the journalism profession has been somewhat eager to hand a lot of control of their content to advertisers for some time now.

Read more...

Device-Independent Design Strategy Looking Beyond Common Media Query Breakpoints

With all the talk about responsive Web design, designers and coders are moving even further from the fixed pixel layouts of design’s print-based history. We’re finally thinking in terms of fluid layouts and expandable, interactive content. But when you get down to it, we’re still thinking of the fluidity in terms of desktop, tablet and mobile sizes.

Looking Beyond Common Media Query Breakpoints

Chances are that your responsive websites have media query breakpoints at precisely the tablet and mobile widths, essentially creating three different versions of a website with the same code. While this is much more ideal than what we’ve all done until now, it’s not always the best way to approach things. Often, our content breakpoints (the viewport widths where content should be reformatted) are different from common device breakpoints (the viewport widths that reflect physical devices).

Read more...

Coding Q&A With Chris Coyier SVG Fallback, Vertical Rhythm, CSS Project Structure

Howdy, folks! Welcome to more Smashing Magazine CSS Q&A. It works like this: you send in questions you have about CSS, and at least once a month we’ll pick out the best questions and answer them so that everyone can benefit from the exchange.

Coding Q&A With Chris Coyier: SVG Fallback, Vertical Rhythm, CSS Project Structure

Your question could be about a very specific problem you're having, or it could even be a question about a philosophical approach. We’ll take all kinds. If you're interested in exploring more Q&A, there's a bunch more in my author archive.

Read more...

The Semantic, Responsive Navicon

Icons are scattered throughout our history as a species; early man painted pictures onto stone depicting their triumphs over their hunted prey, Egyptians had an icon-based writing system in their hieroglyphics, and in the early church the symbol of a fish represented a Christian meeting place or tomb. Icons have always served a definitive purpose throughout mankind's history on this planet: to inform and instruct.

Webdagene screenshot

Icons are still prominent today in our everyday lives, as they serve the same purpose as they always have. As the craftsmen of the Web industry, we must ensure that we use correct representations of actions to inform users of their consequences.

As the Web has evolved over the years, we have established a (fairly) standard set of icons — a trash can or a cross has come to represent deleting or removing something; an envelope has become the indicator for a message or mail. These are little visual cues to help people along their way. Some icons have established such strong associations that they can exist on their own without supporting text, meaning, they can remove language barriers to form their own universal language. We need to use the right icons to communicate the right things.

Read more...

Server-Side Device Detection: History, Benefits And How-To

Disclaimer: This article is published in the Opinion column section in which we provide active members of the community with the opportunity to share their thoughts and ideas publicly. Do you agree with the author? Please leave a comment. And if you disagree, would you like to write a rebuttal or counter piece? Leave a comment, too, and we will get back to you! Thank you.

The expansion of the Web from the PC to devices such as mobile phones, tablets and TVs demands a new approach to publishing content. Your customers are now interacting with your website on countless different devices, whether you know it or not.

Server-Side Device Detection: History, Benefits And How-To

As we progress into this new age of the Web, a brand’s Web user experience on multiple devices is an increasingly important part of its interaction with customers. A good multi-device Web experience is fast becoming the new normal.

Read more...

Developing Responsive Designs With Opera Mobile Emulator

Back in 2009, when coding version 10 of Opera Mobile, my Opera colleagues decided to tune the Opera Mobile build machine so that it would churn out builds not only for common mobile platforms, but for Windows and Linux as well. Originally intended for quality assurance and testing, these desktop builds proved also to be useful for Web development; being able to use Opera Mobile on a desktop machine took away the need to do all testing on a phone, and the mobile browser window was suddenly only an Alt/Command + Tab away from our text editor — exciting!

Two Opera Mobile instances

So, we decided to iron out the wrinkly bits, added a Mac build channel, and turned it into a publicly available developer tool, called Opera Mobile Emulator. Coming in at a fairly small size, Opera Mobile Emulator can be downloaded for free from Opera’s developer website or from the Mac App Store, and installing it is straightforward. The engine and UI are exactly the same as when you run Opera Mobile on a phone, while desktop-specific hooks, such as the profile selector, keyboard shortcuts and command-line flags, give you a bit of extra debugging power.

Read more...

Presidential Smackdown Edition Separate Mobile Website Vs. Responsive Website

The US presidential race is heading into full swing, which means we’ll soon see the candidates intensely debate the country’s hot-button issues. While the candidates are busy battling it out, the Web design world is entrenched in its own debate about how to address the mobile Web: creating separate mobile websites versus creating responsive websites.

Separate Mobile Website Vs. Responsive Website: Presidential Smackdown Edition

It just so happens that the two US presidential candidates have chosen different mobile strategies for their official websites. In the red corner is Republican candidate Mitt Romney’s dedicated mobile website, and in the blue corner is incumbent Barack Obama’s responsive website.

Read more...

Coding Q&A With Chris Coyier: Responsive Sprites And Media Query Efficiency

Howdy, folks! Welcome to more Smashing Magazine CSS Q&A. It works like this: you send in questions you have about CSS, and at least once a month we’ll pick out the best questions and answer them so that everyone can benefit from the exchange. Your question could be about a very specific problem you're having, or it could even be a question about a philosophical approach. We’ll take all kinds.

Content: A Blessing, A Bubble, A Burden

If you're interested in exploring more Q&A, there's a bunch more in my author archive.

Read more...

↑ Back to top