How to build a mobile website with Drupal?

Oct 9, 20114 likes3,584 views

A modern website cannot exist anymore nowadays without a powerful mobile version compatible with various types of smartphones and mobile platforms. I will give guidelines about general web mobile design process and problems (content strategy, touch-screen issues…). I will present some special features of mobile devices that must be considered (screen sizes, viewport…). I will explain the main different possible approaches for Drupal mobile website building (dedicated modules, Responsive Web Design and CSS3 media queries, Cloud services...) and I will show some cases studies.

HOW TO BUILD A MOBILE
WEBSITE WITH DRUPAL ?

www.lektum.com

stéphane vial
stephane@lektum.com
twitter : atelierlektum
skype : lektum

IE6 COMPLIANT OR MOBILE
DEVICES COMPLIANT ?
It was expected for 2013, it happened in the USA in 2011.

A study published by Flurry last June shows that time spent on
the Internet via mobile applications for smartphones and tablets
exceeded this year time spend on the web via desktop
computers and laptops.

Web Apps VS Native Apps
Safari Mobile, Fennec, IE Mobile...
320x480 240x320
240x260 768x1024
640x960 Webkit
iOS 540 x 960
800 x 480 480 x 320 Android
320x420

iPhone 3G(S) iPhone 4
320x480 640x960 Case study

VIEWPORT
<meta name="viewport" content="width=device-width" />

CSS3 MEDIA QUERIES

<link rel="stylesheet" type="text/css" media="screen and
(max-device-width: 480px)" href="mini.css"/>

RESPONSIVE WEB DESIGN
by Ethan Marcotte
http://www.alistapart.com/articles/responsive-web-design
http://www.abookapart.com/products/responsive-web-design

#1. CLASSICAL METHOD
1. use Domain Access module to create a separate domain
name, ex. http://mobile.drupalcamp.lv

2. use Mobile Tools and Browscap modules to detect user agent
and redirect to the mobile domain

3. create a separate mobile theme + create dedicated contents
to your mobile version

4. It works, but it is double working time

#2. RESPONSIVE METHOD
1. use Omega theme, the “Responsive HTML5 base theme”,
absed on a ﬂuid 960 grid system

2. use Responsive Images module (using 2 images presets)

3. play with Viewport and CSS3 Media Queries

4. only one website for all devices, that’s the future !

#3. SAAS METHOD
1. use some online service like Mobify.com

2. Mobify provides a full integration for Drupal

3. just generate your mobile website and design it with CSS

4. fast and furious, but you are not independent

THANKS

www.lektum.com

stéphane vial
stephane@lektum.com
twitter : atelierlektum
skype : lektum

This document provides instructions for getting a Drupal website ready in 45 minutes by installing Drupal, selecting a theme, setting up basic website settings, blogs, forums, and comments. It outlines downloading and extracting Drupal, creating a database, enabling modules like blog and forum, configuring content types and permissions, and adding sample blog posts and forum topics. The goal is to have a functional website with blogs, forums, and commenting enabled in under an hour by following the provided steps.

Creating a website using Drupal 7 and APIDimitar Georgiev

��

The document discusses the development of a Drupal 7 website for UNLV Libraries that includes an About page explaining how the site was created and a Gallery page displaying images and metadata from the library's digital collection using a remote API. The developer learned Drupal 7 and used its module and theme capabilities along with PHP, JavaScript, CSS, and a MySQL database. A custom module was created to programmatically retrieve API data and display it on the Gallery page. The module was improved to handle different collection scenarios and make API requests asynchronously via AJAX. The site demonstrates the developer's skills with CMS platforms, APIs, and frontend technologies.

Amy honey 10.11.11 publicHoneypresentations

��

The document discusses Amy's Kitchen's efforts to win back UK supermarkets by redesigning their packaging. It outlines their ambition to bring Amy's brand and products to a wider UK audience and expand into European markets. It describes the challenges of adapting a US brand for the UK without losing integrity. It then details the process undertaken, including hiring a UK sales director and design agency, visiting Amy's facilities, and developing new packaging that reflected Amy's values while being suitable for UK customers and retailers. The results showed that the new design achieved their goal of representing the brand in a way that resonated in the UK market.

How to innovate faster and grow profitable brands pi seminar 2012Honeypresentations

��

The document discusses strategies for innovating and growing the Tyrrell's snack brand profitably. It recommends developing a strategic framework with clear objectives to guide new product development (NPD) within and adjacent to Tyrrell's core brand values. Potential routes for innovation discussed include new packaging, flavors, consumption occasions, target audiences, shrinks, stretches into related categories like sweet or savory snacks, and expanding geographically while maintaining brand values. The goal is to strengthen Tyrrell's position through NPD that drives distribution and retains its challenger brand status.

Beginner's guide to drupalmayank.grd

��

I) le big bangJosé Antonio Lupión Lorenzo

��

The Future of UI - How Mobile Design is Shaping The Web 2Sara Cannon

��

Web design is not an interactive brochure anymore. Smart mobile devices have forever changed the way we think and interact with websites. Now you have to consider an array of things you didn’t have to worry about before, such as HiDPI graphics, UI/UX patterns, touch target sizes, gestures, and managing expectations. All the while not losing track of what’s important: Content. We’re going to discuss the influence of mobile on design, trends, and implementation methods, as well as how touch is changing our lives. As designers and developers, we can benefit from learning about how mobile is changing the way we interact with websites, and what that means for the future of UI.

Cm i padwebdev_lunch_learnCritical Mass

��

This document provides an overview of developing apps for the iPad using web technologies like HTML5, CSS3, and JavaScript compared to developing native apps. It discusses key differences like the APIs available, performance, costs, updating processes, and more. It then provides best practices for web design on iPads, including considerations for touch targets, orientations, animations, images, and more. It also covers specific technologies like HTML5, CSS3, JavaScript, and backend development approaches. The overall message is that web development for iPads is very capable with modern techniques.

Web app조 용구

��

This document compares web apps and native apps for mobile devices. It discusses that web apps are developed with HTML, CSS and JavaScript and can be accessed through any web browser, while native apps are developed through platforms like iOS and Android using languages like Objective-C and Java. It also mentions that HTML5 aims to make web apps work more like native apps by adding features like offline storage, multimedia playback and geolocation to web browsers. Finally, it provides examples of how to make web apps for iPhone that utilize features like touch icons, viewport settings and JavaScript libraries to mimic the look and feel of native iPhone apps.

Web app조 용구

��

This document discusses web apps versus native apps for iPhone and other mobile platforms. It covers key differences like programming languages used, app distribution methods, and costs. It also explores using HTML5 to build web apps that work across different mobile platforms without needing separate native apps. Finally, it provides tips for optimizing web apps for iPhone, including viewport settings, touch icons, and using libraries like jQTouch to create an iPhone-like user interface.

Luke Wroblewski: Mobile FirstWebExpo

��

Responsive Web DesignRZasadzinski

��

The document discusses responsive web design (RWD), which allows websites to automatically adapt to different screen sizes through flexible grids and images, and media queries. RWD uses fluid layouts where elements are sized using relative units like percentages. It also leverages CSS3 media queries to apply different styling for various devices. The document provides an overview of RWD and examples of how to structure HTML and CSS for a responsive design that can accommodate diverse screen sizes. It also lists resources for learning more about this approach to building adaptive and mobile-friendly websites.

Mobile for web developersJon Arne Sæterås

��

This document provides an overview of mobile web development best practices. It discusses viewport settings and using media queries to optimize layout for different screen sizes. It also recommends techniques like inline images, caching, and local storage to improve performance on mobile. The document encourages front-end logic and feature detection over device detection. Overall, it offers guidance on designing responsive websites that provide a good user experience across diverse mobile platforms and browsers.

Google presentation: The Open Web goes mobilePeter-Paul Koch

��

The document discusses the challenges of developing websites for mobile browsers, including small memory, small displays, flaky browsers, and flaky connections. It proposes W3C Widgets as a solution, which are applications created with open web standards (HTML/CSS/JavaScript) that can run across different mobile platforms. W3C Widgets download only necessary data files rather than all code files on each page load. The document advocates for W3C Widgets as a cross-platform solution and calls on browser developers like Google to support them in addition to their own app systems by providing ways to associate widgets files with browsers and access to device APIs securely.

HTML5 로 iPhone App 만들기JungHyuk Kwon

��

This document discusses using HTML5 to build mobile web applications for the iPhone. It introduces HTML5, JavaScript, and frameworks like PhoneGap that allow wrapping web apps as native apps. Key elements of HTML5 for mobile discussed include offline support, canvas, video, geolocation, and advanced forms. UI libraries like JQTouch are presented for building touch-optimized interfaces. The document also covers PhoneGap APIs for native device access from a web app.

The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - RecifeCaridy Patino

��

Caridy Patiño presented on the challenges of building mobile HTML5 applications. Some key challenges include browser fragmentation across devices, network failures, and the need to optimize applications for different runtime environments and adapt them for varying screen sizes and features. Patiño advocated writing applications using a single language, JavaScript, and customizing output per runtime and context while adapting the UI per form factor and feature detection. The goal is to build flexible applications that can run on multiple platforms.

CSS3 Media Queries: Mobile Elixir or CSS Snake Oiljameswillweb

��

Building Mobile Websites with JoomlaTom Deryckere

��

(1) The document discusses making mobile websites, including trends in mobile technology, challenges in development, and examples of mobile sites built with content management systems like Drupal and Joomla. (2) Key challenges in mobile development include device fragmentation, usability issues like screen size and navigation, and optimizing content for smaller screens and slower connections. (3) The presentation provides examples of mobile sites built with Drupal and Joomla, and introduces new solutions like the Osmobi plugin and template to more easily build mobile sites within existing CMS platforms.

Mobile email - chasing contextAnna Yeaman

��

Jason.O Keefe.Genuitec.Presentation.FinalAjax Experience 2009

��

The document summarizes the state of mobile web development and the advantages of using HTML5. It discusses how HTML5, CSS3, and JavaScript now allow mobile web apps to have native-like features without needing native app development. It also presents examples of using geolocation, CSS3 effects, transformations, web databases and offline caching to build powerful mobile web experiences. Finally, it discusses hybrid frameworks that combine mobile web delivery with native capabilities and app store deployment.

I like i phone and android but know .netChris Love

��

This document discusses mobile application development options for developing applications that can run on both iOS and Android platforms using C#. It describes tools like MonoTouch and MonoDroid that allow building native iOS and Android applications using C# and .NET. It also discusses hybrid approaches like PhoneGap that use web technologies to build applications that can be deployed to both platforms. The document considers questions around enterprise deployment, security, data sharing and management of mobile applications.

Seminar Android - Pengenalan PhoneGapNur Hidayat

��

This document provides an overview of PhoneGap, a framework for building mobile apps using HTML, CSS, and JavaScript. It discusses how PhoneGap works, supported platforms, architecture, and front-end development. UI frameworks like jQuery Mobile and Sencha Touch are presented. It also covers single page apps using JavaScript libraries like AngularJS, BackboneJS, KnockoutJS and EmberJS. Monetization strategies for PhoneGap apps are briefly mentioned. The document concludes by encouraging selecting a problem to solve, finding the right solution, building a strong team, and focused execution to develop and launch a great mobile product.

Developing for MobilityScotty Logan

��

This document discusses designing websites for mobility. It provides an overview of mobile web usage statistics and trends. It also covers various design considerations for mobile websites such as responsive design, progressive enhancement, and performance optimization techniques like image resizing and testing on actual devices. The document promotes a mobile-first approach to design and outlines Stanford's mobile aware web project.

DDive- Giuseppe Grasso - mobile su LotusDominopoint - Italian Lotus User Group

��

This document discusses Lotus software on mobile devices and developing for mobile. It covers the history of Lotus mobile clients, including Lotus Traveler, Sametime and Connections. It also discusses using geolocation, forms and working offline in mobile development. Resources listed include the WURFL database for device detection, CSS media queries, and HTML5 features like geolocation, forms attributes and the cache manifest for offline work.

Making your site mobile-friendly - Standards-Next 12.06.2010Patrick Lauke

��

The document discusses making websites mobile-friendly by either doing nothing and relying on mobile browsers, creating a separate mobile site, or using a single adaptive site with fluid layouts, progressive enhancement, and CSS media queries to dynamically adjust the design for different screen sizes. It provides tips for optimizing sites for mobile such as minimizing data and server requests through image compression, JavaScript minification, and CSS combining.

Mobile migration talk by appSTUDIO at WordCamp Jerusalem 2010David Sigal

��

Cloud of everything Tech of the 21 century in AviationAssem mousa

��

SMART SENTRY CYBER THREAT INTELLIGENCE IN IIOTTanmaiArni

��

More Related Content

Similar to How to build a mobile website with Drupal? (20)

The Future of UI - How Mobile Design is Shaping The Web 2Sara Cannon

��

Cm i padwebdev_lunch_learnCritical Mass

��

Web app조 용구

��

Web app조 용구

��

Luke Wroblewski: Mobile FirstWebExpo

��

Responsive Web DesignRZasadzinski

��

Mobile for web developersJon Arne Sæterås

��

Google presentation: The Open Web goes mobilePeter-Paul Koch

��

HTML5 로 iPhone App 만들기JungHyuk Kwon

��

The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - RecifeCaridy Patino

��

CSS3 Media Queries: Mobile Elixir or CSS Snake Oiljameswillweb

��

Building Mobile Websites with JoomlaTom Deryckere

��

Mobile email - chasing contextAnna Yeaman

��

Jason.O Keefe.Genuitec.Presentation.FinalAjax Experience 2009

��

I like i phone and android but know .netChris Love

��

Seminar Android - Pengenalan PhoneGapNur Hidayat

��

Developing for MobilityScotty Logan

��

DDive- Giuseppe Grasso - mobile su LotusDominopoint - Italian Lotus User Group

��

Making your site mobile-friendly - Standards-Next 12.06.2010Patrick Lauke

��

Mobile migration talk by appSTUDIO at WordCamp Jerusalem 2010David Sigal

��

The Future of UI - How Mobile Design is Shaping The Web 2Sara Cannon

��

Cm i padwebdev_lunch_learnCritical Mass

��

Web app조 용구

��

Web app조 용구

��

Luke Wroblewski: Mobile FirstWebExpo

��

Responsive Web DesignRZasadzinski

��

Mobile for web developersJon Arne Sæterås

��

Google presentation: The Open Web goes mobilePeter-Paul Koch

��

HTML5 로 iPhone App 만들기JungHyuk Kwon

��

The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - RecifeCaridy Patino

��

CSS3 Media Queries: Mobile Elixir or CSS Snake Oiljameswillweb

��

Building Mobile Websites with JoomlaTom Deryckere

��

Mobile email - chasing contextAnna Yeaman

��

Jason.O Keefe.Genuitec.Presentation.FinalAjax Experience 2009

��

I like i phone and android but know .netChris Love

��

Seminar Android - Pengenalan PhoneGapNur Hidayat

��

Developing for MobilityScotty Logan

��

DDive- Giuseppe Grasso - mobile su LotusDominopoint - Italian Lotus User Group

��

Making your site mobile-friendly - Standards-Next 12.06.2010Patrick Lauke

��

Mobile migration talk by appSTUDIO at WordCamp Jerusalem 2010David Sigal

��

Recently uploaded (20)

Cloud of everything Tech of the 21 century in AviationAssem mousa

��

SMART SENTRY CYBER THREAT INTELLIGENCE IN IIOTTanmaiArni

��

DevNexus - Building 10x Development Organizations.pdfJustin Reock

��

Developer Experience is Dead! Long Live Developer Experience! In this keynote-style session, we’ll take a detailed, granular look at the barriers to productivity developers face today and modern approaches for removing them. 10x developers may be a myth, but 10x organizations are very real, as proven by the influential study performed in the 1980s, ‘The Coding War Games.’ Right now, here in early 2025, we seem to be experiencing YAPP (Yet Another Productivity Philosophy), and that philosophy is converging on developer experience. It seems that with every new method, we invent to deliver products, whether physical or virtual, we reinvent productivity philosophies to go alongside them. But which of these approaches works? DORA? SPACE? DevEx? What should we invest in and create urgency behind today so we don’t have the same discussion again in a decade?

Brave Browser Crack 1.45.133 Activated 2025kherorpacca00126

��

https://ncracked.com/7961-2/ Note: >> Please copy the link and paste it into Google New Tab now Download link Brave is a free Chromium browser developed for Win Downloads, macOS and Linux systems that allows users to browse the internet in a safer, faster and more secure way than its competition. Designed with security in mind, Brave automatically blocks ads and trackers which also makes it faster, As Brave naturally blocks unwanted content from appearing in your browser, it prevents these trackers and pop-ups from slowing Download your user experience. It's also designed in a way that strips Downloaden which data is being loaded each time you use it. Without these components

UiPath Document Understanding - Generative AI and Active learning capabilitiesDianaGray10

��

This session focus on Generative AI features and Active learning modern experience with Document understanding. Topics Covered: Overview of Document Understanding How Generative Annotation works? What is Generative Classification? How to use Generative Extraction activities? What is Generative Validation? How Active learning modern experience accelerate model training? Q/A ❓ If you have any questions or feedback, please refer to the "Women in Automation 2025" dedicated Forum thread. You can find there extra details and updates.

Inside Freshworks' Migration from Cassandra to ScyllaDB by Premkumar PatturajScyllaDB

��

Wondershare Filmora Crack 14.3.2.11147 Latestudkg888

��

https://ncracked.com/7961-2/ Note: >> Please copy the link and paste it into Google New Tab now Download link Free Download Wondershare Filmora 14.3.2.11147 Full Version - All-in-one home video editor to make a great video.Free Download Wondershare Filmora for Windows PC is an all-in-one home video editor with powerful functionality and a fully stacked feature set. Filmora has a simple drag-and-drop top interface, allowing you to be artistic with the story you want to create.Video Editing Simplified - Ignite Your Story. A powerful and intuitive video editing experience. Filmora 10 hash two new ways to edit: Action Cam Tool (Correct lens distortion, Clean up your audio, New speed controls) and Instant Cutter (Trim or merge clips quickly, Instant export).Filmora allows you to create projects in 4:3 or 16:9, so you can crop the videos or resize them to fit the size you want. This way, quickly converting a widescreen material to SD format is possible.

Q4_TLE-7-Lesson-6-Week-6.pptx 4th quarterMariaBarbaraPaglinaw

��

Backstage Software Templates for Java DevelopersMarkus Eisele

��

BoxLang JVM Language : The Future is DynamicOrtus Solutions, Corp

��

Just like life, our code must evolve to meet the demands of an ever-changing world. Adaptability is key in developing for the web, tablets, APIs, or serverless applications. Multi-runtime development is the future, and that future is dynamic. Enter BoxLang: Dynamic. Modular. Productive. (www.boxlang.io) BoxLang transforms development with its dynamic design, enabling developers to write expressive, functional code effortlessly. Its modular architecture ensures flexibility, allowing easy integration into your existing ecosystems. Interoperability at Its Core BoxLang boasts 100% interoperability with Java, seamlessly blending traditional and modern development practices. This opens up new possibilities for innovation and collaboration. Multi-Runtime Versatility From a compact 6MB OS binary to running on our pure Java web server, CommandBox, Jakarta EE, AWS Lambda, Microsoft Functions, WebAssembly, Android, and more, BoxLang is designed to adapt to any runtime environment. BoxLang combines modern features from CFML, Node, Ruby, Kotlin, Java, and Clojure with the familiarity of Java bytecode compilation. This makes it the go-to language for developers looking to the future while building a solid foundation. Empowering Creativity with IDE Tools Unlock your creative potential with powerful IDE tools designed for BoxLang, offering an intuitive development experience that streamlines your workflow. Join us as we redefine JVM development and step into the era of BoxLang. Welcome to the future.

Stronger Together: Combining Data Quality and Governance for Confident AI & A...Precisely

��

Revolutionizing-Government-Communication-The-OSWAN-Success-Storyssuser52ad5e

��

🌐 𝗢𝗦𝗪𝗔𝗡 𝗦𝘂𝗰𝗰𝗲𝘀𝘀 𝗦𝘁𝗼𝗿𝘆 🚀 𝗢𝗺𝗻𝗶𝗹𝗶𝗻𝗸 𝗧𝗲𝗰𝗵𝗻𝗼𝗹𝗼𝗴𝘆�� is proud to be a part of the 𝗢𝗱𝗶𝘀𝗵𝗮 𝗦𝘁𝗮𝘁𝗲 𝗪𝗶𝗱𝗲 𝗔𝗿𝗲𝗮 𝗡𝗲𝘁𝘄𝗼𝗿𝗸 (𝗢𝗦𝗪𝗔𝗡) success story! By delivering seamless, secure, and high-speed connectivity, OSWAN has revolutionized e-𝗚𝗼𝘃𝗲𝗿𝗻𝗮𝗻𝗰𝗲 𝗶𝗻 𝗢𝗱𝗶𝘀𝗵𝗮, enabling efficient communication between government departments and enhancing citizen services. Through our innovative solutions, 𝗢𝗺𝗻𝗶𝗹𝗶𝗻𝗸 𝗧𝗲𝗰𝗵𝗻𝗼𝗹𝗼𝗴𝘆 has contributed to making governance smarter, faster, and more transparent. This milestone reflects our commitment to driving digital transformation and empowering communities. 📡 𝗖𝗼𝗻𝗻𝗲𝗰𝘁𝗶𝗻𝗴 𝗢𝗱𝗶𝘀𝗵𝗮, 𝗘𝗺𝗽𝗼𝘄𝗲𝗿𝗶𝗻𝗴 𝗚𝗼𝘃𝗲𝗿𝗻𝗮𝗻𝗰𝗲!

MIND Revenue Release Quarter 4 2024 - Finacial PresentationMIND CTI

��

Computational Photography: How Technology is Changing Way We Capture the WorldHusseinMalikMammadli

��

📸 Computational Photography (Computer Vision/Image): How Technology is Changing the Way We Capture the World Heç düşünmüsünüzmü, müasir smartfonlar və kameralar necə bu qədər gözəl görüntülər yaradır? Bunun sirri Computational Fotoqrafiyasında(Computer Vision/Imaging) gizlidir—şəkilləri çəkmə və emal etmə üsulumuzu təkmilləşdirən, kompüter elmi ilə fotoqrafiyanın inqilabi birləşməsi.

The Future of Repair: Transparent and Incremental by Botond DénesScyllaDB

��

Regularly run repairs are essential to keep clusters healthy, yet having a good repair schedule is more challenging than it should be. Repairs often take a long time, preventing running them often. This has an impact on data consistency and also limits the usefulness of the new repair based tombstone garbage collection. We want to address these challenges by making repairs incremental and allowing for automatic repair scheduling, without relying on external tools.

UiPath Automation Developer Associate Training Series 2025 - Session 1DianaGray10

��

Welcome to UiPath Automation Developer Associate Training Series 2025 - Session 1. In this session, we will cover the following topics: Introduction to RPA & UiPath Studio Overview of RPA and its applications Introduction to UiPath Studio Variables & Data Types Control Flows You are requested to finish the following self-paced training for this session: Variables, Constants and Arguments in Studio 2 modules - 1h 30m - https://academy.uipath.com/courses/variables-constants-and-arguments-in-studio Control Flow in Studio 2 modules - 2h 15m - https:/academy.uipath.com/courses/control-flow-in-studio ⁉️ For any questions you may have, please use the dedicated Forum thread. You can tag the hosts and mentors directly and they will reply as soon as possible.

Replacing RocksDB with ScyllaDB in Kafka Streams by Almog GavraScyllaDB

��

UiPath Agentic Automation Capabilities and OpportunitiesDianaGray10

��

Learn what UiPath Agentic Automation capabilities are and how you can empower your agents with dynamic decision making. In this session we will cover these topics: What do we mean by Agents Components of Agents Agentic Automation capabilities What Agentic automation delivers and AI Tools Identifying Agent opportunities ❓ If you have any questions or feedback, please refer to the "Women in Automation 2025" dedicated Forum thread. You can find there extra details and updates.

L01 Introduction to Nanoindentation - What is hardnessRostislavDaniel

��

Future-Proof Your Career with AI OptionsDianaGray10

��

Learn about the difference between automation, AI and agentic and ways you can harness these to further your career. In this session you will learn: Introduction to automation, AI, agentic Trends in the marketplace Take advantage of UiPath training and certification In demand skills needed to strategically position yourself to stay ahead ❓ If you have any questions or feedback, please refer to the "Women in Automation 2025" dedicated Forum thread. You can find there extra details and updates.

Cloud of everything Tech of the 21 century in AviationAssem mousa

��

SMART SENTRY CYBER THREAT INTELLIGENCE IN IIOTTanmaiArni

��

DevNexus - Building 10x Development Organizations.pdfJustin Reock

��

Brave Browser Crack 1.45.133 Activated 2025kherorpacca00126

��

UiPath Document Understanding - Generative AI and Active learning capabilitiesDianaGray10

��

Inside Freshworks' Migration from Cassandra to ScyllaDB by Premkumar PatturajScyllaDB

��

Wondershare Filmora Crack 14.3.2.11147 Latestudkg888

��

Q4_TLE-7-Lesson-6-Week-6.pptx 4th quarterMariaBarbaraPaglinaw

��

Backstage Software Templates for Java DevelopersMarkus Eisele

��

BoxLang JVM Language : The Future is DynamicOrtus Solutions, Corp

��

Stronger Together: Combining Data Quality and Governance for Confident AI & A...Precisely

��

Revolutionizing-Government-Communication-The-OSWAN-Success-Storyssuser52ad5e

��

MIND Revenue Release Quarter 4 2024 - Finacial PresentationMIND CTI

��

Computational Photography: How Technology is Changing Way We Capture the WorldHusseinMalikMammadli

��

The Future of Repair: Transparent and Incremental by Botond DénesScyllaDB

��

UiPath Automation Developer Associate Training Series 2025 - Session 1DianaGray10

��

Replacing RocksDB with ScyllaDB in Kafka Streams by Almog GavraScyllaDB

��

UiPath Agentic Automation Capabilities and OpportunitiesDianaGray10

��

L01 Introduction to Nanoindentation - What is hardnessRostislavDaniel

��

Future-Proof Your Career with AI OptionsDianaGray10

��

How to build a mobile website with Drupal?

1. HOW TO BUILD A MOBILE WEBSITE WITH DRUPAL ? www.lektum.com stéphane vial stephane@lektum.com twitter : atelierlektum skype : lektum

2. NEW PROBLEMS

3. IE6 COMPLIANT OR MOBILE DEVICES COMPLIANT ? It was expected for 2013, it happened in the USA in 2011. A study published by Flurry last June shows that time spent on the Internet via mobile applications for smartphones and tablets exceeded this year time spend on the web via desktop computers and laptops.

4. Web Apps VS Native Apps Safari Mobile, Fennec, IE Mobile... 320x480 240x320 240x260 768x1024 640x960 Webkit iOS 540 x 960 800 x 480 480 x 320 Android 320x420

5. iPhone 3G(S) iPhone 4 320x480 640x960 Case study

6. iPad 768x1024

7. NEW SOLUTIONS

8. VIEWPORT <meta name="viewport" content="width=device-width" />

9. CSS3 MEDIA QUERIES <link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href="mini.css"/>

10. RESPONSIVE WEB DESIGN by Ethan Marcotte http://www.alistapart.com/articles/responsive-web-design http://www.abookapart.com/products/responsive-web-design

11. RESPONSIVE WEB DESIGN a french demo

12. 3 DRUPAL METHODS

13. #1. CLASSICAL METHOD 1. use Domain Access module to create a separate domain name, ex. http://mobile.drupalcamp.lv 2. use Mobile Tools and Browscap modules to detect user agent and redirect to the mobile domain 3. create a separate mobile theme + create dedicated contents to your mobile version 4. It works, but it is double working time

14. #2. RESPONSIVE METHOD 1. use Omega theme, the “Responsive HTML5 base theme”, absed on a ﬂuid 960 grid system 2. use Responsive Images module (using 2 images presets) 3. play with Viewport and CSS3 Media Queries 4. only one website for all devices, that’s the future !

15. OMEGA THEME IN ACTION

16. RESPONSIVE IMAGES DEMO

17. #3. SAAS METHOD 1. use some online service like Mobify.com 2. Mobify provides a full integration for Drupal 3. just generate your mobile website and design it with CSS 4. fast and furious, but you are not independent

18. MOBIFY QUICK DEMO

19. THANKS www.lektum.com stéphane vial stephane@lektum.com twitter : atelierlektum skype : lektum

Editor's Notes

#2: \n
#3: \n
#4: \n
#5: \n
#6: \n
#7: \n
#8: \n
#9: \n
#10: \n
#11: \n
#12: \n
#13: \n
#14: \n
#15: \n
#16: \n
#17: \n
#18: \n
#19: \n
#20: \n

�ݺ�ߣ

How to build a mobile website with Drupal?

Recommended

More Related Content

Similar to How to build a mobile website with Drupal? (20)

Recently uploaded (20)

How to build a mobile website with Drupal?

Editor's Notes