Related
So, i got a Figma resouce and task for move it to website. I stucked with a trouble: My figma got very complex background. Different lines, shapes e.t.c. are included in background. So which is the best way to deal with? Should i just group all of these elements into single one and insert it as a single background image?
I need to move this background with different lines, which defined as separate elements in figma to website.
Breaking down a design concept / mockup into layers of images and HTML and CSS is a nuanced process, especially if the design is very rich.
I recommend studying these tutorials so that you can figure out the best strategy for converting your mockup into a professional and optimized HTML5 web page:
The 2020 HTML & CSS Crash Course - From Mockup to Product
Break Down and Integrate a Mockup
Now, with that said, here's how I would approach it:
The general gradient background should be rendered using CSS.
The circles, dot, and horizontal line coming from the circle, should be exported to SVG -or- transparent PNG. Position that PNG image over the CSS background. For that, I recommend checking this Stack Overflow question.
The numbers, being text with flat colors, should be implemented with floating divs, CSS, and WOFF fonts. I wouldn't export each number as separate images, because that's a very 90's old way of doing it, when HTML5 and CSS features were primitive. But this is up to you.
Rounded rectangles with transparent background that blurs anything behind them can be rendered with DIVS and CSS. The Cyrillic text is inside the DIVS. Check this Stack Overflow question for that.
I hope this helps!
I have a designer who designed my site using Photoshop (.psd).
Now i am the one who will convert this to html/css.
In the design, there are icons (images) whose dimension is 70x55 (measured in photoshop ruler)
My question is, when i code these images into html/css, should i be using the following code?
<img src="img1.png" width="70px" height="55px"/>
Is this how converting psd to html works? following the sizes, spacing, distance on whats on the actual psd designed by the designer?
Im a complete noob on this so any help will be great appreciated.
-UPDATE -
By the way, when i am coding this into html/css, i am using a high screen resolution desktop monitor (not the standard monitor laptop screen), i followed all the dimension designed in the psd from images to container divs & dialog boxes (designer has designed dialog boxes).
Now after i finished coding, followed the design (followed what i see on the psd), it looks ok when i view it in a browser with the current big screen i am using. The view i am seeing is the page looks the same in the psd and lot of spaces and not too compact to look. So everything looks good here.
Now when i view it in my friend's laptop with standard monitor screen, the page looks very compact, the images (from psd which i followed the dimensions and coded it in html/css) looks big and some of the elements i coded did not fit on the browser screen. Im sure the reason behind this is because i am using smaller screen.
Now i am wondering, I followed what the designer designed in psd. I followed the distances, dimensions of images, etc... Whos doing wrong here? The designer because he designed the elements in psd which is too big for smaller monitor screen? or me who does not know something or maybe missed something here?
Any guidance would be a big help
Cut out the images using the slice tool in Photoshop and save for web to optimise the images.
The width and height attributes on an image aren't necessary although they save the browser a small amount of time reading the images to work out the dimensions. Use CSS to control the size of the image; but obviously you should avoid stretching the image larger than its native size or it will become pixelated.
By default an image will render in a browser at its native size.
The designer I'm working with has given me a monster of an implementation issue...
Page background is grey, and atop of it is a crumpled paper texture (non-repeating with painted design elements) for the first 600 pixels (by 1400 pixels across; currently centered as a non-repeating background). At the bottom is another div with more text on it -- with a dropshadow, complex line pattern for the background and ripped edges, hovered slightly above the top div.
Saving the top part as a JPG and the bottom part as a transparent PNG leads to filesizes of +1mb.
Saving the top part as a JPG and the bottom part as a JPG doesn't work very well due to the drop shadow. It would technically work to save the bottom part as a slice with elements of the top part underneath the dropshadow, but it would have to line up pixel-perfect always or else look crappy. And at that point, I might as well save the whole site as one big image...
If the bottom part had a solid colour for the background, I could set each edge to have a different transparent PNG. However, the line pattern on the bottom part means that this wouldn't work.
My question is ultimately:
How the heck do people do ripped edges these days without making their site one big image?
Thanks!
Screengrab:
CSS3 does provide a border-image property, which should be able to help you with the ripped border effect (although even then, it would help if it was a repeating image).
See here for the W3 specification.
However it may not be much use to you, because browser support for this feature isn't great -- IE doesn't support it at all (not even IE9), and while most other browsers do support it, they all currently have gaps in their support and require a vendor prefix in the CSS property.
See CanIUse.com for a full browser support table for it.
To be honest, I think you should just go back to your designer and ask him to make it easier to work with -- he's probably just created something he thinks looks good, but is unaware of the limitations of the design he's put together; if you explain the issue to him, he may well be able to produce something a bit more usable for you.
There's really not a whole lot you can do here.
Page edges are ideally seamlessly repeated via repeat-y, and in your case it looks like the texture is one big image. You're either going to have to settle for sub-par performance or present the designer with your issues.
Check the archive of this blog for a good example.
You either have to fix the background images and use the entire image (or the top image AND the bottom image) and make the background non-scrolling. OR you have to get him to design a pattern that can repeat and then use a smaller PNG.
Clearly, your designer has a print background....
Ok, there's ways that will most likely theoretically work. But theoretical isn't always practical. I suspect your desire is to have cross-browser capability, as all of us should. So, start by throwing most new CSS3 tricks out, thanks to legacy IE. Forget box-shadow, forget crazy png tranparencies without hacks, etc.
What you're left with is doing a gigantic .jpg background. That will load....eventually.....
In this case, you can see the storm on the horizon, so run for cover. Go back to the designer, explain why this is about as smart an idea as texture layered over gradients, and help them understand why our buddies at Microsoft have made this virtually impossible. Just like a fully-flashed out site, it can be done somehow....but it's probably not the best use of time and resources. The web isn't print, it's dynamic...and when you put something "on a page" it's not going to stay put as it would in Illustrator, nor can you guarantee that your user is going it experience it in 100# glossy with a metallic overlay. Yes, I was a designer before I was a developer.....
Sound like a cop-out? Maybe it is. But I've been in your shoes, building sites for credit cards. My team was forced to waste thousands of dollars of the bank's money trying to make sites work with designs that probably shouldn't have been done on the web, thanks to print designers doing double-duty, getting designs approved prior to talking to the tech team....after, of course, we presented management with the options. Ultimately, it got the boss fired for going over budget.
although this is untypical, I would recommend cutting a big square shaped hole in the center of the image so that you're only left with the edges themselves and a transparent center and saving to PNG. Then saving the center part itself as a jpeg and putting the jpeg directly on top of the PNG in the correct position.
This way, the majority of the very large PNG will contain very little data and be a very small file size. The rest of the data would then, obviously, be jpeg and therefore smaller.
I created a black and white collage consisting of a number of images - but saved the file as 1280*1024 - ideally encompassing that rez of a screen.
The issue is, would it be wiser to have the background scale, and stretch the images in the case of a larger screen or should I have it repeat so as not to lose resolution, and have smaller screens cropped from some of the background?
Thanks for any insight!
I personally don't think scaling an image up is ever an option. It's incredibly noticeable, and it doesn't look good. I would recommend using a background image that at least works on 1920 x 1080, and gracefully fade out the image on the edges or tiles well so if someone sees the page on an even larger screen, there aren't strong lines on the edges of the background.
If you are concerned about the bandwidth involved in large images, check out CSS3 Media Queries. All mobile browsers support this CSS3 module, and it will allow you to target certain resolutions and send them smaller images (both in dimensions and file size).
If your image does tile well, I would recommend going with the smallest pattern, and letting css do the repetition for you. There's no point in pushing more pixels down the pipe than necessary.
It's up to the user really but they obviously can't make that decision. I'd scale it but that's not as easy as tiling it. I've never successfully scaled a background image.
It will also depend on your preference.
Are you okay with having a stretched image as a background, in case the user has a larger screen? If yes, then by all means set the background image to stretch. Or, are you more keen on preserving the integrity of the image? In the latter case, it's much better to have the image tile.
If you're interested in creating a full page background image, try one of these techniques found on CSS Tricks: "Perfect Full Page Background Image".
I'm asking this question purely from a usability standpoint!
Should a website expand/stretch to fill the viewing area when you resize a browser window?
I know for sure there are the obvious cons:
Wide columns of text are hard to read.
Writing html/css using percents can be a pain.
It makes you vulnerable to having your design stretched past it's limits if an image is too wide, or a block of text is added that is too long. (see it's a pain to code the html/css).
The only Pro I can think of is that users who use the font-resizing that is built into their browser won't have to deal with columns that are only a few words long, with a body of white-space on either side.
However, I think that may be a browser problem more than anything else (Firefox 3 allows you to zoom everything instead of just the text, which comes in handy all the time)
edit: I noticed stack overflow is fixed width, but coding horror resizes. It seems Jeff doesn't have a strong preference either way.
Raw HTML does just that. Are you changing your data so that it doesn't render so good in random sized windows?
In the olden days, everyone had VGA screens. Now, that resolution is most uncommon. Who knows what resolutions are going to be common in the future? And why expect a certain minimum width or height?
From a usability viewpoint, demanding a certain resolution from your users is just going to create a degraded experience for anyone not using that resolution. Another thing that comes from this is what is fixed width? I've seen plenty of fixed size windows (popups) that just don't render right because my fonts are different from the designer's.
In terms of web site scaling I like fixed sized web sites that scales nicely using the browsers "zoom" function. I don't want a really wide page with tiny fonts on my 1920 res monitor. I don't know if the web designer has to do anything to make it scale nicely when zoomed, but the zoom in FF3 is awesome, the one in IE7 is useless...
The design should be fluid within sensible bounds.
Use CSS has min-width and max-width properties (which work in every browser, including IE7+) to prevent design from stretching too much.
The important thing is never to have a block of text stretch too wide. If a window is expanded, no block of text should indefinitely stretch to match because reading becomes a difficulty.
Like people have said, it really depends on what information the site is displaying. Two good examples are StackOverflow, and Google Images..
If stackoverflow stretched to fit the screen, longer answers would be annoying to read, because the eye finds it difficult to scan over long lines - this is exactly why newspapers use columns for everything, and why books are the all the same sort of width.
With Google Images, where the content is basically a bunch of 200px wide images, it stretches to fit the browser width and is still perfectly readable.
Basically, bear in mind the eye hates reading long lines of text, and base your design on that. You can design your site so when you increase the font size, all the layout scales nicely with it (The only site I can think of that does this is www.geektechnique.org - press Ctrl+-/= or Ctrl+scrollwheel, and the layout changes width with the font size)
I guess like a lot of things: it depends. I usually do both. Some content stays fixed width to look good or if it can't benefit form more space. other stuff is set to 100% if it seems like it'd be usefull.
This should be decided on how complicated the design of your website is. The more complicated, graphically or component wise (amount of content divs), will determine how well your website will scale. Generally you will find most graphic designers website will not scale because they are graphically intensive. However informational website will scale to make the best use of readable space on the screen and are not complicated for ease of use. Its a matter of preference really.
I think it depends on the content of the site. Sites like SOFlow, Forums, and other sites have an emphasis on reading lots of details, so having more real estate to do so is a big benefit in my mind. The less vertical scroll, the better.
However, for sites a little less demanding on the reading level, even blogs or retail sites where you're simply displaying an individual product, having a fixed width allows you to keep things more concise.
I'm a big fan of fully-fluid designs. As to the usability complaints about lines of text that are too long... if they're too long because of the size of my browser window, then I can just as easily make the window narrower as I can make it wider.
This is a matter of styling preference. Both can be equally usable depending on implementation. Columns can also be used, if the screen gets wide enough. Personally, I find it annoying when there is a single, narrow column of text going down the screen.
Edit for 2012: Yes, your website should respond to the size of the window it is being displayed in.
There are many places to read more about this, including:
http://johnpolacek.github.com/scrolldeck.js/decks/responsive/
http://www.abookapart.com/products/responsive-web-design
http://en.wikipedia.org/wiki/Responsive_Web_Design
Note: if you use the zoom functionality in your browser, a fixed layout squashes the text, whereas a fluid layout allows it to take up the whole screen.
Maybe this is just a browser problem, but it's definately an argument in favor of fluid
Paragraph widths larger than your display make a web site completely unusable. You have to jiggle the horizontal scrollbar back and forth for every single line you read. I'm doing a web design subject at university and the textbook calls the designs which adapt to your screen width fluid layout.
I'm designing my big class project using fluid layout, it's a bit more trouble than fixed width. I suspect none of the other students will use it, the markers won't notice and none of the professional sites we're imitating are fluid either.
I'd say fluid all the way. The user can always go back to a smaller size window if he doesn't like the result of enlarging it, but he can't do anything about a fixed layout.
If you really, really hate the idea of your site looking ugly because of something a user with a large screen does, then for the sake of all that is true and beautiful, at least never use pixel-based fixed layouts! CSS has these neat text-relative size units like "em" that allow parts of your page to scale with the font size while others (like images) stay in their "natural" size.
Why not use them and make your page scale well without relying on the less flexible "scale everything" of FF3 that's really just a workaround for sites that use a dumb pixel-based fixed layout?
A lot of people are saying things like "this is a matter of taste" or "I don't like big fonts on my high-pixel display." Number of pixels has nothing to do with it, and it's not a matter of taste. It's a matter of DPI, which is directly related to display resolution and font size. If your layout scales along with the DPI of the fonts (by being specified in ems for instance, and using SVG), then you end up with very beautiful, very crisp websites that work optimally with any display.
http://www.boutell.com/newfaq/creating/anyresolution.html
There's probably a compromise design between fixed and fluid designs. You can design a site fluid-like but set the css property max-width to 1024 (or whatever). This means you get a fluid layout when the window width is less then 1024 and fixed width when it is greater.
Then narrow screen users (like my 800 pixel eee 701) don't have to twiddle the horizontal scrollbar to read every single line and wide screen users (who don't know how to resize their browser window) don't get 500 character wide, 1 character high paragraphs.