Group items tagged

“If you’re designing a website and not thinking about the user experience on mobile and tablets, you’re going to disappoint a lot of users,” he warns. Designer Tom Muller thinks big brands getting on board will lead to agencies “increasingly using responsive design as a major selling point, persuading clients to future-proof digital marketing communications”. When doing so, Clearleft founder Andy Budd believes we’ll see an end to retrofitting RWD into existing products: “Instead, RWD will be a key element for a company’s mobile strategy, baked in from the start.” Because of this, Budd predicts standalone mobile-optimised sites and native apps will go into decline: “This will reduce the number of mobile apps that are website clones, and force companies to design unique mobile experiences targeted towards specific customers and behaviours.”

During 2012, the average site size crept over a megabyte, which designer/developer Mat Marquis describes as “pretty gross”, but he reckons there’s a trend towards “leaner, faster, more efficient websites” – and hopes it sticks. He adds: “Loosing a gigantic website onto the web isn’t much different from building a site that requires browser ‘X’: it’s putting the onus on users, for our own sakes.”

Designer and writer Stephanie Rieger reckons that although people now know “web design isn’t print,” they’ve “forgotten it’s actually software, and performance is therefore a critical UX factor”.

According to IDC, mobile web browsing will soon eclipse desktop browsing in the U.S. and worldwide. This consumption of mobile content isn’t just happening on the go; 93% of people are now using their mobile devices to browse the Web from their homes, according to a study from Google.

The main development methodology behind responsive design is the use of media query functionality in CSS3. Media queries target not only certain device types (e.g., Android vs. iPhone), but actually inspect the physical characteristics of the device that renders the page. For example, the code below “asks” the device if its max horizontal resolution is equal to 480px: <link rel="stylesheet" type="text/css", media="screen and (max-device-width: 480px)", href="http://uxmag.com/iphone.css" /> If it is 480px, the device will load iphone.css. If not, the link is ignored. You can also include media queries in CSS as part of an @media rule:

a responsive design approach does not involve putting all of your content in front of the reader. Responsive design is about putting the right content in users’ hands according to the context of their interaction.

I’m not saying that going down the responsive road is all peaches and cream, but the idea is that once the foundation is set, the ongoing maintenance costs decrease over time, while dedicated sites have several additional reoccurring costs.

Project planners are typically used to chunking things out into “streams”, and I’ve seen several project plans that launch a desktop version, then subsequently mobile and eventually tablet versions. That’s not really how responsive design works. The team need to address all channels up front as one “stream” influences the rest of the design. This is important even if you are making a dedicated mobile site that utilizes responsive techniques.

Many mouseover interactions are completely dysfunctional on a touch device

Instead of buying a state of the art monitor, buying a cheap monitor and several low-end devices to test your work on might be a better investment.

Hiding content and showing it on mouseover was considered to be a decent design pattern

Creating a layout is like doing a jigsaw puzzle; you have a bunch of pieces and you have to figure out how they should fit together.

designing native layouts for the web—whatever the device—we need to shed the notion that we create layouts from a canvas in. We need to flip it on its head, and create layouts from the content out.

When designing from the canvas in, the canvas dimensions are the constant on which the whole grid is anchored. Everything is sized and positioned relative to them. Designing from the content out means finding a constant in your content—be it the ideal measure of a paragraph or the dimensions of an ad unit—and building your grid out from there to fill the space available.

differences in screen size, device resolution or text rendering don’t matter in and of themselves, but only because they influence how someone will read our content.

Typography carries the literal message, and its legibility and readability impacts not just the audience’s understanding of the content but how easy it is for them to hear the brand’s personality.

Typography’s role in imparting the implied message is just as profound, and we can see its impact most clearly on mobile devices. Here, the design is often stripped back to its simplest form. Gone are the graphics, gradients and pixel-perfect details. It is the aesthetic personality of the type and the colour palette that influences our emotional response as readers and defines the experience.

“We are now looking at how we display and order content differently from screen size to screen size,” said Jeff Moriarty, Boston Globe VP of digital properties in an interview last year. “This ‘responsive content’ concept is emerging and we are starting to see in data that users want different types of content depending on their context and the device they are on. We have to now think about how content performs differently from the biggest screens to the smallest, how that content is organized and even how headlines are written from platform to platform.”

The first thing to think of when building a responsive site is simplicity.

some website builders may over-design for the desktop, making some websites fun to play with but absolutely impossible to navigate.

the usage of a single URL improves site analytics and SEO performance, and sites can easily be resized for new viewing formats.

These include longer time required to develop individual responsive pages, the need for code workarounds to account for older legacy browsers, the need for live device testing, non-compatibility with many existing e-commerce and CMS platforms, the need for a front-end rewrite, the need for a phased development approach in large enterprises, and the extra effort required to provide unique experiences for each form factor.

Some cultures are High Context. This means most communication is simply understood rather than explicitly stated. These cultures have a much higher tolerance for ambiguity and understatement. You could say that, in a High Context culture, the responsibility for understanding rests with the listener and it’s left to them to divine deeper meaning from the conversation or statements coming at them.

Low Context cultures, on the other hand, are much more explicit and often rely on directness and true feelings to communicate.

In these types of cultures, the responsibility for understanding is on the speaker to convey their ideas clearly and without ambiguity.

Digital advertisers and publishers may also want to consider using a responsive design strategy to ensure that their sites deliver consistent, high quality digital experiences across desktop and mobile channels

Addictive technology creates “internal triggers” which cue users without the need for marketing, messaging or any other external stimuli.  It becomes a user’s own intrinsic desire. Creating internal triggers comes from mastering the “desire engine” and its four components: trigger, action, variable reward, and commitment.

A company that forms strong user habits enjoys several benefits to its bottom line. For one, this type of company creates “internal triggers” in users. That is to say, users come to the site without any external prompting. Instead of relying on expensive marketing or worrying about differentiation, habit-forming companies get users to “self trigger” by attaching their services to the users’ daily routines and emotions. A cemented habit is when users subconsciously think, “I’m bored,” and instantly Facebook comes to mind. They think, “I wonder what’s going on in the world?” and before rationale thought occurs, Twitter is the answer. The first-to-mind solution wins.

A multi-screen world, with ad-wary consumers and a lack of ROI metrics, has rendered Don Draper’s big budget brainwashing useless to all but the biggest brands. Instead, startups manufacture desire by guiding users through a series of experiences designed to create habits

"There’s you, the person, and you have your full identity in yourself," he says. "But you know contextually when to wear certain things. You might wear one thing to a funeral, you might wear one thing for a Saturday night. You understand those contexts. And those never change your identity, so to speak, but they do start to communicate some kind of intent. And that’s what we’re trying to figure out right now. How do you create some kind of contextual mirror to create intent."

"Monolithic solutions are a necessity of yesterday, because of the permanence and cost of communication," Hendrix wrote in his opening remarks for the project. "Now we’re in an ephemeral and affordable age, and mass distribution at low cost is possible thanks to the digital revolution."

"The digital revolution let us make more complex identity systems, but what’s the point?," he says. "At some point, you start asking, 'why do I need 10,000 configurations of a mark? What’s it really saying to me?"

Three specifications that we’ll likely find ourselves using in the future are: “Flexbox4,” “Regions5,” “Grid Layout6.”

Magic numbers in CSS are best avoided.

We need fewer of these HTML containers and more CSS virtual container classes that we can apply to different elements as needed. In other words, instead of this… <div id="container"> <div>Content here</div> <div>Content here</div> <div>Content here</div> </div> … we need more of this: <div class="container">Content here</div> <div class="container">Content here</div> <div class="container">Content here</div>

The new laptop, which Apple unveiled last week, already has Web designers and developers trying to figure out how they're going to create sites and Web apps that look good on the new machine without leaving the rest of the Web's population behind.

One of the key advantages of these high-resolution displays is their crisp, highly readable rendering of text. That particular buck stops with the Web browsers, which are much more varied on the desktop than on mobile devices. Naturally, Safari supports retina-friendly text, but Chrome is still working on it, and other browsers will presumably follow.

For image-heavy sites, swapping out higher-resolution images can have a substantial impact on page load, which in turn affects user experience and even search engine rankings. 

The average top 1,000 web page is 1575 KB.

Page growth is a major reason why we keep finding, quarter after quarter, that pages are getting slower. And faster networks are not a cure-all for the challenges of page bloat.

According to Akamai’s most recent quarterly State of the Internet report, the global average connection speed among the top 50 internet-using countries is 3.3 Mbps — a 5.2% increase over the previous quarter. But when we’re seeing year-over-year page growth ranging from 45-50%, it’s easy to see that the gap is widening.

audience for mobile apps has hit 58 million in primetime — 8 p.m.

The IAB estimates that the U.S. mobile ad market brought in $3.4 billion in 2012. The IAB didn't break out revenues for apps vs. the mobile web, but Flurry has estimated that 80% of mobile activity occurs on apps

Kantar Media calculated that TV advertising accounted for $74 billion in ad revenues in 2012. Even if apps generated 100% of mobile ad revenues, the market would still be just 4.5% that of TV.