When I was young and thought of Microsoft, I thought of cutting edge user-interface (or the equivalent term at that time) and well-constructed, intelligent design. In recent years that prestigious position has been secured by Apple, a company who captured the worlds imagination by putting design at the core of everything they do.
Now however, Microsoft is taking a giant leap forward in the contemporary design race with the announcement that they will be launching a ‘responsive’ website redesign; using HTML5 and CSS3 to enable their website to adapt its layout, in real-time, to suit whichever device it is viewed on.
What is ‘Responsive’ Web Design?
Screen sizes used to access the internet range from 176x220px feature phones to iPads to 42” TV/monitors. In fact, there seem to be two opposite trends unfolding: The use of mobile internet on smaller screens is increasing, while on the other hand desktop screens are getting larger by the day. Web developers and web designers (such as ourselves) have had to put the available screen-space to best use taking all of these different devices into account.
Arguably one of the most important languages developers use is CSS. For those who don’t know, CSS is used to create ‘stylesheets’, or sets of presentation rules which define the way content is displayed. ‘Media Queries’, a tool within the latest version, CSS3, allows us to specify stylesheets for any number screen sizes all at once. Basically, the website asks 4 questions, or ‘queries’, to the device it is being viewed on:
1. What are the device screen dimensions?
2. What is the device screen resolution?
3. What is the device orientation (portrait/landscape)?
4. What are the browser dimensions?
Once the web site gets its answers, the appropriate set of presentation rules (aka stylesheet) can be applied, allowing for the position of text, images and other forms of media to be different on different devices. In addition to that, Media Queries also allow content to be added, omitted or edited as per the stylesheet’s definition. The website is therefore completely ‘Responsive’ to its environment.
Impressive stuff, I’m sure you’ll agree.
Of the 40 million frequent internet users in the UK, 35% of us regularly use mobile phones for access; collectively accounting for around 28% of all internet traffic in the UK. In addition, the use of mobile tablet PCs (such as the iPad and small laptops) is on the rise; indeed expected to overtake PC sales by 2015. Media Queries allow marketers to deliver content to mobile users in tailor-made fashion, maximising impact and usability.
Microsoft Preparing Small Business for Responsive Web
At Attain Design, we’ve been keenly aware of the benefits of responsive web design for some time. Don’t believe us? Check out this web site on different devices or play with the size of your browser to mimic different screen sizes. Try different pages too. Cool, right? But, alas, we have had to accept (with great displeasure) that most small businesses and SMEs have simply not had time to keep up with these advances in web development.
Microsoft is the first big tech company to embrace the power of responsive layouts. Hopefully small businesses will now become more aware of responsive web design when they feel the benefits themselves.
No more restrictive mobile sites, no need for apps, no need to zoom and swipe: We look forward to it and so do our smart-phones!
It’s time to get responsive!
Source: Anthony Wing Kosner, Forbes.com, 6/30/2012 | Source Article