recentpopularlog in

robertogreco : mobilefirst   8

The Road To Resilient Web Design – Smashing Magazine
"In this context, Mobile First is less about mobile devices per se, and instead focuses on prioritising content and tasks regardless of the device. It discourages assumptions. In the past, web designers had fallen foul of unfounded assumptions about desktop devices. Now it was equally important to avoid making assumptions about mobile devices.

Web designers could no longer make assumptions about screen sizes, bandwidth, or browser capabilities. They were left with the one aspect of the website that was genuinely under their control: the content.

Echoing A Dao Of Web Design, designer Mark Boulton put this new approach into a historical context:
Embrace the fluidity of the web. Design layouts and systems that can cope to whatever environment they may find themselves in. But the only way we can do any of this is to shed ways of thinking that have been shackles around our necks. They’re holding us back.
Start designing from the content out, rather than the canvas in.

This content‐out way of thinking is fundamentally different to the canvas‐in approach that dates all the way back to the Book of Kells. It asks web designers to give up the illusion of control and create a materially‐honest discipline for the World Wide Web.

Relinquishing control does not mean relinquishing quality. Quite the opposite. In acknowledging the many unknowns involved in designing for the web, designers can craft in a resilient flexible way that is true to the medium.

Texan web designer Trent Walton was initially wary of responsive design, but soon realised that it was a more honest, authentic approach than creating fixed‐width Photoshop mock‐ups:
My love for responsive centers around the idea that my website will meet you wherever you are — from mobile to full‐blown desktop and anywhere in between.

For years, web design was dictated by the designer. The user had no choice but to accommodate the site’s demand for a screen of a certain size or a network connection of a certain speed. Now, web design can be a conversation between the designer and the user. Now, web design can reflect the underlying principles of the web itself.
On the twentieth anniversary of the World Wide Web, Tim Berners‐Lee wrote an article for Scientific American in which he reiterated those underlying principles:
The primary design principle underlying the Web’s usefulness and growth is universality. The Web should be usable by people with disabilities. It must work with any form of information, be it a document or a point of data, and information of any quality — from a silly tweet to a scholarly paper. And it should be accessible from any kind of hardware that can connect to the Internet: stationary or mobile, small screen or large.
"
jeremykeith  webdev  mobilefirst  webdesign  design  web  accessibility  mobile  2017  timberners-lee  markboulton  trentalton  ethanmarcotte 
april 2017 by robertogreco
Ghost in the machine: Snapchat isn’t mobile-first — it’s something else entirely — Free Code Camp
"Snapchat is not mobile-first, and it’s not really an app anymore. Nor is it a meta-app platform at this point like Facebook Messenger is angling to become (at least not yet). Snapchat is a true creature of mobile, a living, breathing embodiment of everything that our camera-enabled, networked pocket computer can possibly offer. And in its cooption of smartphones into a true social operating system, we see the inklings of what is beyond mobile.
When I open Snapchat up to the camera, I can’t shake the feeling that the ghost is banging on the glass, trying to break out into the world."
snapchat  benbasche  2016  photography  ar  augmentedreality  design  ux  ui  media  susansontag  nathanjurgenson  cameras  feeds  mobile  mobilefirst  twitter  facebook  instagram  experience  socialmedia  smartphones  uber  authenticallymobile  evanspiegel 
july 2016 by robertogreco
Vertical video is becoming more popular, but there’s no consensus on the best way to make it » Nieman Journalism Lab
"Some outlets are turning their cameras sideways. Others are cropping horizontally shot video to fit a vertical screen."



"Hiking through the hills above Otta, Norway, a town of 1,700 about a four-hour drive north of Oslo, a team from the Norwegian public broadcaster NRK realized it would have to take a new approach to filming the vistas for the interactive documentary it was creating.

As part of a company-wide effort to improve mobile strategy, the documentary — which focused on how Otta was adapting to a refugee center that opened in a shuttered hotel — was filmed vertically, using a camera rotated 90 degrees to the side. Staffers built a special grip to hold the camera steadily sideways.

“When you go up to the Norwegian mountains, it’s really beautiful, and you’re used to seeing the landscape in horizontal mode,” NRK’s Kim Jansson, who led the project, told me.

“You need to adjust your way of thinking. ‘OK, we need to cut off the left and right sides, what can we do to make it work vertically?’ We used trees to make people see how tall things are: How big the mountains are, how tall the buildings are,” he said. “You can get a different perspective. You just have to change your mind a little bit to see the opportunities that you don’t have when you’re filming horizontally.”

As mobile consumption continues to grow, news outlets — especially those publishing on Snapchat Discover — are turning to vertical video, a format that was once widely derided, to optimize their content for viewing on phones.

According to analyst Mary Meeker, users use vertically oriented devices nearly 30 percent of the time, up from just 5 percent in 2010. And more than 7 billion videos are viewed each day on Snapchat, which is specifically designed for vertical consumption.

But even as outlets ranging from National Geographic to Mashable and Vox create vertical videos, there’s no consensus on the best way to actually produce them. Some organizations, such as NRK, decided to rotate their cameras and film vertically, while others have decided to shoot the traditional horizontal way and then adapt the footage to fit a vertical screen."



"Mashable has decided its best bet is to just film horizontally. In its early days on Snapchat Discover, Mashable tried filming vertically by using a phone camera and by flipping a DSLR camera sideways. Later, it decided to shoot all its videos on a camera that’s oriented horizontally, said Mashable creative director Jeff Petriello.

“In terms of quality, and for the content to live on in as many forms as possible, shooting it on at least a 4K camera horizontal has proven to be the most efficient,” he said.

Petriello estimated that only a third of the vertical content Mashable creates actually requires a camera. The rest is created through animation and design using programs such as Adobe After Effects.

Vox also predominantly uses animations for its Snapchat Discover channel, and Yvonne Leow, Vox’s senior Snapchat editor, said there’s been “a bit of a learning curve” as Vox’s designers figured out the best ways to create graphics or other visualizations for a vertical screen.

When it does use live video on Snapchat Discover, Vox shoots horizontally. If Vox is shooting an in-studio interview, the videographer will frame the subject in the center of the frame so the video can be easily readjusted to a vertical orientation.

Vox also lays graphics over its interviews, and by using a center-focused shot, it’s able to adapt the graphics to the orientation of the final version.

The New York Times took this approach last year when it produced a video about the collaboration by Justin Bieber, Skrillex, and Diplo. It produced three different versions of the video — a 16:9 ratio for its own player and YouTube, 3:4 for tablets, and 9:16 for a vertical orientation on phones — and adjusted the graphics for each view.

Figuring out the best way to present vertical video on screens that aren’t phones can take a little ingenuity.

Mashable has published a handful of vertical videos outside of Snapchat Discover, and when they’re viewed on desktop, those videos are embedded in the left-hand column of a story.

For its interactive about the refugees, NRK, the Norwegian broadcaster, showed large quotes next to the vertical video when it was viewed on desktop.

But NRK estimated that 66 percent of viewers watched the videos on mobile, and the interactive was one of NRK’s most-consumed stories of 2015, even though it wasn’t published until the last week of December.

Jansson’s team is heading back into the field this month to begin its next vertical documentary. This time, they’ll try to add more motion into the video.

“There wasn’t a lot happening in the videos last time around,” he said. “We’re going to see if it’s possible to make that work a little bit better this time. But we’re going to do more or less the same thing. We’ve only done this once through, and we need more practice.”"
video  verticalvideo  portraitvideo  mobile  mobilefirst  2016  josephlichterman  snapchat  vox  mashable  nytimes  nationalgeographic  smartphones 
february 2016 by robertogreco
Yiibu - About this site...
"The site is designed using the ‘mobile first’ principle. Also incorporated are elements of responsive design.

The base content and default presentation are mobile, and optimized for the very simplest devices first. We've defined this as 'basic' support.

Devices with small screens and media query support are served an enhanced layout—and occasionally—more complex content. We've called this 'mobile'.

Finally, the layout and content are enhanced to reflect the 'desktop' context.

On the first visit, the server checks for a 'properties' cookie containing specific browser 'feature support' results (obtained from tests carried out by a little bit of JavaScript). Devices that don't supply a 'properties' cookie, or have JavaScript disabled are always served the basic version of the site."

[See also http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu AND http://www.metaltoad.com/blog/stop-you-are-doing-mobile-wrong AND http://www.lukew.com/ff/entry.asp?933 ]
mediaqueries  mobilefirst  responsive  webdesign  web  mobile  html5  standards  browsers  adaptive  yiibu  mobileweb  webdev  via:preoccupations  development  design  usability  ux  progressiveenhancement  browser 
october 2010 by robertogreco
LukeW | Mobile First
"More often than not, the mobile experience for a Web application or site is designed and built after the PC version is complete. Here's three reasons why Web applications should be designed for mobile first instead."

[See also http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu AND http://www.metaltoad.com/blog/stop-you-are-doing-mobile-wrong AND http://yiibu.com/about/site/ ]
via:preoccupations  mobile  mobilefirst  mobileweb  webdev  development  design  webdesign  usability  ux  mediaqueries  progressiveenhancement 
october 2010 by robertogreco
Stop! You are doing mobile wrong! | Metal Toad Media
"For as long as mobile sites have been around the conventional wisdom has been: build your website first and then create a mobile site as an add-on; creating a distilled, streamlined version of the desktop site. This makes sense, no? A few weeks ago I discovered that we've been doing it wrong*. Here's why:

Mobile devices will outpace traditional computers.
Devices with fewer capabilities need to be the default.
There is no mobile…"

[See also http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu AND http://yiibu.com/about/site/ AND http://www.lukew.com/ff/entry.asp?933 ]
iphone  mobile  drupal  ipad  tutorials  development  web  glvo  webdev  mobilefirst  via:preoccupations  mobileweb  design  webdesign  usability  ux  mediaqueries  progressiveenhancement 
october 2010 by robertogreco

Copy this bookmark:





to read