The document provides an overview of responsive web design. It discusses how responsive design adapts the layout to different screen sizes using flexible grids and images, and media queries. The benefits are delivering a single website that works across devices without separate mobile sites. Everything remains fluid and loads quickly. Content hierarchy and a consistent layout inform the responsive design.
2. Introduction of a team of
Jadu consists Overview
The Creative team is a potent
leading creative designers mix of precocious new talent
and web developers and seasoned experts.
underpinned by an Leading them is an Art
experienced project and Director with over 14 years
account management team. experience working in
Design, Marketing and
Our approach is governed by Advertising for some of the
common sense; we ask the worlds most recognised
right questions before we brands.
start, in an effort to make the
creative and production We attribute the success of
process as simple and our creative to the following:
trouble-free as possible.
Jadu
®
3. Understanding
We begin with a firm understanding of our client’s business,
their audience and the brief.
Ideas
They are at the heart of our solutions; we begin with a
brainstorm and a blank sheet of paper.
Unique each time
We don’t have a agency ‘look’ or agenda; each brief commands
a different approach.
Jadu
®
4. Innovation
We produce conceptually and aesthetically innovative work.
Love
Attention to detail and a love for our craft means industry
leading products every time.
Give that bit extra
We all have a burning desire to surpass the expectations of the
client.
Jadu
®
5. Project Management
We have a highly dedicated
team that carry out project We attribute the success of
and account management for our project management to
our customers on a day-to- the following:
day basis. Our production
process needs to be as
flexible as possible. We use a
combination of industry-
standard methodology, best
practice and real world
experience in the Creative,
IT, and Public sectors.
Jadu
®
6. Getting it right from the start
We do the necessary planning, documentation and
communication at the start of a project (often when people are
more concerned with getting started on the ‘real’ work).
Communication
Always making sure the customer and our resources are aware
of requirements, changes and potential risks or opportunities.
Internally we keep abreast of all accounts, so there’s always
someone here to help with an enquiry.
They are at the heart of our solutions; we begin with a
brainstorm and a blank sheet of paper.
Production management
Resource planning and management is key to our business and
yours. It keeps things moving as smoothly as possible.
Jadu
®
7. Quick response
We believe in getting back to customers promptly. This is vital
when managing high-risk work so decisions can be made
without delay.
Change management
We aren’t afraid to put our foot down and inform a client that a
proposed change is out of scope, placing the project at risk or
jeopardising the quality of the end result.
Being nice people
It helps that we’re all so friendly!
Jadu
®
8. What responsive means
What it is and its benefits
Working examples
Everything is fluid, everything is fast
The way we approach design and content
should fundamentally change, so business
decisions made need to be informed.
Jadu
®
29. Media Queries
The technical bit, which uses CSS3
They identify a devices size and orientation
Enabling us to write specific CSS for each size
Change layout and text and image sizes
Jadu
®
31. Everything is fluid
Pixel perfection is not possible
Layout is no longer fixed
There is no fold
Space is not a fixed canvas
Images and text are fluid
Jadu
®
32. Everything is fast
The desktop version is the same size
as the mobile.
All HTML, CSS, images, javascript etc is downloaded (unless we go
mobile first)
We need to keep files size down
75% of mobile users will leave after 5 seconds of waiting for a page
to load
Jadu
®
33. Content needs hierarchy
A clearly defined hierarchy to complement
all devices
e.g. Site name, search, article, call to action, advert, navigation
Content hierarchy informs layout
Consistency of layout informs a responsive design
Design is development
The line between design and development becomes blurred
Mobile first?
Agree on what matters most for mobile, add value for desktop
Jadu
®
34. Round-up discussion
and next steps
Our discoveries
How responsive do you want to go?
Content and design strategy
How to responsibly approach design and content.
What next?
Jadu
®
The traditional canvas, the space in which art is madeA predefined space, chosen by the artistAdding words and pictures to a set canvas\n
In print design, we set the “canvas size”\nTraditionally, this concept was used in web design too.\n
Fixed proportions, fixed sizes. Chosen by the designer.\n
With web design, the new canvas is the browser\nThis canvas is fluid, it can shape shift\nAn important concept. “Chosen by the user, not the designer”\nWe tend to think of going smaller, as mobile is ‘now’\n
Next year, the need might be to go ‘big’ with TV, \nGame consoles all being able to browse the web\n\nThe first concept, design is not fixed.\nWe can’t force constraints, we need to let go\nCreating photoshop designs is not enough\nThe browser is flexible\nContent is flexible\nThe user chooses size\nIs where we should be designing\n\n\n
So how we design has to be flexible enough to work in all these possible devices and sizes.\nWe have no idea whats next, Apple TV?\n
\n
Common devices: All different sizes, makes, browsers etc\n
4 different solutions\n
The downside\n
The is the concept. Still requires work, but puts us on a simpler path.\n\nWe get to make things simpler, for ourselves, and our users. We can preempt innovation to degree\n
All achieved through design and development\n
All achieved through design and development\n
All achieved through design and development\n
All achieved through design and development\n
All achieved through design and development\n
All achieved through design and development\n
Images need to scale down, but like wise\nneed to scale up\n
Images need to scale down, but like wise\nneed to scale up\n