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 of a page,

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


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


What is Responsive Web Design?

Written by Aaron Charlie – Sun 19 Jun 2011

what-is-responsive-web-design

NEW! We've launched our own Responsive Web Design Course. Learn how to design and build sites that will render on any screen without losing functionality with our best practice workshop. Combine the course with HTML5, CSS3 & JavaScript on our Mobile Web Week and you will be able to build your own sites from scratch!

5 years ago, the only considerations web designers really had to deal with when designing for different users were cross browser testing and different screen resolutions.

Today (and forevermore!), to ensure that your website is truly accessible to all of your users, you have to make sure that your design works for a huge range of mobile devices - iPhones, iPads, Blackberries etc etc... all with different browsers and screen resolutions (many of which are now in 'portrait' orientation, as opposed to the traditional 'landscape' web browser)

One way of doing this is to design a different version of your site for every device - however that's a lot of work.

Enter Responsive Web Design..

What is Responsive Web Design?

Responsive Web design is an approach to web design that ensures that your site responds to your user’s environment, and to their behaviour, based on a range of variables including screen size, platform and orientation.

Rather than create multiple versions of a site for each device - ONE website design will be suitable for all users, by using flexible layouts, images and CSS techniques including media queries. The website adjusts itself to the user - rather than the other way round.

HTML5 and CSS3 are an important part of responsive web design, and as more and more browsers begin to support these technologies responsive websites will become more popular.

Read More