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”.

Defining Skeuomorphism This obscure word describes the way designs often borrow a particular feature from the past, even when the functional need for it is gone. Examples include pre-recorded shutter noises on smartphones to remind us of film cameras, or calendar apps that feature torn paper and metal rings. Or, as Wikipedia tells us [1]: A skeuomorph is a physical ornament or design on an object copied from a form of the object when made from another material or by other techniques.

the digital world has seen skeuomorphism popularized in the past couple years mainly thanks to the recent iOS-inspired trend of rich textures and life-like controls.

By opposition, the other side of the coin would be the newly popular "flat style", of which Microsoft's Metro UI is probably the main example. Flat Style embraces visual minimalism, eschewing textures and lighting effects for simple shapes and flat colors.

The parallax style has excited web developers and inspired any number of hype lists. It's also triggered a backlash among critics who feel its bells-and-whistles approach detracts from actual content. Pitchfork creative director Michael Renaud recently told the Atlantic Wire he expects people to "tire" of the trend within a year or two.

the parallax site was only superior in one sense--fun. None of the other survey measures indicated a significant difference in user experience between the two sites. Parallax didn't even edge the standard site in questions about visual appeal (although participants did think it looked slightly more "professional"). Frederick also discovered one critical disadvantage of parallax: test participants who suffered from motion sickness found the style disorienting.

Sobering as this first careful study of parallax might be to web designers, Frederick still believes it's a fad with a future. He cautions developers to think more carefully about the context in which parallax is applied. Text-heavy sites that employ parallax scrolling seem more likely to disorient users, he says. Sites that emphasize visual elements--images, infographics, or data visualizations, in particular--are probably a better fit for the style.

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

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.

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.

Among tablet owners, at least, reading on the mobile Web is preferable to using native apps, according to a recent survey from the Online Publishers Association. 

Forty-one percent of tablet-bound readers prefer reading on the Web, compared to the 30% who would rather launch a standalone app from a specific publisher. Aggregated news-reading apps like Flipboard and Zite rated surprisingly low on the list. 

Last month, Jason Pontin, editor of MIT Technology Review, wrote a widely read takedown of native apps, citing Apple's steep revenue share and the technical and design challenges associated with producing such apps.  "But the real problem with apps was more profound," Pontin wrote. "When people read news and features on electronic media, they expect stories to possess the linky-ness of the Web, but stories in apps didn’t really link."

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. 

In 2014, the mobile Web will die. That’s right, that bastardized version of the normal Web will crawl into a shallow grave and leave us all in peace. No more websites crippled with horrible “mobile.yourawfulwebsite.com” URLs. No more reading janky websites that display way too much fine print or omit crucial features when viewed on your smartphone or tablet. 

The mobile Web will die because the companies that make the engines it ran upon are killing their mobile browsers and replacing them with fully functional versions that run on any device. In 2014, these browsers will be updated to put the final nail in its coffin. In turn, developers will continue to build websites that can work across any screen size. Responsive design (what we do at ReadWrite to make the site look pretty everywhere) will continue to grow in 2014 as people realize that their old websites are losing them a lot of traffic from mobile devices.

Location-based consumer apps didn't let me down; as predicted, they remained stagnant this year. Foursquare and its kindred just are not hot anymore, even if Foursquare did just raise a funding round this week.

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.

Glanceable design is really quite a simple idea. People are increasingly overwhelmed by the amount of information they need to process on a daily basis. So why not create simple “glanceable” interfaces that let them see their most important data at a glance, with little or no interaction required.

glanceable displays should “convey minimum and specific information in a way that is designed to exploit the ‘preattentive’ processing ability of the human brain.”

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.

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.

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.

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.

For Google to eliminate underlines as well is simply the final nail in the coffin for this old web standard. But that step is necessary in an era when we navigate the web by other means than a mouse.

the pesky underlines still pop up if you mouse over them.)