Responsive Design - South Street

Responsive design is something that an be tough to pull off. You can’t just take a site and squash it to Responsive. The change takes place at a content level, an information architecture level, a development level and a design level.

Take a large image for example. In a responsive design, a mobile device will have to download that entire image. Not too great for smartphones with slower connections and with users paying for their data. Just because you can use the latest WebGL, CSS3 doesn’t mean you should. Browsers, devices, and OS’s all have their own quirks. We need to put the user first and make our websites future friendly.

The Filament Group is making some huge strides in doing responsive design responsibly. If your into code, check them out:

https://github.com/filamentgroup/Southstreet

Mobile Devices, Browsers, and OS's Should Brag about their HTML5 integration

It's hard to keep things working consistently across a wide range of mobile devices, their OS's, and different browsers. What if companies could pitch their compatibility with HTML5, CSS3, and other best web practices, saying they give the best "internet experience"? This would encourage developers and companies to stay current to best web practices and educate consumers, allowing them to push the right things.

Television Media Query Testing

The Television has yet to be really explored like mobile devices have. I'm not even sure how well the query @Media Tv works. If anyone has information on this, or has televisions with browsers (and some spare time), please view the GitHub Thread below to do some testing.

Television Media Query Test

Resources:

• Google TV Developers, Designing for the TV
• Visual of TV Monitor "Breakpoints"
• Designing for the Interactive Television (PDF)

Is It Possible to Design Mobile First If We Can't Program Gestures on the Web?

Is It Possible to Design Mobile First If We Can't (easily) Program Gestures on the Web? Read the following article which brings up a great point about clunky UI buttons. Buttons are a hack.

A Thought on Web Redesigns: Long Term Transitional Design?

"The disaster known as redesigns:

• Large “Big Box” retailer spent $100,000,000 to redesign website. Launch day: 20% loss in revenues.
• Large law firm. Redesigned intranet to use MS Sharepoint instead of static HTML. The entire law firm was shut down for three weeks.
  
• One of the Top 20 Websites hired a top design firm for a complete UX overhaul. Pageviews decreased on 40% on launch day.
  
• United merged with Continental, flipped the switch on website launch. Result: Complaints out the whazoo!"

Read the entry from An Event Apart 2012 here.

When sites relaunch a redesign, users are generally upset or at the very least slightly unsettled at the change. Even if the UX, AI, and Visual Hierarchy is better, it's something different that the user has to adapt too.

My question is: "Is there anyway to grandfather a large user base into a new design?"

Facebook does it which their changes. They don't scare their users with any drastic changes. The large changes are also optional. Facebook's Timeline was a radical change, but users were allowed to try and choose if they wanted it. Slowly Facebook moved towards full timeline integration. As more and more users tried and got used to it, they became motivation for more stubborn users (yeah, you can probably think of those people) who didn't initially want to switch over. Many websites will allow users to try a fully redesigned version before it's release. I'm wondering if it's possible to keep the design modular enough that developers could slowly shift components around over an extended period of time while conducting user tests.

Kind of like a flounder. Except less ugly.

Maybe developers could emphasis modular components of a site to keep it maintainable, but also rearrangeable. If a change deemed itself beneficial for users, developers could shift the design.

If things want to be Responsive, they have to be able to evolve over the long term, not just in the heat of the moment. Future Friendly is an ideal example.

Free for Personal Use Photoshop Brushes

If you haven't already checked out my newer Photoshop Brushes, please do! I haven't had much time to design more, but hopefully I can make more in the future. Remember all the brushes here are 300 DPI, 2500 x 2500 pixels, perfect for Retina / HD Displays that the Web is moving towards. The Savage Brush Pack below has been very popular as has recieved over 100,000 downloads total to date.



















Check Them Out:

http://fort3design.blogspot.com/p/resources.html


Adobe Photoshop Extended CS6 Win Student 65171279

Air Mechs - Chrome Native Top Down RTS / Tower Defense / LoL - Style Game

I normally don't review games too often, but this game deserves mention. By Carbon Games, Air Mechs runs off a Chrome Browser Extension and utilizes WebGL to drive the game. The result is beautiful:

The result is a hybrid of League of Legends style gameplay with more Starcraft RTS elements. Units are vital to success, and positioning and match ups are just as crucial. While your main Air Mech can take on individual units, it cannot engage multiple enemies until mid to late game with upgraded powers / armor. I player must micro manage his / army in addition to fighting with his / her Air Mech. Players' armies must be preselected, adding an additional amount of strategy to the game, particularly in team matches.

Sure the UI isn't as tight as it could be, and the application does occasionally crash, but it's nevertheless a WebGL feat. With the recent changes in Natives Apps and Mobile Applications, where does a Browser Native game fall?


One can see it as just another App system, but also a step that could help bring rich content to general web applications. Download the Chrome Extension Here: http://carbongames.com/download.html

Must Read: Pragmatic Progressive Enhancement

Pragmatic responsive design

View more presentations from yiibu