Hot answers tagged

39

Fillerati Fillerama Gangsta Lorem Ipsum F*ck Lorem Ipsum Bacon Ipsum HTML Ipsum Loripsum.net LittleIpsum for OS X Professional Lorem Ipsum Generator Veggie Ipsum Hipster Ipsum Journo Ipsum Tuna Ipsum Samuel L Ipsum Charlie Sheen Lorem Ipsum The Web 2.0 Lorem Ipsum Generator Beer Ipsum Lorempixum Malevole GAG Ipsum Space Ipsum Cupcake Ipsum Zombie Ipsum Bogan ...


25

From a purely design standpoint, starting with the mobile version first does make sense. The hardest part of the design process is always pruning, never adding. So the smaller the screen real estate you allow yourself, the more you'll have to think about what is important in your design, what information you really need to show. Also, you'll force yourself ...


14

Screen Size Higher screen resolutions ultimately make everything look smaller. A very small percentage of Internet users are still using older resolutions like the once popular 800×600. Sites using a 720px width appear very small on high resolution screens, and don’t leave room for a sidebar. Now most websites are staying somewhere around 960px wide. Some ...


13

I would not continue trying to learn how to slice up a PSD for HTML. This practice is outdated and you're only going to be hurting yourself down the road. In regards to "current standards" people usually code in an IDE. One thing you have to understand with slicing is if you have a responsive website you're going to spend a ton of time trying to cut a ...


12

Mobile first is best practice -- it's not law, and if you understand why you "should" be using it, you can make an informed decision as to why you don't want to use it on a particular project, and that's fine. It's worth noting that "mobile first" relates to the design/UX and the build itself. Mobile first design won't speed up your site for users, but ...


11

The advantages tend to be primarily: Rapid Prototyping (ie, speed) Built-in Cross browser consistency If you need to create a grid, and the grid you need to create fits the pre-built CSS framework, then the logic is that you're halfway there by using the framework. All that said, I tend to agree with you. CSS frameworks, IMHO, are like visual design ...


11

I'm familiar with HTML5 Boilerplate, but I'm more familiar with Bootstrap, so I'll talk about that. Remember that both are geared towards two different tasks, (H5BP is a responsive normalised template, Bootstrap is a collection of HTML/CSS/JS widgets and a responsive grid.) In fact they can be used together. However, I can't help but wonder if Bootstrap ...


11

This might not be quite the answer you're looking for, but I find it better than handing mediocre, auto-generated styles to the engineers. Selective markup I'm sure you've discovered Sketch's context menu CSS grabber. You can select as many objects as you like and you'll get the CSS on your clipboard faster than you can paste it. There's no selectors of ...


9

"e-flier" is a bit of a nonsense term. It means nothing since electronic delivery can be done in so many various ways. If the client wants a file he can email to perspective people when requested, then a PDF is appropriate. You can embed video, audio, and other interactive elements in a PDF. How you generate the PDF really depends upon what software you ...


8

The appropriate alternative to Lorem Ipsum is a sample text in the language in which the site will be published, using texts that are typical of the intended content, in literary style at least. The reason is that with dummy texts, you will not see how real texts will behave. Lorem Ipsum texts tend to be pig Latin, nonsense English or something like that. ...


8

If I were you I'd abandon the Idea. Hires handling is the least of your problems, because there is simply no support within E-Mails. But the problems start earlier. Most email clients strip out images and add a button where the user can activate the images. All this fuss for just a logo is just too much of a hassle. I would just write the sig with ...


8

You have two main options as workflow (although as DA01 pointed out, these are just a few of many possible ones): Create the mockups in Photoshop or similar software, and then manually re-create them in HTML/CSS; Create the design directly in HTML/CSS. In option 1, you would basically use the photoshop file as a reference, mostly to calculate distances and ...


7

The nice thing about templating systems and frameworks is that they can save you a lot of time iff you work the way they want you to. So, with Bootstrap, once you learn their semantics for doing a JS carousel, it's almost criminally simple to implement. Also, Bootstrap seems to get a lot simpler if you either roll your own before you get started or use ...


7

Short answer: One pixel can contain one color (and one value for opacity, but that's not relevant here). The different letters/number you see in your color code are the values that constitute it. HTML colors are defined using a hexadecimal notation (HEX), those are the letters/numbers you see, and they are the combination of Red, Green, and Blue color ...


6

Out of interest, do any of you work in a large team for a large company? Frameworks such as bootstrap are fantastic for creating a consistent standard of code throughout a project, it also means that when recruiting for new developers, those with experience of a popular framework will already be familiar with the syntax and can become productive much ...


6

I've been researching frameworks a lot the last month or so. I haven't actually dived into any of the solutions, but a couple of framework alternatives that are on my shortlist are Foundation, Intuit and YAML and Base. The good thing about these is that they don't have the 'Bootstrap' look, and seem to encourage designers to to their job (design), whilst ...


6

The real question is not "which document size?" but "which document width?". I would recommend to design at 1440px X 900px, this way you're in the average of browser sizes (put some guides at 1000px for smaller browsers and ipad). Don't stop your design at 1000px, stop your content at 1000px. Usually I start at this size then I increase my height ...


6

I want to make sure my design will look on the web exactly as it does in Photoshop or InDesign You can't. The reason is that there is no one 'exact' way your site will work on the web to begin with. Every browser, every operating system, every end-user preferences, every screen, every hardware will bring to the table some variance. This is why so many ...


6

Responsive design is based on neither screen resolution nor screen size. Instead, responsive design is based on the content and how it's made which allows it to fit all sizes and resolutions. The way you're thinking about responsive design is wrong. I assume you're coming from a more conventional print design background, yes? Designing for the web is much ...


6

Use the actual character. The disadvantage to using entities is readability. Pop quiz: what does the following output? †‹ some text › Without looking it up, I would have had no idea. Even if you did, you should consider that others reading your markup might not. For the most part, there's no reason you shouldn't just use ...


6

Let's say we've loaded a Bold font variant like so: @font-face { font-family: 'Raleway Bold'; font-style: normal; font-weight: 700; src: url(path/to/font/raleway-bold.woff2) format('woff2'); } I would argue in favour of using both font-family and font-weight in your style specification. For example: h1 { font-weight: 700; font-family: 'Raleway ...


6

One solution: In Illustrator, select your circle and choose Object > Compound Path > Make. Here is a quick test using an Illustrator circle shape, duplicated, the first with no modifications and the second with compound path applied: <circle class="cls-1" cx="466.5" cy="184.5" r="117.5"/> <path class="cls-1" d="M320,190.5A121.5,121.5,0,1,1,198.5,...


5

The effect you're talking about is called Vertical Alignment, in this case bottom vertical alignment. In design applications like InDesign (but not Illustrator without hacking, moan whinge moan...) there's a simple button for it. In HTML / CSS, vertical alignment isn't so simple. Vertical alignment for a table cell is easy, vertical-align: bottom; starts ...


5

The term you for making text smaller and floating upwards is called superscript. HTML You can use the <sup> HTML tag to superscript text. My text<sup>®</sup> My text® Here is a live example from w3schools. CSS Alternatively it can be done with CSS with something like this: .superscript { vertical-align:super; font-size:0.8em; }...


5

Jetstrap is an online tool that lets you drag-and-drop a large set of official Bootstrap components right to your page. They apparently guarantee responsiveness and clean HTML export. It's free for one project, and $8 for 10 projects.


5

If you check out Project Gutenberg, you'll find heaps of public domain text that can be used as filler. I remember a tutorial book I have for...DHTML and CSS I believe it was, where they used text and illustrations from Alice in Wonderland. While it was clearly placeholder text, it was much more interesting to follow than just gibberish Latin. Real world ...


5

The term is 'fluid width' site--which is a layout that stretched to accommodate the browsers. Layouts that also re-arrange elements based on screen size (in addition to fluid stretching) is called a 'responsive layout' site. Reasons why you may not want a site to stretch the full width: it can be a bit more challenging to design around than a fixed-width ...


5

I'll take a shot. There's nothing unique about the colors you displayed-- they are similar in that they all fall in a small range of both saturation and brightness, but there isn't similar tone or hue to them and they're not under any specific color harmony. (that I'm aware of at least) As a thought experiment I'm going to take the same colors you provided ...


5

By convention, most styling should be placed in the <body> element. But there is one important reason to apply styles to the <html> element itself: when you are setting the default font styles, in particular font-size. This is because the <html> tag is the root element, thus rem (root em unit) sizing is based on whatever is set for the <...


5

I think you’re misunderstanding what PSD means. PSD files are Photoshop files. They can be opened in Photoshop, and not much else. You cannot integrate them directly into web pages, since browsers cannot open them. Normally, you would use Photoshop to create/edit images that you then export as JPG/PNG files that browsers know what to do with. These images ...


Only top voted, non community-wiki answers of a minimum length are eligible