Hot answers tagged

29

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 ...


18

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 ...


11

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 ...


10

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 normalized 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 ...


10

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 ...


10

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. ...


8

"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

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 ...


8

Mobile first is best practice -- it's not law, and if you understand why you should be using it, and why you don't want to use it on a particular project, that's fine. It's worth noting that mobile first affects the design/UX and the build itself, and as this is a graphic design forum, I'm a bit perplexed as to why you think a mobile first design will ...


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 ...


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

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 ...


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 ...


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 ...


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

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 ...


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; ...


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

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. ...


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

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 ...


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 ...


5

What about something like this ▧? I can't seem to make it larger so here's a pic Unicode number: U+2668 / HTML-code: &#9639;


4

You don't need Javascript for this, only html and css. You can do something like this: (see code live here) A basic html structure: <div id="container"> <div id="main"> Main </div> <div class="column"> Column1 </div> <div class="column"> Column2 </div> </div> ...


4

The biggest advantage is that you can experiment with the resizing yourself instead of just speculating what things would look like. I have a very "content first" approach of development where I actually code the navigation and add the text content. It tends to expose you to things that you did not anticipate when you were in design phase. By using a ...


4

Adding to what has been said in the great previous answers, another advantage to these templates would be cross-device consistency. The built-in grids make it very easy to design for any OS. I still prefer to write my own code, for the following reasons: Familiarity with what I've already written. If I need to change anything, I know exactly where it is; ...


4

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 ...


4

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 ...


4

To give you a candid answer, the answer is "terrible HTML". As Scott said, Photoshop will produce a table based layout. The same goes for GIMP. Here is a sample output for GIMP: <table cellpadding="0" border="0" cellspacing="0"> <tr> <td><img alt="" src="slice_0_0.png"/></td> <td><img alt="" ...



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