Responsive Web Design for Foodies
•Télécharger en tant que PPTX, PDF•
1 j'aime•453 vues
The document discusses responsive web design (RWD) for food-focused professionals. It begins by introducing the author as more interested in food than eBusiness. The key goals are then presented as discussing the emergence of a new approach to web development through RWD and its philosophy. The document considers whether RWD is suitable for different audiences. It then examines different types of restaurants and mobile website designs. Core concepts of RWD like context, flexible grids, and media queries are outlined. The document raises considerations around whether RWD is right depending on specific business needs and challenges. It closes by emphasizing the importance of a mobile strategy for any future strategy.
Recommandé
Contenu connexe
Tendances
Tendances (20)
En vedette
Similaire à Responsive Web Design for Foodies
Similaire à Responsive Web Design for Foodies (20)
Dernier
Dernier (20)
Responsive Web Design for Foodies
- 1. For eBusiness & Strategy Professionals Responsive Design for Foodies @DavidShuIp #RWDForFoodies http://davidshuip.com
- 2. About me 1. I prefer to talk more about food than eBusiness. 2. A self-described “Food Hipster” aka “Foodster”. 3. A “Foodster” is not the same as a “Foodie”. • Foodsters don’t care if the food is cooked by a celebrity chef. • Foodsters don’t pay for ambiance. Lamb Skewers – at Firehouse, China Beef tartare with quail egg - At Gyoza King, Vancouver Combo halal platter — at Halal Truck NYC 2
- 3. Key Goals & Takeaways 1. A New Approach to Web Dev Emerges 2. Responsive Web Design Philosophy 3. Is it right for you? 3
- 4. Audience Quick Poll 1. How many people know what Responsive Design is? 2. How many people have working knowledge of Responsive Web Design? 3. How many people are foodies? 4
- 5. • Artisan, Local, Organic or Exotic ingredients • Tasting Menus & Top service “Where everybody knows your name” • Demo: Affluent, eats out all the time, demands quality • Alinea , The Coach House, the French Laundry High-End Restaurant • Quality ingredients (may be organic or local) • Consistent Food quality • Good service due to extensive corporate training • Demo: May eat out often, prefers quality food • Frontera Grill, Ranch Steakhouse, Madera Mid-Tier Restaurant • Standard ingredients • “Waiting” quality service • Appeals to the masses, places more emphasis on experience than food. • Applebee’s, Buffalo Wild WIngs, Cracker Barrel Low-End Restaurant • Low quality ingredients (GMOs, rBGH steaks and dairy) • Time sensitive, younger aged, hungry now or inebriated Fast Food Restaurant Types I’m generalizing here, don’t blame me… FoodQuality *Subjective Personal view of presenter only. Does not represent viewpoint of HCSC Gourmet Food Truck 5
- 6. Mobile Web Site Types •May take into user context into consideration •Provide a focused solution to a task and conform to certain display guidelines. •Behave similarly to native apps. •Hides the UI of the browser so that it looks more like a native app. •Can supply an icon for people to put on the Home screen allowing people to open web apps in the same way that they open native apps. Mobile Web Apps •Correctly scales existing content for the device screen •Designed to detect when it is being viewed on mobile browser-based devices. •Adjusts the content it provides according to device. Mobile Optimized Webpages •A compatible webpage is a desktop site that displays the page successfully. •Does NOT use flash or unsupported frameworks. Mobile Compatible Webpages •Desktop sites with features not supported by mobile browsers.Non-Compatible Webpages At a general level, Responsive Web Design (RWD) is a gap tool. Betterexperience RWD 6
- 7. NET NET: “RESPONSIVE DESIGN IS LIKE FOOD TRUCKS OF THE CULINARY WORLD.” -ME 7
- 8. New Approach to Web Emerges Responsive Web Design (RWD) We’re in the in the age of the “Splinternet”. Source: http://sony.com 8
- 9. “RESPONSIVE DESIGN IS A PHILOSOPHY, NOT A TECHNOLOGY”-PETER SHELDON, FORRESTER 9
- 10. The Business Case For Responsive Design Has eBusiness Leaders Intrigued: • A single code base for all web experiences. • A single site for all web experiences. • A reduction in maintenance risks and release cycle times. • A single “device-agnostic” URL structure. • A noncompeting SEO format. • A way to size up as well as down. • A consistent and optimized experience across all web- enabled touch points. • Responsive Means Back To One Web Team Again. RWD according to eSolutions Why Responsive Web Design? 10
- 11. “It ain’t easy being Cheesy”. • Developing responsive pages is time-consuming. • Older desktop browsers will throw a wrench in the works. • Performance is a not a given. • Your existing eCommerce or CMS platform may not play nice. • It requires a front-end rewrite. • Redesigning big sites will require cross-functional collaboration. • Developing unique experiences for a given touchpoint requires extra effort. RWD according to eSolutions Why RWD is NOT Good? 11
- 12. RWD according to eSolutions Core Concept #1 UX: Context - At a basic level, RWD assumes same context across all devices. Source: https://itservices.stanford.edu/service/web/mobile/about/terminology 12
- 13. RWD according to eSolutions Core Concept #2 Source: https://itservices.stanford.edu/service/web/mobile/about/terminology Design: Flexible Grids – One of the cornerstones of responsive design. Use CSS for positioning and for laying out margins and spacing, and for implementing various web layouts. Flexible Images & Text – Allows you to adapt your images or other media to load differently depending on the device, either by scaling or by using the CSS overflow property. 13
- 14. RWD according to eSolutions Core Concept #3 Source: https://itservices.stanford.edu/service/web/mobile/about/terminology Developers: Media Queries - Adapt content to devices that have portrait and landscape modes. 14
- 15. IS THE PATH TO RWD SUITABLE FOR YOU? 15
- 16. Forrester Recommendations: • Responsive design and HTML5 are mutually exclusive. • As an early adopter, there will be many challenges ahead. • If you proceed, you will probably need agency help. • The timing might not be right. • Is RWD a fit for the web globally or for each business unit? • It doesn’t replace the need for apps. • Is it suitable for “application heavy sites”? Is RWD right for you? 16
- 17. “IF YOU DON’T HAVE A MOBILE STRATEGY, YOU DON’T HAVE A FUTURE STRATEGY.”- ERIC SCHMIDT, EXECUTIVE CHAIRMAN OF GOOGLE 17
- 18. QUESTIONS? 18
Notes de l'éditeur
- Key TakeawaysA new approach To Web development emergesIn the age of the splinternet, eBusiness leaders are intrigued by responsive design, a new approach to web development intended to support optimized web experiences from a single front-end code base.Responsive design is a philosophy Not a TechnologyResponsive design is an approach to web development that forces user experiencedevelopers to design and optimize from the outset for all touchpoints they need tosupport, regardless of screen size or device orientation. It is enabled by technology,but the execution of a responsive site requires a new paradigm in the approach toweb development.The path To Responsive design isn’t Without obstaclesResponsive design simplifies many of the challenges that eBusiness teams face todaywith their web technology architecture. However, there are implications, challenges,and downsides eBusiness professionals must be aware of to ensure success.Source: Forrester Understanding Responsive Design by Peter sheldon, July 12, 2012 | Updated: July 16, 2012
- Key TakeawaysA new approach To Web development emergesIn the age of the splinternet, eBusiness leaders are intrigued by responsive design, a new approach to web development intended to support optimized web experiences from a single front-end code base.Responsive design is a philosophy Not a TechnologyResponsive design is an approach to web development that forces user experiencedevelopers to design and optimize from the outset for all touchpoints they need tosupport, regardless of screen size or device orientation. It is enabled by technology,but the execution of a responsive site requires a new paradigm in the approach toweb development.The path To Responsive design isn’t Without obstaclesResponsive design simplifies many of the challenges that eBusiness teams face todaywith their web technology architecture. However, there are implications, challenges,and downsides eBusiness professionals must be aware of to ensure success.Source: Forrester Understanding Responsive Design by Peter sheldon, July 12, 2012 | Updated: July 16, 2012
- Encourage participation by requesting everyone to put hands up first.For each question that doesn’t apply, participants may put hands down.
- Lead to correlation between Food and Web
- In its simplest form, Responsive Design is…implementation can make responsive more adaptable based on size, device and velocity contexts.
- a New approach To Web development emergesIn the age of the splinternet, eBusiness leaders must now support optimizedcommerce experiences across an increasingly complex landscape of web-enabledtouchpoints. It is no wonder that they are intrigued by responsive design, a newapproach to web development intended to support optimized web experiencesfrom a single front-end code base.
- The Business Case For Responsive Design Has eBusiness Leaders IntriguedToday, it is common to find that eBusiness leaders have either outsourced the developmentand maintenance of their mobile sites or created a standalone mobile development group.Both approaches require additional overhead and costs to support the Web on mobile devices.Additionally, with tablet ownership expected to reach 112.5 million US consumers by 2016, manyeBusiness teams are now focusing on the development of tablet-optimized sites (see Figure 2).However, the prospect of creating yet another code base and support structure for tablet devices fillsthese teams with fear as more frequent updates are required, costs threaten to escalate, and the risksassociated with maintaining a consistent and robust experience increase.1This is where responsive design plays its trump card: The ability to deliver optimized web experiencesacross any web-enabled touchpoint. It is an intriguing proposition for eBusiness leaders faced withsupporting eCommerce on desktops, notebooks, tablets, and smartphones as well as other emergingdevices like connected TVs and in-store kiosks. Responsive design simplifies many of the challengesthat eBusiness teams face today with their web technology architecture by providing:■ A single code base for all web experiences. At the heart of responsive design lies a newfeature in CSS3: “media queries.” Media queries empower web developers to apply a specificstyle-sheet to a page based on the screen size (sometimes referred to as a viewport) ofthe touchpoint. Subsequently, they can support multiple touchpoints, screen sizes, andorientations from a single set of web templates simply by developing the appropriate stylingconventions for each touchpoint via CSS3.■ A single site for all web experiences. With a single code base, IT must only create a single sitewith a single set of web infrastructure to support that site. No longer are separate sites requiredfor the desktop, tablet, and mobile experiences. Those eBusiness teams using enterprisecommerce platforms can simplify their site management configurations, while those withhomegrown solutions will likely be able to reduce their hosting and infrastructure expenses.■ A reduction in maintenance risks and release cycle times. The cost of regression testing witheach release increases when supporting multiple touchpoints.. For those eBusiness teams withseparate desktop, tablet, and mobile sites, the QA cycle required to push out a new release is amajor burden on both budget and pace of innovation. The actual device testing across differentdevices types, screen sizes, operating systems, and browser versions is the most costly part ofthis. With a responsive site, the code base is identical across all devices so the developers knowexactly where they made changes and where the problems are likely to be, lowering the risk.As a consequence, they can shift to simply “smoke testing” each release without the need toundergo comprehensive end-to-end functionality regression testing.Responsive Means Back To One Web Team AgainMany eBusiness leaders have divided the responsibilities of the Web and mobile into separate teams,putting developers with modern web development expertise (primarily HTML5 and CSS3) in themobile group. Some retailers like Staples have also added separate tablet-optimized sites to themix — tablet development tends to live together with mobile, as 93% of eBusiness leaders assignresponsibility for tablet development to their mobile team.2 Responsive design calls for a breakdownof these development silos, putting all web responsibility back into a single team. On a responsiveteam, there are still separate mobile, tablet, and desktop usability experts, but they work together tosupport a single team of web developers. In the long term, this centralization of web user experienceand development resources will create efficiencies and flexibility for eBusiness teams.Source: Forrester - Understanding Responsive Design 2012
- the path to a responsive site is not without obstaclesAlthough the business case for implementing a responsive site may seem compelling, eBusinessleaders must carefully consider if the approach is a fit for their long-term online strategy. They mustbe aware of the implications, challenges, and downsides of adopting a responsive web developmentphilosophy and make sure they have the budget, resources, and skill sets in place to ensure success.Top of mind to consider is that:
- RecommendationsRecognize that responsive design may not be right for you, yeT . . .eBusiness leaders we spoke with confessed that they have conflicting ambitions. On one hand, they wantto create unique web experiences that are optimally designed for specific touchpoints. However, there areclear cost and operational efficiencies to be gained from managing a single web code base that can serveall touchpoints. As eBusiness professionals evaluate if responsive design is a fit for their online commerceinfrastructure, they must keep in mind that:■ Responsive design and HTML5 are mutually exclusive. A popular misconception is that CSS3is part of and requires HTML5, but in fact, they are two separate technologies. Subsequently,it is possible to develop a responsive site without using HTML5; however, in reality, mostdevelopment teams are using the opportunity of building a responsive site to start experimentingwith the new features of both CSS3 and HTML5 in parallel.■ As an early adopter, there will be many challenges ahead. Responsive design is an emergingphilosophy that is part art and part science. While there are many good examples of responsivesites from firms such as The Boston Globe, Sony, and Starbucks, there are currently fewresponsive eCommerce sites, with Indochino, lot18, decide.com, and Perry Ellis among thefew live examples. This dynamic is set to change, however, as eBusiness teams with a history ofadopting emerging web technologies (think Ajax or HTML5) early on will likely find developinga responsive site is a rewarding challenge, but like with any emerging technology, there will behurdles for those who take the lead. As awareness of responsive design increases, eBusinessprofessionals should position themselves to take advantage of code libraries, developer tools,and best practices as these support options emerge from both commercial vendors and the opensource community.■ If you proceed, you will probably need agency help. Responsive design is an emergingscience that requires a completely different and focused approach to web development. Thelearning curve for user experience designers and web developers alike will be steep. Forresterrecommends that eBusiness leaders who make the decision to invest in a responsive site shouldseek outside expertise from an interactive web agency that has already honed these skills andcan demonstrate an existing portfolio of responsive sites they have developed. It may not benecessary to completely outsource the development of a responsive site, but augmenting your inhouseuser experience and development team with outside expertise will help reduce the risk of aresponsive implementation.■ The timing might not be right. Most eBusiness teams typically employ a three- or four-year siteredesign cycle. If you have recently been through a site re-launch, then tossing out this effort andgoing back to the drawing board to develop a responsive site may be too big a cost pill to swallowgiven your current capital budget and competing eBusiness technology investment priorities.Furthermore, some eBusiness teams may be locked into long-term contractual relationships withthe vendors that currently support their mCommerce and tablet sites. The ROI of implementinga responsive site may not make sense until these contracts approach their renewal window.Even at that point in time, building and maintaining your own responsive site may not be morecost-effective than using the existing web-proxy service or mobile commerce solution platformprovider you have today.■ It might not be a fit for you. Responsive design will be an attractive proposition for a midsizeretailer with limited budget and resources to create and support unique web experiences acrossmobile, tablets, and the desktop. However, large retailers or other eBusiness teams with thebudget, resources, and a mobile web strategy that calls for significant differentiation from thedesktop may prefer to stand their current course and continue to support separate team andcode bases for each of the touchpoints they support.■ It doesn’t replace the need for apps. Responsive design is for web experiences. It can providea means for eBusiness leaders to drive efficiencies in the development and maintenance oftheir web-based commerce experiences; however, it not does negate the need for apps nor willit play any significant role in simplifying the development of apps. Those eBusiness teams thathave developed hybrid apps may be able to leverage their responsive site to render web-basedcontent in their app (treating the app simply as another viewport or screen), thus subsequentlystreamlining the app development process, but they will still need to maintain a separate teamfocused on app development.
- In the future, replace Mobile with Tablet, TV, Automotive, etc.