Typekit and responsive design

Hi
I am creating a website with a responsive design in dreamweaver for a BC website,
But How can I make the typekit font work, I added je JQ stuff in the heading but with teh CSS it disn't work. Where do I need to put it, in which css file?
Regards
Ferry

Hi Koushik,
For the Photoshop problem, are you exporting from Photohop to an RFLW file or are you importing an open PSD in Reflow? Have you tried both methods and do they both have the same problem or does one always work and the other is flaky? Given that it has worked a few times it sounds like everything is at least installed correctly.
Problem 2, Typekit not working on localhost. Did you add "localhost" to you kit settings and then publish those changes? Also does the url in the preview start with http://localhost:8008/" ? The url in the preview needs to match the url in your browser. You can follow all the listed on this blog post: http://blogs.adobe.com/edgereflow/2014/01/31/using-typekit-fonts-with-reflow/
Problem 3 is related to Problem 2. The issue is when you're device connects to to your computer as the websever, typekit does't see you computer as an authored user of your fonts. The devices ins't connecting to "localhost" but using whatever the ip address of you computer is on teh network. If you want to preview the fonts you either need to add your computers IP address to your kit settings or put the preview up on a server that your kit allows.
When you are done please post your experience using the Photoshop import on your project. You can either start a new post or reply to a post we are running about people using Photoshop, http://forums.adobe.com/thread/1392173?tstart=0. We're looking into improving the import experience so your feedback here is really appreciated.
Hope that helps, thanks for using Reflow!
Chris

Similar Messages

Animated banners and responsive design

I have noticed many responsive design techniques eliminate the old standby the animated banner. Either you can divide the static elements of the banner so that they stack up as the viewport narrows. Or you could animated one segment of the banner and let that stack up too. Or you could conceivably add 2 or 3 animated banners synchronized and let them all stack up just like the static elements, though this would likely result in slow load times.
Is there another method to incorporating the animated banner in the responsive design (i.e. smartphone size)? Or is it best just to leave it out on screens less than say, 400px?
It seems that not including the animation at all would disappoint people who are expecting it...

Use a responsive rotating banner plugin like jQuery Cycle2.
Then add a custom HIDE THIS button for people who want to turn it off.
Working example: http://alt-web.com/FluidGrid/Fluid2.html
Similarly, you can create custom animations with Edge Animate. To make it responsive, use a Fluid stage.
Nancy O.

Need Recommendation on converting existing site to responsive design in ATG 10.1.2

Hi,
We have a site developed for a client which is build using CRS 9.0. We need to convert the website to responsive design using bootstrap framework version 3.4. The HTML prototypes have been design by UI designer using bootstrap. Does anyone have experience in doing similar work and can suggest guidelines/recommendations to make this migration easier/faster?
Thanks

Hi,
Have you had a look at
https://support.oracle.com/rs?type=doc&id=1563355.1
Oracle Commerce and Responsive Design White Paper (Doc ID 1563355.1)
++++
Thanks
Gareth
Please mark any update as "Correct Answer" or "Helpful Answer" if that update helps/answers your question, so that others can identify the Correct/helpful update between many updates.

Responsive design mode is showing part of pages and is not showing any optomized pages even in safe mode.

I need to check multiple websites everyday for responsive design. When I open Responsive design mode I am getting full pages on every site, even ones I know are mobile opt. No matter how I scale it everything remains exactly as it is. I have to scale it to the far right to get the whole page. Basically the pages are always in full screen and I'm getting a window that only allows me to see part of a page. It is very frustrating.
Win xp
firefox V28.0
I am not a coder so please keep solutions simple.

From your screenshot, it seems to be working, as that grey bar has appeared at the top (with a link to the mobile version of the site). This only appears when the viewport width is 800px or less. This support website doesn't shrink dynamically (as the viewport gets smaller), but remembers whether your machine has a small screen or not (probably by storing a cookie which is changed when you click the link in the grey bar).
If you are having trouble with other sites, have you tried refreshing the page after resizing? When I have created responsive websites I often have to use JavaScript for a few features, and it simply isn't worth the processing power to make the code run every time the window size changes. Other than that I can't see what would be causing the problem (unless there is other important information you may have missed out)

Why can I export (and import)the different sizes that I put in the "Responsive Design View"?

Hello
I have troubles when try to import or export the different sizes of the Responsive Design View, I manage at least 13, and it's a little preposterous to add one by one. There are a method that export/import them?
Thanks

There is a way to store custom settings for responsive design.
You can create custom settings in the responsive design mode window.
You can hold down the Shift key and drag the borders via the (right border, bottom border, bottom right corner) resize icons to get specific dimensions and give the current custom setting a name to add them as a preset.
This will add the preset to the <b>devtools.responsiveUI.presets</b> pref that you can inspect on the <b>about:config</b> page.
Those settings are stored in JSON format.
<pre><nowiki>[{"key":"360x640","width":360,"height":640},{"key":"768x1024","width":768,"height":1024},{"key":"800x600","name":"8x6","width":800,"height":600},{"key":"800x1280","width":800,"height":1280},{"key":"980x1280","width":980,"height":1280},{"key":"1280x600","width":1280,"height":600},{"key":"1920x900","width":1920,"height":900}]</nowiki></pre>
See this thread for some JavaScript code to add extra sizes:
*[[/questions/957590]]
You can paste the existing JSON value of the devtools.responsiveUI.presets pref in the prompt and click OK.
Extra values can be added by typing its dimensions (<width>x<height> <name>).
You can paste the resulting JSON value back to the devtools.responsiveUI.presets pref or save it.

DW CC Responsive Design and BC tags

Hi All,
I am going through the recent Adobe tutorials on Responsive design using DW CC and I have a couple of questions.
Has anyone tried setting up a DW CC responsive design for a BC site yet, using the new functionality in DW CC?
Is it OK to insert BC module tags into a design, ie a tag for a menu, and will they work? Or will the BC module javascript clash with the responsive javascript?
Also, the tutorials talk about coding up webpages to be responsive, where I will be wanting to code up a template as being responsive, with the BC tag_pagecontent tag inserted where the content is going to be.
Also with the tutorials so far I am having problems doing the following:
- inserting two divs inside another div with a large background image and positioning these two divs over this background div.
Anyway, I am continuing to work away at rendering my design into a responsive layout, following the recent Adobe videos.
If anyone else had/is doing the same please let me know how you went.
PS. I am only interested in replies about using DW CC to create a responsive design, as I am not able to hand code that kind of thing from scratch in Notepad. lol!

Mary,
Have you had a look at using a framework. Responsive frameworks include:
Twitter Bootstrap - http://twitter.github.io/bootstrap/
Skeleton - http://www.getskeleton.com/
Foundation - http://foundation.zurb.com/
We had a discussion on Sandpile yesterday about using Frameworks. Recording here: http://experts.adobeconnect.com/p6hmzy2oipt/
Also, Scott did a presentaion on Responsive design : http://experts.adobeconnect.com/p4ryiohpfjs/
Hope this helps.

Insert images and text in header for responsive design cc

I am having a issue with inserting a logo, company name and Facebook graphic into my header.
I started setup of a responsive design and added a responsive header along with other areas below.
I want the Logo to stay on the left, the company name to the right of the logo and the Facebook graphic on the right side of the header.
I keep making a mess and can't get anything to line up correctly.
I am using Adobe Dreamweaver CC and trying to control with CSS.
I am just starting to learn the new CSS Designer in CC. I liked the old CSS console better.

Basically, you need to float all 3 elements left and give them a width of 33.33% (3-across).
header #logo,
header h1,
header #fb {
     float:left;
     width: 33.33%;
HTML:
<div class="gridContainer fluid">
     <header>
          <div id="logo">Your logo here</div>
          <h1>Your Site Name</h1>
          <div id="fb">Facebook here</div>
     </header>
Nancy O.

Responsive Design - changes in mobile appear in tablet and primary

Windows 7, Captivate 8, Responsive Design - why are changes I'm making in mobile showing up in tablet and primary?

I had several images on the screen at the same time. In the tablet, I had
them come up one at a time. The change went all the way back to Primary.
On Thu, Nov 13, 2014 at 3:29 AM, windscorpion <[email protected]>

How do I get sync to work again with Typekit and Creative Cloud?

I have been using my CC apps with Typekit and it was syncing fine. Now for that last few days I am getting a sync error message. More info is useless—blames lack of an internet connection which is not accurate. I've turned sync off and on, remove and readied the fonts from type kit. Closed out and logged back in to CC app. Nothing is working. I have two DSL lines both of which are working and have tried it connected to each in turn. Still cannot sync.
I am now online with Adobe phone support after a 2-hr wait for the call back. Just told my story again. On hold. Now they tell me Adobe can't do anything other than read the same troubleshooting docs that Typekit has on their site (which I've already done). This alliance only works if Adobe and Typekit work together. I've already emailed twice and tweeted to Typekit and gotten ZERO response. I was pretty emphatic with the guy in Adobe tech support and he said he would escalate it to the India "Dream Team." Hopefully they will be more dream than nightmare.

Hello,
I'm sorry that you ran into trouble with this. Typekit Support did not recieve your email, and didn't realize you were waiting for a reply. I do apologize for that.
Would you please send your recent log files to [email protected] so that we can take a look? I've included the instructions below. It sounds like there may be a problem with your computer reaching the Creative Cloud servers, and the logs will have more information.
Please let me know when you have sent that email, so that we can watch for it. Thank you,
-- liz
On OS X:
* Open the Finder
* under the Go menu, select "Go To Folder"
* in the window that opens, type: /Users/(username)/Library/Application Support/Adobe/CoreSync/
Or if you are comfortable working from the Terminal:
cd $HOME/Library/Application Support/Adobe/CoreSync/
On Windows:
C:\Users\(username)\AppData\Roaming\Adobe\CoreSync\
Attach the recent CoreSync-yyyy-MM-dd.log files to an email. Please don't send a zip file, as they often get flagged as spam.

IIR Filtering and response .vi: Butterworth filter magnitude response depends on sampling rate -why?

Hi folks,
I am not expert in filter design, only someone applying them, so please can someone help me with an explanation?
I need to filter very low-frequent signals using a buttherwoth filter 2. or 3. order as bandpass 0.1 to 10 Hz .
Very relevant amplitudes are BELOW 1 Hz, often below 0.5 Hz but there will be as well relevant amplitudes above 5 Hz to be observed.
This is fixed and prescribed for the application.
However, the sampling rate of the measurement system is not prescribed. It may be between say between 30 and 2000 Hz. This will depend on whether the same data set is used for analysing higher frequencies up to 1000 Hz of the same measurement or this is not done by the user and he chooses a lower sampling rate to reduce the file sizes, especially when measuring for longer periods of several weeks.
To compare the 2nd and 3rd order's magnitude response of the filter I used the example IIR Filtering and response .vi:
I was very astonished when I the found that the magnitude response is significantly influenced by the SAMPLING RATE I tell the signal generator in this example vi.
Can you please tell me why - and especially why the 3rd order filter will be worse for the low frequency parts below 1 Hz of the signal. I was told by people experienced with filters that the 3rd oder will distort less the amplitudes which is not at all true for my relevant frequencies below 1 Hz.
In the attached png you see 4 screenshots for 2 or 3 order and sampling rate 300 or 1000 Hz to show you the varying magnitude responses without opening labview.
THANK YOU for your ANSWERS!!!
chris
Solved!
Go to Solution.
Attachments:
butterworth-filter-differences.png ‏285 KB

Hello Lynn,
thanks for the answer. You are right that there are few points "behind" the curve in the graph, see png.
However, this is the filter response which Labview (2009) provides to me directly out of the "IIR Filter for 1 Channel. vi" in the "filter information" output cluster. Where up to now I do not know how to influence it - apart from adjusting the input parameters "IIR filter specifications". OK, I assume I have to gain more knowledge of this. The curve of the magnitude resonse dies not change when I change the number of samples of the input signal of the signal generator, only wehn I change the sampling rate.
I used directly the example vi from Labview with the name indicated in my first post "IIR Filtering and Response.vi".
So I assumed that everybody has it in his/her examples shipped with LV and it is not necessary to post it.
I just adjusted the size of the diagram of magnitude response to see the curves better as you see in the attached vi.
So I did no changes to the vital parts of signal generation and filter of the example. The screenshots are like they come from the example when using the option "one waveform" where I as user assume that this which is behind is quality-controlled by NI.
I was also astonished that the filter magnitude response is different to the one I copied out of graphs 1 year ago - but I unfortunately cannot reconstruct which example I used there...
Thanks for any further comments
chris
Attachments:
IIR Filtering and Response_CH.vi ‏55 KB
butterworth2nd_order_bandpass_0p1to10Hz_mag_response.PNG ‏18 KB

How to add multiple presets to responsive design view without having to resize the screen each time

I want to be able to add multiple screen size presets to the responsive design view capability but don't want to have to resize the screen and add each one individually via the custom preset function.
Have seen that some posts on the internet (http://g-liu.com/blog/2013/08/firefox-rdm-presets/) that say this can be done but cannot find where the config is held in ver 26.0?

You can also do the opposite and create custom settings in the responsive design mode window.
You can hold down the Shift key and drag the borders via the (right border, bottom border, bottom right corner) resize icons to get specific dimensions and give the current custom setting a name to add them as a preset.
This will add the preset to the devtools.responsiveUI.presets pref.
See also my post here for a bookmarklet.
*[[/questions/957590]]
You can paste the current value of the pref in the prompt to see a list of currently defined presets.<br />
You can add a new preset by entering the width,height,name values in the prompt.<br />
Copy the new preset list to the pref.
<pre><nowiki>javascript:(function(){
function rdObj(w,h,n){with(this){key=w+"x"+h;if(n)name=n;width=w;height=h;}}
rdObj.prototype={key:"",name:"",width:"",height:""};
var n={},p='<width>x<height> <name> OR width,height,name',rd=[];
while(p!=null){
p=prompt(p,JSON.stringify(rd));
if(/^(\d{3,4})[,x](\d{3,4})([, ](.+))?$/.test(p)){
n=new rdObj(RegExp.$1,RegExp.$2,RegExp.$4);rd.push(n);
}else{try{rd=JSON.parse(p);}catch(e){}}
}})()</nowiki></pre>

Responsive design project not working in Opera or Chrome

My Captivate project in responsive design is only previewing in Internet Explorer. I have also uploaded the projects to my server and am having the same problem. Why is this?

Hi,
Chrome 36 has some issues with captivate html5 output. Please find the following workaround to fix the issue.
http://blogs.adobe.com/captivate/2014/07/update-on-captivate-html-5-content-playback-issue -in-google-chrome-browser.html
Let me know if this fixes the issue.
devraj

Slideshows in responsive design

Making responsiv designs in Dreamweaver has become easy but if you want to make a webpage with a full page slideshow optimized for ordinary screens and high resolution screens (Retina) you must have images of a rather large size. So if you have images that fit eg. the new 30" Apple Retina display an Iphone must download the same images and downsize them to fit the phone display. What I'm concerned of is the pageload time. I know that Muse automatically downsize images in the different layouts but Muse doesn't do true responsive design. My question is then - is it possible to have the same slideshow pointing to different folders with images of more appropriate sizes?
Or is the solution that you make 2 or 3 slideshows on the same page and then in CSS hide (display: none) the slideshow that is not needed? But if an element is hidden, isn't it loaded anyway?
Or are there other solutions?
Best regards Jørgen

Never tried this myself but I guess appending the images using jQuery based on screen width might work: If screen width is more that 500px the appropriate 'desktop' img is appended to its <li></li> container, else a smaller image is appended to it.
Might be a good reason this won't work just thinking off the top of my head. (I don't know if all the images are download when the document is ready or just those that conform to the screen width.) Someone will have a view.
<!DOCTYPE HTML>
<html>
<head>
<meta ="charset=UTF-8">
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function() {
if ($(window).width() > 500) {
$(".slide_1").append("<img src='desktopImages/slideshow_1.jpg' />");
$(".slide_2").append("<img src='desktopImages/slideshow_1.jpg' />");
$(".slide_3").append("<img src='desktopImages/slideshow_1.jpg' />");
$(".slide_4").append("<img src='desktopImages/slideshow_1.jpg' />");
$(".slide_5").append("<img src='desktopImages/slideshow_1.jpg' />");
$(".slide_6").append("<img src='desktopImages/slideshow_1.jpg' />");
else {
$(".slide_1").append("<img src='mobileImages/slideshow_1.jpg' />");
$(".slide_2").append("<img src='mobileImages/slideshow_1.jpg' />");
$(".slide_3").append("<img src='mobileImages/slideshow_1.jpg' />");
$(".slide_4").append("<img src='mobileImages/slideshow_1.jpg' />");
$(".slide_5").append("<img src='mobileImages/slideshow_1.jpg' />");
$(".slide_6").append("<img src='mobileImages/slideshow_1.jpg' />");
</script>
<style>
ul {
margin: 0;
padding: 0;
li {
margin: 0;
padding: 0;
list-style: none;
</style>
</head>
<body>
<div id="slideshow">
<ul>
<li class="slide_1"></li>
<li class="slide_2"></li>
<li class="slide_3"></li>
<li class="slide_4"></li>
<li class="slide_5"></li>
<li class="slide_6"></li>
</ul>
</div>

</body>
</html>

Responsive Design

Six months ago I purchased Dreamweaver CS6 to have my site more interactive, i'm new to Web Development. I currently ran into a slight IE 7 & 8 comp ability issue with DWCS6 and CSS3.
My computer system is Windows 7 with IE9, so when testing my new site all went well, until I uploaded and learned about Internet Explorer Developer Tools, which has cross browser mode to test IE 7 & 8 versions.
Unfortunately my site shows phone view first, I’m using Dreamweaver Fluid Grid Responsive Design System, which gives 3-layouts, phone-tablet-desktop.
For the past month my reasearch is circling to no avail, I have tried many methods on the net , but none seems to be working.
I have learned that “html5shiv.googlecode.com/svn/trunk/html5.js" and "respond.min.js”
are not working properly with my site ( in IE 7 & 8).
May I humbly request your assistance with resolution to these issues?
www.angelsbyangels.com
Thank You,
mlfa

It's really a waste of time to make a site responsive for old browsers.
The hacks required are not simple and tend to add to an already bloated
approach by Adobe. Concentrate on modern browsers and, of course, mobile
devices.
Unfortunately, there is little consensus on best practices for
responsive design - primarily because the methods are evolving
constantly. It is very easy to happen upon an out of date article, which
is probably how Adobe developed their Fluid Grid monstrosity
But if you have a problem with a particular page, you really need to
post a link to a live page or it will be nearly impossible for anyone to
help you.
Al Sparber - PVII
http://www.projectseven.com
The Finest Dreamweaver Tools
Since 1998

Chain of Responsibility Design Pattern

Is there any java api which helps in implementing Chain of Responsibility Design pattern by parsing a XML file?. Can I use XML file to do this in Apache Commons Chain API?

A quick look at the javadocs for that project suggest that, yes, indeed they do provide a way to specify a chain of command using XML.
In fact I'm kind of confused why you even asked this question, since you already seem to know the answer.
I've never heard of such a thing in the standard API, if that's what you're asking, probably because it's a simple pattern to implement, and most of the pain of any implementation is likely to be due to details specific to the problem domain, not the pattern.
If you're really eager to use XML, you might want to check out Spring. You could configure a bunch of beans in a chain, if you like.

Typekit and responsive design

Similar Messages

Maybe you are looking for