- Introduction
- Wireframing 1
- Wireframing 2
- Navigation Bar
- Customizing navigation bar
- Adding crousel
- Customizing crousel
- Adding cards
- Adding cards for blogs
Bootstrap is a new era! Enroll now.
Mobile revolution that started a decade ago not only changed the way we interact with products but also changed the way we design products. The first iPhone was a powerful computer that combined three things —phone, music player, and internet browser. The latter had a tremendous impact on the web industry because designers had to adapt websites for small-size screens. And the situation got more complex when other hardware manufacturers rushed to adapt to even more niche mobile devices. As a result, designers who worked on web designs had to adapt the website not only for various desktop resolutions but also for many different mobile devices.
It quickly became evident that creating a separate version of the site for each resolution and new device was impractical. Design industry needed a new approach for web design that would be flexible enough to support various types of screens and resolutions. That approach is called responsive design, and it represents a fundamental shift in how we build websites.
In this article, I want to share foundational rules that will help you deliver a quality experience, no matter how large or small the display size your users will have.
What is responsive design?
Responsive web design is an approach that allows design across various devices (mobile, desktop, tablet, etc.) and suggests design should respond to the user’s behavior based on screen size, platform and orientation.
Flexible grids are foundational elements of responsive design. All assets such as images adapt to various screen sizes & resolutions (using CSS media queries). As a result, the user has great UX no matter what device they use—whether it’s a large desktop or small screen of mobile device, the website automatically switch to accommodate for resolution.
In 2010, Ethan Marcotte wrote an introductory article about the approach, Responsive Web Design, for A List Apart. Here is a great quote from Ethan: “Rather than tailoring disconnected designs to each of an ever-increasing number of web devices, we can treat them as facets of the same experience. We can design for an optimal viewing experience, but embed standards-based technologies into our designs to make them not only more flexible, but more adaptive to the media that renders them.”
Responsive vs. Adaptive vs. Mobile First
In the world of web design, we have a few terms that describe the process of design optimization for various screens— responsive, adaptive and mobile-first designs. You may wonder what exactly is the difference between all of them?
Responsive and adaptive web design are closely related, but there are some differences between them. Responsive web design uses CSS media queries to dynamically change the page layout based on the target device such as display type, width, height, etc. Adaptive design, on the other hand, uses static layouts based on breakpoints that don’t respond once they’re loaded. As you can see, adaptive design is a less flexible solution for the problem of design optimizations for various screens.
“Mobile-first” is a conceptual term. As the name suggests, mobile-first means that web designers start the product design from the mobile medium and then design tablet, desktop, and monitors. “Mobile first” way of thinking for design helps product teams to focus on the most important content and deliver it to users.
Top 10 Ecommerce Pricing Strategies you should be aware of in 2021
Learn how to find your dream job, how to apply and prepare for the interview and how to ace the interview
Who are the Angels, how do I work with them, what can they do, who am I, what is our potential?
In this course, I will be going over what Lincoln-Douglas Debate is.
I am Ishank Popli, I have experience of 3 years in designing and developing products from scratch. I built 2 businesses in the past 2 years, was the former COO of a blockchain startup, and am currently Managing Partner in a tech-based mental healthcare startup. I worked for 6 companies and scaled their business with designs, products, and development. I curated my learnings in udemy courses which will enhance your knowledge and help you to stay out of the queue of normal institution's learning way.