Apologies for the vague title, as I don't know how to describe it without visual examples. I want to ask a question about a popular section/component I see all the time on websites. This image shows what I mean.
The website I took this from is https://emol.work/
In the context of that website, the component I mean divides the front page into 4-5 sections, with differing colors. What is this section/component called? or, if there is such a place, could you point me to a site/resource that explains popular components in websites/web development?
Thanks in advance.
I believe this to be a rotating banner or front page carousel, I'm not an expert but here's a link that may help you further and hopefully answers your question:
https://www.artonicweb.com/learn/web-design-trend-rotating-banner/#:~:text=A%20rotating%20banner%2C%20also%20called,Front%2Dpage%20Carousel
May this help you: "On the web the hero section is typically a prominent image, slider, text or similar element that has pride of place at the top of your homepage layout and possibly subsequent pages. It is front and center and in your face"
Related
Good morning, everyone!
I have realised (just now) that i have never ever done sliders before, so i am a little confused on how to implement them into my project.
I need to have my text in the middle, two arrows (left and right) and balls below (so you can jump to wanted slide). There are no images.
The thing is that after a brief Googling session i saw a lot of suggestions to use special libraries, etc. I am sure it can be done in pure HTML & CSS.
The desired look:
I would really appreciate any kind of related literature and/or examples (jsfiddle, etc).
Thank you!
This is mainly a question about the quality of logos/icons used in Websites. I create logos/icons using Illustrator but when I see icons on professional websites (see image and links), they look crisp like a text, with no blurriness. The edges are very clear. For example, please see this image, especially the search icon and the menu list icon:
This is my own Blog that has bad icons, the Logo and the Menu icon. Both of them are PNG images.
This is Entrepreneur website with awesome menu icon and search icon. If you check the Inspect Element for mobile site, you'll see that the search icon and menu icon are not images (I don't know actually the reality). It is using a pseudo element. How does it work? Maybe this has something to do with quality.
Same is true with TimeofIndia website. Here the menu icon is made using hr tag, so it's obviously great, but still the search icon is beyond understanding as it is using a pseudo element.
And another scenario is related to this Business Insider website's technique. I've seen it at most of the websites, especially Facebook like sites. They use a single image for all icons. How's it possible? If you don't understand please visit this website and check the URL of the menu and search icon's image. How's it done?
So first I would like to know how these things work? How these icons render?
Secondly why I'm not getting the quality like them? Should I stop using images like them? I'm asking this because I've tried exporting in many ways using Illustrator, with same dimensions as required, but still quality sucks. If you can see, in my own blog's (Blog) mobile site, the middle horizontal bar is blurred despite the original image looks awesome before upload. Why is that?
I think these are too many questions. I would appreciate if you can provide suitable links to understand these things fully, if explaining them here is not easy.
Thank you.
If I could, I'd give #marc-b five upvotes :) The first step, before coming to SO, should always be trying to solve the problem yourself. Then you can come to us with an on-topic question. Here, that first step is to right click on one of the icons you're interested in, and choose "inspect".
There are a couple questions here: what are some ways of making crisp images?, and what's the deal with having multiple images in one file? Both of those are very Googlable, but I'll give you a head start:
Two common ways to make images crisp are:
SVG (vector graphics - as an Illustrator user you already know about the difference between those and raster graphics, and why they're crisp. If not, google "vector raster difference")
2x images - the technique here is to make an image twice the final display size, and then use CSS to shrink it down. The in-browser scaling will have a crisper result that just displaying a 1x image.
Having more than one image in one is called a "sprite." You can have a raster sprite or an svg sprite.
Here's an intro to svg https://css-tricks.com/using-svg/, here's an intro to sprites https://css-tricks.com/css-sprites/, here's an intro to svg sprites https://css-tricks.com/svg-sprites-use-better-icon-fonts/, and here's an intro to the latest thing, srcset https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/
I have recently started to see websites with full size, full width background images, and when you scroll down there comes a section with some content and then a different background. and that scrolls with the page. I am sure if you have seen it you know what I am talking about.
How do you call this technique? Is there a name for it? I would like to look for a tutorial on this, but I don't know what to look for.
Thanks!
I think u are looking for Parallax Scrolling Website.
There are many tutorials for doing that easily.
A simple example for that is given here.
Moe can be found-
http://webdesign.tutsplus.com/articles/web-design-inspiration-scrollin-scrollin-scrollin--cms-25486
http://webdesign.tutsplus.com/tutorials/how-to-give-your-logo-the-slip-scroll-effect--cms-22274
http://webdesign.tutsplus.com/tutorials/create-a-masked-background-effect-with-css--cms-21112
http://webdesign.tutsplus.com/articles/building-a-complete-website-with-the-gumby-framework--webdesign-16980
http://webdesign.tutsplus.com/articles/working-with-gumbys-parallax-extension--webdesign-16967
http://webdesign.tutsplus.com/tutorials/jazz-up-a-static-webpage-with-subtle-parallax--webdesign-10195
http://webdesign.tutsplus.com/tutorials/create-a-parallax-scrolling-website-using-stellarjs--webdesign-7307
http://code.tutsplus.com/tutorials/a-simple-parallax-scrolling-technique--net-27641
If u like to implement Parallax with Twitter Bootstrap, then this tutorial is for u-
https://www.impulse-themes.com/zenith/development/twitter-bootstrap-parallax-scrolling
Think u have your complete answer.
Are you perhaps looking for Parallax? There are many resources online with instructions about it, hopefully knowing the term will get you there.
Here's a simple demo with pure CSS Parallax, but you could also check out Awwwards for some inspiration.
The term “parallax” first came from the visual effect of 2D side scrolling videogames that used different background image movement speeds to create the illusion of depth during gameplay. This was generally done by making the background of the game move slower than the foreground in order to make it seem further away. This same concept applies to parallax site design in which the background of the website moves at a different speed as the rest of the page for an impressive visual effect that allows for countless creative applications for online storytelling.
You can check the link below for more information, tips and some downsides as well.
See More
So the title pretty much say's it all, In case anyone is interested I'm self thought so please don't be so hasty to say I did no research or put any effort into this because I've messed around with a lot of various things on this somewhat BS page and searched using Google Yahoo and Bing looking for a similar issue. Basically the table layout seems to to get like a default transparent overlay, I noticed its only directly on the table because the background images are clearly visible when scrolling past the top of the page and its visible in each table cell.
Like I said I've tried various things with no luck but if this is just some common newbie mistake please point me to some reading material or even a good book for web design as I could really use the know how and wouldn't mind learning something as apposed to shooting in the dark with random bits of HTML, CSS and JavaScript in the little free time I do have..
*Also I was doing all this using blogger as my "host" mainly because I plan to ingrate the blogger framework or whatever into the page after I know its good to go. Find a link to the page below, If you need the raw HTML not formatted to blogger just let me know.
https://layout-dev.blogspot.com
Turns out the image host for the body background-image wasn't loading in the image on apple device's, still not sure why but after relocating the image to my personal Dropbox and directly linking to it that solved the problem. *As weird as that may sound the original url was http://subtlepatterns.com/patterns/binding_dark.png and simply replacing it with https://dl.dropbox.com/s/njcu65h90cmsbp8/binding_dark.png solved the problem. -Figured I should post the answer just in case someone ever has a similar issue.
Assuming there is no og:image or link rel img_source, does anyone have any real-world experience or advice on better-than-random techniques to choose an image that best represents a web page?
Update: All answers are good, so upvoted them all and selected one, although it seems there is no great way of doing this. I will experiment with largest picture and screenshot of what it would like on a low-res client. Thanks all!
PS: I'm finding that quite a few pages seem to have og:image or link rel img_source anyway. More than I expected
Taking a screenshot of the website in its smallest possible form, how it would look on a notebook laptop or even a mobile (but not the mobile site version), would be a non-random approach.
Most good web designers will try to make sure users are able to see what the page is about immediately upon loading and include the most important and relevant information 'above the fold' as they say.
Choose the logo of your page as the og:image. That way your brand becomes associated with all your posts, without having to worry about what image best defines each individual page.
For other pages, you cannot control what image they have.
You could investigate how sharer.php works but other than that there is no silver bullet as to choose which image for a web page that has no definable image.
I don't have any experience with Facebook opengraph, but one trick I've used before is to grab favicons of sites I've linked to and use them as link button icons... They're small and are usually always associated with the company name and/or logo, and they're pretty universal across most professional websites. And the usually univeral filename favicon.ico makes it really easy to pick out of the html (or the link attributes if they change the filename).
Might give that a shot if that could be adapted into what you are trying to do. If you find that doesn't look too good, you can try a more "web 2.0" take and check for iPhone/iPad button apple-touch-icon png images (probably only find them on big name sites though)http://developer.apple.com/library/ios/#DOCUMENTATION/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html
I would normally suggest that you simply scrape the page of img tags. However, these days, CSS background images are frequently applied to h1/header/div/a/etc. tags to display logos in place of text.
One possible solution is to grab all elements with 'logo' in their ID/class name:
var l = $('[id*="logo"],[id*="Logo"],[class*="logo"],[class*="Logo"]');
If this is/contains an img tag, chances are you have the site's logo. Otherwise, if it's a div or other such container, you'll need to dig into the child elements' CSS properties to see if they have a background image.
From this you can build a set of candidate images, which when combined with a heuristic based on (for example) image dimensions, should hopefully spit out a logo every time.
I hope this helps you on your way!
Going for the logo is usually the wrong way. Seeing it from a user of your website's point of view I would rather want no image than a logo all the time. This is the same as in Google+ or Facebook links. Only show images when it really does make sense.
However finding the corresponding image may not always be trivial if there is no og:image or rel="image_source" provided.
An article usually has a title which is presented as <h1> or <h2> tag. The nearest image may be the right one. However the nearest may also be a logo so this can go wrong.
I would do that very pragmatic. I would fetch the most likely image first and read the given EXIF data, if this is a real image there are informations provided. If this is just a logo, spacer or some other kind of layout graphic it does not have EXIF data and therefore is not relevant. If the first picture is not the right tough, I would fetch the next one and so on.
Another clue may be the HTML5 <article> tag which usually has the corresponding image to the post nested.
Nevertheless there are several web designer not using standards and their webpage may not be parable nicely.