Archive

Archive for August, 2021

CSS Pseudo Commas

August 30th, 2021 No comments

A bonafide CSS trick if there ever was one! @ShadowShahriar created a CodePen demo that uses pseudo-elements to place commas between list items that are displayed inline, and the result is a natural-looking complete sentence with proper punctuation.

CodePen Embed Fallback

How it works

The trick? First, it’s to make an unordered list an inline element with no markers or spacing:

ul {
  padding: 0;
  margin: 0;
  display: inline;
  list-style-type: none;
}

Next, we display list items inline so they flow naturally as text in a sentence:

li {
  display: inline;
}

Then we add commas between list items by selecting their ::after pseudo-element, and setting it’s content property with a comma (,) value.

li::after{
  content: var(--separator);
}

Oh, but wait! What about the ol’ Oxford comma? Use :nth-last-of-type() to select the second-to-last list item, and set its ::after pseudo-element’s content property to ", and" before the last list item.

li:nth-last-of-type(2)::after{
  content: ", and ";
}

We’re not done. @ShadowShahriar considers an edge case where there are only two items. All we need is to display an “and” between those two items, so:

li:first-of-type:nth-last-of-type(2)::after {
  content: " and ";
}

I had to look that up on Selectors Explained to make sure I was reading it correctly. That’s saying:

The after pseudo-element

… of a

  • element provided it is the first of its type in its parent and the nth of its type from the end (formula) in its parent.

  • What a mouthful! The final touch is a period at the end of the list:

    li:last-of-type::after {
      content: ".";
    }

    Using custom properties

    We just looked at an abridged version of the actual code. @ShadowShahriar does a nice thing by setting a comma and the “and” as custom properties:

    ul {
      --separator: ",";
      --connector: "and";
    
      padding: 0;
      margin: 0;
      display: inline;
      list-style-type: none;
    }

    That way, when we can swap those out for other ways to separate list items later. Nice touch.


    This caught my eye not only for its clever use of pseudo-element trickery, but also for its simplicity. It’s using tried and true CSS principles in a way that supports semantic HTML — no extra classes, elements, or even JavaScript to help manipulate things. It almost makes me wonder if HTML could use some sort of inline list element ( anyone???) to help support sentences convey list items without breaking out of a paragraph.

    Direct Link to ArticlePermalink


    The post CSS Pseudo Commas appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

    Categories: Designing, Others Tags:

    3 Essential Design Trends, September 2021

    August 30th, 2021 No comments

    Do you ever get bored with design projects? Feel like you keep designing the same things on repeat?

    This collection of trends – from fun angles to illustrations where you wouldn’t expect them to cool three-dimensional concepts – is sure to help you think a little more out of the box. It might be just the right inspiration to cure some of that design boredom.

    Here’s what’s trending in design this month.

    1. Angles for Attention

    Working with angles is a fun technique because you can essentially point website visitors to what you want them to see on the screen.

    Angles can be aggressive and have an obvious visual goal. They can also have an easier feel without so much direct intent. This trend can look a lot of different ways, making it a versatile option for designers.

    Each of the three examples here takes a different approach to angles.

    Bake Inc. uses various angles with imagery and whitespace to draw the eye past the visual elements to the brand name at the bottom of the screen. If you click through to the design, you’ll see that there isn’t just one angle-image design, but it’s a collection of changing images and angles that work beautifully in concert.

    Instabase uses a collection of animated geometric shapes as the main visual element on the screen. Note the directional pull of the triangle in the bottom left of the group of shapes. It helps lead the user to the “Request a Demo” call to action on the other side of the screen.

    Readymag’s Custom Cursor is one of those aggressive angles. The giant cursor is what the design is about, but because of the size and shape of the object, users are directed to the word “cursor” as well. That adds extra emphasis to what the design is about. With the combination and the oversized element and giant angle that are so in your face, you can’t help but get a quick understanding of what the design is about.

     

     

    2. Unexpected Illustrations

    This might be the most fun we’ve seen with a website design trend in a while – projects and companies are using illustrations in some of the most unexpected places.

    The design surprise happens when an industry that you don’t expect uses this type of imagery. A simple illustration takes the design to another level, or illustrations mix with other elements to paint a whimsical overall scene. Those are the things you can find with each of these three examples.

    Krivitzky is a website for a business law firm. This is not at all the type of website where you’d expect illustrations (including a dragon). While the design is fun to interact with, it’s hard to say if it works. If you needed representation, would this appeal to you? In terms of legal websites, this is a total disruptor and forces your attention. That could be a good thing.

    Studio Mesmer is one of those simply understated designs that’s almost perfect. The stark black background makes the simple illustration that much more striking. The eye also has a nice hover animation effect for an added surprise.

    Kenn & Kitt mixes an illustration with real imagery to paint a more whimsical scene. What’s nice about the illustrated elements of the website design is that it helps connect the website to the product packaging, which uses illustrations while feeling “real” with the photo of a dog. It’s a bright and sunny combination of photos and illustrations that feels whimsical but has the right vibe for the product category.

     

     

    3. 3D Depth

    The three-dimensional website design trend keeps ebbing and flowing. And right now, it is flowing with full-screen 3D elements for maximum depth that makes you feel like you can almost dive into the screen.

    While most of these designs use illustration with animation to create the 3D scene, you don’t have to abide by this example. The goal is to create something that looks and feels immersive so that users will want to take part in the experience.

    The Match Maker has an 80s gamer vibe where you can feel yourself going down the tunnel on the screen. Additional hover animations move the screen, even more to help you get into the game.


    Hafele Discoveries uses a wide-angle style animation with back and forth motion. The fish-eye style of the design adds an element of depth, which is further magnified by the foreground box with text and call to action elements. The design concept is attention-getting, but the motion can be a little dizzying if you leave it on the screen too long.

    FiveT Hydrogen takes a more “traditional” approach to a three-dimensional website design with an illustration/animation that includes elements of depth. This is magnified on the scroll action of the design with shadows and layers and a variety of elements – real and illustrated – that make you feel like part of what’s happening on the screen. It’s an immersive learning experience about clean hydrogen that almost forces users to keep scrolling. The 3D effect is what takes it to another level.

     

     

    Conclusion

    Not every design trend is right for every project. Take a good look at what you are trying to accomplish and match it with a design concept.

    If you want to try one of these trends, but they are a little too out there, experiment with a small area of the design or a landing page first. That’s a good place to test ideas and conversion rates to see if the design technique will work for your audience.

    Source

    The post 3 Essential Design Trends, September 2021 first appeared on Webdesigner Depot.

    Categories: Designing, Others Tags:

    Popular Design News of the Week: August 23 2021 – August 29, 2021

    August 29th, 2021 No comments

    Every day design fans submit incredible industry stories to our sister-site, Webdesigner News. Our colleagues sift through it, selecting the very best stories from the design, UX, tech, and development worlds and posting them live on the site.

    The best way to keep up with the most important stories for web professionals is to subscribe to Webdesigner News or check out the site regularly. However, in case you missed a day this week, here’s a handy compilation of the top curated stories from the last seven days. Enjoy!

    7 Free Javascript Effects for a Truly Interactive Site

    Responsivize – A Must-Have Tool to Develop Responsive Websites

    12 Graphic Design Memes That Will Make You Laugh (or Cry)

    Why Do People Hate Redesigns?

    Why Should Designers Learn to Code?

    12+ CSS Text-Stroke Examples

    20 Best New Sites, August 2021

    8 CSS & JavaScript Snippets for Creating Hand-Drawn Elements

    Ten Years of Bootstrap

    A Complete Introduction to Web Components in 2021

    Source

    The post Popular Design News of the Week: August 23 2021 – August 29, 2021 first appeared on Webdesigner Depot.

    Categories: Designing, Others Tags:

    My tiny side project has had more impact than my decade in the software industry

    August 27th, 2021 No comments

    That’s a heartwrenching title from Michael Williamson. I believe it though. It’s kinda like a maximized version of the blogging phenomenon where if you work on a post for weeks it’ll flop compared to a post that’s some dumb 20-minute thought. Or how your off-handed remark to some developer at the perfect time might cause some huge pivot in what they are doing, changing the course of a project forever. For Mike, it was a 3,000 line-of-code side project that had more impact on the world than a career of work as a software developer.

    I’ve tried to pick companies working on domains that seem useful: developer productivity, treating diseases, education. While my success in those jobs has been variable – in some cases, I’m proud of what I accomplished, in others I’m pretty sure my net effect was, at best, zero – I’d have a tough time saying that the cumulative impact was greater than my little side project.

    Impact is fuzzy though, isn’t it? I don’t know Mike, but assuming he is a kind and helpful person, think of all the people he’s likely helped along the way. Not by just saving them minutes of toil, but helped. Helped grow, helped through hard times, helped guide to where they ought to go. Those things are immeasurable and awfully important.

    Direct Link to ArticlePermalink


    The post My tiny side project has had more impact than my decade in the software industry appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

    Categories: Designing, Others Tags:

    The Mind-Bendingly Difficult Material Design Quiz

    August 27th, 2021 No comments

    Material Design is Google’s design language for creating digital experiences.

    Initially developed in 2014, Material Design is a subset of flat design, or minimal UI design, while also flirting with skeuomorphism with its rules for surfaces and interaction. The latest iteration of Material Design, Material You was unveiled in May 2021 and is expected to redefine the language significantly.

    With so many agencies and in-house teams adopting Material Design, understanding its prescriptive styles has become essential knowledge for web designers.

    Source

    The post The Mind-Bendingly Difficult Material Design Quiz first appeared on Webdesigner Depot.

    Categories: Designing, Others Tags:

    The Fixed Background Attachment Hack

    August 27th, 2021 No comments

    What options do you have if you want the body background in a fixed position where it stays put on scroll? background-attachment: fixed in CSS, at best, does not work well in mobile browsers, and at worst is not even supported by the most widely used mobile browsers. You can ditch this idea completely and let the background scroll on small screens using media queries.

    Or get around it with a small fix. I suppose we could call it a “hack” since it’s a workaround in code that arguably we shouldn’t have to do at all.

    The issue

    Before I show you the fix, let’s examine the issue. We can see it by looking at two different approaches to CSS backgrounds:

    1. a background using a linear gradient
    2. a background using an image

    Linear gradient

    I want to keep the background gradient in a fixed position on scroll, so let’s apply basic CSS styling to the body that does exactly that:

    body {
      background: linear-gradient(335deg, rgba(255,140,107,1) 0%, rgba(255,228,168,1) 100%);
      background-attachment: fixed;
      background-position: center;
      background-repeat: no-repeat;
      height: 100vh;
    }

    Here are the results in Chrome and Firefox, both on Android, respectively:

    Chrome Android
    Firefox Android

    The gradient simply scrolls along with other content then jumps back. I don’t know exactly why that is — maybe when the URL tab goes up or disappears on scroll and the browser finds it difficult to re-render the gradient in real time? That’s my best guess since it only seems to happen in mobile browsers.

    If you’re wondering about iOS Safari, I haven’t tested on iOS personally, but the issue is there too. Some have already reported the issue and it appears to behave similarly.

    Background image

    This issue with images is no different.

    body {
      background: url(../assets/test_pic.jpg);
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      background-attachment: fixed;
      height: 100vh;
    }
    The grey section at the top just indicates the presence of an actual URL bar in Chrome Android.

    Another interesting thing to note is that when background-attachment: fixed is applied, the height is ignored even if we explicitly specify it. That’s because background-attachment calculates a fixed background position relative to the viewport.

    Even if we say the body is 100vh, background-attachment: fixed is not exactly in accordance with it. Weird! Perhaps the reason is that background-attachment: fixed relies on the smallest possible viewport while elements rely on the largest possible viewport. David Bokan explains,

    Lengths defined in viewport units (i.e. vh) will not resize in response to the URL bar being shown or hidden. Instead, vh units will be sized to the viewport height as if the URL bar is always hidden. That is, vh units will be sized to the “largest possible viewport”. This means 100vh will be larger than the visible height when the URL bar is shown.

    The issues are nicely documented over at caniuse:

    • Firefox does not appear to support the local value when applied on a textarea element.
    • Chrome has an issue that occurs when using the will-change property on a selector which also has background-attachment: fixed defined. It causes the image to get cut off and gain whitespace around it.
    • iOS has an issue preventing background-attachment: fixed from being used with background-size: cover.

    Let’s fix it

    Call it a temporary hack, if you will. Some of you may have already tried it. Whatever the case, it fixes the linear gradient and background image issues we just saw.

    So, as you know, we are getting in trouble with the background-attachment: fixed property and, as you might have guessed, we are removing it from our code. If it’s looking at the smallest possible viewport, then maybe we should be working with an element that looks for the largest possible viewport and position that instead.

    So, we are creating two separate elements — one for the background-gradient and another for the rest of the content. We are replacing background-attachment: fixed with position: fixed.

    <div class="bg"></div>
    <div class="content">
      <!-- content -->
    </div>
    .bg {
      background: linear-gradient(335deg, rgba(255,140,107,1) 0%, rgba(255,228,168,1) 100%);
      background-repeat: no-repeat;
      background-position: center;
      height: 100vh;
      width: 100vw;
      position: fixed;
      /* z-index usage is up to you.. although there is no need of using it because the default stack context will work. */
      z-index: -1; // this is optional
    }

    Now, wrap up the rest of the content — except for the element containing the background image — inside a main container.

    .content{
      position: absolute;
      margin-top: 5rem;
      left: 50%; 
      transform: translateX(-50%);
      width: 80%;
    }

    Success!

    Chrome Android
    Firefox Android

    We can use the same trick hack with background images and it works fine. However, you do get some sort of background scrolling when the URL bar hides itself, but the white patch is no longer there.

    .img {    
      background: url('../assets/test_pic.jpg');
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      position: fixed;
      height: 100vh;
      width: 100vw;
    }
    
    .content {
      position: absolute;
      left: 50%; 
      margin-top: 5rem;
      transform: translateX(-50%);
      width: 80%;
    }
    Chrome Android
    Firefox Android

    Here are my takeaways

    A fixed-position element with a height set to 100% behaves just like the element with background-attachment: fixed property, which is clearly evident in the example below! Just observe the right-most bar (purple color) in the video.

    The website which is being tested is taken from this article.

    Even though, David Bokan in his article states that:

    That is, a position: fixed element whose containing block is the ICB will resize in response to the URL bar showing or hiding. For example, if its height is 100% it will always fill exactly the visible height, whether or not the URL bar is shown. Similarly for vh lengths, they will also resize to match the visible height taking the URL bar position into account.

    If we take into account that last sentence, that doesn’t seem to be the case here. Elements that have fixed positioning and 100vh height don’t change their height whether the URL bar is shown or not. In fact, the height is according to the height of the “largest possible viewport”. This is evident in the example below. Just observe the light blue colored bar in the video.

    The website which is being tested is taken from this article.

    So, it appears that, when working with a container that is 100vh, background-attachment: fixed considers the smallest possible viewport height while elements in general consider the largest possible viewport height.

    For example, background-attachment: fixed simply stops working when a repaint is needed, like when a mobile browser’s address bar goes away on scroll. The browser adjusts the background according to the largest possible viewport (which is now, in fact, the smallest possible viewport as URL bar is hidden) and the browser isn’t efficient enough to repaint on the fly, which results in a major lag.

    Our hack addresses this by making the background an element instead of, well, an actual background. We give the element containing the content an absolute position to stack it on top of the element containing the image, then apply a fixed position on the latter. Hey, it works!

    Note that the viewport height is calculated excluding the navigation bar at the bottom (if present). Here’s a comparison between the presence and absence of navigation bar at the bottom in Chrome Android.

    Is there a downside? Perhaps! We’re using a general

    instead of an actual tag, so I wouldn’t say the markup is semantic. And that can lead to accessibility issues. If you’re working with an image that adds meaning or context to the content, then an is the correct way to go, utilizing a proper alt description for screen readers.

    But if we go the proper route, then we’re right back where we started. Also, if you have a navigation bar at the bottom which too auto hides itself, then I can’t help it. If the hack won’t cut it, then perhaps JavaScript can come to the rescue.


    The post The Fixed Background Attachment Hack appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

    Categories: Designing, Others Tags:

    Developers and Designers Work on a Single Source of Truth with UXPin

    August 27th, 2021 No comments

    (This is a sponsored post.)

    There is a conversation that has been percolating for as long as I’ve been in the web design and development industry. It’s centered around the conflict between design tools and development tools. The final product of web design is often a mockup. The old joke was that web developers make websites and web designers make paintings of websites. That disconnect is a source of immense friction. Which is the source of truth?

    What if there really could be a single source of truth. What if the design tool works on the same exact code as the production website? The latest chapter in this epic conversation is UXPin.

    Let’s set up the facts so you can see this all play out.

    UXPin is an in-browser design tool.

    UXPin is a powerful design tool with all the features you’d expect, particularly focused on digital screen-based design.

    The fact that it is in-browser is extra great here. Designing websites… on a website is an obvious and natural fit. It means what you are looking at is how it’s going to look. This is particularly important with typography! The implementer of this card component can see exact colors (in the right formats) are being used, as well as the exact pixel dimensions, etc.

    This is laid out nicely by Ania Kubów in a video about UXPin.


    Over a decade ago, Jason Santa Maria thought a lot about what a next-gen design tool would look like. Could we just use the browser directly?

    I don’t think the browser is enough. A web designer jumping into the browser before tackling the creative and messaging problems is akin to an architect hammering pieces of wood together and then measuring afterwards. The imaginative process is cut short by the tools at hand; and it’s that imagination—or spark—at the beginning of a design that lays the path for everything that follows.

    Jason Santa Maria, “A Real Web Design Application”

    Perhaps not the browser directly, but a design tool within a browser, that could be the best of both worlds:

    An application like this could change the process of web design considerably. Most importantly, it wouldn’t be a proxy application that we use to simulate the way webpages look—it would already speak the language of the web. It would truly be designing in the browser.

    It’s so cool to see this play out in a way that aligns with what great designers envisioned before it was possible, and with new aspects that melt with today’s technological possibilities.

    You can work on your own React components within UXPin.

    This is where the source of truth magic can happen. It’s one thing if a design tool can output a React (or any other framework) component. That’s a neat trick. But it’s likely to be a one-way trip. Components in real-world projects are full of other things that aren’t entirely the domain of design. Perhaps a component uses a hook to return the current user’s permissions and disable a button if they don’t have access. The disabled button has an element of design to it, but most of that code does not.

    It’s impractical to have a design tool that can’t respect other code in that component and essentially just leave it alone. Essentially, it’s not really a design tool if it exports components but can’t import them.

    This is where UXPin Merge comes in.

    Now, fair is fair, this is going to take a little work to set up. Might just be a couple of hours, or it might take few days for a complete design system. UXPin only works with React and uses a webpack configuration to integrate it.

    Once you’ve gotten in going, the components you use in UXPin are very literally the components you use to build your production website.

    It’s pretty impressive really, to see a design tool digest pre-built components and allow them to be used on an entirely new canvas for prototyping.

    They’ve got lots of help for you on getting this going on your project, including:

    As it should, it’s likely to influence how you build components.

    Components tend to have props, and props control things like design and content inside. UXPin gives you a UI for the props, meaning you have total control over the component.

    <LineChart 
      barColor="green"
      height="200"
      width="500"
      showXAxis="false"
      showYAxis="true"
      data={[ ... ]}
    />

    Knowing that, you might give yourself a prop interface for your components that provides you with lots of design control. For example, integrating theme switching.

    This is all even faster with Storybook.

    Another awfully popular tool in JavaScript-components-land to view your components is Storybook. It’s not a design tool like UXPin—it’s more like a zoo for your components. You might already have it set up, or you might find value in using Storybook as well.

    The great news? UXPin Merge works together awesomely with Storybook. It makes integration super quick and easy. Plus then it supports any framework, like Angular, Svelte, Vue, etc—in addition to React.

    Look how fast:

    UXPin CEO Marcin Treder had a strong vision:

    What if designers could use the very same components used by engineers and they’re all stored in a shared design system (with accurate documentation and tests)? Many of the frustrating and expensive misunderstandings between designers and engineers would stop happening.

    And a plan:

    1. Connect to any Git repo.
    2. Learn about all the components in that repo.
    3. Make those components available to the UXPin visual editor.
    4. Watch for any changes to the repo and reflect those changes in the visual editor.
    5. Let designer’s design and deliver accurate specs to developers for using those components.

    And that’s what they’ve pulled off here.


    The post Developers and Designers Work on a Single Source of Truth with UXPin appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

    Categories: Designing, Others Tags:

    How Google Analytics is Helping Web Developers in UI/UX Design?

    August 27th, 2021 No comments

    The main goal of a website is getting conversions. You can’t reach that goal if your visitors don’t have a great experience. Therefore, it is necessary to create web designs based on your users’ requirements.

    Google Analytics is one of the best free tools that helps you to know about your audience behavior to convert more customers and avoid high bounce rates.

    What is UI/UX, and Why is it Important?

    UI/UX (User Interface/User Experience) is used to maximize user experience and usability. Designers use this discipline to analyze how users interact with a website and provide solutions that address their pain points. Moreover, UI/UX delights users and improves the overall experience.

    As the competition increases each day, having a good website design has become essential to stay relevant. Visitors are more likely to leave if the site has problems with loading, mobile friendliness, etc. Therefore, issues with web design will adversely affect your brand value and sales. UI/UX design helps you tackle these problems by creating highly user-friendly websites that work on all devices and provide the best experience. 

    How Google Analytics Helps UI/UX Design?

    A good design and user interface are critical for your website’s success. Visitors tend to leave a site if it’s not user-friendly. Google Analytics is a powerful tool for web developers that provides a wealth of information about how your visitors are navigating or using your website. The tool has various specific key performance indicators that will help you improve your UI/UX.

    Google Analytics can keep track of every user behavior from the point they land on your site to the moment they leave. With this data, you can optimize your website’s user experience for increased sales or conversions.

    Let’s look into how Google Analytics will help web developers to improve UI/UX.

    1. Easy to Set Up

    You can easily set up Google Analytics on your website with a snippet of code. You will receive this tracking code once you create an account in Google Analytics. With the code, you can access your website data on the Google Analytics dashboard. 

    2. Track Pageviews

    Pageviews let you know every time a unique user lands on a webpage, as well as the number of times the user views that page. Moreover, this feature allows you to track visitor activity on your web pages like their regular journey, type of device and browser they use, etc. This data helps developers know the interaction happening on different pages to address and fix related issues. 

    3. Analyze Traffic

    Google Analytics provides comprehensive reports about the channels that drive traffic to your website. You can analyze the traffic to your site besides accessing other data like engagement, bounce rate, conversions, etc. 

    4. Analyze Behavior 

    Google Analytics supports web design services by offering rich insights about user behavior . For example, you can understand how users come to different pages, their behavior at particular points, and what they do on a page while staying on it. Moreover, you can find out the factors that lead to high bounce rates, which CTAs drew users’ attention, and which pages received the most attention.

    5. Track Events

    The event tracking feature of Google Analytics is very beneficial to UI/UX designers. You get access to well-defined micro-interaction data that is not included in the default page view tracking. You can measure the success of multimedia elements, downloadable content, video plays, etc. 

    6. Guide to Testing

    Google Analytics data alone cannot provide you with all the information to improve your website. User testing is also critical. It is done by developing a set of actions commonly performed by your website’s target audience. The data from Google Analytics can be helpful in this stage, as you can compare different issues. 

    7. Time on Page & Bounce Rate

    Time on Page data lets you know where your visitors spend most of their time on the website and where they are not. The data can help you identify UI/UX elements that will benefit user engagement and the harmful elements. That is, the analytics data will help you identify specific parts of your website that need design improvement.

    The Bounce Rate data provided by Google Analytics lets you know the percentage of users leaving your landing page before exploring other pages. A strong UI/UX design can help reduce bounce rates by captivating users with the website’s aesthetics. 

    8. Set Goals 

    Google Analytics lets you set specific goals to help you know how well your website fulfills the target objectives.  For example, you can opt for several critical business goals in the admin section like checkout items, ebook downloads, newsletter signups, account creation, lead capture, etc. 

    9. Conversion Tracking

    UI/UX designers need to know the path taken by users before becoming paying customers. With the conversion data from Google Analytics, web designers can create user journey maps. Then, you can use these maps to modify elements for maximum success. 

    10. Performance Data

    Google Analytics provides device performance data to help you make sure that your design works well across desktops, tablets, mobile devices, etc. If there is an issue with a particular device, you can immediately adjust the UI. You also get to know whether the website has issues loading on different browsers. 

    11. Audience Insights

    Audience insights are very important for good UI/UX. You can access useful information like interests, locations, demographics, devices, etc. This data can help you create designs that your users want. For instance, if you have more visitors at night, you can include a dark mode. Likewise, gender and age data helps you tweak content based on specific interests.

    Conclusion

    Designing based on guesses doesn’t work if you need conversions. Instead, you need to follow a data-based design to meet your business goals. With so many amazing features available free of cost, Google Analytics is, without a doubt, the finest tool a web development company can have. As we saw, the rich data and insights offered by the tool can help you fine-tune your UI/UX to boost user engagement, improve sales and stay ahead of the competition.

    Photo by Stephen Phillips – Hostreviews.co.uk on Unsplash

    Categories: Others Tags:

    Designing for the Unexpected

    August 26th, 2021 No comments

    When I think about what front-end development really is and feels like, this is at the heart of it: designing around a huge set of unknowns, and really embracing that notion as a strength of the web rather than a weakness or unfortunate truth we have to work around.

    Cathy Dutton digs into this with real code and examples over on A List Apart. A recurring theme is the idea that content (certainly an unknown, since content changes) can and should drive design decisions. It is even floated that container queries might not be all they are cracked up to be since they are still based on a parent, not content.

    It’s hard to say for sure whether container queries will be a success story until we have solid cross-browser support for them. Responsive component libraries would definitely evolve how we design and would improve the possibilities for reuse and design at scale. But maybe we will always need to adjust these components to suit our content.

    We can’t design the same way we have for this ever-changing landscape, but we can design for content. By putting content first and allowing that content to adapt to whatever space surrounds it, we can create more robust, flexible designs that increase the longevity of our products. 

    Direct Link to ArticlePermalink


    The post Designing for the Unexpected appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

    Categories: Designing, Others Tags:

    Some Articles About Accessibility I’ve Saved Recently III

    August 26th, 2021 No comments
    • The perfect link — Rian Rietveld defines them: “When you click on them, they take you somewhere else.” Not much code in here (we’ve got that), just a lot of practical accessibility advice. For example, the alt text for a linked image can allude to the fact that it is a link. Just an image: “A cherry tree in full bloom.” Link: “Wikipedia on cherry blossoms.”
    • Google Announces Seismic Change to Docs — George Joeckel covers the unfolding news that Google Docs is going to be rendered in , which feels like a massive WTF moment when it comes to accessibility. At one point, the vibe was that there would be a separate product for people with screen reader needs. Separate but equal isn’t a good situation. Looks like the based rendering stuff is on hold for now, so community feedback FTW?
    • Don’t use custom CSS mouse cursors — Eric Bailey: I believe that letting CSS load a custom cursor was a mistake.
    • Web Designers Grapple With Downside to Flashy Animation: Motion Sickness — Katie Deighton covers the idea that things like preference toggles and prefers-reduced-motion exists (although not by name). Always interesting to see a topic like this makes its way to a major publication like The Wall Street Journal.
    • prefers-reduced-motion and browser defaults — Speaking of prefers-reduced-motion, Bruce Lawson on the paragraph-of-the-year: Yes, it was a meeting request from Marketing to discuss a new product page with animations that are triggered on scroll. Much as a priest grasps his crucifix when facing a vampire, I immediately reached for Intersection Observer to avoid the browser grinding to a halt when watching to see if something is scrolled into view. And, like an exoricst sprinkling holy water on a demon, I also cleansed the code with a prefers-reduced-motion media query.
    • Using CSS to Enforce Accessibility — Adrian Roselli covers this great tactic where you don’t get the proper CSS styling unless you’ve also implemented the appropriate accessibility attributes (e.g. [role="region"][aria-labelledby][tabindex] for a scrolling table). This is a powerful idea and happens to showcase the power of CSS nicely in a way that styling solutions that avoid using selectors don’t benefit from.
    • Accessibility testing with Storybook — Varun Vachhar covers how you can run Axe over your component library even as you code. Accessibility issues, like color contrast problems, are bugs. Might as well give yourself the same tooling opportunities to fix them at the same time you’d fix any other bug.
    • Making A Strong Case For Accessibility — Todd Libby covers how you can fight for accessibility at work. Attempt 1.) Ethical. Attempt 2.) Financial. Attempt 3.) Legal. 4.) Humanization. Attempt 5.) Don’t ask, just do it.
    • Your Image Is Probably Not Decorative — Eric Bailey covers that most images with an empty alt attribute (literally alt="", no space) probably should have had one, and that when and alt description isn’t available, there are other options (e.g. make it available as an inline image (spacer.gif) even if it isn’t one otherwise, </code> in SVG, etc.).</li> <li><a target="_blank" href="https://jakearchibald.com/2021/great-alt-text/" rel="noopener">Writing great alt text: Emotion matters</a> — Annnnd speaking of <code>alt</code>, Jake Archibald learns from a 2011 Léonie Watson <a target="_blank" href="https://tink.uk/text-descriptions-emotion-rich-images/" rel="noopener">article</a>: <q>The relevant parts of an image aren’t limited to the cold hard facts.</q></li> </ul> <ul> <li><a target="_blank" href="https://www.smashingmagazine.com/2021/07/accessible-dialog-from-scratch/" rel="noopener">Creating An Accessible Dialog From Scratch</a> — Kitty Giraudel takes on the final boss in accessibility. </li> </ul> <hr> <p><small>The post <a target="_blank" rel="nofollow noopener" href="https://css-tricks.com/some-articles-about-accessibility-ive-saved-recently-iii/">Some Articles About Accessibility I’ve Saved Recently III</a> appeared first on <a target="_blank" rel="nofollow noopener" href="https://css-tricks.com/">CSS-Tricks</a>. You can support CSS-Tricks by being an <a target="_blank" href="https://css-tricks.com/product/mvp-supporter/" rel="noopener">MVP Supporter</a>.</small></p> <div class="fixed"></div> </div> <div class="under"> <span class="categories">Categories: </span><span><a href="http://www.webmastersgallery.com/category/design/" rel="category tag">Designing</a>, <a href="http://www.webmastersgallery.com/category/uncategorized/" rel="category tag">Others</a></span> <span class="tags">Tags: </span><span></span> </div> </div> <div id="pagenavi"> <span class="newer"></span> <span class="older"><a href="http://www.webmastersgallery.com/2021/08/page/2/" >Older Entries</a></span> <div class="fixed"></div> </div> </div> <!-- main END --> <!-- sidebar START --> <div id="sidebar"> <!-- sidebar north START --> <div id="northsidebar" class="sidebar"> <!-- feeds --> <div class="widget widget_feeds"> <div class="content"> <div id="subscribe"> <a rel="external nofollow" id="feedrss" title="Subscribe to this blog..." href="http://www.webmastersgallery.com/feed/"><abbr title="Really Simple Syndication">RSS</abbr></a> </div> <div class="fixed"></div> </div> </div> <!-- showcase --> <div id="text-389627311" class="widget widget_text"> <div class="textwidget"><a href="http://feeds2.feedburner.com/webmastersgallery" title="Subscribe to my feed" rel="alternate" type="application/rss+xml"><img src="http://www.feedburner.com/fb/images/pub/feed-icon32x32.png" alt="" style="border:0"/></a><a href="http://feeds2.feedburner.com/webmastersgallery" title="Subscribe to my feed" rel="alternate" type="application/rss+xml">Subscribe for latest Updates</a></div> </div><div id="text-389629461" class="widget widget_text"> <div class="textwidget"><form style="border:1px solid #ccc;padding:3px;text-align:center;" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=webmastersgallery', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><p>Enter your email address:</p><p><input type="text" style="width:140px" name="email"/></p><input type="hidden" value="webmastersgallery" name="uri"/><input type="hidden" name="loc" value="en_US"/><input type="submit" value="Subscribe" /><p>Delivered by <a href="http://feedburner.google.com" target="_blank" rel="noopener">FeedBurner</a></p></form></div> </div></div> <!-- sidebar north END --> <div id="centersidebar"> <!-- sidebar east START --> <div id="eastsidebar" class="sidebar"> <!-- categories --> <div class="widget widget_categories"> <h3>Categories</h3> <ul> <li class="cat-item cat-item-518"><a href="http://www.webmastersgallery.com/category/affiliate-programs/">Affiliate Programs</a> </li> <li class="cat-item cat-item-147"><a href="http://www.webmastersgallery.com/category/design/">Designing</a> </li> <li class="cat-item cat-item-519"><a href="http://www.webmastersgallery.com/category/domain-names/">Domain Names</a> </li> <li class="cat-item cat-item-37"><a href="http://www.webmastersgallery.com/category/e-commerce/">E-commerce</a> </li> <li class="cat-item cat-item-509"><a href="http://www.webmastersgallery.com/category/internet-directories/">Internet Directories</a> </li> <li class="cat-item cat-item-510"><a href="http://www.webmastersgallery.com/category/message-boards/">Message Boards</a> </li> <li class="cat-item cat-item-1"><a href="http://www.webmastersgallery.com/category/uncategorized/">Others</a> </li> <li class="cat-item cat-item-506"><a href="http://www.webmastersgallery.com/category/programming/">Programming</a> </li> <li class="cat-item cat-item-511"><a href="http://www.webmastersgallery.com/category/promotion-and-marketing/">Promotion and Marketing</a> </li> <li class="cat-item cat-item-534"><a href="http://www.webmastersgallery.com/category/scripts-and-programming/">Scripts and Programming</a> </li> <li class="cat-item cat-item-513"><a href="http://www.webmastersgallery.com/category/search-engines/">Search Engines</a> </li> <li class="cat-item cat-item-135"><a href="http://www.webmastersgallery.com/category/social-media/">Social Media</a> </li> <li class="cat-item cat-item-514"><a href="http://www.webmastersgallery.com/category/softwares/">Softwares</a> </li> <li class="cat-item cat-item-515"><a href="http://www.webmastersgallery.com/category/tips-and-tutorials/">Tips and Tutorials</a> </li> <li class="cat-item cat-item-338"><a href="http://www.webmastersgallery.com/category/web-hosting/">Web Hosting</a> </li> <li class="cat-item cat-item-516"><a href="http://www.webmastersgallery.com/category/webmaster-tools/">Webmaster Tools</a> </li> <li class="cat-item cat-item-501"><a href="http://www.webmastersgallery.com/category/webmaster-resources/" title="Webmaster Resources Free Web Tools description: The ultimate webmaster resource directory. We have all the webmaster resources and free web tools a webmaster could ever need to design, develop.">Webmasters Resources</a> </li> <li class="cat-item cat-item-3"><a href="http://www.webmastersgallery.com/category/web-design/">Website Design</a> </li> </ul> </div> </div> <!-- sidebar east END --> <!-- sidebar west START --> <div id="westsidebar" class="sidebar"> <!-- blogroll --> <div class="widget widget_links"> <h3>Blogroll</h3> <ul> <li><a href="http://wordpress.org/development/">Development Blog</a></li> <li><a href="http://codex.wordpress.org/">Documentation</a></li> <li><a href="http://wordpress.org/extend/plugins/">Plugins</a></li> <li><a href="http://wordpress.org/extend/ideas/">Suggest Ideas</a></li> <li><a href="http://wordpress.org/support/">Support Forum</a></li> <li><a href="http://wordpress.org/extend/themes/">Themes</a></li> <li><a href="http://planet.wordpress.org/">WordPress Planet</a></li> </ul> </div> </div> <!-- sidebar west END --> <div class="fixed"></div> </div> <!-- sidebar south START --> <div id="southsidebar" class="sidebar"> <!-- archives --> <div class="widget"> <h3>Archives</h3> <ul> <li><a href='http://www.webmastersgallery.com/2021/09/'>September 2021</a></li> <li><a href='http://www.webmastersgallery.com/2021/08/' aria-current="page">August 2021</a></li> <li><a href='http://www.webmastersgallery.com/2021/07/'>July 2021</a></li> <li><a href='http://www.webmastersgallery.com/2021/06/'>June 2021</a></li> <li><a href='http://www.webmastersgallery.com/2021/05/'>May 2021</a></li> <li><a href='http://www.webmastersgallery.com/2021/04/'>April 2021</a></li> <li><a href='http://www.webmastersgallery.com/2021/03/'>March 2021</a></li> <li><a href='http://www.webmastersgallery.com/2021/02/'>February 2021</a></li> <li><a href='http://www.webmastersgallery.com/2021/01/'>January 2021</a></li> <li><a href='http://www.webmastersgallery.com/2020/12/'>December 2020</a></li> <li><a href='http://www.webmastersgallery.com/2020/11/'>November 2020</a></li> <li><a href='http://www.webmastersgallery.com/2020/10/'>October 2020</a></li> <li><a href='http://www.webmastersgallery.com/2020/09/'>September 2020</a></li> <li><a href='http://www.webmastersgallery.com/2020/08/'>August 2020</a></li> <li><a href='http://www.webmastersgallery.com/2020/07/'>July 2020</a></li> <li><a href='http://www.webmastersgallery.com/2020/06/'>June 2020</a></li> <li><a href='http://www.webmastersgallery.com/2020/05/'>May 2020</a></li> <li><a href='http://www.webmastersgallery.com/2020/04/'>April 2020</a></li> <li><a href='http://www.webmastersgallery.com/2020/03/'>March 2020</a></li> <li><a href='http://www.webmastersgallery.com/2020/02/'>February 2020</a></li> <li><a href='http://www.webmastersgallery.com/2020/01/'>January 2020</a></li> <li><a href='http://www.webmastersgallery.com/2019/12/'>December 2019</a></li> <li><a href='http://www.webmastersgallery.com/2019/11/'>November 2019</a></li> <li><a href='http://www.webmastersgallery.com/2019/10/'>October 2019</a></li> <li><a href='http://www.webmastersgallery.com/2019/09/'>September 2019</a></li> <li><a href='http://www.webmastersgallery.com/2019/08/'>August 2019</a></li> <li><a href='http://www.webmastersgallery.com/2019/07/'>July 2019</a></li> <li><a href='http://www.webmastersgallery.com/2019/06/'>June 2019</a></li> <li><a href='http://www.webmastersgallery.com/2019/05/'>May 2019</a></li> <li><a href='http://www.webmastersgallery.com/2019/04/'>April 2019</a></li> <li><a href='http://www.webmastersgallery.com/2019/03/'>March 2019</a></li> <li><a href='http://www.webmastersgallery.com/2019/02/'>February 2019</a></li> <li><a href='http://www.webmastersgallery.com/2019/01/'>January 2019</a></li> <li><a href='http://www.webmastersgallery.com/2018/12/'>December 2018</a></li> <li><a href='http://www.webmastersgallery.com/2018/11/'>November 2018</a></li> <li><a href='http://www.webmastersgallery.com/2018/10/'>October 2018</a></li> <li><a href='http://www.webmastersgallery.com/2018/09/'>September 2018</a></li> <li><a href='http://www.webmastersgallery.com/2018/08/'>August 2018</a></li> <li><a href='http://www.webmastersgallery.com/2018/07/'>July 2018</a></li> <li><a href='http://www.webmastersgallery.com/2018/04/'>April 2018</a></li> <li><a href='http://www.webmastersgallery.com/2018/01/'>January 2018</a></li> <li><a href='http://www.webmastersgallery.com/2017/12/'>December 2017</a></li> <li><a href='http://www.webmastersgallery.com/2017/11/'>November 2017</a></li> <li><a href='http://www.webmastersgallery.com/2017/09/'>September 2017</a></li> <li><a href='http://www.webmastersgallery.com/2017/08/'>August 2017</a></li> <li><a href='http://www.webmastersgallery.com/2017/07/'>July 2017</a></li> <li><a href='http://www.webmastersgallery.com/2017/06/'>June 2017</a></li> <li><a href='http://www.webmastersgallery.com/2017/05/'>May 2017</a></li> <li><a href='http://www.webmastersgallery.com/2017/04/'>April 2017</a></li> <li><a href='http://www.webmastersgallery.com/2017/03/'>March 2017</a></li> <li><a href='http://www.webmastersgallery.com/2017/02/'>February 2017</a></li> <li><a href='http://www.webmastersgallery.com/2017/01/'>January 2017</a></li> <li><a href='http://www.webmastersgallery.com/2016/12/'>December 2016</a></li> <li><a href='http://www.webmastersgallery.com/2016/11/'>November 2016</a></li> <li><a href='http://www.webmastersgallery.com/2016/10/'>October 2016</a></li> <li><a href='http://www.webmastersgallery.com/2016/09/'>September 2016</a></li> <li><a href='http://www.webmastersgallery.com/2016/08/'>August 2016</a></li> <li><a href='http://www.webmastersgallery.com/2016/07/'>July 2016</a></li> <li><a href='http://www.webmastersgallery.com/2016/06/'>June 2016</a></li> <li><a href='http://www.webmastersgallery.com/2016/05/'>May 2016</a></li> <li><a href='http://www.webmastersgallery.com/2016/04/'>April 2016</a></li> <li><a href='http://www.webmastersgallery.com/2016/03/'>March 2016</a></li> <li><a href='http://www.webmastersgallery.com/2016/02/'>February 2016</a></li> <li><a href='http://www.webmastersgallery.com/2016/01/'>January 2016</a></li> <li><a href='http://www.webmastersgallery.com/2015/12/'>December 2015</a></li> <li><a href='http://www.webmastersgallery.com/2015/11/'>November 2015</a></li> <li><a href='http://www.webmastersgallery.com/2015/10/'>October 2015</a></li> <li><a href='http://www.webmastersgallery.com/2015/09/'>September 2015</a></li> <li><a href='http://www.webmastersgallery.com/2015/08/'>August 2015</a></li> <li><a href='http://www.webmastersgallery.com/2015/07/'>July 2015</a></li> <li><a href='http://www.webmastersgallery.com/2015/06/'>June 2015</a></li> <li><a href='http://www.webmastersgallery.com/2015/05/'>May 2015</a></li> <li><a href='http://www.webmastersgallery.com/2015/04/'>April 2015</a></li> <li><a href='http://www.webmastersgallery.com/2015/03/'>March 2015</a></li> <li><a href='http://www.webmastersgallery.com/2015/02/'>February 2015</a></li> <li><a href='http://www.webmastersgallery.com/2015/01/'>January 2015</a></li> <li><a href='http://www.webmastersgallery.com/2014/12/'>December 2014</a></li> <li><a href='http://www.webmastersgallery.com/2014/11/'>November 2014</a></li> <li><a href='http://www.webmastersgallery.com/2014/10/'>October 2014</a></li> <li><a href='http://www.webmastersgallery.com/2014/09/'>September 2014</a></li> <li><a href='http://www.webmastersgallery.com/2014/08/'>August 2014</a></li> <li><a href='http://www.webmastersgallery.com/2014/07/'>July 2014</a></li> <li><a href='http://www.webmastersgallery.com/2014/06/'>June 2014</a></li> <li><a href='http://www.webmastersgallery.com/2013/07/'>July 2013</a></li> <li><a href='http://www.webmastersgallery.com/2013/01/'>January 2013</a></li> <li><a href='http://www.webmastersgallery.com/2012/12/'>December 2012</a></li> <li><a href='http://www.webmastersgallery.com/2012/08/'>August 2012</a></li> <li><a href='http://www.webmastersgallery.com/2012/07/'>July 2012</a></li> <li><a href='http://www.webmastersgallery.com/2012/06/'>June 2012</a></li> <li><a href='http://www.webmastersgallery.com/2012/01/'>January 2012</a></li> <li><a href='http://www.webmastersgallery.com/2011/11/'>November 2011</a></li> <li><a href='http://www.webmastersgallery.com/2011/06/'>June 2011</a></li> <li><a href='http://www.webmastersgallery.com/2011/03/'>March 2011</a></li> <li><a href='http://www.webmastersgallery.com/2011/02/'>February 2011</a></li> <li><a href='http://www.webmastersgallery.com/2010/11/'>November 2010</a></li> <li><a href='http://www.webmastersgallery.com/2010/09/'>September 2010</a></li> <li><a href='http://www.webmastersgallery.com/2010/07/'>July 2010</a></li> <li><a href='http://www.webmastersgallery.com/2010/06/'>June 2010</a></li> <li><a href='http://www.webmastersgallery.com/2010/05/'>May 2010</a></li> <li><a href='http://www.webmastersgallery.com/2010/02/'>February 2010</a></li> <li><a href='http://www.webmastersgallery.com/2009/07/'>July 2009</a></li> <li><a href='http://www.webmastersgallery.com/2009/06/'>June 2009</a></li> <li><a href='http://www.webmastersgallery.com/2009/05/'>May 2009</a></li> <li><a href='http://www.webmastersgallery.com/2009/04/'>April 2009</a></li> <li><a href='http://www.webmastersgallery.com/2009/03/'>March 2009</a></li> </ul> </div> <!-- meta --> <div class="widget"> <h3>Meta</h3> <ul> <li><a href="http://www.webmastersgallery.com/wp-login.php">Log in</a></li> </ul> </div> </div> <!-- sidebar south END --> </div> <!-- sidebar END --> <div class="fixed"></div> </div> <!-- content END --> <!-- footer START --> <div id="footer"> <a id="gotop" href="#" onclick="MGJS.goTop();return false;">Top</a> <a id="powered" href="http://wordpress.org/">WordPress</a> <div id="copyright"> Copyright © 2009-2021 Webmasters Gallery </div> <div id="themeinfo"> Theme by <a href="http://www.neoease.com/">NeoEase</a>. Valid <a href="http://validator.w3.org/check?uri=referer">XHTML 1.1</a> and <a href="http://jigsaw.w3.org/css-validator/check/referer?profile=css3">CSS 3</a>. </div> </div> <!-- footer END --> </div> <!-- container END --> </div> <!-- wrap END --> <script type='text/javascript' src='http://www.webmastersgallery.com/wp-includes/js/wp-embed.min.js?ver=5.7.3' id='wp-embed-js'></script> </body> </html>