Tag Info

Hot answers tagged

15

Responsive design (also known as 'adaptive' design), where the same web page presents the best version of two or more hand-crafted layouts depending on the browser width, is the strongest option for most websites. To see why, it helps to look at all of the options available to web designers: Fixed layouts A fixed page width, where the content width is the ...


5

Preloading images used in other pages can be done without interrupting current page loading. You can load the extra images after all the assets from the current page have finish loading. Use the window.onload JavaScript event (or the $(window).load event if you use jQuery) to start loading the images needed to render the next page.


5

Updated based on the comment provided by @Lèsemajesté This happens because FF and IE9 have chosen to implement an anti-cross-domain DRM mechanism for web fonts. I fixed it by using the following code in my htaccess file to pin the site to a single domain no matter which version of a url it's accessed from (this also seemed useful from an SEO point of ...


4

Specifying image dimensions in HTML and/or CSS has always been recommended since the days of HTML 2.0, and eliminates the need for page reflows due to delayed image loading. That takes care of static images. The other case is images that won't show up until after the page has loaded. For simple things like rollover effects, you should be using background ...


3

No, using display: table, display: table-row, and display: table-cell would not be as bad as using <table> tags. The reason for that is that HTML is a semantic language, meaning that the tags used should describe the content that is within. In this case, CSS can be used to describe to the browser how the data should be presented, and since the ...


3

It probably comes from the days when almost everyone was on dial-up and even text pages loaded slowly. Instead of implementing paging what you could do is if there a really large number of follow ups display just the first one a have a link to a page with all of them, e.g. view all 1280 responses


2

If you have a really popular posting with 2,000 followup comments, then the page will load slowly, and be unresponsive in many browsers, unless you break it up into pages. Remember to always test your website with a machine that's six or seven years old, since some of your users will have machines of similar vintage.


2

I'd use two stylesheets. One thats flexible to fit the majority of regular desktop PC users. Another for mobile.


2

I don't think there really is a name for this kind of layout, the broad style is web 2.0. If you're looking for a template take a look at themeforest they have many similar designs available for purchase.


2

As a rule, what makes sense for semantic markup and accessibility usually also makes sense for SEO, and you should certainly not damage usability or code quality for the sake of any SEO that Google have not recommended to webmasters. On-site SEO should be about helping Google index your site thoroughly and accurately, and not trying to find loopholes in ...


2

A fluid layout is the easiest to create and maintain. You then can also use a mobile stylesheet to "fix" any issues that may arise in very small devices.


1

I don't see where it says that product is licensed under the GPL or that it is offered for free under any circumstances. In fact their FAQ days: DO I NEED TO BUY GENESIS? Yes. So if you use it for free you are almost certainly acquiring it through illegal means. So no, it is not safe to use for free.


1

Google knows what is what before your visitors do Google's crawlers have really advanced since there first launch, their crawlers has the ability to detect actual content area, the width of that content as well as the height of the actual content region. Repeated Content Elements such as headers, footers and sidebars that get repeated on several or all ...


1

Physical size of the page (anything >=500kb is going to appear to load slowly for most users) It is claimed search bots don't like anything over ~200-300kb ('don't like' could mean different things for each bot, ranging from non indexing to indexing last). Large DOM will be very unresponsive/slow on less powerful computers.


1

I think it's a bug in Chrome. See https://code.google.com/p/chromium/issues/detail?id=246875 There might be some workarounds in there for you. Also double check your markup is valid.


1

Think about it this way: no matter what your screen size or device, your content is the same plus minus a few items that are may not be relevant on certain device types. This is analogous to having content on a screen and printing out that content. You can use separate style sheets for screen and print media. You don't make a separate website just for print ...


1

Go for frontend Use a responsive framework, like twitter bootstrap or similars, create only 1 website for all. Then use media queries to switch css rules where you need if for mobile or not. And defintly switch all you want to show or not in mobile and desktop by server side. For example a huge banner on mobile is useless, switch that using html modules ...


1

Summary: Go with responsive web design (what you call frontend). When you go with the "backend" version, you have the following disadvantages: You have to create two websites: one for desktop and one for mobile. Or you have to create a smart custom solution that outputs the same content to the two different websites automatically. Not easy. You have to ...


1

Depends on what you mean by "complete" and "layouts", but Initializr springs to mind.


1

Twitter Bootstrap uses a responsive grid layout that should have a max width for content, so it should limit the main content sections to a certain width by default. However, the growing popularity of XD (eXtreme Definition) displays that are 2560px wide or more (e.g. WQUXGA like the IBM T221 family of displays or even 4000px+ wide monitors) means that most ...


1

Well, put it this way: You face many different browsers on Pcs, mobile devices, tablets, OS, so naturally, as much as you try to have a seamless look, differences will happen. If you set your main div width for example, to a percentage (50%, 70%, 100% etc.), it'll definitely look different always. With different systems and monitor resolutions, you're bound ...


1

I have written a short javascript code that could help you: alert( 100 / document.body.offsetWidth * document.getElementById("<YOUR_ELEMENT_ID").offsetWidth ); You have to insert in the line above the ID of the elements that you want to know the percentual width related to the window width. You can insert this line of code in firefox url bar (preceded ...


1

I would use a calculator. 100 / screenWidth * elementWidth But what should that be good for? The designer should set up the percentages once for the layout. Screen sizes are different, thus also the computed percentages would differ, depending on what screen size you are using such a ruler. 100 / 1600 * 900 = 56.25% 100 / 1024 * 900 = 87.89%


1

Content before navigation (in the HTML, not necessarily in terms of the layout on the page) is more useful for accessibility than SEO. I would do it for those reasons. Those using screen readers will get the content quicker than if they have to hear every item in every drop down menu on your navigation.


1

The best test is to make a website. I didn't see a url in your profile so start creating a website for yourself. Start with a design you created in a graphics application. Code the HTML, add the CSS (bonus points if you use responsive design), add some javascript to make it a bit interactive. If you also know a server-side language then add features so you ...


1

You might mean JavaScript library (or framework), there are several. As far as I know, these are the more popular ones: Yahoo's YUI Sencha's ExtJS Dojo Toolkit And probably dozens other ones, google for "JavaScript framework". Or check this Wikipedia article or this stackoverflow question.


1

.offsetParent Like all really useful stuff not part of any specs, but seems supported by all browsers. Only checked on FF3.5,3.6,5,6, IE8 and Chrome13 though. For visual aid you then just have to find the property in the DOM inspector of your browser and use its element highlighting feature the usual way.


1

The current recommended best approach is to use what's been coined "responsive web design" where you need to satisfy various devices and screen size/resolutions with a single approach. A great article outlining the hows, whats and whys of responsive web design can be found at ...



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