Webmasters Gallery

Yes, yes. Functionally, they are different. But heck if I didn’t know about the wacky thresholds until Jens Oliver Meiert tooted a pair of quick polls.

According to the HTML Standard:

8. If the current cell has a colspan attribute, then parse that attribute’s value, and let colspan be the result.
   If parsing that value failed, or returned zero, or if the attribute is absent, then let colspan be 1, instead.
   If colspan is greater than 1000, let it be 1000 instead.
9. If the current cell has a rowspan attribute, then parse that attribute’s value, and let rowspan be the result.
   If parsing that value failed or if the attribute is absent, then let rowspan be 1, instead.
   If rowspan is greater than 65534, let it be 65534 instead.

I saw the answers in advance and know I’d have flubbed rowspan. Apparently, 1000 table columns are plenty of columns to span at once, while 65534 is the magic number for clamping how many rows we can span at a time. Why is the sweet spot for rowspan 6,4543 spans greater than colspan? There are usually good reasons for these things.

What that reason is, darned if I know, but now I have a little nugget for cocktail chatter in my back pocket.

---

How are the `colspan` and `rowspan` attributes different? originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

Rejection sucks. And for some reason, it’s always unexpected, which makes it feel like an ambush. Being creative is about making yourself vulnerable, and that’s why rejection hurts so much.

There’s more to streamlining e-commerce stores than web hosting and smart marketing. If you aren’t already using edge computing in your e-commerce business, you might be behind! Here’s why you should consider it for boosting your business website’s speed and performance. 

What is Edge Computing? 

Edge computing is a distributed computing framework that brings computation and data storage closer to the location where it’s generated rather than relying on a central data center or cloud. This means processing data on or near the device itself, like a smartphone, local server, or IoT device. 

Benefits of Edge Computing for E-commerce 

Edge computing plays an important role in modern technology. It boosts the speed, performance, and efficiency across various applications. Here’s how: 

1. Real-Time Processing 

Edge computing allows for immediate data processing at the source. In today’s tech world, this is a big help for applications that use real-time analytics. Everything from email marketing to choosing appropriate specials can benefit from real-time data, as you can make more informed decisions about what to offer and how to offer it to your buyers. 

2. Reduced Latency 

By minimizing the distance data has to travel, edge computing cuts down on latency by quite a lot. Your users can enjoy faster response times and improved experiences, especially if your e-commerce store contains how-to-use videos or other data-heavy applications. 

3. Bandwidth Optimization 

Processing data locally reduces the volume of data sent to central servers or the cloud. This ultimately leads to more efficient use of network resources and lowers operational costs, which means you can save money in the long run or put it towards other important parts of your business. 

4. Enhanced Security and Privacy 

Edge computing can improve data security by processing sensitive information locally rather than transmitting it over long distances. The shorter distance data has to travel, the less chance there is for hackers to intercept it and use it. 

5. Scalability and Flexibility 

Edge computing supports scalable and flexible infrastructure, as it distributes computing power across multiple devices. This setup is ideal for e-commerce businesses looking to expand their operations without investing heavily in centralized data centers. 

6. Improved Reliability

Local data processing makes sure that applications continue to function even when there’s intermittent connectivity to the central server. This means your store won’t be down for long even if the central server is having issues, keeping you up and running for your customers. 

How is Edge Computing Transforming the E-commerce Industry? 

Edge computing makes both online and in-store shopping faster and more efficient. And what customer doesn’t want a speedy, seamless experience? Here are some ways it’s transforming the industry: 

High-Speed, Low-Latency Internet 

Edge computing reduces delays and speeds up processing times. For e-commerce platforms, faster load times lead to better user experiences and in the end, higher conversion rates. Customers are more likely to stay on your website and make purchases when the pages load quickly?. Edge computing takes this a step further than just choosing a fast web host. 

Virtual Try-On Experiences 

Edge computing more easily enables interactive features like virtual try-ons for clothing, accessories, and cosmetics, or real-time viewing of other products. By processing data locally, these features become more responsive and realistic. Customers can see how products will look on them in real time, which could be a catalyst for conversions! 

Enhanced Personalization

With edge computing, e-commerce sites can deliver personalized recommendations and offers in real-time by processing customer data faster locally. This helps e-commerce businesses analyze browsing habits, past purchases, and preferences instantly, tailoring the shopping experience to each individual customer, which can boost sales and customer loyalty?. 

Reliable and Secure Connectivity

Data transmission is more reliable and secure with edge computing. There’s much less chance of data breaches and it can boost your customers’ trust in you as their sensitive info is well-protected. 

Storage and Bandwidth Savings

By processing data locally, edge computing reduces the amount of data that needs to be sent to centralized cloud servers. This translates to lower bandwidth requirements and, in turn, lower transmission costs, especially for apps or platforms generating large amounts of data. 

Dynamic Content 

Edge computing enables e-commerce platforms to deliver dynamic content that adapts to user behavior in real time. This includes things like personalized product listings, targeted advertisements, and special promotions, making the shopping experience even more relevant and engaging. 

Image Optimization and Deployment 

High-quality product images are important for e-commerce, but they can slow down website performance. Edge computing allows on-the-fly image optimization, making sure they load quickly without sacrificing quality. 

Service Automation to Reduce Wait Times and Developer Workload

Edge computing can automate various e-commerce services, like chatbots for customer support or inventory management systems. This reduces wait times for customers and frees developers up to focus on more strategic tasks. 

Best Practices for Efficient Data Management in E-commerce

Efficient data management in e-commerce businesses helps to optimize operations, improve customer experiences, and keep data safe. And it’s not as hard as you might think. 

By effectively collecting, storing, analyzing, and using data, e-commerce businesses can gain valuable insights into customer behavior, ultimately leading to serving your customers better (and making more sales). Here’s how: 

Data Categorization and Organization 

• Product Information: Maintain accurate and detailed product data, including descriptions, images, prices, and specifications. This makes sure customers have all the information they need to make informed purchasing decisions?. 
• Customer Data: Securely store and manage customer information like names, addresses, purchase history, and preferences. This data can be used to personalize customer interactions and make your shoppers feel heard and understood. 
• Sales Data: Track and analyze sales transactions, revenue, and trends. Use this data to make informed decisions about inventory management, marketing strategies, and overall business operations?. 

Invest in Data Analytics Tools 

• Use powerful analytics tools to pull actionable insights from your e-commerce data about customer behavior, buying patterns, popular products, and peak shopping times. 
• Leverage this knowledge to personalize product recommendations, marketing campaigns, and promotions, improving the overall customer experience and increasing sales?. 

Use Edge Computing for Real-time Personalization

• Implement machine learning models to analyze customer interactions in real time to deliver smartly-timed personalized product suggestions, tailored offers, and dynamic content based on user preferences and browsing history?. 
• Enhancing the shopping experience in real-time can make a big difference to engagement, and increase conversion rates and customer satisfaction?. 

Prioritize Data Security and Compliance

• Implement robust security measures to protect sensitive customer data. This includes encryption, authentication, and regular security audits?. 
• Make sure you’re compliant with data protection regulations like GDPR or CCPA. Regularly update security protocols to stay ahead of evolving threats?. 

Optimize Website Performance 

• Use edge caching to store frequently accessed content closer to your users, reducing page load times and improving responsiveness?. This is a big pro and will keep users on your page longer and make them more likely to buy. 
• Implement a Content Delivery Network (CDN) to distribute content across multiple servers, increasing both the speed and reliability of your e-commerce platform?. 

Monitor and Optimize Inventory

• Use edge computing to track inventory levels in real time. This helps avoid stockouts, keeping your customers happy all the time. 
• Automatically update product availability information on your website to manage customer expectations and improve the shopping experience?. 

Gather and Use Customer Feedback

• Collect customer feedback through surveys, user reviews, and social media. Use this real-person feedback to identify pain points, improve the user experience, and refine your product offerings? to suit your audience. 
• Analyze feedback at the edge to quickly identify trends and make data-driven decisions?. Real-time information streamlines the process when used correctly. 

Stay Updated with Industry Trends

• Keep up with the latest e-commerce and edge computing technologies. Explore emerging trends like augmented reality (AR), virtual reality (VR), and voice commerce, seeing how they could fit into your e-commerce experience. 

Implementing Edge Computing in E-Commerce 

1. Define Objectives and Use Cases 

• Identify Pain Points: What are the current challenges your e-commerce platform faces? Are there issues with website speed, personalization, inventory management, or data analysis? 
• Prioritize Goals: Figure out which areas would benefit most from edge computing. Do you want to focus on improving website performance, enhancing personalization, or optimizing inventory management? 
• Choose Use Cases: Select specific use cases that align with your goals. For example:
  • Real-time product recommendations 
  • Personalized content delivery 
  • Dynamic pricing based on demand 
  • Inventory updates across multiple locations 
  • A/B testing of website features 

2. Assess Your Infrastructure 

• Evaluate Current Setup: Analyze your existing e-commerce platform, hosting infrastructure, and data management systems to look for weak spots. 
• Identify Bottlenecks: Find out where latency, data processing, or storage limitations are reducing your store’s performance. 
• Compatibility: Make sure your e-commerce platform and other systems can integrate with edge computing solutions before deciding to go for it. 

3. Choose the Right Edge Computing Platform

• Research Providers: Explore different edge computing providers and compare their offerings. Don’t just choose the first one you come across! 
• Consider Your Needs: Look for a platform that aligns with your use cases, scalability requirements, and budget. 
• Key Features: Prioritize features like:
  • Global Network: A widespread network of edge servers to keep latency low for users worldwide.
  • Developer Tools: SDKs and APIs for easy integration with your e-commerce platform. 
  • Security: Robust security measures to protect sensitive data.
  • Analytics: Tools to monitor performance and gain insights from edge data.

4. Deploy Edge Nodes

• Strategic Placement: Determine the best locations for edge nodes based on user demographics and traffic patterns. 
• Configuration: Configure your edge nodes to cache frequently accessed content, process data locally, and execute relevant applications. 
• Scalability: Make sure your edge infrastructure can scale with your business. If you want to expand at any point, this is a must. 

5. Develop Edge Applications

• Tailor to Use Cases: Develop or adapt applications specifically for the edge environment if you’re in the position to. 
• Lightweight and Efficient: Optimize applications for low latency and minimal resource consumption. This will save you money in the long run. 

6. Integrate with E-Commerce Platform

• Seamless Integration: Make sure there’s smooth communication between your e-commerce platform and edge applications. 
• Data Synchronization: Establish mechanisms to synchronize data between edge nodes and central databases. 
• API Integration: Use APIs to connect edge apps with your e-commerce platform’s functionalities. 

7. Test and Monitor 

• Thorough Testing: Rigorously test your edge applications in a staging environment before deploying them to production. It’s worth the extra time to make sure they work as they should. 
• Performance Monitoring: Monitor the performance of edge nodes, applications, and your overall e-commerce platform over time. 
• Data Analysis: Use analytics tools to gain insights from edge data. Figure out what you could improve based on the data. 

8. Iterate and Optimize

• Continuous Improvement: Regularly review and refine your edge computing based on performance data and user feedback.
• Experimentation: Test new use cases and features whenever possible to further enhance the customer experience. 
• Stay Updated: Keep up with the latest advancements in edge computing technology to maintain a competitive edge in the e-commerce industry. 

Conclusion 

Edge computing for e-commerce will one day be the norm. Those who get in on it now should be able to use its features to boost their customer experience and ultimately, make more sales. If you’re an e-commerce company, consider it—it could make a the difference between surviving and thriving in the industry!

Featured Image by rawpixel.com on Freepik

The post Edge Computing for E-Commerce: Improving Speed and Performance  appeared first on noupe.

Free e-book from Jens Oliver Meiert that’ll bore you to death in the best way: Rote Learning HTML & CSS

---

Quick Hit #11 originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

Killed by Google is called a “graveyard” but I also see it as a resume in experimentation.

---

Quick Hit #10 originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

The last 3-4 years have seen a remarkable surge in the number of people working in a remote setting. This has made online video conferencing apps such as Zoom very popular. In 2023, Zoom has locked in 300 million daily users. It also generated a revenue of $4.5 billion.

So, entrepreneurs and business owners of all sizes are using video chat apps. This is because it lets them save cash and get opportunities. However, building one can be tough. In this blog, let us look at the process of building a video-conferencing application. We will also take a look at the features and steps along with the back-end technology. Let us begin.

How Do Video Conferencing Apps Work?

First, let us understand, in short, what video chat apps –

Imagine meeting face-to-face without leaving your seat! Apps for video conferencing make this possible. It allows people in different locations to connect virtually using a computer, internet, microphone, and webcam. It captures video and audio. It then shrinks the data size for efficient transmission over the internet. After this, it expands it back to the other end for smooth viewing and listening.

Let us look at some of the essential features that video communication apps like Zoom offer-

1. Screen Sharing

Screen sharing is an essential feature in a video meeting app like Zoom. It allows the participant to show their computer screen to other members in the meeting. This can help the speaker convey their ideas better.

2. Chat

Zoom wouldn’t be complete without the built-in chat and video calling API function. This seemingly simple feature is very important. It enhances communication during virtual meetings. Participants can use the chat to send messages or have private conversations without interrupting the flow of the video call. It can be mainly beneficial for people who can’t use their microphones.

3. Virtual Hand-Raising                

Meetings in a group video conference app can get noisy as many individuals are on the call. Zoom offers a feature called virtual hand raising. When a user presses this button, all the other members get notified. This ensures that people get a chance to voice out their opinions without getting disturbed.

4. Polls

Polls allow the members to vote in a video conference web app. The poll results are automatically mailed to the host after the session is over.

5. Mute Participants

In a group online conference app, the “mute participants” feature allows attendees to join a meeting without a microphone. This helps to lower background sounds during the call. It also ensures a smoother and more attentive meeting for every member.

6. Record Meetings

A video conferencing Android app like Zoom offers a record meeting function. This feature allows the host to capture the entire conversation. These recordings can then be utilized for multiple purposes. It can also allow attendees to revisit key points later or create a record of important decisions or discussions.

7. Encryption

Security is very important for video conferencing apps. Encryption plays a critical role. If you are creating a video application, you need to implement 128-bit encryption. This utilizes a 128-bit key to scramble and unscramble video calls between participants. This encryption helps safeguard your messages sent by video conferencing API, making them indecipherable to anyone without the proper key.

The Important Elements of Making a Conferencing App

Developing a video conferencing app like Zoom can be a challenge. Many factors have to be considered when you build a video chat app. Let us see some of the basic ones.

1. Back-end Development

The back end of a conference video app is the core. If you are hiring developers, you need to bring in experts who are skilled in building the server from scratch.

2. UI Design

The UI design is the face of your application. So, it must be made to attract users. This can create a good impression for your video conference app for Android.

3. iOS and Android Compatibility

You need to make a video conferencing app that is open to both Android and iOS devices. This expands the target market significantly. Fortunately, developing for both platforms is becoming increasingly simple. You can leverage Swift to create iOS apps. Meanwhile, WebRTC provides a framework for building an Android video conferencing app.

The Cloud Network

A cloud conference video call app eliminates the need for expensive setups. This makes it a friendly and affordable solution. The technology also allows users to conduct live video calls with anyone possessing an internet connection.

A cloud group conference app like Zoom relies on data centers. They are strategically placed around the world. These interconnected centers are managed by cloud computing systems. This ensures smooth global connectivity.

The Video Architecture

While making a video conference app, you need to ensure that it can handle the video’s requirements. Let us look at 4 features that differentiate the cloud-native and back-end technology in Zoom.

1. Application Layer Quality of Service

One of Zoom’s key advantages is its ability to fine-tune the quality of video for each individual device and network connection. This is achieved through a clever technology called Application Layer QoS. It analyzes factors like bandwidth limitations and device capabilities. This allows Zoom to optimize the data streams for each participant.

2. Multimedia Routing

Zoom’s magic behind managing audio and content sharing during calls lies in its multimedia routing system. These servers act as traffic controllers. They ensure that the audio and any shared content streams are efficiently delivered to all participants during a meeting in a multiple video conference app.

3. Distributed Architecture

A video conferencing SDK like Zoom does not rely on a single central location for its servers. Instead, they have data centers scattered around the world. This clever design is called a distributed architecture. The main benefit is reduced delays in communication. This means no matter where you are in the world, you can experience good video quality during your Zoom meetings.

4. Multi-Bitrate Encoding

A web conference app like Zoom utilizes a technique called multi-bitrate encoding. This essentially means the video stream is compressed into numerous versions with various resolutions. During a call, Zoom automatically delivers the most suitable version to each participant. However, it is based on their internet connection speed. This eliminates the necessity to constantly encode and decode the video stream.

To Conclude

Video conferencing apps like Zoom have changed the way we communicate. Apart from Zoom, there are a lot of best video conferencing apps for Android that offer these services, like Google Meet and Microsoft Teams. If you are looking to build the best video conference app, you need to integrate essential audio and video features. Apart from that, you also need to encrypt your app and design the UI. This can leave your users satisfied with your services.

Featured Image by freepik

The post A Complete Guide to Build a Video Conferencing App Like Zoom appeared first on noupe.

Modern CSS keeps giving us a lot of new, easier ways to solve old problems, but often the new features we’re getting don’t only solve old problems, they open up new possibilities as well.

Container queries are one of those things that open up new possibilities, but because they look a lot like the old way of doing things with media queries, our first instinct is to use them in the same way, or at least a very similar way.

When we do that, though, we aren’t taking advantage of how “smart” container queries are when compared to media queries!

Because of how important media queries were for ushering in the era of responsive web design I don’t want to say anything mean about them… but media queries are dumb. Not dumb in terms of the concept, but dumb in that they don’t know very much. In fact, most people assume that they know more than they do.

Let’s use this simple example to illustrate what I mean:

html {
  font-size: 32px;
}

body {
  background: lightsalmon;
}

@media (min-width: 35rem) {
  body {
    background: lightseagreen;
  }
}

What would the viewport size be for the background color to change? If you said 1120px wide — which is the product of multiplying 35 by 32 for those who didn’t bother doing the math — you aren’t alone in that guess, but you’d also be wrong.

Remember when I said that media queries don’t know very much? There are only two things they do know:

• the size of the viewport, and
• the browser’s font size.

And when I say the browser’s font size, I don’t mean the root font size in your document, which is why 1120px in the above example was wrong.

The font size they look at is the initial font size coming from the browser before any values, including the user agent styles, are applied. By default, that’s 16px, though users can change that in their browser settings.

And yes, this is on purpose. The media query specification says:

Relative length units in media queries are based on the initial value, which means that units are never based on results of declarations.

This might seem like a strange decision, but if it didn’t work that way, what would happen if we did this:

html {
  font-size: 16px;
}

@media (min-width: 30rem) {
  html {
    font-size: 32px;
  }
}

If the media query looked at the root font-size (like most assume it does), you’d run into a loop when the viewport would get to 480px wide, where the font-size would go up in size, then back down over and over again.

Container queries are a lot smarter

While media queries have this limitation, and for good reason, container queries don’t have to worry about this type of problem and that opens up a lot of interesting possibilities!

For example, let’s say we have a grid that should be stacked at smaller sizes, but three columns at larger sizes. With media queries, we sort of have to magic number our way to the exact point where this should happen. Using a container query, we can determine the minimum size we want a column to be, and it’ll always work because we’re looking at the container size.

That means we don’t need a magic number for the breakpoint. If I want three columns with a minimum size of 300px, I know I can have three columns when the container is 900px wide. If I did that with a media query, it wouldn’t work, because when my viewport is 900px wide, my container is, more often than not, smaller than that.

But even better, we can use any unit we want as well, because container queries, unlike media queries, can look at the font size of the container itself.

To me, ch is perfect for this sort of thing. Using ch I can say “when I have enough room for each column to be a minimum of 30 characters wide, I want three columns.”

We can do the math ourselves here like this:

.grid-parent { container-type: inline-size; }

.grid {
  display: grid;
  gap: 1rem;

  @container (width > 90ch) {
    grid-template-columns: repeat(3, 1fr);
  }
}

And this does work pretty well, as you can see in this example.

As another bonus, thanks to Miriam Suzanne, I recently learned that you can include calc() inside media and container queries, so instead of doing the math yourself, you can include it like this: @container (width > calc(30ch * 3)) as you can see in this example:

A more practical use case

One of the annoying things about using container queries is having to have a defined container. A container cannot query itself, so we need an extra wrapper above the element we want to select with a container query. You can see in the examples above that I needed a container on the outside of my grid for this to work.

Even more annoying is when you want grid or flex children to change their layout depending on how much space they have, only to realize that this doesn’t really work if the parent is the container. Instead of having that grid or flex container be the defined container, we end up having to wrap each grid or flex item in a container like this:

<div class="grid">
  <div class="card-container">
    <div class="card">
  </div>
  <div class="card-container">
    <div class="card">
  </div>
  <div class="card-container">
    <div class="card">
  </div>
</div>

.card-container { container-type: inline-size; }

It’s not that bad in the grand scheme of things, but it is kind of annoying.

Except there are ways around this!

For example, if you’re using repeat(auto-fit, ...) you can use the main grid as the container!

.grid-auto-fit {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(30ch, 100%)), 1fr);
  container-type: inline-size;
}

Knowing that the minimum size of a column is 30ch, we can leverage that info to restyle individual grid items depending on how many columns we have:

/* 2 columns + gap */
@container (width > calc(30ch * 2 + 1rem)) { ... }

/* 3 columns + gaps */
@container (width > calc(30ch * 3 + 2rem)) { ... }

I’ve used this in this example to change the styles of the first child in my grid based on whether we have one, two, or three columns.

And while changing the background color of something is great for demos, we can, of course, do much more with this:

The downside to this approach

The only downside I’ve found using this approach is that we can’t use custom properties for the breakpoints, which would really improve the DX of this.

That should eventually change considering custom media queries are in the spec editor’s draft of the Media Queries Level 5 specifications, but its been in there for a while with no movement from any browsers, so it might be a long time before we can use them.

And while my opinion is that having custom properties for these would both make them more readable and easier to update, it opens up enough possibilities that it’s still worth it without them.

What about flexbox?

With flexbox, the flex items are what define the layout, so it’s a little strange in that the sizes we apply on the items are what are important in the breakpoints.

It can still work, but there is a big issue that can arise if you do this with flexbox. Before we look at the issue, here is a quick example of how we can get this working with flexbox:

.flex-container {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;

  container-type: inline-size;
}

.flex-container > * {
  /* full-width at small sizes */
  flex-basis: 100%;
  flex-grow: 1;

  /* when there is room for 3 columns including gap */
  @container (width > calc(200px * 3 + 2rem)) {
    flex-basis: calc(200px);
  }
}

In this case, I used px to show it works as well, but you could use any unit there, as I did with the grid examples.

This might look like something you can use a media query for as well — you can use the calc() in them too! — but this would only work in one if the parent has a width that matches the viewport width, which most of the time isn’t the case.

This breaks if the flex items have padding

A lot of people don’t realize it, but the flexbox algorithm doesn’t take padding or borders into account, even if you change your box-sizing. If you have padding on your flex items, you’ll basically have to magic number your way to getting it to work.

Here’s an example where I added some padding but I haven’t changed anything else, and you’ll notice one of those awkward two-columns with one stretched on the bottom layouts at one point:

Because of this, I do generally find myself using this type of approach more often with grid than flexbox, but there are definitely situations where it can still work.

Like before, because we’re aware of how many columns we have, we can leverage that to make more dynamic and interesting layouts depending on the space available for a given element, or elements.

Opening up some interesting possibilities

I’ve only started playing around with this type of thing, and I’ve found that it’s opened up some new possibilities that we never had with media queries, and that makes me excited to see what else is possible!

---

“Smart” Layouts With Container Queries originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

“This isn’t a website. Or even a blog. It’s a conversation.”

That’s the idea! Jay Hoffman and I’ve been chatting a long time now, back since he began writing a series on web history. It’s easy-going talking with someone with all that knowledge about the web’s interesting nooks and crannies.

Anyway, I always look forward to those chats. Sometimes, though, one of can’t make it for whatever reason. At the time, we’d been talking about different approaches to blogging and were particularly keen on the whole “digital garden” concept. We weren’t going to plant one or anything, but that inspired us to move our long-running conversation to a blog — you know, one of the best mediums ever in web history.

We didn’t want something linear in the sense that the blog is an archive of posts in chronological order. No, instead we wanted it to start as a seed that grows into a vine that twists and turns at different bends.

That’s where the “Dialogues” idea came in. It’s all Jay’s, really. He starts by asking me a question that I answer in the form of a post with a follow-up question that he, in turn, answers in a post with a follow-up question, and on and on.

The first question is already up there, and it’s a nice little ice breaker: What was the moment the web clicked for you? I had to take a few moments to let that one sink in and reflect on myself as a web user from 30 years ago. What a great little mind exercise and thing to talk about!

---

Dialogues Blog originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

You might recall that Alvaro suggests bumping up font-size to 1.25rem from the default user agent size of 16px. Sebastian Laube pokes at that:

I wouldn’t adopt Alvaro’s suggestion without further ado, as I would waste so much space on a smartphone, for example, and many users would probably be irritated by the large font.

I set a font size of 1.2rem from a certain viewport size. But this also has to be done carefully, because then grey areas arise in which media queries suddenly fall back into another area…

I personally agree with Alvaro that the default 16px size is too small. That’s just how I feel as someone who is uncomfortably close to wearing the bottoms of actual Coke bottles to see anything clearly on a screen.

On the flip side, I professionally agree with Sebastian, not that many users would probably be irritated by the large font, but to openly question an approach rather than adopting someone else’s approach wholesale based on a single blog post. It may very well be that a font-size bump is the right approach. Everything is relative, after all, and we ought to be listening to the people who use the thing we’re making for decisions like this.

The much bigger question is the one Sebastian poses right at the end there:

Should browsers perhaps use a larger font size on large screens from the outset if the user does not specify otherwise? Or do we need an information campaign to make them aware that they should check their system settings or set a different default font size in the browser?

Fantastic, right?! I’m honestly unsure where I’d draw the viewport breakpoint for 16px being either too large or small and where to start making adjustments. Is 16px the right default at any viewport size? Or perhaps user agents ought to consider a fluid type implementation that defines a default font scale and range of sizes instead? It’s great food for thought.

---

font-size Limbo originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

Customer interactions are best addressed by mobile-first design. In the last ten years, mobility has become the core of many people’s digital worlds. The statistics show that mobile devices account for about 54% of the internet traffic, which makes mobile-first solutions crucial. 

Most of them rely on their smartphones for internet access as these devices are generally cheaper and more widespread than computers. Indeed, a third of low-income adults rely solely on smartphones for all their internet usage.

Mobile first or responsive websites, which are designed to work across devices are fundamental for both consumers and businesses alike. It makes sure that each user is going through a good experience regardless of which device he or she is using.

In this guide, we’ll define what is meant by mobile-first design and the general strategies for designing digital experiences that center on mobile users, with a particular emphasis on the principles of responsive design.

What’s Meant By Mobile-First Design?

Mobile-first design is an effective strategy where an organization designs its website, software or any other digital solution primarily for mobile devices. 

Instead of first choosing the layout for the sizes of the screens, such as desktops, and then moving down to the smaller ones, it is the complete reverse. 

This is due to the realization that a large amount of web traffic originates from handheld devices. Thus, focusing on mobile users helps designers and developers create products that are intuitive, perceived as entertaining, and ultimately efficient, no matter which devices they are being used on.

In its purest sense, the mobile-first design represents an attempt to develop effective experiences across a spectrum of screen sizes. This involves correct planning of the structure, the flow, and the content to ensure that it is good for smaller devices before translating it to the larger ones. 

This leads to a clean and self-explanatory UI that caters to the current mobile-oriented audience.

Why Is Mobile-First Design Important?

There are several reasons why the “Mobile First” principle is so important in product design: 

1. Devices are the primary means of accessing the internet. Smartphones and tablets are reported to be the main way through which people connect to the internet. For instance, given that 50% of internet usage is through mobile devices, caring for mobile first guarantees that products meet the most frequently used views.

2. Users have unique needs and constraints: Larger displays, haptic touch interfaces, and reduced computing capabilities are some of the limitations of mobile devices in metrology. Being able to successfully design for applications on mobile devices means that the end product of the designs is manageable as well as easy to understand even when viewed on small screens.

3. Mobile-first design leads to simpler, more streamlined products: Mobile-first design, however, results in lean, tall articulated designs that eliminate unnecessary content and actions for a hassle-free customer experience.

4. It improves SEO performance: When it comes to design, mobile internet users should be taken into consideration, as websites built with this kind of device in mind receive higher ranking within search engines and attract more organic visitors.

5. Mobile-first design enables responsive design: A consideration of responsiveness means that products can be used effectively on one device or another and can be tailored for the specific screen size.

In other words, with the consideration of the revised approach to designing with mobile devices in mind, businesses are likely to increase the levels of engagement of their audiences, leading to better conversion rates and competitive advantage. 

It also ensures that each product that is being developed serves the needs of the current user, and it is flexible to adapt to new developments in technology and behavior.

How Did The Mobile First Design Strategy Come To Be?

When designing websites in the early ages of the internet, it was often preconditioned that people would mostly use the large screen of desktop computers. 

When cell and tablet devices emerged, the developers attempted to introduce these, originally desktop-oriented websites, in the mobile environment more effectively. 

These are called graceful degradation or the desktop-first approach, where some aspect of the site was stripped down or omitted to enhance the feel of the site when viewed on mobile phones.

However, this approach had the disadvantage of using up a huge amount of AI analysts’ time and producing a disproportionately low amount of meaningful results. Most of the items on the web did not translate well to the smaller screen, and this led to the site’s aesthetically unappealing and, furthermore, unsavory appearance in portable devices. 

To address this issue, a new procedure known as Progressive Advancement or Mobile-First Design was developed by developers.

This means that mobile users are the primary target where interface designers work on the website layout, starting from the smallest available devices. They concern themselves with the efficiency and use of the site on a small-screen device. 

After the mobile version is improved, additional features and additional improvements for the interface on tablets and desktops are gradually added. This brings a consistent experience across devices and a better usage of websites across different gadgets, ensuring that the overall experience is improved regardless of the type of gadget that one is using.

Mobile-First Vs. Mobile-Friendly Design: What Is It?

When discussing website design, you might come across two terms that sound similar: “mobile-first” and “mobile-friendly. They appear similar, though they refer to two different strategies of constructing web pages.

Mobile-Friendly: Originally Made for Large Screens and Then Shrunk

Originally, there was a concept of “mobile-friendly,”  which was actually made based on a desktop-oriented website. This implies that initially, the designs of the layout and the features of the site are normally developed with reference to the large screens. 

Following that, modifications are made to ensure that the site functions well on smaller screens, specifically on the mobile phone interface.

Here’s how it works: 

Given that, the design elements and containers are first developed with large screen sizes in mind. Mobile websites, in this regard, alter these features so that they can be situated properly on the smaller mobile device screen. 

This commonly entails transforming aspects that are placed side by side in the horizontal manner to those that are grouped vertically, one on top of another, depending on the CSS breakpoints.

Even when a website is converted to work on mobile devices, it largely remains a fixed model created for desktop use but then adapted for use on mobile devices. The sense that it’s still built for desktops may still be present when it comes to the experience on mobile.

Mobile-First: Initially Designed for Phone Use Then Scaled.

The term ‘mobile first’, on the other hand, refers to a process of design that begins with the mobile platform. This implies that the design process starts with the consideration of the appearance and the operation of the site on the smallest devices, specifically, on mobile phones. 

After the mobile version is fully optimized, the design of a site is adapted for its extension for tablets and desktop structures.

Mobile first involves a cascade of designs, which ensures that the first adaptation is that of mobile foremost. This is somewhat more difficult to accomplish, but it guarantees that the site is very practical and easy to utilize on portable devices. 

The initial step is to design for the mobile-first and then follow the layout and features of the design to provide utilization of the more space and features offered by the huge screen devices.

However, it is important to understand that which of these approaches to take depends on the objectives as well as the target market. The mobile-first design provides a good experience. 

For the mobile user the development is initiated with the mobile user in mind, while the mobile-friendly design is the adaptation of a design that is initially developed for the desktop user and then made responsive for the mobile user.

How to Build Apps with Mobile-First Design

The idea of developing apps that place importance and focus on its mobile layout is the point of leading the design of the program towards an importance on the mobile user. Here’s a straightforward guide to help you create apps using this method: 

1. Establish the customer and their objectives. One should begin with the identification of the specific users and the purpose for which they would be using the particular app. Develop specific user profiles in order to describe the target population. Identify the interests and usage plans of your targeted users in relation to your application. This knowledge will be useful in your designing the ASP.NET application and assisting you to meet the customer’s needs fully.

2. Identify the key features. The final aspect of essential features includes a list with all the features that seem to be most valuable for your users. It is advisable to first focus on the above-mentioned features so that unnecessary features are not added to the design. This aids in keeping the app interface neat and efficient while not burdening the users with numerous choices.

3. Create a mobile wireframe. Create the wireframe of the mobile rendition of your application. A wireframe can be defined as the preliminary sketch of the app, which includes the general design and functionality of the application. As for the interface organization, it is necessary to put the most important components in those areas of the screen that are the most conspicuous and accessible. More elements in the design must be avoided so that the design does not become cluttered at any cost.

4. Design the visual interface. When designing the wireframe, proceed to the Visual Design to design the look and feel part of it. A mobile-first strategy can help verify that it looks good as well as works properly on a cell phone. Consider the location of the main information based on the idea of the position of the priority on the top of the screen. Ensure the font sizes used are easily readable, buttons are clear to see, and icons are clear and intuitively placed. Ensure that your design looks good with different resolutions and interfaces of different screen sizes.

5. Use responsive design techniques. To ensure that your app runs well on different devices, use the methods that are related to responsive design. This can be achieved through the use of fluid grids for the layout of a web page so that it can be flexible to the different displays, flexible images that are also flexible to the display of a particular device, and media queries that enable the layout of the web page to change to the type of device used.

6. Content hierarchy. Categorize the content in a manner that makes it easy for the users to access and in accordance with the urgency of the content. Concentrate on the items that must be shared initially, and make sure that the design is relevant to the content and appealing to the viewers. Do not deliver a large amount of information at a time to users.

7. Test and iterate. A suitable strategy to apply once the preliminary design has been done is to use the app with actual users. Solicit information on how they engage with the application and what they find wrong or that could be changed. Feedback collected from them should be used to improve the design and the layout. The importance of iteration is stressed as the main ingredient to develop an app that would address people’s needs.

8. Launch and monitor. Finally, finalize the design of the app; then, deploy it and watch its reaction in the market. Employ analytics to know the users‘ interactions and their frequency, as well as their level of transformation. Reference this data on a regular basis to make appropriate modifications and additions, so the project will remain relevant to the users’ needs.

If you adhere to the said guidelines, it will be possible to derive a spectacular mobile application that is optimally suitable for the users of mobile phones.

Final Thoughts

Today’s Internet users are more often accessing sites from mobile devices, so the concept of ‘mobile-first’ design is essential. This is where the mobile user approach can prove to be a long-term winner for businesses as they can design services around mobile users that inherently lead to better interactivity and conversion.

To sum up, understanding the guidelines presented above will assist you with producing a proper design that will not only satisfy the goals of your business but also the users. Begin employing these practices and tools to improve your designs and stand above the crowd in the current challenging market.

Featured Image by freepik

The post What is Mobile-First Design and Why Does It Matter? appeared first on noupe.