Siti web per device multipli by Dino esposito, Francesco Esposito

•Download as PPTX, PDF•

0 likes•823 views

This document discusses strategies for developing websites that can be accessed across multiple devices. It notes that 99% of websites are not optimized for mobile access and that responsive web design is a common approach using CSS media queries and proportional sizing. A second approach discussed is responsive web coding, which uses multiple views tailored to specific devices rather than just CSS. It recommends starting with a mobile-first approach and considering native apps later. The document demonstrates examples of CSS media queries and server-side device detection using WURFL to optimize content for different devices. It concludes that responsive design and server-side device detection are important approaches for the new "device UX" landscape.

Technology Design

Siti web per device multipli
Dino Esposito
Francesco Esposito
Crionet http://www.e-tennis.net

Mobile and the web
99% web sites aren’t optimized for mobile
99% of the above believe they can fix any site
just with a bit of smart CSS
99% of the above (plus 99% of designers) are
concerned about adapting mobile sites to
iPhone

Capabilities of CSS
What can you really
achieve with CSS?

Your take?
Just rendering on mobile
vs.
Adapting for mobile

Choice or decision
Is it simply a matter of
choice?
Is it rather a matter of
decision?

Basics of a mobile strategy
“Lowest Common Denominator” approach
 Get a mobile site first
 Look at native apps as a way to improve

Devices. Devices. Devices.
 PC is a device.
 Tablet is a device.
 Smartphone is a device.
 TV is a device.
 Raspberry PI is a device.
 :

First-aid option: Responsive web design
One-site-fits-all
Grid based layout
Proportional sizes
Dynamic images
Visual breakpoints
CSS media queries (size & orientation)

Second-pass option: Responsive web coding
One-site-serves-all
Multiple views (instead of CSS)
Specific use-cases & workflows
Chances of real optimization (bandwidth)
Server-side UA sniffing
Server-side feature detection

http://www.easycourt.net/contosoEN
Courtesy of e-tennis.net
User: federer | Pswd: fede123

The bottom line
Mobile UX is now obsolete.
Device UX is the new frontier.
 Responsive web design
 Server-side WURFL
 RESS (a mix of the two)

What's hot

Mobile First and Tablet-Centric Design

Jeff Wisniewski

Responsive Web Design Analysis

Gamze Dede Pala

Best Mobile UX Trends 2019

Vani Jain

1. What Responsive Web Design is? Why Responsive Web Design is important for small and mid-sized businesses? - Mobile Traffic, Increased mobile internet usage, mobile users experiences. 2. Why should this consider? Easy to manage and optimize your website 3. Pros and Cons of RWD - How would you deal with your website from a different kind of devices? People access your website's SEO. An issue with taking longer to load. 4. Examples of Responsive Web Design in different industries. Healthcare, Non-profits, Education, Food and Drink, Retail, Publishing, and Creative. 5. Conclusion - With an expectation that mobile sales will overtake desktop sales, you need to focus on how to make your website friendly on the mobile. Consumers are more likely to consider it is a good that a company has a positive viewing experience.

The ins and outs of Responsive Web Design

meijun_corp

Why mobile is important

Adam Lee

Web accessibility and section 508 guideline

Yi(Vincent) Cao

Designing Great Mobile Apps

Chris Griffith

Mader henry week4_presentation

Henry Mader

What's hot (8)

Mobile First and Tablet-Centric Design

Responsive Web Design Analysis

Best Mobile UX Trends 2019

The ins and outs of Responsive Web Design

Why mobile is important

Web accessibility and section 508 guideline

Designing Great Mobile Apps

Mader henry week4_presentation

Viewers also liked

Orbital fat prolapse in a persian cat.

papawo

Slide 2 design n concept

Roslina Muda

12° giornata e classifica

Jessica Marcatili

Save The Whales!

table9

La nueva terminal aérea de Barcelona

Ernesto Olivares

Cinco minutos en el futuro

LaNatha

REGOLAMENTO FANTACALCIO

gigiolo84

Ivan Ortenzi UCG Welcome U 2014

Ivan Ortenzi

Viewers also liked (8)

Orbital fat prolapse in a persian cat.

Slide 2 design n concept

12° giornata e classifica

Save The Whales!

La nueva terminal aérea de Barcelona

Cinco minutos en el futuro

REGOLAMENTO FANTACALCIO

Ivan Ortenzi UCG Welcome U 2014

Similar to Siti web per device multipli by Dino esposito, Francesco Esposito

Web topic 25 mobile optimized website

CK Yang

Dave has interviewed numerous recruitment leaders from around the world, mobile strategic experts, authors, founders and market analysts which are made available online through his 'Mobile in Action' videocast. In this fast pace session Dave will share a summary of learnings from the people he has talked to giving you example case studies, strategic advice and gotcha's to watch out for. The objective is to deliver information you need to take your next steps in a world filling up of handheld web devices (smartphones & tablets). If you are on the mobile journey already, there will an opportunity for a few to share their stories with the audience and Dave.

#MobileInAction - iRecruitExpo June 2013, Amsterdam

Dave Martin

Responsive design must have or nice to have

Yossi Amar

Responsive Design: The "other" way of doing mobile sites.

meetmicah

Responsive website

borjanshoes

What Is Responsive website

borjanshoes

Get Mobile | Mobile & Digital Marketing | Crystal Olig | Upward | Oxiem

Lessing-Flynn

The ConclusionFinally, the most popular design approach is responsive web design. RWD is a web development method that enables dynamic changes to the look and feel of a website. If Responsive Web Designs the screen and orientation of the device used to view it are different. When it comes to developing for a wide range of devices, responsive web design is one option to consider. Because of this, the designers at SEO Expate Bangladesh Ltd. construct 100% mobile-friendly and flexible websites. A site’s layout can be specified using RWD breakpoints. Creating a comprehensive guide on responsive web design in 5000 words is a challenging task, but I can provide you with an in-depth overview and outline to get you started. Responsive web design is a crucial aspect of modern web development, ensuring that websites look and function well on various devices and screen sizes.

Responsive Web Designs.pdf

Jiniya Bipasha

CSS3 Media Queries: Mobile Elixir or CSS Snake Oil

jameswillweb

Designing for mobile

Thomas Garrison

Website redesign

OptfinITy

Responsive & Adaptive Design @mLearnCon15 Nick Floro

Nick Floro

Responsive Web Design vs Mobile Web App

Pamela Ireri

Responsive Design

Cindy Royal

Responsive Design

Cindy Royal

Responsive vs. adaptive vs. device-specific: which one is best?

Catalyst

How does your SharePoint site handle the growing number of devices that are or will be soon accessing your site? Traditional branding for SharePoint has its shortcomings with modern devices. In this session we will review available options to enhance SharePoint and create a unified experience across modern internet devices with an in-depth review of current trends and how to utilize them in your current or upcoming SharePoint project. We will finish by considering how this might be impacted by SharePoint 2013. Session Take-aways: As an introduction session to modern Internet devices and how they affect the presentation of a SharePoint 2010 site, each attendee should leave the session with a solid understanding of how different devices and viewports treat SharePoint including the good and the bad. Further they will have been exposed to multiple techniques and methods in which SharePoint can be modified to enhance SharePoint for modern Internet devices including tablets and smartphones with a look at the benefits and shortcomings of each method. After a review of SharePoint 2013's addition of devices channels, attendees will also learn how to leverage this new understanding of Internet devices with device channels for a truly usable, maintainable SharePoint branding initiative moving forward. Highlights: Learn the shortcomings of SharePoint's interface with modern Internet devices. See modern techniques Branding experts use to solve the mobile problems. Find out how to leverage this knowledge in SharePoint 2010 and SharePoint 2013.

Beyond Branding SharePoint - SharePoint and Today's Web

Eric Overfield

Responsive Web Design, as laid out by Ethan Marcotte, is about a whole lot more than just media queries. I look at the three elements of responsive web design, statistics about mobile web browsing, and offer tips on how to best design sites for responsiveness. N.B.: Several slides are lifted wholesale from Bryan Rieger's excellent "Rethinking the Mobile Web" presentation, be sure to check it out!

Beyond Responsive Web Design

arborwebsolutions

Two approaches to RWD: Pure & Hybrid. Brendan Falkowski

MeetMagentoNY2014

As a leading Web Development agency in Pakistan. We understand the importance of creating mobile-friendly websites in today’s world where more and more people are using mobile devices to access the web. Our team specializes in responsive design, ensuring that all of the websites we develop function seamlessly and provide an optimal user experience across a wide range of devices and screen sizes.

10 Things You Must Need To Know About Responsive Design.pdf

AD Techlogix - Website & Mobile App Development Company

Similar to Siti web per device multipli by Dino esposito, Francesco Esposito (20)

Web topic 25 mobile optimized website

#MobileInAction - iRecruitExpo June 2013, Amsterdam

Responsive design must have or nice to have

Responsive Design: The "other" way of doing mobile sites.

Responsive website

What Is Responsive website

Get Mobile | Mobile & Digital Marketing | Crystal Olig | Upward | Oxiem

Responsive Web Designs.pdf

CSS3 Media Queries: Mobile Elixir or CSS Snake Oil

Designing for mobile

Website redesign

Responsive & Adaptive Design @mLearnCon15 Nick Floro

Responsive Web Design vs Mobile Web App

Responsive Design

Responsive vs. adaptive vs. device-specific: which one is best?

Beyond Branding SharePoint - SharePoint and Today's Web

Beyond Responsive Web Design

Two approaches to RWD: Pure & Hybrid. Brendan Falkowski

10 Things You Must Need To Know About Responsive Design.pdf

More from Codemotion

Fuzz-testing: A hacker's approach to making your code more secure | Pascal Ze...

Codemotion

Pompili - From hero to_zero: The FatalNoise neverending story

Codemotion

Pastore - Commodore 65 - La storia

Codemotion

Rivivere l'ebbrezza di progettare un vecchio computer o una consolle da bar è oggi possibile sfruttando le FPGA, ovvero logiche programmabili che consentono a chiunque di progettare il proprio hardware o di ricrearne uno del passato. In questa sessione si racconta come dal reverse engineering dell'hardware di vecchie glorie come il Commodore 64 e lo ZX Spectrum sia stato possibile farle rivivere attraverso tecnologie oggi alla portata di tutti.

Pennisi - Essere Richard Altwasser

Codemotion

There's a lot of talk about blockchain, but how does the technology behind it actually work? For developers, getting some hands-on experience is the fastest way to get familiair with new technologies. So let's build a blockchain, then! In this session, we're going to build one in plain old Java, and have it working in 40 minutes. We'll cover key concepts of a blockchain: transactions, blocks, mining, proof-of-work, and reaching consensus in the blockchain network. After this session, you'll have a better understanding of core aspects of blockchain technology.

Michel Schudel - Let's build a blockchain... in 40 minutes! - Codemotion Amst...

Codemotion

When was the last time you were truly lost? Thanks to the maps and location technology in our phones, a whole generation has now grown up in a world where getting lost is truly a thing of the past. Location technology goes far beyond maps in the palm of our hand, however. In this talk, we will explore how a ridesharing app works. How do we discover our destination?How do we find the closest driver? How do we display this information on a map? How do we find the best route?To answer these questions,we will be learning about a variety of location APIs, including Maps, Positioning, Geocoding etc.

Richard Süselbeck - Building your own ride share app - Codemotion Amsterdam 2019

Codemotion

Eward Driehuis, SecureLink's research chief, will guide you through the bumpy ride we call the cyber threat landscape. As the industry has over a decade of experience of dealing with increasingly sophisticated attacks, you might be surprised to hear more attacks slip through the cracks than ever. From analyzing 20.000 of them in 2018, backed by a quarter of a million security events and over ten trillion data points, Eward will outline why this happens, how attacks are changing, and why it doesn't matter how neatly or securely you code.

Eward Driehuis - What we learned from 20.000 attacks - Codemotion Amsterdam 2019

Codemotion

IoT revolution is ended. Thanks to hardware improvement, building an intelligent ecosystem is easier than never before for both startups and large-scale enterprises. The real challenge is now to connect, process, store and analyze data: in the cloud, but also, at the edge. We’ll give a quick look on frameworks that aggregate dispersed devices data into a single global optimized system allowing to improve operational efficiency, to predict maintenance, to track asset in real-time, to secure cloud-connected devices and much more.

Francesco Baldassarri - Deliver Data at Scale - Codemotion Amsterdam 2019 -

Codemotion

What if Virtual Reality glasses could transform your environment into a three-dimensional work of art in realtime in the style of a painting from Van Gogh? One of the many interesting developments in the field of Deep Learning is the so called "Style Transfer". It describes a possibility to create a patchwork (or pastiche) from two images. While one of these images defines the the artistic style of the result picture, the other one is used for extracting the image content. A team from TNG Technology Consulting managed to build an AI showcase using OpenCV and Tensorflow to realize such goggles.

Martin Förtsch, Thomas Endres - Stereoscopic Style Transfer AI - Codemotion A...

Codemotion

Blockchain (and Cryptocurrency) is an evolution of 20-year old research from scientists like Chaum, Lamport, and Castro & Liskov. Due to the current hype, it's hard to distinguish beneficial aspects of the technology from a desire for a "silver bullet" for device security, verifiable logistics, or "saving democracy". The problem: blockchain introduces new security challenges - and blind adoption without understanding reduces overall security. In this talk, Melanie Rieback and Klaus Kursawe explain the pitfalls and limits of blockchain, so you can avoid making your applications LESS secure.

Melanie Rieback, Klaus Kursawe - Blockchain Security: Melting the "Silver Bul...

Codemotion

Networking is a core part of computing in the digital world we inhabit. But, how well do you know how it works? Do you understand all the moving parts of the OSI stack inside your computer, and how the network is actually put together? How can this ever work? This guided safari of layers, standards, protocols, and happenstance will bring us close to the copper wire, and up through the layers of CDMA/CD, ARP, routing and HTTP. We will make a few excursions through patchworks that still work forty years later, and cleverly designed mechanisms that show that simplicity is the only way to last.

Angelo van der Sijpt - How well do you know your network stack? - Codemotion ...

Codemotion

Performance tests are not only an important instrument for understanding a system and its runtime environment. It is also essential in order to check stability and scalability – non-functional requirements that might be decisive for success. But won't my cloud hosting service scale for me as long as I can afford it? Yes, but… It only operates and scales resources. It won't automatically make your system fast, stable and scalable. This talk shows how such and comparable questions can be clarified with performance tests and how DevOps teams benefit from regular test practise.

Lars Wolff - Performance Testing for DevOps in the Cloud - Codemotion Amsterd...

Codemotion

Sascha will demonstrate the opportunities and challenges of Conversational AI learned from the practice. Both Technology and User Experience will be covered introducing a process finding micro-moments, writing happy paths, gathering intents, designing the conversational flow, and finally publishing on almost all channels including Voice Services and Chatbots. Valuable for enterprises, developers, and designers. All live on stage in just minutes and with almost no code.

Sascha Wolter - Conversational AI Demystified - Codemotion Amsterdam 2019

Codemotion

A key challenge we face at Pacmed is quickly calibrating and deploying our tools for clinical decision support in different hospitals, where data formats may vary greatly. Using Intensive Care Units as a case study, I’ll delve into our scalable Python pipeline, which leverages Pandas’ split-apply-combine approach to perform complex feature engineering and automatic quality checks on large time-varying data, e.g. vital signs. I’ll show how we use the resulting flexible and interpretable dataframes to quickly (re)train our models to predict mortality, discharge, and medical complications.

Michele Tonutti - Scaling is caring - Codemotion Amsterdam 2019

Codemotion

Coolblue is a proud Dutch company, with a large internal development department; one that truly takes CI/CD to heart. Empowerment through automation is at the heart of these development teams, and with more than 1000 deployments a day, we think it's working out quite well. In this session, Pat Hermens (a Development Managers) will step you through what enables us to move so quickly, which tools we use, and most importantly, the mindset that is required to enable development teams to deliver at such a rapid pace.

Pat Hermens - From 100 to 1,000+ deployments a day - Codemotion Amsterdam 2019

Codemotion

Quantum computers can use all of the possible pathways generated by quantum decisions to solve problems that will forever remain intractable to classical compute power. As the mega players vie for quantum supremacy and Rigetti announces its $1M "quantum advantage" prize, we live in exciting times. IBM-Q and Microsoft Q# are two ways you can learn to program quantum computers so that you're ready when the quantum revolution comes. I'll demonstrate some quantum solutions to problems that will forever be out of reach of classical, including organic chemistry and large number factorisation.

James Birnie - Using Many Worlds of Compute Power with Quantum - Codemotion A...

Codemotion

Chinese food exploded across America in the early 20th century, rapidly adapting to local tastes while also spreading like wildfire. How was it able to spread so fast? The GY6 is a family of scooter engines that has achieved near total ubiquity in Europe. It is reliable and cheap to manufacture, and it's made in factories across China. How are these factories able to remain afloat? Chinese-American food and the GY6 are both riveting studies in product-market fit, and both are the product of a distributed open source-like development model. What lessons can we learn for open source software?

Don Goodman-Wilson - Chinese food, motor scooters, and open source developmen...

Codemotion

Pieter Omvlee - The story behind Sketch - Codemotion Amsterdam 2019

Codemotion

Would you fly in a plane designed by a craftsman or would you prefer your aircraft to be designed by engineers? We are learning that science and empiricism works in software development, maybe now is the time to redefine what “Software Engineering” really means. Software isn't bridge-building, it is not car or aircraft development either, but then neither is Chemical Engineering. Engineering is different in different disciplines. Maybe it is time for us to begin thinking about retrieving the term "Software Engineering" maybe it is time to define what our "Engineering" discipline should be.

Dave Farley - Taking Back “Software Engineering” - Codemotion Amsterdam 2019

Codemotion

What is the job of a CTO and how does it change as a startup grows in size and scale? As a CTO, where should you spend your focus? As an engineer aspiring to be a CTO, what skills should you pursue? In this inspiring and personal talk, I describe my journey from early Red Hat engineer to CTO at Bloomon. I will share my view on what it means to be a CTO, and ultimately answer the question: Should the CTO be coding?

Joshua Hoffman - Should the CTO be Coding? - Codemotion Amsterdam 2019

Codemotion

More from Codemotion (20)