Design cross-platform Experiences
Tags: javascript, flexbox, responsive, react
Published: 2022-02-25 13:43:49

When designing a new product or feature, it’s important to think about the different types of platforms that the design will be experienced on. As a refresher, a platform is the medium that users experience your product on. Some common platforms are:

  -  Desktop computers
  -  Laptop computers
  -  Mobile phones
  -  Tablets
  -  Wear-able, like smart watches
  -  TVs
  -  Smart displays

![Cross Platform Ideas](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/26zygv0u8kpun7atid82.png)

 A product might be experienced on countless different platforms, but desktop computers, laptop computers, and mobile phones are the most commonly used platforms for interacting with apps and websites. These are the platforms that you'll spend the most time focusing on during this certificate program. In this reading, you'll learn about key considerations when designing for different platforms to help you get started.

### **Screen size **

The first consideration when designing for various platforms is adjusting design elements and features to fit different screen sizes. For example, you have a lot of screen space when you design for desktop and laptop computers. But when you design for smaller screens, like mobile phones, you have to carefully decide which parts of the design you'll prioritize including in the limited space. This means making every word, icon, and image count!

In the first five courses of this certificate program, you will design an app for a mobile phone. In the sixth course of the program, you will design a responsive website, which allows the design of a website to change automatically depending on the device's screen size. This means you'll learn a lot more about designing for different screen sizes later in the certificate program, so stay tuned.

### **Interaction**

In addition to the size of the screen, you also need to consider the way users interact with each platform and how those interactions might affect your design decisions. For example, when using desktop and laptop computers, navigation typically involves using keyboards and mice to click. On the other hand, mobile phones, tablets, and smartwatches usually rely on touchscreen navigation, instead of clicking, and users use physical gestures like swiping, scrolling, and tapping to navigate. 

It’s also critical to consider accessibility when developing your designs at each point. Different groups of people will interact with your product in different ways, like using a screen reader, closed captioning, or a switch device. To get started, it’s helpful to try using some of these technologies yourself, in order to understand how people with disabilities might interact with your product on different platforms. 

### **Content layout**

In the world of UX design, layouts refer to the way that information is organized on the screen. When designing for desktop or laptop computers, you have the advantage of working with a familiar, standardized size: landscape (horizontal) mode. The screen is wide, content can be laid out in columns, and there’s much more flexibility to design. 

In contrast, mobile phone content is usually laid out in portrait (vertical) mode, which is ideal for scrolling. In addition, mobile phones often allow users the option to use landscape (horizontal) mode by rotating their device. Implementing this in your designs requires more work from you as a designer, but provides users with a wider range of options.

Consider the layout of content on a couple more platforms: tablets combine both the desktop and mobile phone user experience, which means you can incorporate aspects of desktop and mobile phone content layouts in your designs. Smartwatches tend to have compact square or rectangular screens, offering very little digital real estate to lay out content. 

### **Functionality**

There are a lot of reasons why users might choose one platform over another, but functionality and the kind of tasks they want to complete is a huge driver. For example, a desktop computer might be the best platform when users need to get intensive work done across a long stretch of time. Alternatively, mobile phones are portable, making them ideal for more casual and immediate tasks like texting, emailing, and checking social media while on-the-go. Your designs for each platform will likely vary based on how and when you expect users to need the product.

Before This Project i Used only Css Framework For Responsiveness. But For This project i need to use custom Media Queries and I gained Cross Platform Responsive Experience.