More Related Content
What's hot
What's hot (18)
Viewers also liked
Viewers also liked (19)
Similar to Boot rwd
Similar to Boot rwd (20)
Recently uploaded
Recently uploaded (20)
Boot rwd
- 1. Responsive Web Design Jadu UX Design Team Jadu ®
- 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 ®
- 9. What responsive means Understanding the canvas Jadu ®
- 10. THE CANVAS FIXED HEIGHT FIXED WIDTH Jadu ®
- 11. THE CANVAS FIXED HEIGHT FIXED WIDTH Jadu ®
- 12. THE CANVAS fixed proportions, fixed sizes. Chosen by the designer. ®
- 13. THE CANVAS, is now chosen by the user, not the designer Jadu ®
- 14. THE CANVAS, next year, we might need to go big! Jadu ®
- 16. The benefits are straight forward Jadu ®
- 17. Lots of devices Desktop, tablet, mobile, TV, delivering all Kiosk… one Web Jadu ®
- 18. One way forward Desktop, tablet, mobile, TV, Kiosk… Solution 1* Solution 2* Solution 3* Solution 4 2 servers, 1 servers, 1 servers, No Idea! 1 infrastructure, 1 infrastructure, 1 infrastructure, 1 CMS, 1 CMS, 1 CMS, 1 design, 1 design, 1 design, 30 content authors 20 content authors 10 content authors Jadu ® * All made up, but you get the idea
- 19. ££££ Not sustainable, we can’t compete with the pace of technology Massive internal confusion / the Web was meant to make our life simpler Jadu ®
- 20. Another way forward One website Responsive Web Design Desktop, tablet, mobile, TV, Kiosk… Jadu ®
- 21. The responsive ingredients A flexible grid based layout Flexible images and media Media Queries (a CSS3 module) Jadu ®
- 22. Responsive grids HOMEPAGE Jadu ®
- 23. Responsive grids GUIDED ENTRY Jadu ®
- 24. Responsive grids PROMO ENTRY Jadu ®
- 25. Responsive grids PRODUCT DETAIL Jadu ®
- 26. Responsive grids PRODUCT COMPARISON Jadu ®
- 27. Responsive Design FLEXIBLE IMAGES & MEDIA Note slight loss of quality Jadu ®
- 28. Responsive Design FLEXIBLE IMAGES & MEDIA Cropping 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 ®
- 30. Responsive Web Design in action 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 ®
- 35. Thank you. Jadu ®
Editor's Notes
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- 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
- \n
- \n
- \n
- Something to be aware of, but not worry about.\n
- Mobile first removes clutter\n
- Mobile first removes clutter\n
- Mobile first removes clutter\n