Nowadays, if you have a product, service, or brand that you want to “get out there” one of the best ways to do that is through influencers. But how…
The post Influencer Review – A look at What Influencer has to offer? appeared first on Onextrapixel.
Design is about solving problems. No matter what product we work on, we always try to provide the best possible solution to our users. Product research, ideation, prototyping, and testing are essential steps of the product design process. The ideation phase plays a crucial role in the design process because, during this phase, designers form hypotheses—raw ideas on how to solve the problem. But every hypothesis, no matter how good it might sound, always requires validation.
What can happen when designers skip the validation part and go straight to building a solution? In many cases, designers end up creating a product that does not bring any value to their target audience. Hopefully, there is a simple way to ensure that you are moving in the right direction. And it is called prototyping.
At ProtoPie, we do not put our faith in raw ideas; we put our trust in prototyping. We believe that prototyping is the best way to validate an idea. That is why when we are working on our product, we treat every idea as a prototype.
Below I want to share some practical tips on how to use prototypes during the design process.
Designers have a hard time explaining the meaning of a particular idea when it is locked inside their heads. When people who listen to a designer do not have a visual reference, they need to imagine how the product is supposed to look and work. No need to say that it often leads to misunderstanding. Prototyping is a way to give your idea a tangible presence that you can put in front of your team or stakeholders. The great thing about a prototype is that it does not need to be fancy. The key thing is to create a representation that helps other people to understand the underlying meaning of your idea and understand whether it has a value.
It is vital to minimize the time required to visualize the ideas. Different stages of the product development process require different fidelity. So, if you are at the beginning of your creative journey, and want to try various concepts before selecting one or two that you will turn into a final product, you might want to use low-fidelity sketches to communicate your idea. But as soon as your idea starts to get traction, you can go for mid- or even high-fidelity assets to make the prototype look and work like a final product. By doing that, you allow other people to interact with your solution.
Usually, product teams have dozens of ideas about the features they want to introduce in their products. In some extreme cases, when teams turn all their ideas into features, they create so-called creeping featurism—products are filled with poorly-designed features and become completely unusable.
Don Norman gives the following description to creeping featurism:
“Creeping featurism is a disease, fatal if not treated promptly. There are some cures, but as usual, the best approach is to practice preventative medicine.”
Not all features are equally important to your users. It’s easy to see whether a particular feature works for users or not by prototyping it and testing a prototype with your users. The results of usability testing sessions will be a strong argument for meetings with stakeholders. It’s much easier to convince stakeholders when you show how users interact with a product.
The cost of introducing a particular feature in a product can vary drastically based on the feature complexity. In many cases, it’s hard to evaluate the complexity of specific features just by reading a feature specification. Incorrect assumption “Developing this shouldn’t take more than a day” can result in a week or even more of development. As a result, a team postpones the time to market, which ultimately leads to financial loss.
Prototypes act as a bridge between designers and developers. Prototyping helps developers understand which aspects of your idea are difficult or impossible to implement. During high-fidelity prototyping, most of the hidden shortcomings related to UI and user interactions are exposed. This information will help you to plan your resources, time, and budget. Remember that the earlier in the process you can identify and fix fundamental problems, the less expensive it is.
When product designers come up with good ideas, they tend to think of their ideas as fully-formed solutions that a team should embrace and build. This way of thinking is very dangerous because it narrows down the team focus on one specific path that an organization should follow. However, it only happens when a team skips the prototyping phase and goes straight to implementing a final product.
If a team starts prototyping, it completely changes the way it thinks about ideas. Since a prototype is anything but sacred, and a process of prototyping is similar to experimentation, the team is more willing to try various approaches to find the one that works the best. Even when a team starts with one idea, it can follow different routes that will ultimately lead to different outcomes. A team follows a quick build-measure-learn cycle where it validates their ideas. So, without any doubts, it’s possible to say that prototyping will guide your product design decisions.
One of the first lessons you learn in chess is ‘when you find a good move, look for a better one.’ This rule is applicable to product design. Let’s suppose you have a really good idea on your mind. The best thing you can do with it is to ignore it for a while. Take a notebook, write your idea on the piece of paper, and turn the page. Put the notebook on the shelf. This approach will help you get the idea out of your mind and keep thinking. Because you have to be willing to move on from the good ideas if you’re ever going to find the great ones.
“Go with your gut” is a phrase we hear throughout our lives. Each of us has our own gut feelings when making decisions, and designers often rely on personal opinions when making design decisions. Gut feelings play an essential role in developing solutions, but they are not the only tool you should be using. Influenced by gut feelings, designers can easily fall prey to misguidances, such as cognitive biases — tendencies to search for, interpret, favor, and recall information in a way that confirms or strengthens their prior personal beliefs or hypotheses.
Rather than relying solely on your intuition, collect valuable insights by testing your prototypes with real users or people who represent your target audience. It’s recommended to use high-fidelity prototypes for usability testing sessions because they’re better for soliciting feedback (when users see a realistic design, they start to evaluate it as a finished product).
When I started ProtoPie, I wanted to build a team that will make my ideas tangible and will create a tool for UX designers that will help them work efficiently. Now, looking back, one thing is clear: my best idea was to surround myself with a team of people who had even better ideas. Many product teams believe that the ultimate goal of product design is to create great products. But in reality, the goal is to create a judgment-free environment with highly-motivated professionals that can quickly spark creativity.
Brainstorming sessions are an essential ingredient of solid design process. During brainstorming, team members should produce as many ideas as they can to address a problem statement, evaluate the ideas, and turn the best one into prototypes.
Many large organizations suffer from the so-called HiPPO effect (highest paid person’s opinion). This effect describes the tendency for lower-paid employees to defer to higher-paid employees (usually managers) when a decision has to be made. Not to say that HiPPO effects have a significant negative impact on product design—it introduces bias into all design decisions. Whenever a team gathered together to discuss a design, instead of making a decision collaboratively, they always look at one person while sharing their ideas.
Two things will help you to deal with the HiPPO effect.
First, embrace the “There are no bad ideas” mindset. The d.School puts it in this way “It’s not about coming up with the ‘right’ idea, it’s about generating the broadest range of possibilities.” That’s why it’s important to be curious and be ready to explore various directions and prototype various solutions.
Second, honor honest feedback. Even if you’re a manager or a boss of your organization, people who work on a project should not be afraid to force you to think critically about your concepts. You should motivate your team to experiment and try various approaches. Instead of saying, “I think that this should be designed…,” you should say, “How might we design …?” This simple phrase will help you build a creative spirit and help team members solve a problem together.
Emotions play a massive role in the decision-making process. When we evaluate ideas, we not only try to understand the value of the concepts but also consciously or subconsciously assess the person who proposed the ideas. It is happening because often it is hard to separate the value of an idea from the person who suggests it.
Product design is all about being open-minded. It is vital to separate the value of an idea from the person who shares it. And it is easier to do that when you criticize not an idea, but a prototype. A prototype naturally makes you focus on design assets (digital or physical) rather than on the words of a person who created it. Thus, whenever team members have ideas/potential solutions, ask them to make the ideas/potential solutions tangible (create prototypes), and challenge the prototype together with other team members. Evaluate all design decisions in accordance with business goals and user needs. When testing a prototype, avoid saying, “Let’s validate this design,” but instead say,” Let’s learn what works and what doesn’t work for our users and why.” By collecting useful feedback from colleagues and other people involved in the process, you not only beat your personal bias but also find more elegant solutions for the problem.
Prototyping is more than just a technique that you use in product development. It is design philosophy, way of thinking. Tom and David Kelley of IDEO perfectly summed up the importance of prototyping by saying:
“If a picture is worth 1,000 words, a prototype is worth 1,000 meetings.”
Prototyping helps to formulate the main trajectory of the design by framing your mind around a continuous pursuit of better concepts. Any team that makes a prototyping integral part of their design is motivated to search for a better solution.
(ms, ra, il)
Articles on Smashing Magazine — For Web Designers And Developers
What are you looking forward to in December? Spending time with family and friends during the holidays, watching the birds gather in your snowy backyard, or celebrating “Bathtub Party Day” maybe? These are just some of the things that inspired artists and designers to create their desktop wallpapers this month.
All wallpapers in this post come in versions with and without a calendar for December 2018 and can be downloaded for free — as it has been our monthly tradition since more than nine years already. To cater for an extra bit of December joy, we also collected some wallpaper favorites from past years at the end of the post. Happy December and happy holidays!
Please note that:
“Everyone is in the mood for Christmas when December starts. Therefore I made this Christmas wreath inspired wallpaper. Enjoy December and Merry Christmas to all!” — Designed by Melissa Bogemans from Belgium.
“During Christmas season, in the cold, colorless days of winter, Cardinal birds are seen as symbols of faith and warmth! In the part of America I live in, there is snowfall every December. While the snow is falling, I can see gorgeous Cardinals flying in and out of my patio. The intriguing color palette of the bright red of the Cardinals, the white of the flurries and the brown/black of dry twigs and fallen leaves on the snow-laden ground, fascinates me a lot, and inspired me to create this quaint and sweet, hand-illustrated surface pattern design as I wait for the December 2018 snowfall in my town!” — Designed by Gyaneshwari Dave from the United States.
“December is all about coziness and warmth. Days are getting darker, shorter and colder. So a nice cup of hot cocoa just warms me up.” — Designed by Hazuki Sato from Belgium.
“You know that warm feeling when you get to spend cold winter days in a snug, homey, relaxed atmosphere? Oh, yes, we love it too! It is the sentiment we set our hearts on for the holiday season, and this sweet snowy tenderness is for all of us who adore watching the snowfall from our windows. Isn’t it romantic?” — Designed by PopArt Studio from Serbia.
“The tiny flakes of snow have just begun to shower and we know it’s the start of the merry hour! Someone is all set to cram his sleigh with boxes of love as kids wait for their dear Santa to show up! Rightly said, ’tis the season of snow, surprise and lots and lots of fun! Merry Christmas!” — Designed by Sweans Technologies from London.
“December 5th is also known as Bathtub Party Day, which is why I wanted to visualize what celebrating this day could look like.” — Designed by Jonas Vanhamme from Belgium.
“Everything that reminds me of the cold days of December. I’ve tried to put everything in one illustration, the snow, hot coffee, mountains, snowman. Also my illustration is blue, it’s a cold color, so this give the illustration more of a winter effect.” — Designed by Dennis van den Heuvel from Belgium.
“December brings more than Christmas only. It brings Winter. It brings the cold.” — Designed by Ellen Theuwen from Belgium.
Designed by Mad Fish Digital from the USA.
“‘Christmas waves a magic wand over this world, and behold, everything is softer and more beautiful.’ (Norman Vincent Peale)” — Designed by Suman Sil from India.
“Of all the months of the year, there is not a month so welcome to the young or so full of happy associations as this last month of the year. A month of giving, celebrations, and holidays. Christmas month is here. Make this last month of the year special for you and the ones around you.” — Designed by Procurement Software from India.
“Have you ever noticed how people have characteristic (or weird) poses playing instruments? It was my inspiration for drawing very simple and funny stick-figure musicians. Over the years I have drawn everything from violinists to pipa players (Chinese instrument) and from electric guitarists to tubaists. I never get bored of drawing new instrumentalists, ensembles or, in this case, a Christmas band. I wish you a very happy December with lots of music!” — Designed by Franke Margrete from The Netherlands.
“December is that time of the year where snows starts to fall. It’s from this moment that we can go skiing and snowboarding again. It’s the best time of the year.” — Designed by Jasper Bogaert from Belgium.
“December is when winter begins, so I decided to go for some nice, cold, pastel colors and a wintery scenario. The ram is a family-related symbol and it’s cute, so I named it Meeeh.” — Designed by Ana Matos from Portugal.
“December always reminds me of snow and being with other people. That’s why I created two snowflakes Snow & Flake who are best buddies and love being with each other during winter time.” — Designed by Ian De Lantsheer from Belgium.
“I was inspired by beautiful images of the Aurora that I saw on the internet.” — Designed by Wannes Verboven from Belgium.
“Christmas is the most wonderful time of the year! Once we’ve had our fill of turkey and welcomed the holiday season, we’re constantly encouraged to get into the spirit of the festive season.” — Designed by Mobile App Development from India.
“I created this design in honour of the 9th of December, the day of lights.” — Designed by Mathias Geerts from Belgium.
Designed by Oumayma Jamali from Belgium.
Designed by Antun Hiršman from Croatia.
Designed by Think 360 Studio from India.
“My parents are divorced so I don’t really like the holidays because it feels like I always have to choose between my mum and dad.” — Designed by Micheline Van Looveren from Belgium.
“December is Human Rights Month, so I decided to design a wallpaper for this special month.” — Designed by Jonas Vanhamme from Belgium.
“Early walks in the fields when the owls still sit on the fences and stare funny at you.” — Designed by Bo Dockx from Belgium.
“December automatically brings to mind the Christmas spirit, the smell of delicious food, and the joy of opening beautiful presents. A couple of years ago I volunteered in a homeless shelter for a while. I even spent New Years’ Eve at the shelter. And ever since, Christmas also reminds me that a lot of others are much less fortunate than me…” — Designed by Kim Haesen from Belgium.
Designed by Lieselotte Philips from Belgium.
“‘Christmas gives us the opportunity to pause and reflect on the important things around us.’ (David Cameron)” — Designed by Pinki Ghosh Dastidar from India.
“December 15 is International Tea Day, so I thought to design a cup of tea, which also represents the cold weather during the winter.” — Designed by Hannah De Wachter from Belgium.
“I wanted to emphasize people who do not have enough money to celebrate Christmas like everyone else in the world.” — Designed by Angelique Buijzen from Belgium.
“‘We must go beyond textbooks, go out into the bypaths and untrodden depths of the wilderness and travel and explore and tell the world the glories of our journey.’ (John Hope Franklin)” — Designed by Dipanjan Karmakar from India.
Ready for a trip back in time? Here’s a collection of December goodies from past years that are too good to be forgotten. Please note that these wallpapers don’t come with a calendar.
Designed by Tazi from Australia.
“Christmas is coming and a great way to share our love is by baking cookies.” — Designed by Maria Keller from Mexico.
“Since we often yearn for a peaceful and quiet place to work, we have found inspiration in the famous house on the River Drina in Bajina Bašta, Serbia. Wouldn’t it be great being in nature, away from the civilization, swaying in the wind and listening to the waves of the river smashing your house, having no neighbors to bother you? Not sure about the Internet, though…” — Designed by PopArt Studio from Serbia.
Designed by Mel Armstrong from Australia.
“There’s no more special time for a fire than in the winter. Cozy blankets, warm beverages, and good company can make all the difference when the sun goes down. We’re all looking forward to generating some hygge this winter, so snuggle up and make some memories.” — Designed by The Hannon Group from Washington D.C.
“Joy to the world, all the boys and girls now, joy to the fishes in the deep blue sea, joy to you and me.” — Designed by Morgan Newnham from Boulder, Colorado.
“‘Winter is the time for comfort, for good food and warmth, for the touch of a friendly hand and for a talk beside the fire: it is the time for home.’ (Edith Sitwell) — Designed by Dipanjan Karmakar from India.
“As a Belgian, December reminds me of snow, cosiness, winter, lights and so on. However, in the Southern Hemisphere it is summer at this time. With my illustration I wanted to show the different perspectives on December. I wish you all a Merry Christmas and Happy New Year!” — Designed by Jo Smets from Belgium.
“There’s nothing better than a tall glass of Golden Eggnog while sitting by the Christmas tree. Let’s celebrate the only time of year this nectar of the gods graces our lips.” — Designed by Jonathan Shears from Connecticut, USA.
Designed by Elise Vanoorbeek from Belgium.
“Santa’s tired of winter (and the North Pole) and is flying to the South part of the globe to relax a little bit. He deserves a little vacation, don’t you think?” — Designed by Ricardo Gimenes from Sweden.
“My brother-in-law has been on a design buzzword kick where he calls everything minimal, to the point where he wishes people, “Have a minimal day!” I made this graphic as a poster for him.” — Designed by Danny Gugger from Madison, Wisconsin, USA.
Designed by Sofie Keirsmaekers from Belgium.
Designed by Bogdan Negrescu from the United States.
Designed by Thaïs Lenglez from Belgium.
Please note that we respect and carefully consider the ideas and motivation behind each and every artist’s work. This is why we give all artists the full freedom to explore their creativity and express emotions and experience throughout their works. This is also why the themes of the wallpapers weren’t anyhow influenced by us, but rather designed from scratch by the artists themselves.
Thank you to all designers for their participation. Join in next month!
Articles on Smashing Magazine — For Web Designers And Developers
CSS Shapes Level 1 has been available in Chrome and Safari for a number of years, however, this week it ships in a production version of Firefox with the release of Firefox 62 — along with a very nice addition to the Firefox DevTools to help us work with Shapes. In this article, I’ll take a look at some of the things you can do with CSS Shapes. Perhaps it’s time to consider adding some curves to your designs?
The CSS Shapes specification Level 1 defines three new properties:
shape-outsideshape-image-thresholdshape-marginThe purpose of this specification is to allow content to flow around a non-rectangular shape, something which is quite unusual on our boxy web. There are a few different ways to create shapes, which we will have a look at in this tutorial. We will also have a look at the Shape Path Editor, available in Firefox, as it can help you to easily understand the shapes on your page and work with them.
In the current specification, shapes can only be applied to a float, so any shapes example needs to start with a floated element. In the example below, I have a PNG image with a transparent background in which I have floated the image left. The text that follows the image now flows around the right and bottom of my image.
What I would like to happen is for my content to follow the shape of the opaque part of the image, rather than follow the line of the physical image file. To do this, I use the shape-outside property, with the value being the URL of my image. I’m using the actual image file to create a path for the content to flow around.
See the Pen Smashing Shapes: image by Rachel Andrew (@rachelandrew) on CodePen.
Note that your image needs to be CORS compatible, so hosted on the same server as the rest of your content or sending the correct headers if hosted on a CDN. Browser DevTools will usually tell you if your image is being blocked due to CORS.
This method of creating shapes uses the alpha channel of the image to create the shape, as we have a shape with a fully transparent area, then all we need do is pass the URL of the image to shape-outside and the shape path follows the line of the fully opaque area.
To push the line of the text away from the image we can use the shape-margin property. This creates a margin between the line of the shape and the content running alongside it.
See the Pen Smashing Shapes: shape-margin by Rachel Andrew (@rachelandrew) on CodePen.
In the case above, we have the image displayed on the page and then the text curved around it. However, you could also use an image as the path for the shape in order to create a curved text effect without also including the image on the page. You still need something to float, however, and so for this, we can use Generated Content.
See the Pen Smashing Shapes: generated content by Rachel Andrew (@rachelandrew) on CodePen.
In this example, we have inserted some generated content, floated it left, given it a width and a height and then used shape-outside with our image just as before. We then get a curved line against the whitespace, but no visible image.
A CSS gradient is just like an image, which means we can use a gradient to create a shape, which can make for some interesting effects. In this next example, I have created a gradient which goes from blue to transparent; your gradient will need to have a transparent or semi-transparent area in order to use shapes. Once again, I have used generated content to add the gradient and am then using the gradient in the value for shape-outside.
Once the gradient becomes fully transparent, then the shape comes into play, and the content runs along the edge of the gradient.
See the Pen Smashing Shapes: gradients by Rachel Andrew (@rachelandrew) on CodePen.
shape-image-threshold To Position Text Over A Semi-Opaque ImageSo far we have looked at using a completely transparent part of an image or of a gradient in order to create our shape, however, the third property defined in the CSS Shapes specification means that we can use images or gradients with semi-opaque areas by setting a threshold. A value for shape-image-threshold of 1 means fully opaque while 0 means fully transparent.
A gradient like our example above is a great way to see this in action as we can change the shape-image-threshold value and move the line along which the text falls to more opaque areas or more transparent areas. This property works in exactly the same way with an image that has an alpha channel yet is not fully transparent.
See the Pen Smashing Shapes: shape-image-threshold by Rachel Andrew (@rachelandrew) on CodePen.
This method of creating shapes from images and gradients is — I think — the most straightforward way of creating a shape. You can create a shape as complex as you need it to be, in the comfort of a graphics application and then use that to define the shape on your page. That said, there is another way to create our shapes, and that’s by using Basic Shapes.
The Basic Shapes are a set of predefined shapes which cover a lot of different types of shapes you might want to create. To use a basic shape, you use the basic shape type as a value for shape-outside. This type uses functional notation, so we have the name of the shape followed by brackets (inside which are some values for our shape).
The options that you have are the following:
inset()circle()ellipse()polygon()We will take a look at the circle() type first as we can use this to understand some useful things which apply to all shapes which use the basic shape type. We will also have a look at the new tools in Firefox for inspecting these shapes.
In the example below, I am creating the most simple of shapes: a circle using shape-outside: circle(50%). I’m using generated content again, and I have given the box a background color, and also added a margin, border, and padding to help highlight some of the concepts of using CSS Shapes. You can see in the example that the circle is created centered on the box; this is because I have given the circle a value of 50%. That value is the <shape-radius> which can be a length or a percentage. I’ve used a percentage so that the radius is half of the size of my box.
See the Pen Smashing Shapes: shape-outside: circle() by Rachel Andrew (@rachelandrew) on CodePen.
This is a really good to time have a look at the shape that has been created using the Firefox Shape Path Editor. You can inspect the shape by clicking on the generated content and then clicking the little shape icon next to the property shape-outside; your shape will now highlight.
You can see how the circle extends to the edge of the margin on our box. This is because the initial reference box used by our shape is margin-box. You already know something of reference boxes if you have ever added box-sizing: border-box to your CSS. When you do this, you are asking CSS to use the border-box and not the default content-box as the size of elements. In Shapes, we can also change which reference box is used. After any basic shape, add border-box to use the border to define the shape or content-box to use the edge of the content (inside the padding). For example:
.content::before { content: ""; width: 150px; height: 150px; margin: 20px; padding: 20px; border: 10px solid #FC466B; background: linear-gradient(90deg, #FC466B 0%, #3F5EFB 100%); float: left; circle(50%) content-box; } You will see the circle appear to become much smaller. It is now using the width of the content — in this case the width of the box at 150px — rather than the margin box which includes the padding, border, and margin.
Inspecting your element in Firefox DevTools will also show you the reference boxes so you can choose which might give you the best result with your particular shape.
A second value can be passed to circle() which is a position; if you do not pass this value, it defaults to center. However, you can use this value to pull your circle around. In the next example, I have positioned the circle by using shape-outside(50% at 30%); this changes where the center of the circle is positioned.
See the Pen Smashing Shapes: circle() with position by Rachel Andrew (@rachelandrew) on CodePen.
clip-pathSomething useful to know is that the same <basic-shape> values can be used as a value for clip-path. This means that after creating a shape, you can clip away the image or background color that extends outside of the shape. In the example below, I am going to do this with our example gradient background, so that we end up with a circle that has text curved around from our square box.
See the Pen Smashing SHapes: circle() with clip-path by Rachel Andrew (@rachelandrew) on CodePen.
All of the above concepts can be applied to our other basic shapes. Now let’s have a quick look at how they work.
The inset() value defines a rectangle. This might not seem very useful as a float is a rectangle, however, this value means that you can inset the content wrapping your shape. It takes four values for top, right, bottom, and left plus a final value which defines a border radius.
In the example below, I am using the values to inset the content on the right and bottom of the floated image, plus adding a border radius around which my content will wrap using shape-outside: inset(0 30px 100px 0 round 40px). You can see how the content is now over the background color of the box:
See the Pen Smashing Shapes: inset() by Rachel Andrew (@rachelandrew) on CodePen.
An ellipse is a squashed circle and as such needs two radii for x and y (in that order). You can then push the ellipse around just as with circle using the position value. In the example below, I am creating an ellipse and then using clip-path with the same values to remove the content outside of my shape.
See the Pen Smashing Shapes: ellipse() by Rachel Andrew (@rachelandrew) on CodePen.
In the above example, I also used shape-margin to demonstrate how we can use this property as with our image generated shapes to push the content away.
Creating polygon shapes gives us the most flexibility, as our shapes can be created with three or more points. The value passed to the polygon needs to be three or more pairs of values which represent coordinates.
It is here where the Firefox tools become really useful as we can use them to help create our polygon. In the below example, I have created a polygon with four points. In the Firefox DevTools, you can double-click on any line to create a new point, and double-click again to remove it. Once you have created a polygon that you are happy with, you can then copy the value out of DevTools for your CSS.
See the Pen Smashing Shapes: polygon() by Rachel Andrew (@rachelandrew) on CodePen.
As CSS Shapes are applied to a float, in many cases the fallback is that instead of seeing the content wrap around a shape, the content will wrap around a floated element (in the way that content has always wrapped around floats). Browsers ignore properties they do not understand, so if they don’t understand Shapes, it doesn’t matter that the shape-outside property is there.
Where you should take care would be in any situation where not having shapes could mean that content overlaid an area which made it difficult to read. Perhaps you are using Shapes to push content away from a busy area of a background image, for example. In that case, you should first make sure that your content is usable for the non-Shapes people, then use Feature Queries to check for support of shape-outside and overwrite that CSS and apply the shape. For example, you could use a margin to push the content away for non-Shapes visitors and remove the margin inside your feature query.
.content { margin-left: 120px; } @supports (shape-outside: circle()) { .content { margin-left: 0; /* add the rest of your shapes CSS here */ } } With Firefox releasing their support we now only have one main browser without support for Shapes — Edge. If you want to see Shapes support across the board you could go and vote for the feature here, and see if we can encourage the implementation of the feature in Edge.
In this article, I’ve tried to give a quick overview of some of the interesting things that are possible with CSS Shapes. For a more in-depth look at each feature, check out the Guides to CSS Shapes over at MDN. You can also read a guide to the Shape Path Editor in Firefox.
(il)
Articles on Smashing Magazine — For Web Designers And Developers
“Progressive Images” is a hot topic these days. We often come across articles explaining techniques on how to avoid showing an empty space where an image will load. Medium and Facebook are examples of websites and mobile apps that apply this pattern. I recently wrote about different ways to use SVG as placeholders, and this year’s PerfPlanet’s Performance Calendar included two posts that further describe SQIP, a technique based on blurred SVGs: Progressive Image Loading using Intersection Observer and SQIP and SQIP — Vague Vectors for Performant Previews.
Articles on Smashing Magazine — For Web Designers And Developers
 |
Editor’s Note: Today marks a special day for WordPress. Powering many websites (and yes, Smashing Magazine is one of them), it celebrates its 13th birthday today. Happy birthday, dear WordPress! Here’s to many more!
Do you remember when you could run a “fast” WordPress website with just an Apache server and PHP? Yeah, those were the days! Things were a lot less complicated back then.
Now, everything has to load lightning-fast! Visitors don’t have the same expectations about loading times as they used to. A slow website can have serious implications for you or your client.
The post A Look At The Modern WordPress Server Stack appeared first on Smashing Magazine.
 |
If you’ve ever written an iOS app beyond a trivial “Hello world” app with just one screen and a few views, then you might have noticed that a lot of code seems to “naturally” go into view controllers.
Because view controllers in iOS carry many responsibilities and are closely related to the app screens, a lot of code ends up being written in them because it’s just easier and faster that way.
The post A Better Architecture For iOS Apps: A Deep Look At The Model-View-Controller Pattern appeared first on Smashing Magazine.
Powered by WhatsApp Chat
