Fermata Creative, Inc.

What's Happening at Fermata

Blog

The Future Of Web Design Is Here, Responsive, Mobile And Amazing

The Web has become more powerful thanks to development on mobile Apps. Developers have taken what they’ve learned and are applying them to websites they’ve created thus destroying the line that defines desktop from mobile designs. The future is here for the web, it is mobile, scalable and maximized.

The mobile has been the biggest thing to hit the web. Desktop and mobile sites were very harshly defined and not meant to be accessed outside of their respective platform. Major advancements in mobile hardware have put phones on par with some computers allowing developers to add a lot more functionality to what were once stripped down desktop sites. Scaling a design from mobile to desktop will require less manpower than before but require some rethinking of how to design. We have the unique opportunity to use the same code across a multitude of devices with varying screen sizes. Designing a site for a 3.5″ screen at 320 x 480 to a 60″ TV at 1920 x 1080p will require the help of HTML5 and forgoing common web technologies.

To scale a site from mobile to desktop to a TV, developers need to focus on the common denominator in browsers. If a site focuses solely on Javascript for design and content, it will fail on a browser that doesn’t support Javascript. Knowing which browsers your target audience is using, what they are capable of and testing your sites again and again is key to scaling your sites.

Another thing to keep in mind is information hierarchy for search engines and users. While you may want to design the most visually appealing site you want, not all browsers will render it exactly the same or at all. Having a fallback will help you scale a site from mobile and on. Even if the design is basic and archaic, a structure that formats content with hierarchy in mind will be more desirable than a horribly rendered page with incompatible web technologies for the sake of an awesome design. But, we run in to the problem of once again creating mobile optimized sites that look different from their desktop brethren when we factor in multiple browsers that don’t have all the feature developers want. Luckily a solution exists.

Fluid layouts have long been the choice for designers to scale from laptop screen to even TVs. Scaling down more was a problem until CSS3 added the Media Query function. The Media Query functionality asks a browser what its width is and scales the design accordingly. This is called The Responsive Web.

This allows developers to use the same code and designers the same structure to scale their site from a phone to an HDTV without dramatically changing the overall layout. A 3.5″ screen will always be restricting but new mobile browsers combined with CSS3′s Media Query will make them more usable and consistent.

The future is here, the web is mobile, modular and scalable. Designers and developers have the opportunity to create something truly unique. Designs can be scaled adequately from the growing install base of 3.5″ screens to monstrous HDTVs all thanks to the new advancements of CSS3 and HTML5. Soon we’ll see the demise of mobile sites and instead one site design that can scale across any screen.