Build a responsive website with drupal

•

4 gostaram•3,402 visualizações

Today's approach to website development has moved to responsive designs. Doing the same is fun with Drupal's Omega theme! Get started!

Tecnologia Design

Build a Responsive Website
with Drupal

By Shyamala
rajaram.shyamala@gmail.com

www.unimity.com

Presentation Path
What are Responsive websites?
● Websites for mobile past, present & future

● Flexible Grids

● Flexible images

● Css Media queries

● What is Mobile first methodology?

● Break Points

● Responsive vs Adaptive

● Drupal 8 & mobile initiative

www.unimity.com

Website for Mobile - Past

MOBILE DESKTOP

m.site.com www.site.com

DETECT &
REDIRECT

Request

www.unimity.com

Website for Mobile - Present &
Future

www.unimity.com

Flexible Grids
Use percentages: allow grow & shrink of web
pages

Target / Context = results
(5grids) / (8grids) = 62.5%
OR
(600px) / (960px) = 62.5%

www.unimity.com

Flexible Images - sizes

www.unimity.com

Flexible Images - modules
Use max-width to contain images within the
grid

Drupal modules that support flexible images
include
● responsive_image: http://drupal.

org/project/responsive_images
● fasterimages: http://drupal.org/project/fasterimages
● css_emimage: http://drupal.org/project/css_emimage

www.unimity.com

CSS3 Media Queries
Not only allows you to target certain devices classes,
but can actually inspect the physical characteristics of
device rendering the work
New media features, including max-width, device-width,
orientation and color

www.unimity.com

Apple - auto-adjust feature
Use of view-port metatags

www.unimity.com

Mobile first appraoch
Ensure the site works on all devices,
devices that do not support Media
queries: take a MOBILE FIRST
APPROACH!

global.css -> mobile
reponsive.css -> media queries

www.unimity.com

Break Points
1200px : Larger screens
1024px : Smaller desktops & Larger tablets
Landscape
768px : Portrait for Larger Tablets,
Landscape for smaller tablets
600px : Portrait & Landscape for smaller
layouts & Kindle
480px : Landscape mode for smart phones
320px : Portrait mode for smart phones

www.unimity.com

Responsive vs Adaptive design

"Adaptive web design" refers more to the
secondary and less fluid approach of
adapting existing web designs, or
designing for controlled adaptation as
opposed to a truly fluid and flexible
"Responsive" design.

www.unimity.com

Drupal Themes
● omega: http://drupal.org/project/omega

● zen: http://drupal.org/project/zen

● adaptive: http://drupal.org/project/adaptivetheme

● terrain: http://drupal.org/project/terrain

www.unimity.com

Drupal 8 & Responsive Designs
● Issue queues tagged as mobile in
Drupal 8

● For info on Drupal 8 mobile initiative:
http://groups.drupal.org/node/207248

www.unimity.com

Mais conteúdo relacionado

Semelhante a Build a responsive website with drupal

Responsive Web Design in Cascade Server, by Chris Cox of BarkleyREI

hannonhill

The Omega Drupal 7 Base Theme is a highly configurable HTML5/960 grid base theme that uses built-in media queries to make the site responsive. Each zone (group of regions) can be configured for content first layouts, that resize and rearrange themselves depending on the screen size of the user's device. The presentation will walk-through the theory behind Omega's mobile-first approach, how to use the many configuration options on the theme settings page and pitfalls to avoid. Additional Resources, Tips & Tricks & How-to can be found here: http://www.kendallsdesign.com/blog/omega-theme-responsive-design-resources

Dig into the omega theme

DrupalcampAtlanta2012

How to Project-Manage and Implement a Responsive Website

Jj Jurgens

The Rise Of Tablets: Responsive Web Design is in your future

Rick Wilson

Your web site needs to be accessible and usable for everyone even as the number of devices, platforms and browsers that are used to access it continue to expand every day. Incorporating a responsive web design represents a fundamental shift in how web sites are built now – and into the future. Join Rick Wilson, President of Miva Merchant as he discusses the explosive growth in tablets and how you need to be making changes to your site now along with things you need to consider as you redesign your ecommerce web site in the future.

The rise of tablets how responsive web design is in your future

Internet Merchants Association

Responsive design

DevelopmentArc LLC

Responsive UX - One size fits all @BigDesign conference #BigD12

touchtitans

Reponsive web design (HTML5 + css3)

Sandip Jadhav

reponsive-web-design.pptx

adarshgupta131049

reponsive-web-design.pptx

adarshgupta131049

BarkleyREI & Hannon Hill Webinar - Responsive Web Design

hannonhill

Responsive Web Design (HeadStart TechTalks)

Tirthesh Ganatra

Advancio, Inc. Academy: Responsive Web Design

Advancio

Building Mobile Websites with Joomla

Tom Deryckere

Responsive Web design is the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation. The practice consists of a mix of flexible grids and layouts, images and an intelligent use of CSS media queries. As the user switches from their laptop to iPad, the website should automatically switch to accommodate for resolution, image size and scripting abilities. In other words, the website should have the technology to automatically respond to the user’s preferences. This would eliminate the need for a different design and development phase for each new gadget on the market.

Intro to Responsive Web Design

meghantaylor

Drupalcon Asia - "Drupal 8 Mobile in its DNA"

Ram Singh

Visitors to your site are increasingly less likely to have a traditional desktop experience. There’s a widening diversity of browsers and devices as the mobile, netbook and tablet market explodes. Can your designs handle this new world? Learn how CSS3 can be used to create a responsive design that adapts well to your visitors regardless of how large or small their screen sizes are. We’ll cover why you need to design your sites to work on a widening array of devices and screen sizes. There will be examples and coding. In particular, we’ll look at implementing a fluid grid and flexible images and using media queries to create a great experience for all visitors.

Responsive web design

Ben MacNeill

Key Takeaways: A> Understanding RWD: What exactly is Responsive Web Design – the philosophy, the concept B> Techniques and tools for RWD - Details about Media queries and CSS as well as various frameworks and tools for creating RWD design C> Advantages and Limitations in RWD D> Conceptual Knowledge of Server Side Responsive Design (RESS) Have Questions? - Please feel free to email sachink@harbingergroup.com Sachin Katariya - Harbinger Systems

Webinar Recording "Best Practices in RWD - Responsive Web Design"

Sachin Katariya

Getting Down & Dirty with Responsive Web Design

martinridgway

Drupal Business Summit - making your sites mobile accessible, four methods.

Promet Source

Semelhante a Build a responsive website with drupal (20)

Responsive Web Design in Cascade Server, by Chris Cox of BarkleyREI

Dig into the omega theme

How to Project-Manage and Implement a Responsive Website

The Rise Of Tablets: Responsive Web Design is in your future

The rise of tablets how responsive web design is in your future

Responsive design

Responsive UX - One size fits all @BigDesign conference #BigD12

Reponsive web design (HTML5 + css3)

reponsive-web-design.pptx

BarkleyREI & Hannon Hill Webinar - Responsive Web Design

Responsive Web Design (HeadStart TechTalks)

Advancio, Inc. Academy: Responsive Web Design

Building Mobile Websites with Joomla

Intro to Responsive Web Design

Drupalcon Asia - "Drupal 8 Mobile in its DNA"

Responsive web design

Webinar Recording "Best Practices in RWD - Responsive Web Design"

Getting Down & Dirty with Responsive Web Design

Drupal Business Summit - making your sites mobile accessible, four methods.

Mais de Shyamala Rajaram

Drupal & You

Shyamala Rajaram

Drupal 8 mobile initiative

Shyamala Rajaram

Talk at #devfestW

Shyamala Rajaram

What in store in drupal 8

Shyamala Rajaram

Drupal for Programmers

Shyamala Rajaram

Drupalacademics research

Shyamala Rajaram

Drupal for Libraries

Shyamala Rajaram

Mais de Shyamala Rajaram (7)

Drupal & You

Drupal 8 mobile initiative

Talk at #devfestW

What in store in drupal 8

Drupal for Programmers

Drupalacademics research

Drupal for Libraries

Último

Exploring Multimodal Embeddings with Milvus

Zilliz

When you’re building (micro)services, you have lots of framework options. Spring Boot is no doubt a popular choice. But there’s more! Take Quarkus, a framework that’s considered the rising star for Kubernetes-native Java. It always depends on what's best for your situation, but how to choose the best solution if you're comparing 2 frameworks? Both Spring Boot and Quarkus have their positives and negatives. Let us compare the two by live coding a couple of common use cases in Spring Boot and Quarkus. After this talk, you’ll be ready to get started with Quarkus yourself, and know when to select Quarkus or Spring Boot.

Spring Boot vs Quarkus the ultimate battle - DevoxxUK

Jago de Vreede

Strategies for Landing an Oracle DBA Job as a Fresher

Remote DBA Services

2024: Domino Containers - The Next Step. News from the Domino Container commu...

Martijn de Jong

💥 You’re lucky! We’ve found two different (lead) developers that are willing to share their valuable lessons learned about using UiPath Document Understanding! Based on recent implementations in appealing use cases at Partou and SPIE. Don’t expect fancy videos or slide decks, but real and practical experiences that will help you with your own implementations. 📕 Topics that will be addressed: • Training the ML-model by humans: do or don't? • Rule-based versus AI extractors • Tips for finding use cases • How to start 👨‍🏫👨‍💻 Speakers: o Dion Morskieft, RPA Product Owner @Partou o Jack Klein-Schiphorst, Automation Developer @Tacstone Technology

DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam

UiPathCommunity

Tracing the root cause of a performance issue requires a lot of patience, experience, and focus. It’s so hard that we sometimes attempt to guess by trying out tentative fixes, but that usually results in frustration, messy code, and a considerable waste of time and money. This talk explains how to correctly zoom in on a performance bottleneck using three levels of profiling: distributed tracing, metrics, and method profiling. After we learn to read the JVM profiler output as a flame graph, we explore a series of bottlenecks typical for backend systems, like connection/thread pool starvation, invisible aspects, blocking code, hot CPU methods, lock contention, and Virtual Thread pinning, and we learn to trace them even if they occur in library code you are not familiar with. Attend this talk and prepare for the performance issues that will eventually hit any successful system. About authorWith two decades of experience, Victor is a Java Champion working as a trainer for top companies in Europe. Five thousands developers in 120 companies attended his workshops, so he gets to debate every week the challenges that various projects struggle with. In return, Victor summarizes key points from these workshops in conference talks and online meetups for the European Software Crafters, the world’s largest developer community around architecture, refactoring, and testing. Discover how Victor can help you on victorrentea.ro : company training catalog, consultancy and YouTube playlists.

Finding Java's Hidden Performance Traps @ DevoxxUK 2024

Victor Rentea

Keynote 2: APIs in 2030: The Risk of Technological Sleepwalk Paolo Malinverno, Growth Advisor - The Business of Technology Apidays New York 2024: The API Economy in the AI Era (April 30 & May 1, 2024) ------ Check out our conferences at https://www.apidays.global/ Do you want to sponsor or talk at one of our conferences? https://apidays.typeform.com/to/ILJeAaV8 Learn more on APIscene, the global media made by the community for the community: https://www.apiscene.io Explore the API ecosystem with the API Landscape: https://apilandscape.apiscene.io/

Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...

apidays

Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood

Juan lago vázquez

AWS Community Day CPH - Three problems of Terraform

Andrey Devyatkin

Accelerating FinTech Innovation: Unleashing API Economy and GenAI Vasa Krishnan, Chief Technology Officer - FinResults Apidays New York 2024: The API Economy in the AI Era (April 30 & May 1, 2024) ------ Check out our conferences at https://www.apidays.global/ Do you want to sponsor or talk at one of our conferences? https://apidays.typeform.com/to/ILJeAaV8 Learn more on APIscene, the global media made by the community for the community: https://www.apiscene.io Explore the API ecosystem with the API Landscape: https://apilandscape.apiscene.io/

Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...

apidays

ICT role in 21st century education and its challenges

rafiqahmad00786416

Dubai, often portrayed as a shimmering oasis in the desert, faces its own set of challenges, including the occasional threat of flooding. Despite its reputation for opulence and modernity, the emirate is not immune to the forces of nature. In recent years, Dubai has experienced sporadic but significant floods, testing the resilience of its infrastructure and communities. Among the critical lifelines in this bustling metropolis is the Dubai International Airport, a bustling hub that connects the city to the world. This article explores the intersection of Dubai flood events and the resilience demonstrated by the Dubai International Airport in the face of such challenges.

Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...

Orbitshub

Passkeys: Developing APIs to enable passwordless authentication Cody Salas, Sr Developer Advocate | Solutions Architect - Yubico Apidays New York 2024: The API Economy in the AI Era (April 30 & May 1, 2024) ------ Check out our conferences at https://www.apidays.global/ Do you want to sponsor or talk at one of our conferences? https://apidays.typeform.com/to/ILJeAaV8 Learn more on APIscene, the global media made by the community for the community: https://www.apiscene.io Explore the API ecosystem with the API Landscape: https://apilandscape.apiscene.io/

Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...

apidays

Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving

Edi Saputra

The microservices honeymoon is over. When starting a new project or revamping a legacy monolith, teams started looking for alternatives to microservices. The Modular Monolith, or 'Modulith', is an architecture that reaps the benefits of (vertical) functional decoupling without the high costs associated with separate deployments. This talk will delve into the advantages and challenges of this progressive architecture, beginning with exploring the concept of a 'module', its internal structure, public API, and inter-module communication patterns. Supported by spring-modulith, the talk provides practical guidance on addressing the main challenges of a Modultith Architecture: finding and guarding module boundaries, data decoupling, and integration module-testing. You should not miss this talk if you are a software architect or tech lead seeking practical, scalable solutions. About the author With two decades of experience, Victor is a Java Champion working as a trainer for top companies in Europe. Five thousands developers in 120 companies attended his workshops, so he gets to debate every week the challenges that various projects struggle with. In return, Victor summarizes key points from these workshops in conference talks and online meetups for the European Software Crafters, the world’s largest developer community around architecture, refactoring, and testing. Discover how Victor can help you on victorrentea.ro : company training catalog, consultancy and YouTube playlists.

Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024

Victor Rentea

Angeliki Cooney has spent over twenty years at the forefront of the life sciences industry, working out of Wynantskill, NY. She is highly regarded for her dedication to advancing the development and accessibility of innovative treatments for chronic diseases, rare disorders, and cancer. Her professional journey has centered on strategic consulting for biopharmaceutical companies, facilitating digital transformation, enhancing omnichannel engagement, and refining strategic commercial practices. Angeliki's innovative contributions include pioneering several software-as-a-service (SaaS) products for the life sciences sector, earning her three patents. As the Senior Vice President of Life Sciences at Avenga, Angeliki orchestrated the firm's strategic entry into the U.S. market. Avenga, a renowned digital engineering and consulting firm, partners with significant entities in the pharmaceutical and biotechnology fields. Her leadership was instrumental in expanding Avenga's client base and establishing its presence in the competitive U.S. market.

Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...

Angeliki Cooney

Webinar Recording: https://www.panagenda.com/webinars/why-teams-call-analytics-is-critical-to-your-entire-business Nothing is as frustrating and noticeable as being in an important call and being unable to see or hear the other person. Not surprising then, that issues with Teams calls are among the most common problems users call their helpdesk for. Having in depth insight into everything relevant going on at the user’s device, local network, ISP and Microsoft itself during the call is crucial for good Microsoft Teams Call quality support. To ensure a quick and adequate solution and to ensure your users get the most out of their Microsoft 365. But did you know that ‘bad calls’ are also an excellent indicator of other problems arising? Precisely because it is so noticeable!? Like the canary in the mine, bad calls can be early indicators of problems. Problems that might otherwise not have been noticed for a while but can have a big impact on productivity and satisfaction. Join this session by Christoph Adler to learn how true Microsoft Teams call quality analytics helped other organizations troubleshoot bad calls and identify and fix problems that impacted Teams calls or the use of Microsoft365 in general. See what it can do to keep your users happy and productive! In this session we will cover - Why CQD data alone is not enough to troubleshoot call problems - The importance of attributing call problems to the right call participant - What call quality analytics can do to help you quickly find, fix-, and prevent problems - Why having retrospective detailed insights matters - Real life examples of how others have used Microsoft Teams call quality monitoring to problem shoot problems with their ISP, network, device health and more.

Why Teams call analytics are critical to your entire business

panagenda

ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke

Product Anonymous

Axa Assurance Maroc - Insurer Innovation Award 2024

The Digital Insurer

MINDCTI Revenue Release Quarter One 2024

MIND CTI

Build a responsive website with drupal

1. Build a Responsive Website with Drupal By Shyamala rajaram.shyamala@gmail.com www.unimity.com

2. Presentation Path What are Responsive websites? ● Websites for mobile past, present & future ● Flexible Grids ● Flexible images ● Css Media queries ● What is Mobile first methodology? ● Break Points ● Responsive vs Adaptive ● Drupal 8 & mobile initiative www.unimity.com

3. Website for Mobile - Past MOBILE DESKTOP m.site.com www.site.com DETECT & REDIRECT Request www.unimity.com

4. Website for Mobile - Present & Future www.unimity.com

5. Flexible Grids Use percentages: allow grow & shrink of web pages Target / Context = results (5grids) / (8grids) = 62.5% OR (600px) / (960px) = 62.5% www.unimity.com

6. Flexible Grids www.unimity.com

7. Flexible Images - sizes www.unimity.com

8. Flexible Images www.unimity.com

9. Flexible Images - modules Use max-width to contain images within the grid Drupal modules that support flexible images include ● responsive_image: http://drupal. org/project/responsive_images ● fasterimages: http://drupal.org/project/fasterimages ● css_emimage: http://drupal.org/project/css_emimage www.unimity.com

10. CSS3 Media Queries Not only allows you to target certain devices classes, but can actually inspect the physical characteristics of device rendering the work New media features, including max-width, device-width, orientation and color www.unimity.com

11. Apple - auto-adjust feature Use of view-port metatags www.unimity.com

12. Mobile first appraoch Ensure the site works on all devices, devices that do not support Media queries: take a MOBILE FIRST APPROACH! global.css -> mobile reponsive.css -> media queries www.unimity.com

13. Break Points 1200px : Larger screens 1024px : Smaller desktops & Larger tablets Landscape 768px : Portrait for Larger Tablets, Landscape for smaller tablets 600px : Portrait & Landscape for smaller layouts & Kindle 480px : Landscape mode for smart phones 320px : Portrait mode for smart phones www.unimity.com

14. Responsive vs Adaptive design "Adaptive web design" refers more to the secondary and less fluid approach of adapting existing web designs, or designing for controlled adaptation as opposed to a truly fluid and flexible "Responsive" design. www.unimity.com

15. Drupal Themes ● omega: http://drupal.org/project/omega ● zen: http://drupal.org/project/zen ● adaptive: http://drupal.org/project/adaptivetheme ● terrain: http://drupal.org/project/terrain www.unimity.com

16. Drupal 8 & Responsive Designs ● Issue queues tagged as mobile in Drupal 8 ● For info on Drupal 8 mobile initiative: http://groups.drupal.org/node/207248 www.unimity.com

17. www.unimity.com

18. www.unimity.com

Build a responsive website with drupal

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a Build a responsive website with drupal

Semelhante a Build a responsive website with drupal (20)

Mais de Shyamala Rajaram

Mais de Shyamala Rajaram (7)

Último

Último (20)

Build a responsive website with drupal