Skeuomorphism is, according to Wikipedia, “a physical ornament or design on an object made to resemble another material or technique.” It’s a somewhat controversial design technique that has been around for centuries.
In terms of web and mobile design, skeuomorphism is most commonly referred to in terms of icons or even apps and software which use representational design elements that possess little or no functionality. You can learn all about skeuomorphism on our InDesign Training.
An example of it would be the notepad on Apple iOS devices which has been designed to look like a traditional paper notepad. There’s no need for it to be designed like this, from a functionality perspective, but the way it looks makes its purpose easily identifiable. The skeuomorphic philosophy employed by Apple is a big part of their approach to making tech simple and ultra-user-friendly.
It’s not just Apple that uses this technique though; it has been in use in the tech industry for years, especially with regard to buttons and icons.
Responsive Web Design is becoming more and more widely used as a means to creating a site that is easily accessible on multiple platforms.
Grids are a particularly useful and simple way to build a responsive site, which is why you’ll learn all about them on our Responsive Web Design Training.
With so many options to choose from, we thought we’d take a look at what we think are some of the best frameworks out there, each with its own unique strengths. Not 100% on Media Queries? Take a look at this post on the difference between queries and types.
1/ Golden grid System
Golden Grid System splits the page into 18 columns, 16 of which can be used for design.
Using this system you’ll be able to serve pages ranging from 240 to 2560px. It does this by ‘folding’ into 8 columns for tablets and 4 for mobiles.
2/ Yamb v2
Yamb v2 is a mobile first framework which aims to deliver a minimalist approach to responsive design. As such it covers screen widths from 320px upwards.
In this post, our responsive web design trainer Giselle guides you through the differences between Media Types and Media Queries with regards to modern web design.
Media queries is a new module in the CSS3 W3C (World Wide Web Consortium) specification. Media Queries combine the older Media Types, which target a particular media type – e.g. a screen – with conditions that must be met by a particular device in order for a set of styles to be applied to it – e.g. the width of a screen. Media queries enable you to change the appearance of your site for different devices while the HTML remains the same (although some of it may be hidden).
In the CSS2 specification Media Types targeted different devices but did not allow you to differentiate between devices of the same type but with different physical characteristics, e.g. two mobile phones with different screen sizes.
Stylesheets for specific media were specified in the <head> of a page,
Other difficulties with Media Types included the fact that early mobile device browsers ignored them for the most part and later browsers defaulted to screen-based style sheets.
Google have just announced an incredible new Data Highlighter in Webmaster Tools which allows you to mark up events on your site with simple point-and-click actions.
This is a life saver for webmasters who want to add structured data to their sites but don’t have the skills to implement microdata, microformats or RDFa on their site.
For those unfamiliar with structured data markup, it is code added to a site, page or page element that makes content more understandable to search engines and other crawlers which is then translated into Rich Snippets – extra information shown in SERPs with your result. Previously, this would involve marking up elements individually using tags like schemas but now with Google’s new Data Highlighter even those with no understanding of HTML can markup certain elements.
The idea behind Structured Data is to take the internet beyond just an archive of ‘pages’ and instead becomes an ‘internet of things’ – something that search engines are racing to be the best at. It’s something Facebook does – recognising people, relationships, faces and interests. Google are on the right track with authors, publishers, knowledge graph and semantic search but they need the help of webmasters to take this a step further.
Structured data is vital for SEO – something we’re looking to add to our SEO courses – not only does it help search engines understand your content but also gives you more visibility in SERPs. Likewise it’s a must for content marketers – not so much for blog posts but for other content that needs clear labelling.
Currently the Data Highlighter tool just for events, but we believe that if this test is successful then other elements will be supported. Google made a similar move by making authorship markup (rel=author) easier to implement using email verification rather than tags.
How to Use Google Data Highlighter
The main point of Google’s new Data Highlighter tool is that it is dead simple to use. It just requires a Webmaster Tools account and (of course) events on your website.
Disclaimer: If you’re thinking “I love the sound of extra real estate in SERPs, but I don’t have events, I had better set some up!” then please stop right there. Tools like these only work if they’re not abused. If you must, think hard about what real event you could put on – it could be a talk, a free session or a demonstration – just don’t set up fake events.
Mobile-first is becoming the preferred way to go when implementing a responsive web design strategy. Mobile-first simply means designing for the smallest layout first (phones) and adding styles for tablets and desktops later.
Your audience includes people who use multiple devices – e.g. a smartphone, laptop and a desktop – and those who only use a phone. In developing countries many people are accessing the Internet for the first time via a phone and skipping the desktop stage altogether. In some countries this means over 70 percent of Internet users.
Ben Savage recently wrote an article on VentureBeat called “Why HTML5 has provided more tricks than treats in 2012″ criticising what he sees as its low-uptake and over-hype. He quoted Mark Zuckerberg as saying: “The biggest mistake we did as a company (this year) was bet too much on HTML5.”
In this post I’ll explain why I think neither have got it quite right.
If you also think the Zuck’s got it wrong and want to learn how to use HTML5, try our HTML5 Course which goes great with our CSS3 Training for designing sites using the most recent standards for the web.
HTML5 in 2012
To me HTML5 is a fantastic tool that melds the dividing lines between mobile and desktop and extends the boundaries of what is possible with web development. 2012 has seen the adoption of the language in all sorts of diverse areas of the web and to great effect. Read the rest of "5 Reasons Why HTML5 is Here to Stay"
Responsive Web Design is happening right now, it has hit the mainstream and will be around for quite a while. Once you’ve been on our Responsive Web Design course, there are a huge number of online tools to help you switch to a responsive design workflow and develop your skills and your sites even further. In this post, we’re going to run through some of the best.
Responsive Design Workflow: You’re Going to Need a lot Less Paper!
Workflows are changing with responsive design: there’s less reliance on mock-ups and more emphasis on HTML and CSS prototypes. Although these take longer initially, iterations in response to client feedback are much quicker as they can be done live. Responsive design heavily supports CSS instead of graphics wherever possible, meaning that the majority of tweaks will be made in the style sheet.
Read the case studies below to see what’s involved:
Wireframes now need to include a range of devices, as well as consider how easy it is for the user to tap on areas of the screen. These free templates enable you to sketch your design on actual size, pre-created templates for seven mobile platforms. Read the rest of "Responsive Web Design Testing Tools Round Up"
New course just launched! Learn how to create iPhone apps with no prior coding experience on our iOS App Training for Non Developers course!
If Windows 8 proves to be as popular and widely adopted as Windows 7, it could be huge for apps and responsive web design, taking the formats from mobile to a mainstream desktop market.
The booming mobile industry (dominated by iOS and Android) has seen apps go mainstream in the last few years. It has also prompted a radical change in web design with a desire for responsive design that adapts to browser size.
However, the number of websites with responsive design is still miniscule, and apps are still mostly for personal use on mobile devices. True synchronicity between desktop and mobile, (and between work and home) is still a long way off.
Windows 8 could be the catalyst to take app development and responsive design from mobile to desktop.
Sorry developers, it looks like you’re going to have to learn to make apps for Windows 8 on top of Android and iOS.
Taking Apple’s latest OSX update a step further, Microsoft have unveiled an operating system to work on all devices, desktop and mobile, by focusing on apps. They’re a bit late to the party, with Apple have had an App store on desktop for a long time. But despite Apple’s break into the market, Windows is still by far the global operating system of choice, particularly in workplaces.
Like Apple’s App Store and Google Play, Microsoft is launching its own closed app marketplace and this is expected to become the norm for downloading software as it’s often seen as ‘safer’ than downloading straight off the web, and easier than going into a shop and buying a disk. Read the rest of "Windows 8, Apps and Responsive Web Design"
The main point of Google’s new Data Highlighter tool is that it is dead simple to use. It just requires a Webmaster Tools account and (of course) events on your website.
Ben Savage recently wrote an article on VentureBeat called 
