Can't find what your looking for?

Call us on +44 (0)1273 622272 or contact us.

Courses

showing {{courseLimit}} of {{(courses | filter:query).length}} results Show All

Hide All

Categories

showing {{courseLimit}} of {{(tags | filter:query).length}} results Show All

Hide All

theBLOG

Responsive Web Design: Media Types and Media Queries

Written by Giselle – Fri 04 Jan 2013

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).

You can learn more about Media Queries in our Responsive Web Design training.

Media Types

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.

Responsive-Web-Design-iphone5_vs_iphone4s

Stylesheets for specific media were specified in the <head> of a page,

<link rel="stylesheet" href="global.css" media="all" />

<link rel="stylesheet" href="main.css" media="screen" />

<link rel="stylesheet" href="print.css" media="print" />

<link rel="stylesheet" href="mobile.css" media="handheld"/>

Or within a style sheet,

@media print {

body {

font-size: 12pt;

}

}

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.

Check out this article for more information on Media Types.

Read More


5 Reasons Why HTML5 is Here to Stay

Written by Aaron Charlie – Tue 04 Dec 2012

Iphone HTML5Ben 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 & 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 More


Responsive Web Design Testing Tools Round Up

Written by Giselle – Thu 22 Nov 2012

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-web-design-testing-tools

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:

Luke Wroblewski - An Event Apart: The Responsive Designer’s Workflow

MEric Bidelman - Mobifying Your HTML5 Site

Mobile Web Design Week

Wireframing Templates

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 More


How to Convert Navigation to a Dropdown Menu for Mobile Devices

Written by Giselle – Thu 04 Oct 2012

responsive-navigation-css3Responsive web design is vital for making sure your visitors get as great an experience on their mobile as their desktop while browsing your site.

Our tutorials often aim at the beginner end of the scale, but this week we're going for something a bit more advanced. In this tutorial our HTML5 & CSS3 trainer Giselle explains how to convert navigation to a dropdown menu for smaller screens using CSS3 media queries.

This is one of the topics covered on our Mobile Web Design Week which combines our HTML5 & CSS3 Course with JavaScript training to give you a tool kit for designing mobile sites and also teaches you a best practice approach for responsive web design.

This tutorial assumes a familiarity with responsive web design and using CSS3 media queries to create different sets of styles for mobile devices. Click the links to find out more.

You do not have to test this in a mobile device. To test in your browser, simply resize your screen to the required width.

Why Convert to a Dropdown Menu?

If you have more than three buttons in your main navigation your menu will wrap or overlap when you decrease the width of your web page to fit it to a smaller mobile device screen. A popular method to get around this is to convert your menu to a dropdown. Other alternatives are to use display: block, or to use JavaScript or JQuery to toggle a menu when an icon or button is clicked on. Using display: block is a simple and quick way to style navigation for mobile dropdowns but won't work for menus with many links in them. Using JQuery to toggle the menu requires some knowledge of JQuery and JavaScript. Which method you use will depend on the particular site you are working on. This tutorial shows you how to use the first method and is quick and simple to implement.

Read More


Adobe Edge: The Future of HTML5 Web Animation?

Written by Aaron Charlie – Tue 09 Aug 2011

adobe-edge

For a long time the industry standard tool for generating animated and interactive web content has been Flash.

The vast majority of animated content on the web including banners, intro sequences, ads, cartoons and even some navigation elements have traditionally been developed in Flash.

However - things have started to change over the past couple of years.

1) Apple rained on Adobe's parade by refusing to support Flash on iPhones and iPads - rendering any Flash content invisible to users of these devices (when over half a billion people are using mobile devices to browse the web - that's a big deal!)

2) The latest web standards including HTML5 & CSS3 and JavaScript libraries like jQuery are enabling developers to produce animated content that is more accessible and has faster load times than Flash

3) More and more browsers are now supporting HTML5 and CSS3

So if you can develop animated content that contains the same functionality as Flash, but will load faster and display properly on ALL browsers - what is the future for Flash...?

Enter Adobe Edge!

Read More