Responsive Web Design

Designing & coding websites that respond to mobile, tablet & beyond.

Noble Desktop

Right/Left Arrows Change Slides (or Swipe Right/Left) Esc zooms out (or Pinch)

Responsive design is not about ‘designing for mobile’. But it’s not about ‘designing for the desktop’, either. Rather,  it’s about adopting a more flexible, device-agnostic approach

— Ethan Marcotte author of Responsive Web Design

  • The Boston Globe
  • Skinny Ties
  • Authentic Jobs
  • mediaqueri.es has many more examples

So How Does it Work?

Css media queries, media queries.

Do not automatically make sites work on various devices!

They allow you to test for the following, but you must adapt the layout with CSS:

  • Device screen width/height
  • Screen resolution
  • Device orientation

The media query

body { background: red; } @media (max-width: 320px) { body { background: orange; } }

Screens 0 to 320px: body’s background will be orange instead of red (overrides the first rule)

Screens Larger than 320px: body’s background will be red

Ways to Use Media Queries

1. Within a CSS file or <style> tag

@media (max-width: 768px) { /* your css goes here */ }

2. When linking to a CSS file

<link media="(max-width: 768px)" href="tablet.css" rel="stylesheet">

3. Within a CSS file via @import

@import url("tablet.css") (max-width: 768px);

Previewing & Testing

  • Responsinator.com displays any site in some common devices
  • Google Resizer displays any site at common device sizes
  • Bookmarklet by Victor Coulon
  • Google Chrome: Device Mode & Mobile Emulation. Read more about it in this article.
  • Firefox: Responsive Design View
  • iOS Simulator (built into Xcode) if you have a Mac. (After launching Xcode, go into the Xcode menu and choose Open Developer Tool > Simulator )

Test on real devices

Nothing beats holding a device and touching the site:

  • Is the type legible?
  • How far do you need to reach to tap something?
  • How well does the device respond?

The Viewport

  • Small devices assume sites are designed for desktops.
  • They render the page on a large viewport (980px) and scale it down to fit a small screen. Apple’s viewport description & quirksmode.org
  • Assuming a viewport of 980px, media queries for small screens (like 320px) won’t apply!
  • Must tell them the viewport width = width of the device

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

More on Media Queries

Media Queries (Sizes) for Standard Devices

Browser support

Respond.js polyfill for old Internet Explorer

When browsers lack a feature, polyfills “fill” in the feature, making them work in that browser so you can still use the new tech!

Flexible Images

Remove the width and height from the image:

<img src="image.png">

Ensure the image scales if it’s too large:

img { max-width: 100%; }

Responsive Image Tips

  • First ask “what images are necessary?”
  • Be careful about sending too many unnecessarily large images to mobile
  • Be crafty by using image optimization tricks to your favor like blur and monochrome
  • Study responsive image solutions
  • Cross browser studies: Media Query & Asset Downloading Results

Flexible Video

  • Intrinsic Ratios for flexible video sizing

Shrinking down a desktop site reveals content issues

Ask “what content is important and what isn’t”.

  • “Mobile users want to see our menu, hours, and delivery number. Desktop users definitely want this 1mb png of someone smiling at a salad.” @wilto
  • xkcd “University Website” comic

UX: User Experience is Important

Make it easy & enjoyable for people to use.

RWD starts to influence everything from the ground up

…or mobile up, mobile first.

Websites and applications should be designed and built for mobile first.

“Mobile First” — Luke Wroblewski

Also check out his Designing for Mobile First Video

Going mobile first: Forces you to focus and prioritize [...] by embracing the constraints inherent in mobile design Allows you to deliver innovative experiences by building on new capabilities native to mobile devices

Mobile First Design

  • If mobile is a larger audience, why not design for them first?
  • Work out priorities and UX issues on mobile, then build up to larger devices.
  • Trying to squishing a desktop site down to fit smaller devices can bring up issues that may affect the desktop design.
  • Design across screen sizes early on. Keep things flexible and mockup multiple sizes sooner rather than later.

Mobile First Development

It can be easier to build up, rather than tear down.

Tearing down (Desktop Down)

.column { float: left; } @media (max-width: 320px) { .column { float: none; } }

Building up (Mobile First)

@media (min-width: 321px) { .column { float: left; } }

Mobile First Considerations

If the first styles are for mobile, and media queries add tablet and desktop styles, what do browsers (like IE 8) that don’t understand media queries see?

The mobile site.

To have them see the desktop styles you can use the Respond.js polyfill.

Content Optimization Across Devices

Only hide presentational content.

People will get frustrated if they can’t find information on mobile if they know it exists on desktop.

How do we fit this into our process?

Become cyclical... no, that doesn’t say cynical :).

[the design process] is about designing and prototyping and making. When you separate those, I think the final result suffers.

– Jonathan Ive

Moving to code faster. Why?

  • A static picture of a website is not as helpful as seeing how it reacts to its environment
  • Save time by finding unexpected problems faster

Possible first steps

  • Design website (using grids can make it easier to transition to code)
  • Develop website and add media queries where appropriate
  • Review with designer for device adjustments
  • Revise and repeat
  • Drive design direction via style tiles.
  • Deliver working code based mockups instead of static mockups. Read insight from an agency that’s doing this.
  • DevTools help you test ideas quickly, directly in a browser.
  • Leverage grid frameworks—such as Bootstrap —to get up and running quickly.

Grid systems

  • For Designers: Guides for column widths and gutters that help keep designs consistent and aligned.
  • For Developers: A collection of prebuilt CSS rules that allow you to apply grid-like layouts to HTML
  • Many designers (web and print) already design on grids.
  • Helps organize content & promotes modular thinking.
  • Helps build a common language between designers & developers.
  • Develop/Code Faster: The grid in a designer’s graphics app can be more quickly translated into a CSS grid.

Grid Systems

Already responsive. Many have prebuilt CSS buttons and components.

Examples of Prebuilt Grid Systems: Bootstrap , Foundation , and Skeleton

Customize Your Own Grid System: Gridpak & Gridset

Free Bootstrap PSD Templates

  • Grids for 3 main breakpoints: 1170px, 970px, & 750px
  • DesignShock Template with Tons of UI Elements

Free Sketch Template

  • Bootstrap Grid Template
The challenge of responsive design is to be simultaneously agnostic and considerate of the environment in which it’s viewed.

- @brad_frost

Thinking Points

  • Desktop down can perpetuate desktop thinking
  • Constant designer/developer interactions can be helpful for problem solving
  • Consider moving to code faster
  • Focus on the content and user experience.

Photoshop for Web & UI

Coding for Designers 2-hour beginner seminar

Responsive Email

Visual Design for Web & Mobile

Stay in Touch

Twitter Facebook Instagram

Ivaylo Gerchev

How to Create Beautiful HTML & CSS Presentations with WebSlides

Share this article

HTML Presentations with WebSlides

Getting Started with WebSlides

Create a web presentation with webslides.

  • Frequently Asked Questions (FAQs) about Creating Beautiful HTML & CSS Presentations with WebSlides

HTML Presentations with WebSlides

This article was peer reviewed by Ralph Mason , Giulio Mainardi , and Mikhail Romanov . Thanks to all of SitePoint’s peer reviewers for making SitePoint content the best it can be!

Presentations are one of the best ways to serve information to an audience. The format is short and sharp, made up of small, digestible chunks, which makes any topic under discussion engaging and easier to understand. A presentation can contain all kinds of data, represented by many different elements, such as tables, charts, diagrams, illustrations, images, videos, sounds, maps, lists, etc, all of which lends great flexibility to this medium of expression.

Particularly on the web, presentations come in handy on many occasions, and there are loads of tools at your disposal to create some nifty ones. Today, I’ll introduce you to WebSlides — a small and compact library with a nice set of ready-to-use components, which you can leverage to build well-crafted and attractive web presentations:

WebSlides “is about telling the story, and sharing it in a beautiful way.”

In fact, one of WebSlides’ main benefits is that you can share your story beautifully and in a variety of different ways. With one and the same architecture — 40+ components with semantic classes, and clean and scalable code — you can create portfolios, landings, longforms, interviews, etc.

Besides, you can also extend WebSlides’ functionality by combining it with third-party services and tools such as Unsplash , Animate.css , Animate On Scroll , and so on.

WebSlides is easy to learn and fun to use. Let’s see it in action now.

To get started, first download WebSlides . Then, in the root folder, create a new folder and call it presentation . Inside the newly created presentation folder, create a new file and call it index.html . Now, enter the following code, which contains the needed references to the WebSlides’ files (make sure the filepaths correspond to the folder structure in your setup):

In this section you’re going to create a short, but complete presentation, which explains why SVG is the future of web graphics. Note: If you are interested in SVG, please check my articles: SVG 101: What is SVG? and How to Optimize and Export SVGs in Adobe Illustrator .

You’ll be working step by step on each slide. Let’s get started with the first one.

The first slide is pretty simple. It contains only one sentence:

Each parent <section> inside <article id="webslides"> creates an individual slide. Here, you’ve used two classes from WebSlides’ arsenal, i.e., bg-gradient-r and aligncenter , to apply a radial gradient background and to align the slide content to the center respectively.

WebSlides Presentation Demo: Slide 1

The second slide explains what SVG is:

The code above uses the content-left and content-right classes to separate the content into two columns. Also, in order to make the above classes work, you need to wrap all content by using the wrap class. On the left side, the code uses text-subtitle to make the text all caps, and text-intro to increase the font size. The right side consists of an illustrative image.

WebSlides Presentation Demo: Slide 2

The next slide uses the grid component to create two columns:

The snippet above shows how to use the grid and column classes to create a grid with two columns. In the first column the style attribute aligns the text to the left (Note how the aligncenter class on the <section> element cascades through to its .column child element, which causes all text inside the slide to be center aligned). In the second column, the browser class makes the illustrative image look like a screenshot.

WebSlides Presentation Demo: Slide 3

In the fourth slide, use the grid component again to split the content into two columns:

WebSlides Presentation Demo: Slide 4

In this slide, place half of the content to the left and the other half to the right using the content-left and content-right classes respectively:

WebSlides Presentation Demo: Slide 5

In this slide, use the background class to embed an image as a background with the Unsplash service . Put the headline on light, transparent background by using the bg-trans-light class. The text’s color appears white, because the slide uses a black background with the bg-black class, therefore the default color is inversed, i.e., white on black rather than black on white. Also, for the text to be visible in front of the image, wrap it with <div class="wrap"> :

WebSlides Presentation Demo: Slide 6

In this slide, put the explanation text on the left and the illustrative image on the right at 40% of its default size (with the alignright and size-40 classes on the <img> element). For this and the next three slides, use slideInRight , which is one of WebSlides’ built-in CSS animations:

WebSlides Presentation Demo: Slide 7

Do a similar thing here:

WebSlides Presentation Demo: Slide 8

This slide also uses a similar structure:

WebSlides Presentation Demo: Slide 9

Here, divide the content into left and right again. In the second <p> tag, use the inline style attribute to adjust the font-size and line-height properties. Doing so will override the text-intro class styles that get applied to the element by default. On the right side, use <div class="wrap size-80"> to create a container for the SVG code example:

WebSlides Presentation Demo: Slide 10

Here, leverage some of the classes you’ve already used to illustrate browser support for SVG:

WebSlides Presentation Demo: Slide 11

In this slide, show some of the use cases for SVG in the form of an image gallery. To this end, use an unordered list with the flexblock and gallery classes. Each item in the gallery is marked up with a li tag:

WebSlides Presentation Demo: Slide 12

This section shows a typical SVG workflow, so you need to use the flexblock and steps classes, which show the content as a sequence of steps. Again, each step is placed inside a li tag:

For each step after the first one, you need to add the process-step-# class. This adds a triangle pointing to the next step.

WebSlides Presentation Demo: Slide 13

In the last slide, use another one of WebSlides’ built-in CSS animations, i.e., zoomIn :

WebSlides Presentation Demo: Slide 14

Congratulations! You’re done. You can see the final outcome here:

See the Pen HTML and CSS Presentation Demo with WebSlides by SitePoint ( @SitePoint ) on CodePen .

Et voilà! You have just created a beautiful, fully functional and responsive web presentation. But this is just the tip of the iceberg, there’s a lot more you can quickly create with WebSlides and many other WebSlides features which I didn’t cover in this short tutorial.

To learn more, explore the WebSlides Components and CSS architecture documentation , or start customizing the demos already available to you in the downloadable folder.

Then, focus on your content and let WebSlides do its job.

Frequently Asked Questions (FAQs) about Creating Beautiful HTML & CSS Presentations with WebSlides

How can i customize the design of my webslides presentation.

WebSlides allows you to customize your presentation to suit your style and needs. You can change the color scheme, fonts, and layout by modifying the CSS file. If you’re familiar with CSS, you can easily tweak the styles to create a unique look. If you’re not, there are plenty of online resources and tutorials that can help you learn. Remember, the key to a great presentation is not only the content but also the design. A well-designed presentation can help keep your audience engaged and make your content more memorable.

Can I add multimedia elements to my WebSlides presentation?

How can i share my webslides presentation with others.

Once you’ve created your WebSlides presentation, you can share it with others by hosting it on a web server. You can use a free hosting service like GitHub Pages, or you can use your own web server if you have one. Once your presentation is hosted, you can share the URL with anyone you want to view your presentation. They’ll be able to view your presentation in their web browser without needing to install any special software.

Can I use WebSlides for commercial projects?

Yes, WebSlides is free to use for both personal and commercial projects. You can use it to create presentations for your business, for your clients, or for any other commercial purpose. However, please note that while WebSlides itself is free, some of the images and fonts used in the templates may be subject to copyright and may require a license for commercial use.

How can I add interactive elements to my WebSlides presentation?

You can add interactive elements to your WebSlides presentation by using JavaScript. For example, you can add buttons that the user can click to navigate to different slides, or you can add forms that the user can fill out. This can be done by adding the appropriate HTML and JavaScript code to your slides. If you’re not familiar with JavaScript, there are plenty of online resources and tutorials that can help you learn.

Can I use WebSlides offline?

Yes, you can use WebSlides offline. Once you’ve downloaded the WebSlides files, you can create and view your presentations offline. However, please note that some features may not work offline, such as loading external images or fonts. To ensure that all features work correctly, it’s recommended to host your presentation on a web server.

How can I add transitions and animations to my WebSlides presentation?

You can add transitions and animations to your WebSlides presentation by using CSS. CSS allows you to control the appearance and behavior of elements on your slides, including transitions and animations. For example, you can use the transition property to animate the change of a property from one value to another, or you can use the animation property to create more complex animations.

Can I use WebSlides on mobile devices?

Yes, WebSlides is designed to be responsive and works well on both desktop and mobile devices. However, please note that due to the smaller screen size, some elements may not display as intended on mobile devices. It’s recommended to test your presentation on different devices to ensure that it looks and works well on all platforms.

How can I add navigation controls to my WebSlides presentation?

You can add navigation controls to your WebSlides presentation by using the built-in navigation options. You can add arrows to navigate between slides, or you can add a slide counter to show the current slide number and the total number of slides. This can be done by adding the appropriate HTML and CSS code to your slides.

Can I use WebSlides with other web development tools?

Yes, you can use WebSlides with other web development tools. For example, you can use it with a text editor to write your HTML and CSS code, or you can use it with a version control system like Git to manage your project files. You can also use it with a build tool like Gulp or Grunt to automate tasks like minifying your code or compiling your CSS.

I am a web developer/designer from Bulgaria. My favorite web technologies include SVG, HTML, CSS, Tailwind, JavaScript, Node, Vue, and React. When I'm not programming the Web, I love to program my own reality ;)

SitePoint Premium

SlidePlayer

  • My presentations

Auth with social network:

Download presentation

We think you have liked this presentation. If you wish to download it, please recommend it to your friends in any social system. Share buttons are a little bit lower. Thank you!

Presentation is loading. Please wait.

Responsive Web Design (RWD)

Published by Dylan Willis Modified over 6 years ago

Similar presentations

Presentation on theme: "Responsive Web Design (RWD)"— Presentation transcript:

Responsive Web Design (RWD)

LIS650 lecture 4 Thomas Krichel today Advice CSS Properties –Box properties –List properties –Classification properties Fun with selectors.

responsive website ppt presentation

Copenhagen, 6 December 2004 Modern CSS Principles Miruna Bădescu Finsiel Romania.

responsive website ppt presentation

CONCEPTS FOR FLUID LAYOUT Web Page Layout. Website Layouts Most websites have organized their content in multiple columns (formatted like a magazine or.

responsive website ppt presentation

XP 1 Working with Cascading Style Sheets Creating a Style for Online Scrapbooks Tutorial 7.

responsive website ppt presentation

Tutorial 4 Creating Special Effects with CSS

responsive website ppt presentation

Lloyd-Jamie Bennett – P Stylianos Michael – P

responsive website ppt presentation

RESPONSIVE DESIGN Sources: Kadlec, T. (2012). Implementing responsive design. Berkeley, California: New Riders Publishing. MarcotteMarcotte, E. (2010).

responsive website ppt presentation

TUTORIAL 8: Enhancing a Web Site with Advanced CSS

responsive website ppt presentation

CIT 256 Mobile Web Development Dr. Beryl Hoffman.

responsive website ppt presentation

Chapter 8 More on Links, Layout, and Mobile Copyright © 2013 Terry Ann Morris, Ed.D revised by Bill Pegram, 9/24/

responsive website ppt presentation

Tutorial 4: Using CSS for Page Layout. 2 Objectives Session 4.1 Explore CSS layout Compare types of floating layouts Examine code for CSS layouts View.

responsive website ppt presentation

Tutorial 4 Creating Special Effects with CSS. XP Objectives Work with CSS selectors Create styles for lists Create and apply class styles Create a rollover.

responsive website ppt presentation

INTRODUCTION TO HTML5 CSS Styles. Understanding Style Sheets  HTML5 enables you to define many different types of content on a web page, including headings,

responsive website ppt presentation

Cascading Style Sheets CSS. CSS Positioning Normal Flow Top -> bottom | left -> right Arranged in the order they appear in the code make room for one.

responsive website ppt presentation

Cascading Style Sheets CSS. div … Used like a container to group content Gives context to the elements in the grouping Give it a descriptive name with.

responsive website ppt presentation

CSS Positioning Creating Special Effects with CSS CS202 Working with Cascading Style Sheets (Chapter 4) CS202 1.

responsive website ppt presentation

Basic Responsive Design Techniques. Let’s take a look at this basic layout. It has a header and two columns of text, in a box that is centered on the.

responsive website ppt presentation

Week 8 – Part 3 More on Links, Layout, and Mobile Key Concepts 1.

About project

© 2024 SlidePlayer.com Inc. All rights reserved.

slide1

Responsive Website Design

Apr 29, 2019

410 likes | 618 Views

Shared by: https://www.qlicknetwork.com/ When you have your own website, there are plenty of decisions you have to make. This Responsive Web Design presentation is a helpful information about why you need to seriously consider upgrading to a responsive design for your web page. Is your website optimised effectively for all devices and platforms? Don’t just think mobile or desktop, think every simgle device and user on the web. Responsive websites are designed to provide an optimal viewing experience across all platforms

Share Presentation

yisengchan

Presentation Transcript

  • More by User

Responsive Website Design Company Chennai

Responsive Website Design Company Chennai

What makes us best Web Development Company in Chennai is our expertise of the domain and constant hard work. Contact us to get your website developed with result-oriented and user-friendly features.

265 views • 7 slides

Responsive Website Design

Responsive Website Design

Rapidsoft Technologies is a web development company which develops and designs websites and that are up-to-date with the latest technological advancement and which attracts more users.

241 views • 10 slides

Top Responsive Website Design Toronto

Top Responsive Website Design Toronto

Developing and maintaining different websites for different devices is not only difficult but also not cost-effective. For more info visit: http://www.edenphost.ca/web-design-toronto/mobile-website-design/responsive-website-design.html

263 views • 6 slides

Responsive design website burdwan

Responsive design website burdwan

edding Day Diamonds has revolutionized engagement ring shopping! We have the largest selection of Wedding Ring in America. Thousands of unique, one-of-a-kind styles, custom

130 views • 1 slides

Responsive Website Design Keyword

Responsive Website Design Keyword

Being a mobile application development company, we are expert in development of enterprise, e-commerce, educational and utility mobile apps. Our mobile app development have experience of developing critical, data and performance intensive apps using cloud web services. Responsive Website 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.

153 views • 1 slides

Responsive Website Design Company Hyderabad | Responsive Website Development Hyderabad | Responsive Website Design Servi

Responsive Website Design Company Hyderabad | Responsive Website Development Hyderabad | Responsive Website Design Servi

Webdesigningcompanieshyderabad offering responsive websites designing and developemnt including wordpress website development, ecommerce website development, Magento website development, PHP website development, mobile app development etc

534 views • 9 slides

Benefits Of Responsive Website Design

Benefits Of Responsive Website Design

This PPT presented by appsolz.com. Here we share some benefits of responsive website design. For know more details Call Us at 91 9903700380 or visit http://appsolz.com

173 views • 7 slides

Responsive Website Design Vs Adaptive Website Design

Responsive Website Design Vs Adaptive Website Design

Let’s have a look at the difference between Adaptive and Responsive Website Design. For more information about web design visit http://www.digitalmediasapiens.com/responsive-web-design/

116 views • 8 slides

responsive website design

responsive website design

importance of responsive website and why is it important for our website and our online growth.

98 views • 5 slides

Website Design & CMS & Responsive company.

Website Design & CMS & Responsive company.

We ensure you that our offered IT Services are planned and executed out in accordance with your business need & expectations and you get your project completed within the stated period.

80 views • 6 slides

RESPONSIVE WEBSITE DESIGN

RESPONSIVE WEBSITE DESIGN

We, at Digital Web Research, offer state-of-the-art and professional web design services. Website/Web Portal is one of the most essential facess of your business, brand, and services that you offer.

116 views • 7 slides

Mobile Responsive Website Design

Mobile Responsive Website Design

We develop all kind of website either its small or big. We apply simple and useful programming not uses complex programming or coding which is beneficial for websites.There is absolutely no doubt that Mobile Responsive Website Design is the need of the day today. People are not just confined to their laptops and desktops to access internet. With the advent of the smartphones and tablets, people are accessing websites on the go. Get More Detail Visit Website: http://brainguru.in/services/mobile-website-design-development-company-noida-india.html Visit Twitter Profile: https://twitter.com/BrainguruTech Visit Facebook Profile: https://www.facebook.com/BrainGuru.Noida Visit Google Plus Profile: https://plus.google.com/u/0/ BrainguruIn Phone No.:(0120) 4299500, 91-8010010000 Email Id: [email protected]

88 views • 8 slides

Responsive Website Design Company India

Responsive Website Design Company India

"XIPHIAS Web Processes will pull you ahead of the crowd with faster, smarter and agile business models through our data-driven solutions for innovative global expansion. XIPHIAS stands at the leading edge in integrating and providing new and latest technologies for E-commerce web designing to our clients."

53 views • 4 slides

responsive website design

Are you planning for a website for your shop or company? well before this, you should have basic knowledge about the website like what is it? , how it works? types of website and which will be better for you which can fulfil all your needs as well as your users too.Because a website is like an online shop which provides 24/7 services worldwide even you are not present on users visiting time. For web design & development:-https://www.weblieu.com/our-services/

129 views • 11 slides

Responsive Website Design Vancouver

Responsive Website Design Vancouver

Google regularly delivers advice to the web developers and designers, so that they must optimize their sites for the algorithms of search engines and also for SEO. And in this regard, I have a wonderful suggestion of a company (Fernweb) which provides the responsive website development Vancouver https://www.fernweb.com/responsive-design.html

78 views • 6 slides

Responsive vs Non-Responsive website design

Responsive vs Non-Responsive website design

You may also have heard people say that a specific online website is sensitive, or that another online website is not sensitive. With the support of these terminologies, what do we certainly imply? Let's look at the responsive and non-responsive web designs a bit.

30 views • 2 slides

Benefits of Responsive Website Design

Benefits of Responsive Website Design

When you choose a right design for your website, you can easily unveil the benefits of SEO. Here, one point should be noted that SEO plays the most important role.

17 views • 1 slides

Responsive Website Design

Our vast experience in responsive website design enable us to fulfill clients requirement with little or no overhead of design cost or time.

69 views • 4 slides

Best Responsive Website Design Company | Responsive Web Design Services

Best Responsive Website Design Company | Responsive Web Design Services

Need Responsive Web Design Company or Responsive Web Design Services? We're a responsive best responsive website design company. We're the top & best mobile web design company In India. For more info: https://www.aistechnolabs.com/responsive-web-design-services/

18 views • 1 slides

Home PowerPoint Templates Responsive

responsive website ppt presentation

Responsive Design Process Template

responsive website ppt presentation

Android UI Design Kit for PowerPoint

Download unlimited content, our annual unlimited plan let you download unlimited content from slidemodel. save hours of manual work and use awesome slide designs in your next presentation..

responsive website ppt presentation

Got any suggestions?

We want to hear from you! Send us a message and help improve Slidesgo

Top searches

Trending searches

responsive website ppt presentation

memorial day

12 templates

responsive website ppt presentation

66 templates

responsive website ppt presentation

8 templates

responsive website ppt presentation

environmental science

36 templates

responsive website ppt presentation

ocean theme

44 templates

responsive website ppt presentation

49 templates

Interactive Presentation templates

Pick one of our interactive presentation templates to further enhance the experience of your audience by the use of hyperlinks. edit them in powerpoint or google slides and enjoy a dynamic slideshow..

Fractions: Addition and Subtraction of Mixed Numbers presentation template

It seems that you like this template!

Premium template.

Unlock this template and gain unlimited access

Fractions: Addition and Subtraction of Mixed Numbers

Download the "Fractions: Addition and Subtraction of Mixed Numbers" presentation for PowerPoint or Google Slides and teach with confidence. Sometimes, teachers need a little bit of help, and there's nothing wrong with that. We're glad to lend you a hand! Since Slidesgo is committed to making education better for everyone,...

Breathing Diseases: Asthma presentation template

Breathing Diseases: Asthma

Download the Breathing Diseases: Asthma presentation for PowerPoint or Google Slides. Taking care of yourself and of those around you is key! By learning about various illnesses and how they are spread, people can get a better understanding of them and make informed decisions about eating, exercise, and seeking medical...

Elegant Workplan

Developing a successful business plan can be challenging, but with the right tools at your disposal, it becomes much simpler. This template is a comprehensive document that allows you to outline your business goals, strategies, and financial projections in a professional and aesthetically pleasing way. The full suite of resources...

Motion Graphics App Pitch Deck

You have designed the perfect app for motion graphics, how can you present it now very visually and still keeping your company’s essence? Check out this template for PowerPoint! It’s perfect for an app pitch deck for your product. The 3D shapes floating over the soft slides will make your...

Ferris Wheel Carnival Animation Theme for Pre-K presentation template

Ferris Wheel Carnival Animation Theme for Pre-K

Download the Ferris Wheel Carnival Animation Theme for Pre-K presentation for PowerPoint or Google Slides and create big learning experiences for the littlest students! Dynamic and adorable, this template provides the visual stimuli that Pre-K students thrive on and makes your lessons more playful and exciting — after all, Pre-K...

Multiplying Integers presentation template

Multiplying Integers

Download the "Multiplying Integers" presentation for PowerPoint or Google Slides and teach with confidence. Sometimes, teachers need a little bit of help, and there's nothing wrong with that. We're glad to lend you a hand! Since Slidesgo is committed to making education better for everyone, we've joined hands with educators....

Dividing Integers presentation template

Dividing Integers

Download the "Dividing Integers" presentation for PowerPoint or Google Slides and teach with confidence. Sometimes, teachers need a little bit of help, and there's nothing wrong with that. We're glad to lend you a hand! Since Slidesgo is committed to making education better for everyone, we've joined hands with educators....

Physics Flashcards presentation template

Physics Flashcards

Download the Physics Flashcards presentation for PowerPoint or Google Slides and start impressing your audience with a creative and original design. Slidesgo templates like this one here offer the possibility to convey a concept, idea or topic in a clear, concise and visual way, by using different graphic resources. You...

Multiplication of Fractions with Cross Simplification presentation template

Multiplication of Fractions with Cross Simplification

Download the "Multiplication of Fractions with Cross Simplification" presentation for PowerPoint or Google Slides and teach with confidence. Sometimes, teachers need a little bit of help, and there's nothing wrong with that. We're glad to lend you a hand! Since Slidesgo is committed to making education better for everyone, we've...

Comparing Fractions (Cross Multiplication) presentation template

Comparing Fractions (Cross Multiplication)

Download the "Comparing Fractions (Cross Multiplication)" presentation for PowerPoint or Google Slides and teach with confidence. Sometimes, teachers need a little bit of help, and there's nothing wrong with that. We're glad to lend you a hand! Since Slidesgo is committed to making education better for everyone, we've joined hands...

Athletics Newsletter presentation template

Athletics Newsletter

Download the "Athletics Newsletter" presentation for PowerPoint or Google Slides. Attention all marketers! Are you looking for a way to make your newsletters more creative and eye-catching for your target audience? This amazing template is perfect for creating the perfect newsletter that will capture your audience's attention from the get-go....

Interactive and Animated Social Media Strategy presentation template

Interactive and Animated Social Media Strategy

Download the Interactive and Animated Social Media Strategy presentation for PowerPoint or Google Slides. How do you use social media platforms to achieve your business goals? If you need a thorough and professional tool to plan and keep track of your social media strategy, this fully customizable template is your...

Ice Breakers Bundle for Meetings presentation template

Ice Breakers Bundle for Meetings

Download the Ice Breakers Bundle for Meetings presentation for PowerPoint or Google Slides. Gone are the days of dreary, unproductive meetings. Check out this sophisticated solution that offers you an innovative approach to planning and implementing meetings! Detailed yet simplified, this template ensures everyone is on the same page, contributing...

Quoting App Pitch Deck presentation template

Quoting App Pitch Deck

Download the "Quoting App Pitch Deck" presentation for PowerPoint or Google Slides. Whether you're an entrepreneur looking for funding or a sales professional trying to close a deal, a great pitch deck can be the difference-maker that sets you apart from the competition. Let your talent shine out thanks to...

Operations and Algebraic Thinking: Operations of Powers With the Same Exponent presentation template

Operations and Algebraic Thinking: Operations of Powers With the Same Exponent

Download the Operations and Algebraic Thinking: Operations of Powers With the Same Exponent presentation for PowerPoint or Google Slides and teach with confidence. Sometimes, teachers need a little bit of help, and there's nothing wrong with that. We're glad to lend you a hand! Since Slidesgo is committed to making...

Interactive Folders presentation template

Interactive Folders

Folders are very useful when it comes to organizing classes, whether you are a student or a teacher. Today we bring you a digital and interactive version of them. You will love its colorful design, full of illustrations that will bring joy to your notes. In the number tabs on...

Spring Woods presentation template

Spring Woods

Download the "Spring Woods" presentation for PowerPoint or Google Slides and start impressing your audience with a creative and original design. Slidesgo templates like this one here offer the possibility to convey a concept, idea or topic in a clear, concise and visual way, by using different graphic resources. You...

Interactive Corporate Interface for Business

Give your company visibility in the market and stand out from your competition with this business presentation that provides you a way to present your company, its main services and clients, and show its future projections. Discover resources such as icons, images, diagrams and charts that you can customize with...

  • Page 1 of 27

Great presentations, faster

Slidesgo for Google Slides :

The easy way to wow

responsive website ppt presentation

Register for free and start editing online

PowerShow.com - The best place to view and share online presentations

Responsive Website Design Melbourne - Sales On Sky - PowerPoint PPT Presentation

responsive website ppt presentation

Responsive Website Design Melbourne - Sales On Sky

Salesonsky [] is a leading web design agency in melbourne, specializing in crafting user-centric and responsive websites that drive results. contact salesonsky today to schedule a free consultation and discuss how their responsive website design melbourne expertise can help you achieve your digital goals. – powerpoint ppt presentation.

  • In Melbourne, where mobile device usage dominates web browsing, a website's ability to adapt across various screen sizes is no longer a fad, it's a fundamental necessity. This is where Responsive Website Design (RWD) steps in.
  • This white paper explores the importance of Responsive Website Design Melbourne for businesses looking to create user-friendly and future-proof online experiences. We'll delve into the benefits of RWD, explore key considerations when choosing a Responsive Website Design Melbourne service provider, and ultimately, guide you towards achieving a website that thrives in today's dynamic digital landscape.
  • Understanding the Power of Responsive Website Design Melbourne
  • A well-executed Responsive Website Design Melbourne strategy offers a multitude of advantages for your business
  • Enhanced User Experience RWD ensures a seamless browsing experience for users across desktops, tablets, and smartphones. Easy navigation, clear calls to action, and optimized content keep visitors engaged and facilitate conversions.
  • Search Engine Optimization (SEO) Boost Search engines like Google prioritize mobile-friendly websites in search results. Responsive website design Melbourne services can significantly improve your website's ranking, driving organic traffic and increasing brand visibility.
  • Conversion Rate Optimization A website that's difficult to navigate or renders poorly on mobile devices is more likely to lose potential customers. RWD Melbourne creates a user-friendly experience that encourages visitors to convert, whether it's making a purchase, subscribing to a newsletter, or contacting your business.
  • Cost-Effectiveness Gone are the days of needing separate websites for desktop and mobile. RWD eliminates the need for duplicate management, saving money in the long run.
  • www.salesonsky.com.au
  • Contact - 0410 624 302
  • Choosing the Right Responsive Website Design Melbourne Partner
  • With a vast array of Responsive Website Design Melbourne agencies available, selecting the ideal partner is crucial. Here are some key considerations
  • Experience and Expertise Look for a company with a proven track record of creating effective responsive websites. Their portfolio should showcase their design capabilities and experience in your specific industry.
  • Comprehensive Services Evaluate the services offered. Some agencies provide basic RWD, while others offer a holistic approach encompassing content creation, SEO optimization, and ongoing website maintenance. Choose a provider that aligns with your specific needs and budget.
  • Communication and Collaboration A reputable Responsive Website Design Melbourne service provider will take the time to understand your business goals and target audience. They should foster open communication, keeping you informed throughout the project lifecycle.
  • Taking Action Elevate Your Online Presence with Responsive Website
  • Design Melbourne
  • By embracing Responsive Website Design Melbourne, you're investing in a website that delivers an exceptional user experience for all visitors, regardless of their device. This translates into a stronger online presence, improved brand reputation, and ultimately, increased business growth.
  • Ready to unlock the potential of Responsive Website Design Melbourne for your business?
  • Salesonsky https//salesonsky.com.au/ is a leading web design agency in Melbourne, specializing in crafting user-centric and responsive websites that drive results. Contact Salesonsky today to schedule a free consultation and discuss how their Responsive Website Design Melbourne expertise can help you achieve your digital goals.

PowerShow.com is a leading presentation sharing website. It has millions of presentations already uploaded and available with 1,000s more being uploaded by its users every day. Whatever your area of interest, here you’ll be able to find and view presentations you’ll love and possibly download. And, best of all, it is completely free and easy to use.

You might even have a presentation you’d like to share with others. If so, just upload it to PowerShow.com. We’ll convert it to an HTML5 slideshow that includes all the media types you’ve already added: audio, video, music, pictures, animations and transition effects. Then you can share it with your target audience as well as PowerShow.com’s millions of monthly visitors. And, again, it’s all free.

About the Developers

PowerShow.com is brought to you by  CrystalGraphics , the award-winning developer and market-leading publisher of rich-media enhancement products for presentations. Our product offerings include millions of PowerPoint templates, diagrams, animated 3D characters and more.

World's Best PowerPoint Templates PowerPoint PPT Presentation

How-To Geek

6 ways to create more interactive powerpoint presentations.

Engage your audience with cool, actionable features.

Quick Links

  • Add a QR code
  • Embed Microsoft Forms (Education or Business Only)
  • Embed a Live Web Page
  • Add Links and Menus
  • Add Clickable Images to Give More Info
  • Add a Countdown Timer

We've all been to a presentation where the speaker bores you to death with a mundane PowerPoint presentation. Actually, the speaker could have kept you much more engaged by adding some interactive features to their slideshow. Let's look into some of these options.

1. Add a QR code

Adding a QR code can be particularly useful if you want to direct your audience to an online form, website, or video.

Some websites have in-built ways to create a QR code. For example, on Microsoft Forms , when you click "Collect Responses," you'll see the QR code option via the icon highlighted in the screenshot below. You can either right-click the QR code to copy and paste it into your presentation, or click "Download" to add it to your device gallery to insert the QR code as a picture.

In fact, you can easily add a QR code to take your viewer to any website. On Microsoft Edge, right-click anywhere on a web page where there isn't already a link, and left-click "Create QR Code For This Page."

You can also create QR codes in other browsers, such as Chrome.

You can then copy or download the QR code to use wherever you like in your presentation.

2. Embed Microsoft Forms (Education or Business Only)

If you plan to send your PPT presentation to others—for example, if you're a trainer sending step-by-step instruction presentation, a teacher sending an independent learning task to your students, or a campaigner for your local councilor sending a persuasive PPT to constituents—you might want to embed a quiz, questionnaire, pole, or feedback survey in your presentation.

In PowerPoint, open the "Insert" tab on the ribbon, and in the Forms group, click "Forms". If you cannot see this option, you can add new buttons to the ribbon .

As at April 2024, this feature is only available for those using their work or school account. We're using a Microsoft 365 Personal account in the screenshot below, which is why the Forms icon is grayed out.

Then, a sidebar will appear on the right-hand side of your screen, where you can either choose a form you have already created or opt to craft a new form.

Now, you can share your PPT presentation with others , who can click the fields and submit their responses when they view the presentation.

3. Embed a Live Web Page

You could always screenshot a web page and paste that into your PPT, but that's not a very interactive addition to your presentation. Instead, you can embed a live web page into your PPT so that people with access to your presentation can interact actively with its contents.

To do this, we will need to add an add-in to our PPT account .

Add-ins are not always reliable or secure. Before installing an add-in to your Microsoft account, check that the author is a reputable company, and type the add-in's name into a search engine to read reviews and other users' experiences.

To embed a web page, add the Web Viewer add-in ( this is an add-in created by Microsoft ).

Go to the relevant slide and open the Web Viewer add-in. Then, copy and paste the secure URL into the field box, and remove https:// from the start of the address. In our example, we will add a selector wheel to our slide. Click "Preview" to see a sample of the web page's appearance in your presentation.

This is how ours will look.

When you or someone with access to your presentation views the slideshow, this web page will be live and interactive.

4. Add Links and Menus

As well as moving from one slide to the next through a keyboard action or mouse click, you can create links within your presentation to direct the audience to specific locations.

To create a link, right-click the outline of the clickable object, and click "Link."

In the Insert Hyperlink dialog box, click "Place In This Document," choose the landing destination, and click "OK."

What's more, to make it clear that an object is clickable, you can use action buttons. Open the "Insert" tab on the ribbon, click "Shape," and then choose an appropriate action button. Usefully, PPT will automatically prompt you to add a link to these shapes.

You might also want a menu that displays on every slide. Once you have created the menu, add the links using the method outlined above. Then, select all the items, press Ctrl+C (copy), and then use Ctrl+V to paste them in your other slides.

5. Add Clickable Images to Give More Info

Through PowerPoint's animations, you can give your viewer the power to choose what they see and when they see it. This works nicely whether you're planning to send your presentation to others to run through independently or whether you're presenting in front of a group and want your audience to decide which action they want to take.

Start by creating the objects that will be clickable (trigger) and the items that will appear (pop-up).

Then, select all the pop-ups together. When you click "Animations" on the ribbon and choose an appropriate animation for the effect you want to achieve, this will be applied to all objects you have selected.

The next step is to rename the triggers in your presentation. To do this, open the "Home" tab, and in the Editing group, click "Select", and then "Selection Pane."

With the Selection Pane open, select each trigger on your slide individually, and rename them in the Selection Pane, so that they can be easily linked to in the next step.

Finally, go back to the first pop-up. Open the "Animations" tab, and in the Advanced Animation group, click the "Trigger" drop-down arrow. Then, you can set the item to appear when a trigger is clicked in your presentation.

If you want your item to disappear when the trigger is clicked again, select the pop-up, click "Add Animation" in the Advanced Animation group, choose an Exit animation, and follow the same step to link that animation to the trigger button.

6. Add a Countdown Timer

A great way to get your audience to engage with your PPT presentation is to keep them on edge by adding a countdown timer. Whether you're leading a presentation and want to let your audience stop to discuss a topic, or running an online quiz with time-limit questions, having a countdown timer means your audience will keep their eye on your slide throughout.

To do this, you need to animate text boxes or shapes containing your countdown numbers. Choose and format a shape and type the highest number that your countdown clock will need. In our case, we're creating a 10-second timer.

Now, with your shape selected, open the "Animations" tab on the ribbon and click the animation drop-down arrow. Then, in the Exit menu, click "Disappear."

Open the Animation Pane, and click the drop-down arrow next to the animation you've just added. From there, choose "Timing."

Make sure "On Click" is selected in the Start menu, and change the Delay option to "1 second," before clicking "OK."

Then, with this shape still selected, press Ctrl+C (copy), and then Ctrl+V (paste). In the second box, type 9 . With the Animation Pane still open and this second shape selected, click the drop-down arrow and choose "Timing" again. Change the Start option to "After Previous," and make sure the Delay option is 1 second. Then, click "OK."

We can now use this second shape as our template, as when we copy and paste it again, the animations will also duplicate. With this second shape selected, press Ctrl+C and Ctrl+V, type 8 into the box, and continue to do the same until you get to 0 .

Next, remove the animations from the "0" box, as you don't want this to disappear. To do this, click the shape, and in the Animation Pane drop-down, click "Remove."

You now need to layer them in order. Right-click the box containing number 1, and click "Bring To Front." You will now see that box on the top. Do the same with the other numbers in ascending order.

Finally, you need to align the objects together. Click anywhere on your slide and press Ctrl+A. Then, in the Home tab on the ribbon, click "Arrange." First click "Align Center," and then bring the menu up again, so that you can click "Align Middle."

Press Ctrl+A again to select your timer, and you can then move your timer or copy and paste it elsewhere.

Press F5 to see the presentation in action, and when you get to the slide containing the timer, click anywhere on the slide to see your countdown timer in action!

Now that your PPT presentation is more interactive, make sure you've avoided these eight common presentational mistakes before you present your slides.

SlideTeam

Powerpoint Templates

Icon Bundle

Kpi Dashboard

Professional

Business Plans

Swot Analysis

Gantt Chart

Business Proposal

Marketing Plan

Project Management

Business Case

Business Model

Cyber Security

Business PPT

Digital Marketing

Digital Transformation

Human Resources

Product Management

Artificial Intelligence

Company Profile

Acknowledgement PPT

PPT Presentation

Reports Brochures

One Page Pitch

Interview PPT

All Categories

category-banner

Mobile responsive design powerpoint presentation slides

Our Mobile Responsive Design Powerpoint Presentation Slides are topically designed to provide an attractive backdrop to any subject. Use them to look like a presentation pro.

Mobile responsive design powerpoint presentation slides

  • Add a user to your subscription for free

You must be logged in to download this presentation.

Do you want to remove this product from your favourites?

PowerPoint presentation slides

If your company needs to submit a Mobile Responsive Design Powerpoint Presentation Slides look no further. Our researchers have analyzed thousands of proposals on this topic for effectiveness and conversion. Just download our template, add your company data and submit to your client for a positive response.

Flag blue

People who downloaded this PowerPoint presentation also viewed the following :

  • Business Slides , Complete Decks , All Decks , Customer Service , Proposal
  • Business Proposal ,
  • Proposal Templates

Mobile responsive design powerpoint presentation slides with all 27 slides:

Use our Mobile Responsive Design Powerpoint Presentation Slides to effectively help you save your valuable time. They are readymade to fit into any presentation structure.

Mobile responsive design powerpoint presentation slides

Ratings and Reviews

by Eddie Sandoval

December 30, 2021

by Daryl Silva

by Dexter Weaver

Google Reviews

  • Draft and add content
  • Rewrite text
  • Chat with Copilot
  • Create a summary
  • Copilot in Word on mobile devices
  • Frequently asked questions
  • Create a new presentation
  • Add a slide or image
  • Summarize your presentation
  • Organize your presentation
  • Use your organization's branding
  • Copilot in PowerPoint for mobile devices
  • Draft an Outlook email message
  • Summarize an email thread
  • Suggested drafts in Outlook
  • Email coaching
  • Get started with Copilot in Excel
  • Identify insights
  • Highlight, sort, and filter your data
  • Generate formula columns
  • Summarize your OneNote notes
  • Create a to-do list and tasks
  • Create project plans in OneNote

responsive website ppt presentation

Create a new presentation with Copilot in PowerPoint

Note:  This feature is available to customers with a Copilot for Microsoft 365 license or Copilot Pro license.

Create a new presentation in PowerPoint.

Screenshot of the Copilot in PowerPoint button in the ribbon menu

Select Send . Copilot will draft a presentation for you!

Edit the presentation to suit your needs, ask Copilot to add a slide , or start over with a new presentation and refine your prompt to include more specifics. For example, "Create a presentation about hybrid meeting best practices that includes examples for team building.”

Create a presentation with a template

Note:  This feature is only available to customers with a Copilot for Microsoft 365 (work) license. It is not currently available to customers with a Copilot Pro (home) license.

Copilot can use your existing themes and templates to create a presentation. Learn more about making your presentations look great with Copilot in PowerPoint .

Selecting a theme for a new presentation on Office.com.

Enter your prompt or select Create presentation from file to create a first draft of your presentation using your theme or template.

Screenshot of a warning in Copilot in PowerPoint about how creating a new presentation will replace existing slides

Edit the presentation to suit your needs, ask Copilot to add a slide , organize your presentation, or add images.

Create a presentation from a file with Copilot

Note:  This feature is only available to customers with a Copilot for Microsoft 365 (work) license. It is not currently available to customers with a Copilot Pro (home) license.

Your browser does not support video. Install Microsoft Silverlight, Adobe Flash Player, or Internet Explorer 9.

With Copilot in PowerPoint, you can create a presentation from an existing Word document. Point Copilot in PowerPoint to your Word document, and it will generate slides, apply layouts, create speaker notes, and choose a theme for you.

Screenshot of the Copilot in PowerPoint prompt menu with Create a presentation from file option highlighted

Select the Word document you want from the picker that appears. If you don't see the document you want, start typing any part of the filename to search for it.

Note:  If the file picker doesn't appear type a front slash (/) to cause it to pop up.

Best practices when creating a presentation from a Word document

Leverage word styles to help copilot understand the structure of your document.

By using Styles in Word to organize your document, Copilot will better understand your document structure and how to break it up into slides of a presentation. Structure your content under Titles and Headers when appropriate and Copilot will do its best to generate a presentation for you.

Include images that are relevant to your presentation

When creating a presentation, Copilot will try to incorporate the images in your Word document. If you have images that you would like to be brought over to your presentation, be sure to include them in your Word document.

Start with your organization’s template

If your organization uses a standard template, start with this file before creating a presentation with Copilot. Starting with a template will let Copilot know that you would like to retain the presentation’s theme and design. Copilot will use existing layouts to build a presentation for you. Learn more about Making your presentations look great with Copilot in PowerPoint .

Tip:  Copilot works best with Word documents that are less than 24 MB.

Welcome to Copilot in PowerPoint

Frequently Asked Questions about Copilot in PowerPoint

Where can I get Microsoft Copilot?

Copilot Lab - Start your Copilot journey

Facebook

Need more help?

Want more options.

Explore subscription benefits, browse training courses, learn how to secure your device, and more.

responsive website ppt presentation

Microsoft 365 subscription benefits

responsive website ppt presentation

Microsoft 365 training

responsive website ppt presentation

Microsoft security

responsive website ppt presentation

Accessibility center

Communities help you ask and answer questions, give feedback, and hear from experts with rich knowledge.

responsive website ppt presentation

Ask the Microsoft Community

responsive website ppt presentation

Microsoft Tech Community

responsive website ppt presentation

Windows Insiders

Microsoft 365 Insiders

Find solutions to common problems or get help from a support agent.

responsive website ppt presentation

Online support

Was this information helpful?

Thank you for your feedback.

responsive website ppt presentation

How To Get Free Access To Microsoft PowerPoint

E very time you need to present an overview of a plan or a report to a whole room of people, chances are you turn to Microsoft PowerPoint. And who doesn't? It's popular for its wide array of features that make creating effective presentations a walk in the park. PowerPoint comes with a host of keyboard shortcuts for easy navigation, subtitles and video recordings for your audience's benefit, and a variety of transitions, animations, and designs for better engagement.

But with these nifty features comes a hefty price tag. At the moment, the personal plan — which includes other Office apps — is at $69.99 a year. This might be the most budget-friendly option, especially if you plan to use the other Microsoft Office apps, too. Unfortunately, you can't buy PowerPoint alone, but there are a few workarounds you can use to get access to PowerPoint at no cost to you at all.

Read more: The 20 Best Mac Apps That Will Improve Your Apple Experience

Method #1: Sign Up For A Free Microsoft Account On The Office Website

Microsoft offers a web-based version of PowerPoint completely free of charge to all users. Here's how you can access it:

  • Visit the Microsoft 365 page .
  • If you already have a free account with Microsoft, click Sign in. Otherwise, press "Sign up for the free version of Microsoft 365" to create a new account at no cost.
  • On the Office home page, select PowerPoint from the side panel on the left.
  • Click on "Blank presentation" to create your presentation from scratch, or pick your preferred free PowerPoint template from the options at the top (there's also a host of editable templates you can find on the Microsoft 365 Create site ).
  • Create your presentation as normal. Your edits will be saved automatically to your Microsoft OneDrive as long as you're connected to the internet.

It's important to keep in mind, though, that while you're free to use this web version of PowerPoint to create your slides and edit templates, there are certain features it doesn't have that you can find on the paid version. For instance, you can access only a handful of font styles and stock elements like images, videos, icons, and stickers. Designer is also available for use on up to three presentations per month only (it's unlimited for premium subscribers). When presenting, you won't find the Present Live and Always Use Subtitles options present in the paid plans. The biggest caveat of the free version is that it won't get any newly released features, unlike its premium counterparts.

Method #2: Install Microsoft 365 (Office) To Your Windows

Don't fancy working on your presentation in a browser? If you have a Windows computer with the Office 365 apps pre-installed or downloaded from a previous Office 365 trial, you can use the Microsoft 365 (Office) app instead. Unlike the individual Microsoft apps that you need to buy from the Microsoft Store, this one is free to download and use. Here's how to get free PowerPoint on the Microsoft 365 (Office) app:

  • Search for Microsoft 365 (Office) on the Microsoft Store app.
  • Install and open it.
  • Sign in with your Microsoft account. Alternatively, press "Create free account" if you don't have one yet.
  • Click on Create on the left side panel.
  • Select Presentation.
  • In the PowerPoint window that opens, log in using your account.
  • Press Accept on the "Free 5-day pass" section. This lets you use PowerPoint (and Word and Excel) for five days — free of charge and without having to input any payment information.
  • Create your presentation as usual. As you're using the desktop version, you can access the full features of PowerPoint, including the ability to present in Teams, export the presentation as a video file, translate the slides' content to a different language, and even work offline.

The only downside of this method is the time limit. Once the five days are up, you can no longer open the PowerPoint desktop app. However, all your files will still be accessible to you. If you saved them to OneDrive, you can continue editing them on the web app. If you saved them to your computer, you can upload them to OneDrive and edit them from there.

Method #3: Download The Microsoft PowerPoint App On Your Android Or iOS Device

If you're always on the move and need the flexibility of creating and editing presentations on your Android or iOS device, you'll be glad to know that PowerPoint is free and available for offline use on your mobile phones. But — of course, there's a but — you can only access the free version if your device is under 10.1 inches. Anything bigger than that requires a premium subscription. If your phone fits the bill, then follow these steps to get free PowerPoint on your device:

  • Install Microsoft PowerPoint from the App Store or Google Play Store .
  • Log in using your existing Microsoft email or enter a new email address to create one if you don't already have an account.
  • On the "Get Microsoft 365 Personal Plan" screen, press Skip For Now.
  • If you're offered a free trial, select Try later (or enjoy the free 30-day trial if you're interested).
  • To make a new presentation, tap the plus sign in the upper right corner.
  • Change the "Create in" option from OneDrive - Personal to a folder on your device. This allows you to save the presentation to your local storage and make offline edits.
  • Press "Set as default" to set your local folder as the default file storage location.
  • Choose your template from the selection or use a blank presentation.
  • Edit your presentation as needed.

Do note that PowerPoint mobile comes with some restrictions. There's no option to insert stock elements, change the slide size to a custom size, use the Designer feature, or display the presentation in Immersive Reader mode. However, you can use font styles considered premium on the web app.

Method #4: Use Your School Email Address

Office 365 Education is free for students and teachers, provided they have an email address from an eligible school. To check for your eligibility, here's what you need to do:

  • Go to the Office 365 Education page .
  • Type in your school email address in the empty text field.
  • Press "Get Started."
  • On the next screen, verify your eligibility. If you're eligible, you'll be asked to select whether you're a student or a teacher. If your school isn't recognized, however, you'll get a message telling you so.
  • For those who are eligible, proceed with creating your Office 365 Education account. Make sure your school email can receive external mail, as Microsoft will send you a verification code for your account.
  • Once you're done filling out the form, press "Start." This will open your Office 365 account page.

You can then start making your PowerPoint presentation using the web app. If your school's plan supports it, you can also install the Office 365 apps to your computer by clicking the "Install Office" button on your Office 365 account page and running the downloaded installation file. What sets the Office 365 Education account apart from the regular free account is that you have unlimited personal cloud storage and access to other Office apps like Word, Excel, and Outlook.

Read the original article on SlashGear .

presentation slides on laptop

COMMENTS

  1. Responsive Website Presentation (Flexible Duration)

    Responsive Website Presentation. 150 scenes. 143K+ Exports. Flexible. Use an ultimate multi-purpose solution packed with powerful design, featuring transitions and scenes and provide an optimal viewing experience to your audience. If you are a software developer, programmer or graphic designer, the Responsive Website Presentation template will ...

  2. Responsive Web Design Presentation by Noble Desktop

    Responsive design is not about 'designing for mobile'. But it's not about 'designing for the desktop', either. Rather, it's about adopting a more flexible, device-agnostic approach — Ethan Marcotte author of Responsive Web Design. Examples. The Boston Globe; Food Sense; Skinny Ties; Authentic Jobs; mediaqueri.es has many more examples

  3. Responsive web design ppt

    Responsive web design ppt. Mar 14, 2014 • Download as PPTX, PDF •. 7 likes • 6,992 views. NAWAZ KHAN. responsive web design exxample using chrome emulation. Technology. 1 of 35. Download now. Responsive web design ppt - Download as a PDF or view online for free.

  4. How to do Responsive Web Design PowerPoint Presentation

    Download slides: https://www.infodiagram.com/diagrams/it-icons-cloud-software-mobile-network-devices-flat-ppt-clipart/?cp=camp5&utm_source=youtube.com&utm_me...

  5. How to Create Beautiful HTML & CSS Presentations with WebSlides

    Getting Started with WebSlides. To get started, first download WebSlides. Then, in the root folder, create a new folder and call it presentation. Inside the newly created presentation folder ...

  6. Responsive website PowerPoint templates, Slides and Graphics

    Responsive website PowerPoint Presentation Templates and Google Slides . 38 Item(s) Slide 1 of 4. Responsive Website Partial Personalization Ppt Slides. This is a responsive website partial personalization ppt slides. This is a six stage process. The stages in this process are business, marketing, success.

  7. 17 RESPONSIVE WEB DESIGN.

    Download presentation. Presentation on theme: "17 RESPONSIVE WEB DESIGN."—. Presentation transcript: 1 17 RESPONSIVE WEB DESIGN. 2 What RWD is Fluid layouts Media queries Design strategies and patterns Testing options. 3 Introduction to RWD RWD is a design and production approach that allows a web page to adapt to the screen it is viewed on.

  8. Free Web PowerPoint Templates & Google Slides Themes

    Download your presentation as a PowerPoint template or use it online as a Google Slides theme. 100% free, no registration or download limits. Use these web templates to create stunning presentations that showcase your online presence. No Download Limits Free for Any Use No Signups.

  9. Responsive Design

    Web development is a broad term for the work involved in developing a web site for the Internet (World Wide Web) or an intranet (a private network).Web development. Web development Sunil Moolchandani. responsive web design exxample using chrome emulationResponsive web design ppt. Responsive web design ppt NAWAZ KHAN.

  10. Responsive Web Design (RWD)

    Presentation on theme: "Responsive Web Design (RWD)"— Presentation transcript: 1 Responsive Web Design (RWD) MIS 3502, Fall2016 Jeremy Shafer Department of MIS Fox School of Business Temple University 9/20/2016. 2 Our progress: We are here. Server-Side Technology. Mobile Considerations Client-Side Technology Project and Presentation Our ...

  11. PPT

    Responsive Website Design. An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Download presentation by click this link.

  12. Responsive Web Design

    Responsive Web Design found in: Responsive Web Design Colored Icon In Powerpoint Pptx Png And Editable Eps Format, Responsive Web Design Converter In Powerpoint And Google Slides Cpb, Responsive Web Design Audit With Performance.. ... Response rates web based ppt powerpoint presentation layouts structure cpb. Animated . Slide 1 of 10 ...

  13. Responsive PowerPoint Templates

    Home PowerPoint Templates Responsive. Responsive. Responsive Design Process Template. Diagrams. Android UI Design Kit for PowerPoint. ... Save hours of manual work and use awesome slide designs in your next presentation. Subscribe Now #1 provider of premium presentation templates for PowerPoint & Google Slides. COMPANY. About Us; Blog;

  14. Responsive Web CSS PowerPoint Presentation and Slides

    This PPT presentation can be accessed with Google Slides and is available in both standard screen and widescreen aspect ratios. It is also a useful set to elucidate topics like Responsive Website Checklist . This well-structured design can be downloaded in different formats like PDF, JPG, and PNG.

  15. Responsive Design Presentation

    Responsive Design Presentation. Responsive Web Design statistics show monthly increases in usage from June to August 2012. Global internet and mobile app usage is also projected to more than double by 2015. Responsive Web Design (RWD) provides an optimal viewing experience across different devices by adjusting layout and resizing content.

  16. Responsive PowerPoint Templates & Google Slides Themes

    Download Free and Premium Responsive PowerPoint Templates. Choose and download Responsive PowerPoint templates, and Responsive PowerPoint Backgrounds in just a few minutes.And with amazing ease of use, you can transform your "sleep-inducing" PowerPoint presentation into an aggressive, energetic, jaw-dropping presentation in nearly no time at all.

  17. Responsive Web Design Principles Ppt Powerpoint Presentation Summary

    Presenting Responsive Web Design Principles Ppt Powerpoint Presentation Summary Graphic Tips Cpb slide which is completely adaptable. The graphics in this PowerPoint slide showcase seven stages that will help you succinctly convey the information. In addition, you can alternate the color, font size, font type, and shapes of this PPT layout ...

  18. Free Interactive Google Slides themes and PowerPoint templates

    Download the Physics Flashcards presentation for PowerPoint or Google Slides and start impressing your audience with a creative and original design. Slidesgo templates like this one here offer the possibility to convey a concept, idea or topic in a clear, concise and visual way, by using different graphic resources.

  19. Fully responsive PowerPoint templates, Slides and Graphics

    Rock your meeting and presentations with fully responsive presentation templates and Google slides. Toggle Nav. Search. Search. Search. 5. Notifications 5. SlideGeeks added 430 new ... Access our PowerPoint Ebooks and become a brilliant presentation designer. 4 days ago. SlideGeeks added 315 new products (e.g. Completely Researched Decks, ...

  20. Free Website Presentation Maker Online with Templates

    Create a Website Presentation Video Online for Free. FlexClip's free website presentation generator online can help you make a presentation video to introduce & promote your website in the fresh and innovative manner, at the speed of inspiration! Find clean website presentation video templates as a starting point, grab uncountable graphic ...

  21. Responsive PowerPoint Presentation and Slides

    We are proud to present our 0514 quick responsive development powerpoint presentation. Three unique cycle diagram is used to build this diagram PPT. this diagram ppt is can be used for multistage process flow and quick responsive development. Slide 1 of 5. Customer centric targeted responsive engaged inspired.

  22. PPT

    Salesonsky [https://salesonsky.com.au/] is a leading web design agency in Melbourne, specializing in crafting user-centric and responsive websites that drive results. Contact Salesonsky today to schedule a free consultation and discuss how their Responsive Website Design Melbourne expertise can help you achieve your digital goals. - A free PowerPoint PPT presentation (displayed as an HTML5 ...

  23. 6 Ways to Create More Interactive PowerPoint Presentations

    Click anywhere on your slide and press Ctrl+A. Then, in the Home tab on the ribbon, click "Arrange." First click "Align Center," and then bring the menu up again, so that you can click "Align Middle." Press Ctrl+A again to select your timer, and you can then move your timer or copy and paste it elsewhere.

  24. 17 Presentation Apps and PowerPoint Alternatives for 2024

    1. Visme. Let's start with the best app for presentations you can use to design your presentation. Visme is a cloud-based graphic design software that allows designers and non-designers alike to create beautiful and professional presentations, infographics, social media graphics and more.

  25. Mobile responsive design powerpoint presentation slides

    PowerPoint presentation slides: If your company needs to submit a Mobile Responsive Design Powerpoint Presentation Slides look no further. Our researchers have analyzed thousands of proposals on this topic for effectiveness and conversion. Just download our template, add your company data and submit to your client for a positive response.

  26. Create a new presentation with Copilot in PowerPoint

    Select the Copilot button in the Home tab of the ribbon. Enter your prompt or select Create presentation from file to create a first draft of your presentation using your theme or template. Copilot will replace your current presentation with a new one. If needed, save a copy first and rerun the steps above. If you already have a copy, confirm ...

  27. How To Get Free Access To Microsoft PowerPoint

    Select Presentation. In the PowerPoint window that opens, log in using your account. Press Accept on the "Free 5-day pass" section. This lets you use PowerPoint (and Word and Excel) for five days ...