Content Centric RWD - Kentico Connection 2013 - London
•Download as PPTX, PDF•
0 likes•1,376 views
How we used Kentico to build responsive sites by Ilesh Mistry The technical approach we take in building fully responsive websites using Kentico. To help communicate the results that we achieve by approaching responsive design in a content-centric manner we will demonstrate how two of our recent responsive websites were created.
Recommended
More Related Content
Similar to Content Centric RWD - Kentico Connection 2013 - London
Similar to Content Centric RWD - Kentico Connection 2013 - London (20)
More from Ilesh Mistry
More from Ilesh Mistry (10)
Recently uploaded
Recently uploaded (20)
Content Centric RWD - Kentico Connection 2013 - London
- 1. How we used Kentico to build responsive sites by Ilesh Mistry
- 2. • Ilesh Mistry • MMT Digital • Senior Kentico Developer • Blog - http://www.mmtdigital.co.uk/Ilesh-Mistry • Kentico Certified Developer
- 4. Presentation Summary • The technical approach we take when building fully responsive websites • Content Centric RWD • 2 recent projects
- 5. This used to be the web
- 6. These are today’s devices
- 7. Research
- 15. Mobile First!
- 17. Media Queries
- 23. Future?
- 24. MMT Responsive Images Web Part Mobile Desktop Coming soon! On the Kentico Marketplace http://www.mmtdigital.co.uk/KenticoConference2013/ResponsiveImages.htm
Editor's Notes
- Company based in Midlands and LondonWorking in Kentico since version 3Lots of things have changed and built a lot of sites
- I was looking at Twitter on Saturday and come across a tweet from Martin – Kentico CTOIf you guys can’t read what it says. Basically the recent Boston Kentico Connection had a higher number of attendees and on Twitter the mention of #KenticoConference and Martin has set London Kentico Connection a challenge to beat Boston mentions!So who is on Twitter and connected to the wifi now? Let’s do this. You can if you want follow me @ileshmistry and make sure you use #KenticoConnectionSo I am going to ask everyone to do this now. Then we can do this again at the end of the presentation?
- Slow connections – 56kDevelopers obsessing over size of sitesContent matteredMainly text-based sites.Small Screen sizesUNTIL 2007Fast connections – less concerned about data, bigger imagesFast computers – interactive experiencesStationary devicesLarge screensDesktop experienceLimited input devices – mouse, keyboardIndoors, comfortable seatingConnect wired Internet
- Vast array of connections – Fibre optic, Broadband, 3G, EdgeVast array of computer processorsMore and more devices on the moveVast array of screen sizesInput devices changing, users are using touch as well as mouse and keyboard.Different browsers on different devices (even on the same OS)Buying a laptop, touch screen
- Research shows that people are no longer just using PC’s.More people will use mobile phones than go on PC’s.Really have to consider what we are delivery to people
- Forget Back to the Future, think of the “Devices of the Future”You might think this is crazy but realistically this is something that could be in the future!Fridge, cars, fireplace…There is a blog post, if you are interested. Speak to me after the presentation.
- And they are expensive to build and maintain. Potetially different teams.Not great for SEO or social media. Or UX.In terms of Kentico… This approach would normally imply that we would need to create a separate installation for each site or separate items in the CMS Desk tree.We also know how difficult it would be to amend content and the different areas to amend for the different sites.So we have to think, are we targeting a particular web?
- Stephen Hay
- Possibly the worst thing to do.I said possibly the worst thing to do because, you could do this…Does not work on the mobile?
- “When using my mobile, I only want my customer to have a clear way of contacting us, showing you where we are and showing the important elements we want them to see. They don’t need to see everything. Especially as mobile users are on the move and we want them to use our site with ease!”3 Sizes? That’s it
- Both in terms of screen size, and device performance.How do we do this?We need to be content focused. Think about what we want to display, or even what we have to display. Approaching design this way with the client helps to focus them and ensure that we’re only displaying the crucial parts.THEN think about how we want to display it.Combine breakpoints with tweak points. Use a combination of adaptive and liquid. Think about text size.Media queries mean it is SMALL SCREEN OPTIMISED. Not necessarily mobile optimised. Ethan Marcotte refers to size and not devices because media queries are only part of the solution. Mobile first is better. Even it you don’t actually build the mobile first. BECAUSE IT FORCES YOU TO BE CONTENT FIRST FOCUSSED. Content – copy OR the TASK
- Can be used to illustrate how content would flow on devicesDesigners can use this to show. It’s free on Creative CloudGoogle Web Designer - GWD
- Begin with smallest, slowest devices.Build on experience to enhance.Agile approach.Let the content lead the breakpoints not the device. Content CentricEasiest way to do this is to resize the page look at it and see if it still works, if not, set a breakpoint and make it work. Look at some tools to help at the design stage in a bit
- Kentico Doc Types and Widgets include areas the clients can control what is shown on smaller devices and control the text
- Sass - Syntactically Awesome Stylesheetshttp://sass-lang.com/Sass makes CSS fun again. Sass is an extension of CSS3, adding nested rules, variables, mixins, selector inheritance, and more.Kentico using LESSThe content determines the media query breakpoints not the device!CSS is minified
- Mitch HedburgGraceful degradation for other devices. Build simple and then layer on top.
- Pan Macmillan – one of the largest book publishers in the UKMedia queries sprinkled on after the site has gone live is very tough. There is a lot of reverse engineering. Don’t be tempted to design and implement something that could be responsive in the future. It will cost a lot more to do it then!4 3 2 but not 1 – Content Centric
- Hodder EducationMobile first – content centric
- http://dev.w3.org/csswg/mediaqueries4/Resolution – Detects the density of the pixelsHOVER - Detects if device has hover capabilitiesPOINTER - Detects presence and accuracy of a pointing deviceLUMINOSITY - Detects ambient luminosity of environment the device is being used in
- I need to show how the Responsive Images Web Part works, get it on the Kentico Marketplace. And we need to promote it too . http://www.mmtdigital.co.uk/KenticoConference2013/ResponsiveImages.htmI am still working on this.Imagine New York, lovely place, we went there last year!!!Anyway Manhattan photo, panoramic Show exampleSingle HTTP RequestHelps with file size, images only loaded for the device requiredSo look out for this as it will be in the Kentico Marketplace soon!