Rt responsive design_final

  • 464 views
Uploaded on

 

More in: Business , Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
464
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
7
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. #digitaljourneysResponsive Web Designby Richard Tidman | 18 July 2012© Jellyfish 2012
  • 2. Richard Tidman Project Director As Project Director at Jellyfish, Richard is responsible for planning and execution of digital projects across all departments, leveraging his extensive experience in design and brand communication, combined to deliver integrated solutions to our clients wide range of marketing challenges.Digital Journeys | Responsive Web Design | 18 July 2012
  • 3. Responsive DesignDigital Journeys | Responsive Web Design | 18 July 2012
  • 4. The Mobile Internet is BIG! 60of mobile phones % 36 % of global 8 x growth rate feature a full population own of desktop HTML browser a smartphoneDigital Journeys | Responsive Web Design | 18 July 2012
  • 5. And it has its own personality... Smaller screens Different interactions Wider accessDigital Journeys | Responsive Web Design | 18 July 2012
  • 6. Remember what it was like?Digital Journeys | Responsive Web Design | 18 July 2012
  • 7. Then this arrived!Digital Journeys | Responsive Web Design | 18 July 2012
  • 8. Followed by these...Digital Journeys | Responsive Web Design | 18 July 2012
  • 9. It started with the desktop...Digital Journeys | Responsive Web Design | 18 July 2012
  • 10. But maybe we should think mobile first...Digital Journeys | Responsive Web Design | 18 July 2012
  • 11. So, what is mobile first all about? Luke Wroblewski http://www.lukew.com/Digital Journeys | Responsive Web Design | 18 July 2012
  • 12. So, what is mobile first all about?1. Growth - change in online behaviour represents a big opportunity2. Constraints - the nature of the device forces you to focus3. Capabilities - greater feature set, means opportunity to innovateDigital Journeys | Responsive Web Design | 18 July 2012
  • 13. Why is this a good thing?The simplicity that mobilebrings to the user experienceis a great force for developingan improved user experience,independent of device.Digital Journeys | Responsive Web Design | 18 July 2012
  • 14. So, where does Responsive Design fit in? Ethan Marcotte http://ethanmarcotte.com/ http://unstoppablerobotninja.com/Digital Journeys | Responsive Web Design | 18 July 2012
  • 15. It follows the responsive architecture movement...Digital Journeys | Responsive Web Design | 18 July 2012
  • 16. The old (current) approach to mobile...Digital Journeys | Responsive Web Design | 18 July 2012
  • 17. It goes back to the days of print!Digital Journeys | Responsive Web Design | 18 July 2012
  • 18. But the web is way more dynamic!Digital Journeys | Responsive Web Design | 18 July 2012
  • 19. And its getting ever more complex...Digital Journeys | Responsive Web Design | 18 July 2012
  • 20. There is a solution.Digital Journeys | Responsive Web Design | 18 July 2012
  • 21. So, how does responsive design work?1. Media Queries - control the style sheet applied to a page2. Fluid Grids - layouts based on proportion rather than fixed measurements3. Flexible Images - automatically re-scale to fit requirementsDigital Journeys | Responsive Web Design | 18 July 2012
  • 22. 1. Media QueriesDigital Journeys | Responsive Web Design | 18 July 2012
  • 23. 2. Fluid GridsDigital Journeys | Responsive Web Design | 18 July 2012
  • 24. 3. Flexible ImagesDigital Journeys | Responsive Web Design | 18 July 2012
  • 25. And, its a front end technology.Which means you dont necessarily needto re-build your entire website....and we can do some pretty cool things!Digital Journeys | Responsive Web Design | 18 July 2012
  • 26. Tailor usability to work with one of these...Digital Journeys | Responsive Web Design | 18 July 2012
  • 27. Remove noise from busy pages...Digital Journeys | Responsive Web Design | 18 July 2012
  • 28. And optimise for various user groups... t An t An t An Tes Tes Tes aly aly aly se se seDigital Journeys | Responsive Web Design | 18 July 2012
  • 29. Responsive Design is a hot topic, but why?One Web: Mobile Web: V"The internet is the internet, and "The mobile is a different platformsites should work well on all devices. with different capabilities andOptimisation should be based different user needs. Sites should beon CSS and device detection, but optimised for many (but not all) cases."should not change site function orcontent beyond the necessary."Digital Journeys | Responsive Web Design | 18 July 2012
  • 30. Google have gone on record...Google Webmaster Central Blog, June 6th 2012:"Sites that use responsive web design, i.e. sites that serve all devices on thesame set of URLs, with each URL serving the same HTML to all devices andusing just CSS to change how the page is rendered on the device......That is, there is one HTML code for the page regardless of the deviceaccessing it, but its presentation changes using CSS media queries tospecify which CSS rules apply for the browser displaying the page."Digital Journeys | Responsive Web Design | 18 July 2012
  • 31. As have Bing...Bing Webmaster Center Blog, July 3rd 2012:" At Bing, we want to keep things simple by proposing the “one URL per content item” strategy...By outputting only one URL for the same content, you will have the following benefits:1. You have more ranking signals coming to this URL. Example: the vast majority of mobile URLs do not have inbound links from other websites as people do not link to mobiles URLs like they link to regular web-situated URLs.2. This is also less search engine crawler traffic coming to your web servers, which is especially useful for large websites. Fewer URLs to crawl reduces the bandwidth our crawlers consume.3. Less work (and potentially less cost) building, updating and maintaining stand-alone mobile-focused websites."Digital Journeys | Responsive Web Design | 18 July 2012
  • 32. Growing support for media queriesDigital Journeys | Responsive Web Design | 18 July 2012
  • 33. And some pretty compelling benefits...1. Its what the search engines want you to do, and they control the landscape.2. Maintaining one site is less time consuming (cheaper).3. It helps improve the user experience and is a great way to focus on performance.4. Theres an opportunity to get it right, right now, and reap the rewards.5. Thanks to the developments in recent weeks, its something your competitors will do, its just a matter of time.Digital Journeys | Responsive Web Design | 18 July 2012
  • 34. ResourcesLuke Wrobleowski - Mobile First: http://vimeo.com/38187066Ethan Marcotte - Responsive Design: http://vimeo.com/34662135Google Announcement: http://googlewebmastercentral.blogspot.co.uk/2012/06/recommendations-for-building-smartphone.htmlBing Announcement: http://www.bing.com/community/site_blogs/b/webmaster/archive/2012/03/07/building-websites-optimized-for-all-plat-forms-desktop-mobile-etc.aspxhttp://www.abookapart.com/products/responsive-web-design/http://www.abookapart.com/products/mobile-first/Digital Journeys | Responsive Web Design | 18 July 2012